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://s3.amazonaws.com//depot.pacdudegames.com/spacehey/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 3435 comments ( View all | Add Comment )

Lonkl	1737595480 Sick layout! Report Comment
Bug!!XD	1737593700 Using!! Report Comment
Birb	1737589414 using! Report Comment
du	1737575844 usinggg:)) Report Comment
noctrnl333	1737559230 using:3 Report Comment
𖤐٭Call-Me-Scythe!٭𖤐	1737538319 Def using!!! :> Report Comment
eli	1737531732 using! thank uu! Report Comment
𝔩𝔦𝔩𝔶	1737523156 using!! Report Comment
mjjjjjj	1737499080 usingghdubeskl Report Comment
Jule	1737494856 SO COOL DEFFO USING THIS!! Report Comment
Archie!!!	1737490625 using! Report Comment
Thea!!	1737484880 gonna use this !! :3 Report Comment
petya/петя	1737482808 gonna use it tysm Report Comment
annuzz☆꧂	1737470705 iust Report Comment
blake	1737443887 boutta use it Report Comment
kenny	1737420774 gonna use it Report Comment
🦇	1737394315 using! Report Comment
vienna 🩵	1737383038 using :3 !!!!! Report Comment
// K4I !!1!1 :3	1737361106 Using ^_^ Report Comment
Sheila	1737345188 using!! XP Report Comment