Fish^12:hi-fashion

This is the High Fashion CSS Theme made by Fish^12 for myself.

To import this theme to your page, put the following text anywhere inside it:

[[include :scp-wiki:theme:high-fashion-theme]]

This theme is just an aesthetic. Ain't much else to it.

---

Example image block.

Name	Wars Fought	Earnings
War Relic	0	$89,495
Man O' War	0	$249,465
Sergeant Reckless	1	$53,326

Click Me

You're in the right place.

Don't Click Me

Idiot.

Header and subheader font is Geologica.
Title font is Roboto Mono.
Body font is Roboto Flex.

Theme Source

/*
    High Fashion Theme
    [2025 Wikidot Theme]
    by Fish^12
*/
 
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teachers:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
 
:root {
    --cream: #FCFBF4;
    --carbon: black;
    --lipstick: #f2707a;
    --glass: transparent;
 
    --poiret: "Poiret One";
    --monoton: "Monoton";
    --teachers: "Teachers";
    --libre: "Libre Baskerville";
 
    --header-title: "Foundation";
    --header-subtitle: "Fashion";
    --sp_header-logo: none;
    --sp_header-title-size: clamp(2.5rem, 1.974rem + 2.807vw, 4.5rem);
    --sp_header-subtitle-size: var(--sp_header-title-size);
 
    --sp_header-height: 20rem;
    --sp_top-bar-height: 2rem;
 
    --sp_top-bar-link-hover-color: var(--carbon);
    --sp_top-bar-link-hover-background: var(--lipstick);
 
    --sp_dropdown-link-color: var(--cream);
    --sp_dropdown-link-hover-color: var(--carbon);
    --sp_dropdown-link-background: var(--lipstick);
    --sp_dropdown-link-hover-background: var(--lipstick);
    --sp_dropdown-link-border: none;
 
    --sp_rate-module-background: var(--cream);
    --sp_rate-module-text-color: var(--carbon);
    --sp_rate-module-button-color: var(--carbon);
    --sp_rate-module-button-background: var(--cream);
    --sp_rate-module-sub-color: var(--carbon);
    --sp_rate-module-button-hover-color: var(--cream);
    --sp_rate-module-button-hover-background: var(--lipstick);
 
    --sp_tab-text-color: var(--lipstick);
    --sp_tab-background: var(--carbon);
    --sp_tab-border-color: var(--carbon);
    --sp_tab-hover-text-color: var(--cream);
    --sp_tab-hover-background: var(--lipstick);
    --sp_tab-hover-border-color: var(--lipstick);
    --sp_tab-selected-background: var(--lipstick);
    --sp_tab-selected-border-color: var(--lipstick);
 
    --sp_hovertip-background: var(--lipstick);
    --sp_hovertip-border: 0.4em double var(--lipstick);
}
 
.printuser {
    color: var(--carbon);
    font-family: var(--teachers);
    font-weight: bold;
}
#login-status {
    padding-right: 12px;
    font-family: var(--teachers);
    text-transform: capitalize;
}
#login-status a:hover {
    text-decoration-style: double;
}
#login-status a, #login-status ul a {
    color: var(--carbon);
}
#account-options {
    margin-right: 12px;
    text-align: center;
    border: none;
    border-color: var(--carbon);
    background-color: var(--cream);
}
#account-options li a {
    color: var(--carbon);
    transition: 200ms;
}
#account-options li a:hover {
    color: var(--cream);
    background: var(--carbon);
    text-decoration: none;
}
#account-topbutton {
    transition: 200ms;
}
#account-topbutton:hover {
    color: var(--cream);
    background-color: var(--carbon);
}
.owindow {
    border: 0.4em double var(--carbon);
    border-radius: 25px;
}
.owindow .title {
    cursor: auto;
    background-color: var(--lipstick);
    text-transform: capitalize;
    border-radius: 20px 20px 0 0;
    border-bottom: 0.4em double var(--cream);
}
.owindow .button-bar a {
    background-color: var(--lipstick);
    border: 0.4em double var(--cream);
    color: var(--cream);
}
.owindow .button-bar a:hover {
    background-color: var(--cream);
    border: 0.4em double var(--lipstick);
    color: var(--lipstick);
}
#search-top-box {
    align-items: flex-start;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    padding: 8px 12px 0 0;
    font-family: var(--teachers);
}
#search-top-box-form input[type=submit] {
    background-color: var(--carbon);
    background-image: none;
    color: var(--cream);
    box-shadow: none;
    border-color: var(--carbon);
    border-radius: 0;
    transition: 200ms;
}
#search-top-box-form input[type=submit]:hover {
    background-color: var(--lipstick);
    background-image: none;
    border-color: var(--lipstick);
    color: var(--cream);
    box-shadow: none;
}
#header {
grid-template-areas:
    ". . login login login"
    ". . . . search"
    "h1 h1 h1 h1 h1"
    "h2 h2 h2 h2 h2"
    ". . . . ."
    "top-bar top-bar top-bar top-bar top-bar";
    grid-template-columns: repeat(5, 1fr);
    background-color: var(--cream);
    background-image: url("http://smlt.wikidot.com/local--files/fish-12:hi-fashion/mascara.png");
    background-repeat: no-repeat;
    background-position: 100% 51%;
    background-size: min(50vw, 500px);
}
#header h1, #header h2 {
    text-align: left;
    padding-inline-start: 2vw;
}
#header h1::before {
    position: absolute;
    content: "";
    background-color: var(--lipstick);
    height: clamp(6rem, 3.143rem + 7.619vw, 10rem);
    width: clamp(10rem, 4.286rem + 15.238vw, 18rem);
    clip-path: polygon(29% 0, 11% 100%, 100% 54%);
    z-index: 1;
}
#header h1 a, #header h2 span {
    font-family: var(--poiret);
    position: relative;
    color: var(--carbon);
    text-shadow: none;
    font-weight: 100;
    z-index: 5;
}
#header h1 a:first-letter, #header h2 span:first-letter {
    font-weight: bold;
    font-style: italic;
}
 
#top-bar {
    width: 100%;
    background-color: var(--lipstick);
    background-image: linear-gradient(45deg, var(--glass) 2vw, var(--cream) 2vw 15vw, var(--glass) 15vw), linear-gradient(135deg, var(--glass) 2vw, var(--cream) 2vw 15vw, var(--glass) 15vw);
    position: relative;
}
#top-bar::after {
    position: absolute;
    content: "";
    border-width: 2em 0em 0em 50vw;
    border-style: solid;
    border-color: var(--lipstick) var(--glass) var(--glass) var(--glass);
    top: 100%;
    right: 0;
}
#top-bar > div[class*="top-bar"] {
    margin: 0;
    margin-left: auto;
}
#top-bar div[class*="top-bar"] > ul {
    font-family: var(--teachers);
    font-size: clamp(0.75rem, 0.571rem + 0.476vw, 1rem);
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    line-height: 1.5rem;
}
#top-bar ul li ul {
    border: none;
    box-shadow: none;
}
#top-bar ul li a {
    transition: 200ms;
}
#top-bar .open-menu a {
    border-style: double;
    border-color: var(--lipstick);
    color: var(--lipstick);
    border-radius: 3em;
    transition: 200ms;
}
#top-bar .open-menu a:hover {
    border-color: var(--cream);
    background: var(--lipstick);
    color: var(--cream);
}
 
#side-bar {
    background-color: rgba(0, 0, 0, 0.05);
}
#side-bar .menu-item {
    display: flex;
}
#side-bar .menu-item a {
    flex-grow: 1;
    text-align: center;
}
a, a:visited, #interwiki a, #side-bar a {
    color: #e13c00;
    transition: 200ms;
}
a:hover, a:visited:hover, #interwiki a:hover, #side-bar a:hover {
    text-decoration: underline;
    text-decoration-style: double;
    color: #e13c00;
    text-underline-offset: 5px;
}
a.action-area-close:hover {
    background-color: var(--glass);
}
#side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block, #interwiki .side-block {
    background-color: var(--cream);
}
#side-bar .side-block, #interwiki .side-block {
    border: 0.4em double var(--lipstick);
    border-radius: 0;
    box-shadow: none;
}
#side-bar .heading, #interwiki .heading {
    margin: 0.6rem 0 0.5rem;
    padding: 0;
    color: var(--carbon);
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: none;
}
#side-bar .heading::before, #side-bar .heading::after, #interwiki .heading::before, #interwiki .heading::after {
    content: "";
    height: 1px;
    box-sizing: border-box;
    border-bottom: 5px double var(--lipstick);
    margin: 0.1rem 0.5rem 0;
    flex: 1 1 0;
}
 
#container {
    background-color: var(--cream);
    overflow: hidden;
}
 
scrollbar-color {
    background: var(--lipstick);
}
::-webkit-scrollbar-thumb {
    background: var(--lipstick);
}
::-webkit-scrollbar-track {
    background: var(--carbon);
}
 
body {
    font-family: var(--libre);
    line-height: 1.5;
}
p::selection {
    color: var(--cream);
    background-color: var(--lipstick);
}
#page-title {
    margin-top: 2rem;
    font-family: var(--monoton);
    font-size: 2.5rem;
    text-align: center;
    color: var(--carbon);
    border-width: 0;
    word-spacing: 10px;
}
.page-rate-widget-box {
    box-shadow: none;
    border-radius: 3em;
    text-transform: capitalize;
    font-family: var(--teachers);
}
.page-rate-widget-box :is(.rateup, .ratedown, .cancel) a {
    transition: 200ms;
}
div.page-rate-widget-box {
    padding: 0.25em 0.4em 0.1em 0;
    border: 0.4em double var(--carbon);
}
div.page-rate-widget-box .cancel a:hover {
    background: var(--lipstick);
    color: var(--cream);
    border-radius: 0 100% 100% 0;
}
h1, h2, h3, h4, h5 {
    font-family: var(--teachers);
    color: var(--lipstick);
}
blockquote, div.blockquote {
    border: 0.4em double var(--carbon);
    border-radius: 3em;
    background: none;
}
hr {
    background-image:
        linear-gradient(45deg, var(--glass) 5%, var(--lipstick) 5% 95%, var(--glass) 95%),
        linear-gradient(135deg, var(--glass) 5%, var(--lipstick) 5% 95%, var(--glass) 95%);
    background-color: var(--glass);
    height: 30px;
}
.scp-image-block {
    border: 0.4em double var(--carbon);
    box-shadow: none;
}
.scp-image-block .scp-image-caption {
    background-color: var(--lipstick);
    border-top: 0.4em double var(--cream);
}
#toc {
    border: 0.4em double var(--carbon);
    background-color: var(--cream);
    border-radius: 25px;
}
#toc #toc-action-bar {
    text-align: center;
}
.yui-navset .yui-nav {
    border-color: var(--carbon);
    font-weight: bold;
}
.yui-navset .yui-content {
    background-color: var(--lipstick);
    color: var(--cream);
}
 
#main-content .page-tags span {
    border-top: 0.4em double var(--lipstick);
}
 
#page-info, .page-watch-options, .page-options-bottom {
    text-align: center;
}
#footer, #license-area {
    color: var(--carbon);
    background-color: var(--lipstick);
}
#license-area a {
    color: var(--cream);
}
.hovertip {
    color: var(--cream);
    width: fit-content;
    height: fit-content;
}
 
@media only screen and (max-width: 767px) {
#top-bar {
    background-image: none;
    }
#top-bar::after {
    border-width: 2em 4em 0em 100vw;
    filter: drop-shadow(5px 0px 0px var(--carbon)) drop-shadow(-4px 3px 0px var(--carbon));
    }
}

‡ Licensing / Citation

Cite this page as:

"Fish^12:hi-fashion" by Fish^12, from the SCP Wiki. Source: https://scpwiki.com/fish-12:hi-fashion. Licensed under CC BY-SA.

For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.

Filename: mascara.png
Name: Blue female eye vector drawing
Author: secretlondon
License: Public Domain
Source Link: https://publicdomainvectors.org/en/free-clipart/Blue-female-eye-vector-drawing/15344.html