SCP spacehey layout complete

Rēsh-1

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=AR+One+Sans&display=swap');
@import url('https://rsms.me/inter/inter.css');

:root {
 --header-font: 'AR One Sans', 'Century Gothic', 'Arial', sans-serif;
 --UI-font: 'AR One Sans', 'Nanum Gothic', sans-serif;
 --mono-font: 'Roboto Mono', 'Nanum Gothic Coding', monospace;
 --body-font: 'Inter', 'Arial', sans-serif;

 --header-color1: #784442;
 --header-color2: #4d2625;

 --white: #fcfcfc;
 --black: #171717;
 --mark: 236,255,110;
 --red: #c93636;
 --dark-red: #8f1b1b;

 --heading-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 12'%3E%3Cpath d='M1 6a5 5 0 0 0 5-5 5 5 0 0 0 5 5 5 5 0 0 0-5 5 5 5 0 0 0-5-5z' style='fill:none;stroke:%23000;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none'/%3E%3C/svg%3E");
}

/* header and UI font is AR One Sans, Mono is Roboto Mono, body font is Inter :3 */

</style>

<style>

/* main */

body, li, p {
 line-height: 1.5;
}
 
body {
 font-family: var(--body-font);
 color: var(--black);
 background-color: var(--white);
 font-size: 0.925rem;
}
 
::selection {
 background-color: rgb(var(--mark),0.875);
 color: var(--black);
}

main, footer {
 background-color: var(--white);
}

.url-info,
.blurbs .heading {
 display: none;
}

.mood {
 font-family: var(--UI-font);
}

nav .top {
 background: linear-gradient(0deg, var(--header-color2) 6%, var(--header-color1) 67%, var(--header-color1) 99%);
}

nav .links {
 background-color: var(--white);
 text-align: center;
}

nav .links a {
 text-shadow: 0px 0px 0.5px var(--black);
}

table.comments-table td {
        background-color: white!important;
        width: 10px!important;
        font-size: 11px;
        border: dotted 1px;
        border-color: black;
    }
    .comments-table td:first-child img {
        width: 60px!important;
        border-radius: 500px;
    }

/* headings/headers */

.url-info b {
 color: var(--red) !important;
 font-family: var(--UI-font) !important;
}

h2,h3,h4,h5,h6 {
    font-family: var(--UI-font);
    font-weight: bold;
    color: var(--red);
}

h1,h2 { line-height: 1.25; }
h3,h4 { line-height: 1.325; }

h1 {
    display: flex;
    align-items: center;
    column-gap: 0.325rem;
    color: var(--red);
    font-family: var(--header-font);
    font-weight: bold;
    font-size: 2.675em;
    line-height: 1;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0.425em;
}
:is(h1)::before,
:is(h1)::after {
    content: "";
    display: block;
    height: 0.1rem;
    min-width: 2.5rem;
    flex-grow: 1;
    background: currentColor;
    order: 1;
}
:is(h1)::before {
    flex-grow: 0;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    -webkit-mask-image: var(--heading-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--heading-mask);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

/* online/supporter icon */

.online {
 content: url("https://i.ibb.co/FgxP1Mx/2591088a2sjr2i9e1.gif");
}

.supporter {
 content:url("https://64.media.tumblr.com/7d95071f0982cfce9167e7cacb411c50/tumblr_inline_p7gjrdJEjL1rhwzwl_75sq.gifv");
}

/* buttons and search */

.search-wrapper input[type=text] {
 background-color: var(--black) !important;
 border: 1px dotted var(--red) !important;
 color:var(--white) !important;
 border-radius: 0px !important;
}

button {
 border-radius: 0px !important;
 text-transform: lowercase;
 border: 1px dotted var(--header-color1) !important;
 font-family: var(--mono-font);
 background-color: var(--header-color1) !important;
 color: white !important;
}

/* contact me icons */

.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: url("https://i.ibb.co/g3bzRQj/Logo-of-the-SCP-Foundation-1.png")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
    /* add to favorites */
    content: url("https://i.ibb.co/g3bzRQj/Logo-of-the-SCP-Foundation-1.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
    /* send Message */
    content: url("https://i.ibb.co/g3bzRQj/Logo-of-the-SCP-Foundation-1.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
    /* forward to friend */
    content: url("https://i.ibb.co/g3bzRQj/Logo-of-the-SCP-Foundation-1.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
    /* instant message */
    content: url("https://i.ibb.co/g3bzRQj/Logo-of-the-SCP-Foundation-1.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* block user */
    content: url("https://i.ibb.co/g3bzRQj/Logo-of-the-SCP-Foundation-1.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    /* add to group */
    content: url("https://i.ibb.co/g3bzRQj/Logo-of-the-SCP-Foundation-1.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* report user */
    content: url("https://i.ibb.co/g3bzRQj/Logo-of-the-SCP-Foundation-1.png")
}

/* links */

a {
 color: var(--red) !important;
}

a:hover, a:visited {
 color: var(--dark-red) !important;
 text-decoration: none;
}

.friends a p {
 color: var(--red) !important;
}

.friends a:hover p {
 color: var(--dark-red) !important;
}

/* misc */

nav label {
 color: var(--white) !important;
}

nav label a {
 color: var(--white) !important;
}

nav label a:hover {
 color: var(--white) !important;
}

.section h4 {
 color: var(--red) !important;
 text-align: center;
}

.comment-reply:not(:first-child) {
 border-top: 3px double var(--red);
}

.count {
 color: var(--red);
}

.table, .table-section, .contact {
 border: 1px dotted var(--black) !important;
 background: var(--white);
}

table.details-table {
 background: transparent !important;
}

table.details-table td {
 background: transparent !important;
 font-family: var(--UI-font);
 color: var(--red) !important;
}

.heading {
    background: transparent!important;
    padding-bottom: 4px !important;
    background-size: 100%100%!important;
    text-align: center;
    border: none!important;
}

</style>

SCP spacehey layout complete

2

1.0k

63.6k

557.7k