Report Blog Entry
Original version: https://layouts.spacehey.com/layout?id=130
I changed the colors and removed some effects.
I'm finding out how to change the width of the profile for the desktop version of the site without affecting the mobile version of the website.
Will update it further along the way.
<!-- (c) Layout created by Cory (https://layouts.spacehey.com/layout?id=130) -->
<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;
}
}
html::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;
}
html::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 {
animation: textShadow 1.6s infinite;
font-size:24px;
/* filter: grayscale(100%) sepia(100%) hue-rotate(75deg); */
}
body{
background-color:#222222;
cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto !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: deeppink !important;
font-size:2rem;
}
.links a, .left a, .right a{
color:#FFF!important;
background-color: purple;
}
.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;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: purple;
color: white;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
border: 2px solid purple;
}
@media (min-width: 30em)
.col.w-40 {
width: 35%;
}
@media (min-width: 30em)
.row {
width: 150%;
margin-left: -20%;
}
@media (min-width: 30em)
nav .top {
width: 150%;
margin-left: -20.5%;
}
@media (min-width: 30em)
nav .links, footer .links {
width: 150%;
margin-left: -21%;
}
.profile .blurbs .heading, .profile .friends .heading {
background-color: deeppink;
}
.profile .blurbs .section h4 {
padding-top: 10px;
}
.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
margin: revert !important;
}
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )