[OLD]~ Steal My CSS ~ Red Console ~ Demo Included ~ atK! ~

Tags: console, fonts, red, darkmode, dark, purple, dos, amiga

Description:

This is the CSS layout used on my profile, funky text and all. Accurate as of 2022 April 08.

EDIT this is no longer my current layout, but it is still fully functional.

^{Made by atKing - https://spacehey.com/atk}

^{Forked some code from:}

^{Bela - https://layouts.spacehey.com/user?id=37750}

^{FlaringK - https://mspfa.com/user/?u=100855018780708322446}

EDIT; This is my old layout - I don't use it anymore but I'll keep this one around

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by THE ▌ᴀᴛҠӀИԌ▐ OF SPACEHEY (https://layouts.spacehey.com/layout?id=20753) -->

<style>
/* Made by atKing - https://spacehey.com/profile?id=142552
Forked some code from:
    Bela - https://layouts.spacehey.com/user?id=37750
FlaringK - https://mspfa.com/user/?u=100855018780708322446
*/

@font-face { font-family: "mOsOul"; src: url('https://github.com/rewtnull/amigafonts/blob/master/ttf/P0T-NOoDLE_v1.0.ttf?raw=true'); }
@font-face {
    font-family: 'fontstuck';
    src: url('https://file.garden/X1htvgJ0DEp_tp-Z/MSPFA%20other/fontstuck.ttf');
}
:root{
     --headers: Darkgray;
     --text: DarkGray;
     --names: Gainsboro;
     --links: #a56b9d;
     --hover: whitesmoke;
     --borders: 0
     --background-image: url('<!--leave blank, optional bg image-->');
     --font-family: "mOsOul","Courier New",monospace;
     --curve: 0px;
}
.blurbs .heading{display:none !important;}
h3, h4, h5, .url-info b{ color: var(--headers) !important;}
a{color: var(--links);}
a:hover{color: var(--hover);}
p, h2{color: var(--text) !important;}
h1, .friends a p{color: var(--names);}
h1, .friends a:hover p{color: var(--hover);}
nav label{color: var(--links) !important;}
.section h4 {color: var(--headers) !important;text-align:center;}
.section{color: var(--text) !important;}
.comment-reply:not(:first-child){border-top: 3px double var(--links);}
.count{color:Gainsboro;}
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
.logout-btn:hover,
.logout-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .top a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .links a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}
a, p, nav label, .section{
    font-family: var(--font-family) !important;	
    text-shadow: 0px 0px 0px black !important;
    font-size: 14px!important;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{
    font-family: "mOsOul","Courier New",monospace;
    text-shadow: 0px 0px 0px black !important;
    letter-spacing: .3px;
    font-size: 16px!important;
}
.icon{border:none !important;}
.url-info{display:none !important;}
.blurbs{margin-top:10px !important;margin-bottom:30px !important}
.friends{margin-top:-10px !important;margin-bottom:30px !important}
.profile-info{ border-radius: var(--curve) !important;}
.comment-replies{border:5px inset var(--links);}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.table-section{padding-bottom:7px !important;margin-top:30px!important}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important; filter: brightness(95%);}
.mood{margin-top:20px;}
.blog-preview{margin-top:30px;}
.mood, .blog-preview{margin-bottom: 30px;}
.table-section, .blurbs, .friends{margin-bottom: 30px !important;}
.friends{margin-top: 10px!important;}
body {
    background-image: var(--background_image) !important;
    background-color: black ;
    background-repeat: repeat;
    background-size: contain;
}
nav{
background: #a00;
box-shadow: 8px 9px 0 0 #333;
    background-size: cover;
    border: var(--borders);
    border-radius: var(--curve);
}
nav .top {
    background: rgba(0,0,0,0.0);
}
nav .top a{
    color: var(--links);
}
nav .links {
    background: transparent!important;
    background-size: 100%100%!important;
    text-align: center;
    font-size: 14px;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(96%) contrast(89%); !important;}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ⋮ ";
    color: var(--text);
}
.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid var(--links) !important;
    color:DarkGray !important;
    border-radius: 10px !important;
}
button{
    border-radius: 10px !important;
    border: 0px solid DarkGray!important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--links)!important;
}
.online{color: var(--links) !important;} 
.online img {
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%)
    hue-rotate(10deg) brightness(96%) contrast(89%); !important;
}
h1{
    padding-left: 30px !important;
    font-family: "mOsOul","Courier New",monospace;
    font-size:30px !important;
    margin-top: -10px!important;
    color: DarkGray;
}
.profile-info{
height: 130px; background-image: url('https://www.imgup.cz/images/2021/11/24/ezgif-1-7d46193ffaee.gif');
box-shadow: 8px 9px 0 0 #333;
    background-size: cover;
    border: 0;
    background-color:#a00;
display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-top: 30px;
}
.profile-info .inner{
    font-weight: bold;
    text-align: center;
}
.contact {
background: #a00;
box-shadow: 8px 9px 0 0 #333;
    background-size: cover;
    border: 0;
    padding: 2px !important;
}
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add to friends */
	content: "✢"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "⇢"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "☏"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "⤇"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "✎"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "⌧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "⇔"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "⊗"
} 
.comment-replies {
    background-color: #e0fcfc;
}
main{
    background: #532f4f;
    padding: 6px 0px;
    background-size: 100%;
    background-position: center;
}
.profile-pic img{
    outline:none !important;
    border: var(--borders)!important;
    filter:drop-shadow(0px 0px 0px black)!important;
}
.profile .friends .person img{
    border-radius: 10px;
    border: var(--borders) !important;
    filter:drop-shadow(0px 0px 0px black) !important;
}
.friends-grid{
    text-align: center;
}
.friends-grid img{
    outline:none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}
.inner img{
    outline:none !important;
    filter: drop-shadow(0px 0px 0px black) !important;
    border-radius: var(--curve) !important;
}
td {
    background-color: transparent!important;
}
hr{
    border: 2px inset #221F1F;
    background: #221F1F;
}
.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.friends, .blurbs{
background: #a00;
box-shadow: 8px 9px 0 0 #333;
    background-size: cover;
}
.mood, .blog-preview{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.mood, .blog-preview {
    text-align: center;
background: #a00;
box-shadow: 8px 9px 0 0 #333;
    background-size: cover;
    border: 0;
}
.table-section{
    border:var(--borders) !important;
background: #a00;
box-shadow: 8px 9px 0 0 #333;
    background-size: cover;
    border: 0;
    background-size: cover;
    border-radius: var(--curve) !important;
}
.heading{
    background:transparent!important;
    padding-bottom: 4px !important;
    background-size:100%100%!important;
    text-align: center;
    border:none!important;
}
.comments-table td {
    background-image: url('') !important;
    background-size: cover;
}
.comments-table td:first-child{
    background: url('')!important;
    background-size: 50%!important;
}
.comments-table td:first-child img {
    border: var(--borders);
}
footer{
    color:red;
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
background: #a00;
box-shadow: 8px 9px 0 0 #333;
    background-size: cover;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 1px;
    border: 5px inset DimGray;
}
::-webkit-scrollbar-thumb {
    background: DimGray;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: DarkGray;
}
h1 {
    font-size: 1.9em !important;
    --color: #ea71ff;
  font-family: 'fontstuck', monospace;
  animation: yellingdoc 1000ms infinite;
  display: inline;
}

@keyframes yellingdoc {
  0%   {
    color: white;
  }
  16%   {
    color: white;
    text-shadow: 0 0 0 #000000
  }
  24%   {
    color: white;
  }
  28%   {
    color: var(--color);
    text-shadow: 0.5em 0 2.5px #000000
  }
  32%   {
    color: black;
    text-shadow: 0em 0 0 #000000
  }
  36%   {
    color: black;
  }
  40%   {
    color: white;
  }
  44%   {
    color: black;
  }
  48%   {
    color: white;
  }
  56%   {
    color: white;
    text-shadow: 0em 0 0 #000000
  }
  60%   {
    color: var(--color);
  }
  64%   {
    color: var(--color);
    text-shadow: 0 -0.5em 2.5px #000000
  }
  68%   {
    color: black;
    text-shadow: -0.25em -0.25em 0px var(--color)
  }
  72%   {
    color: black;
    text-shadow: 0 0 0 var(--color)
  }
  76%   {
    color: black;
    text-shadow: 0.25em -0.25em 0 black
  }
  80%   {
    text-shadow: 0 0.25em 0 black
  }
  84%   {
    text-shadow: 0 0 0 black
  }
  88%   {
    text-shadow: 0 0 0 black
  }
  92%   {
    text-shadow: 0.25em 0 0 black
  }
  96%   {
    text-shadow: 0 0 0 black
  }
  100%   {
    color: var(--color);
  }
}
</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 4 of 4 comments ( View all | Add Comment )

morbius	1710581239 accidentally came across a homestuck while looking for a lyout (again) Report Comment
Nikki!!	1674986307 using cries/pos Report Comment
Z	1672574246 YOOOOOO how the hell do people do stuff like this you are so skilled at this Report Comment
Red	1671498734 >:0}} Report Comment