Old-School Computer With Bezel

Tags: computer, css, monochrome, cool, pacdude, cory

Description:

If you use this theme, please leave a comment and/or friend me! I love to meet like-minded friends :D

Dear Strong Bad: How do you type with boxing gloves on your hands? This old-school looking ASCII-inspired theme hearkens back to old DOS computers. With a simulated CRT blur, monochrome color scheme and graphics, and a Terminal font, let everyone know you're definitely plugged into the Matrix. This version of the theme has an overlaid bezel which looks best on desktop but functions on mobile as well.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Cory (https://layouts.spacehey.com/layout?id=133) -->

<style>
/* Old School Computer by Cory Anotado - PacdudeGames.com */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
html::before{
	content: " ";
	width:100vw;
	height:100vh;
	display:block;
	position:fixed;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image:url(https://i.imgur.com/jonBE7c.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	z-index:100000;
	pointer-events:none;
}
body{
    animation: textShadow 1.6s infinite;
    font-size:24px;
    filter: grayscale(100%) sepia(100%) hue-rotate(75deg);
	background-color:#222222;
}
.container{
	margin-top:50px!important;
	margin-bottom:50px!important;
}
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active{
	color:#FFFFFF;
	background-color:#CCCCCC!important;
	text-decoration:none!important;
}
nav .top, nav .links, main, footer{
	background:none;
}
.left, .right{
	  font-family: 'VT323', monospace!important;
	  color:#FFF!important;
}
nav .top, button, label, .links a, footer p{
	  font-family: 'VT323', monospace!important;
	  font-size:1rem!important;
	  color:#FFF!important;
}
.profile h1{
	  font-family: 'VT323', monospace!important;
	  color:#FFF!important;
	  font-size:2rem;
}
.links a, .left a, .right a{
	color:#FFF!important;
	background-color:#999;
}
.search-wrapper input{
	background-color: #222222;
	border: 1px solid #FFF;
	font-size: 1rem;
	font-family: 'VT323', monospace;
	color: #FFF;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
	content: "";
}
.details-table td:first-child{
	color: #DDD;
	background: none;
}
.details-table td, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td{
	background: none;
}
.profile .blurbs .heading, .profile .friends .heading{
	color: #FFF;
	font-size: 1.3rem;
}
button{
	background: none;
	border: none;
}
@media screen and (orientation:landscape) and (max-width:800px){
	.container{
		max-width:80%;
	}
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 1641 comments ( View all | Add Comment )

DJ	1696411642 testing out, may use Report Comment
RUI / REY ✦	1696388961 using!! Report Comment
grendel	1696291607 using! Report Comment
> DAY !!!	1696257950 using!! Report Comment
Mister C Feature	1696222686 using/testing out! Report Comment
⭐︎ Tilly ⭐︎	1696213676 Using :) Report Comment
✮ stellarae ✮	1696196608 thx!! Report Comment
Ghost✦	1696179542 So cool!! Trying this out for sure :) Report Comment
Nikole	1696171690 Using! Report Comment
Emily	1696109524 Hii Report Comment
atlas / clyde / kenny	1696102660 using !!! Report Comment
zyrie	1696030523 using!! :3 Report Comment
★.1NTRUD3R.★	1695972000 im using this!! ^_^ Report Comment
Eoderi	1695963040 Using!! Report Comment
Retro \| Idia's personal cat	1695959615 NIICEEE!! btw, is it possible to change the color of the greenish hues? Report Comment
DAVID †	1695922801 thank you!! Report Comment
D	1695789524 this is so sick (using <3) Report Comment
sai / seraph	1695749308 Tysm!!! Report Comment
kat!	1695748798 thank uu using Report Comment
Richard B.Watterson	1695658185 using UwU Report Comment