@import url('https://fonts.googleapis.com/css2?family=Cutive&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Philosopher&display=swap');
:root {
/* ===S-CSS-P INTEGRATION=== */
--theme-base: "black-highlighter";
--theme-id: "eventyr-theme";
--theme-name: "Eventyr Theme";
/* ===HEADER ELEMENTS=== */
--logo-image: var(--eventyr-base);
--header-title: "Eventyr";
--header-subtitle: "The cycle continues, set to a new tune";
/* === Header Logo Options === */
--eventyr-base: url(https://i.imgur.com/hJVeZzx.png);
--eventyr-aro: url(https://i.imgur.com/8IAiW29.png);
--eventyr-ace: url(https://i.imgur.com/qTG77Uo.png);
--eventyr-bi: url(https://i.imgur.com/YnsRoMl.png);
--eventyr-gay: url(https://i.imgur.com/yOEha1S.png);
--eventyr-lesbian: url(https://i.imgur.com/jsj7q5J.png);
--eventyr-nonbinary: url(https://i.imgur.com/dbRZvo2.png);
--eventyr-pan: url(https://i.imgur.com/bk7IxgI.png);
--eventyr-trans: url(https://i.imgur.com/OfoIIX7.png);
--eventyr-agender: url(https://i.imgur.com/VHFv7UV.png);
--eventyr-demisexual: url(https://i.imgur.com/bAlgxo3.png);
--eventyr-genderfluid: url(https://i.imgur.com/SphpDMq.png);
--eventyr-genderqueer: url(https://i.imgur.com/GkWFL3a.png);
--eventyr-intersex: url(https://i.imgur.com/cXGldVr.png);
--eventyr-lgbtq+: url(https://i.imgur.com/WBLXd4n.png);
--eventyr-polyamorous: url(https://i.imgur.com/r6BL1K1.png);
--eventyr-polysexual: url(https://i.imgur.com/SlFoWpY.png);
/* ===Fonts=== */
--UI-font: Cutive, serif;
--header-font: Lavishly Yours, cursive;
--title-font: Cutive, serif;
--mono-font: Recursive, monospace;
/* ===LIGHT BROWNS=== */
--off-white: 253, 252, 251;
--yet-unwritten: 227, 219, 174;
--wooden-floor: 202, 182, 153;
--writing-pages: 190, 163, 99;
--book-binding: 237, 230, 220;
--writing-desk: 161, 145, 122;
/* ===DARKS=== */
--writing-ink: 96, 66, 48;
--the-void: 12, 12, 12;
/* ===GREENS=== */
--study-wall: 42, 55, 37;
--curtains: 201, 214, 195;
/* ===ACCENTS=== */
--hca-purple: 93, 15, 135;
--bronze-ornament: 179, 122, 18;
/* ===THEME ASSIGNMENTS=== */
/* white */
--white-monochrome: var(--off-white);
/* v light gray for blockquotes and stuff */
--pale-gray-monochrome: var(--book-binding);
/* very light pale gray for misc. use */
--light-pale-gray-monochrome: 244, 244, 244;
/* very light accent gray for misc. use */
--very-light-gray-monochrome: 215, 215, 215;
/* light accent gray for login status */
--light-gray-monochrome: var(--study-wall);
/* gray */
--gray-monochrome: var(--study-wall);
/* dark accent gray for sidebar background */
--dark-gray-monochrome: var(--curtains);
/* black */
--black-monochrome: var(--the-void);
/* subdued theme color */
--pale-accent: var(--writing-desk);
/* vivid theme color the "default" accent color */
--bright-accent: var(--writing-pages);
/* theme color */
--medium-accent: var(--wooden-floor);
/* darker theme color */
--dark-accent: var(--writing-ink);
/* alternate accent color for newpage links */
--alt-accent: var(--bronze-ornament);
/* ===GENERAL COLORS=== */
--swatch-border-color: var(--writing-ink);
/* ===MENU COLORS=== */
/* ===MENU BACKGROUND COLORS=== */
--swatch-menubg-dark-color: var(--light-gray-monochrome);
--swatch-menubg-black-color: var(--light-gray-monochrome);
/* ===HEADER TITLE FONT SIZES=== */
--header-h1-font-size: calc(var(--base-font-size) * (120 / 45));
--header-h2-font-size: var(--base-font-size);
/* ===OVERALL PAGE BACKGROUND COLOUR=== */
--swatch-background: var(--white-monochrome);
/* ===BACKGROUND GRADIENT=== */
/* Subtle gradient that begins just below the top-bar and header */
--background-gradient-color: var(--yet-unwritten);
--background-gradient-distance: 40rem;
/* ===LINK COLOURS=== */
--link-color: var(--alt-accent);
--visited-link-color: var(--hca-purple);
--hover-link-color: var(--hca-purple);
--newpage-color: 221, 102, 17;
--header-background-image-size: 100% var(--header-height-on-desktop);
--header-height-on-desktop: 12.25rem;
--header-height-on-mobile: 12.25rem;
--topbar-height-on-mobile: 2.5rem;
}
#header {
/* ===HEADER ELEMENTS=== */
/* ===HEADER TITLES=== */
/* Header H1 and H2 colors */
--swatch-headerh1-color: var(--dark-accent);
--swatch-headerh2-color: var(--dark-accent);
background-position: center top;
background-size:180px;
/* ===LOGIN BOX ELEMENT=== */
--login-line-divider-color: var(--study-wall);
--login-username-color: var(--study-wall);
--login-myaccount-color: var(--study-wall);
--login-myaccount-hover-color: var(--login-myaccount-color);
--login-arrow-color: var(--study-wall);
/* Dropdown Box when arrow is clicked */
--login-dropdown-bg-color: var(--study-wall);
--login-dropdown-bg-image: var(--study-wall);
/* ===SEARCH ELEMENT=== */
--search-icon-color: var(--study-wall);
}
#header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before {
filter:drop-shadow(0px 0px 1px white);
}
#side-bar,
#interwiki {
/* ===SIDE-BAR ELEMENTS=== */
/* ===SIDE-BAR GENERAL=== */
--sidebar-bg-color: var(--study-wall);
--sidebar-resources-bg-color: var(--curtains), 0.25;
--sidebar-media-bg-color: var(--curtains), 0.125;
--social-icon-hover-color: var(--swatch-primary);
/* ===SIDEBLOCK MENU=== */
--sideblock-bg-color: 0, 0, 0, 0; /* Transparent */
--sideblock-heading-border-color: var(--swatch-primary);
--sideblock-heading-bg-color: 0, 0, 0, 0; /* Transparent */
--sideblock-heading-text-color: var(--alt-accent);
/* ===MENU-ITEMS=== */
--sidebar-border-color: var(--yet-unwritten), 0.08;
--sidebar-subtext-color: var(--yet-unwritten);
--sidebar-links-text: var(--curtains);
--sidebar-links-bg-color: 0, 0, 0, 0; /* Transparent */
--sidebar-links-hover-bg-color: var(--swatch-primary);
--sidebar-links-hover-text-color: var(--swatch-text-secondary-color);
/* ===SIDEBAR COLLAPSIBLES=== */
/* Folded Colors */
--sidebar-collapsible-fld-link-bg: var(--swatch-primary-darker), 0.25;
--sidebar-collapsible-fld-link-color: var(--sideblock-heading-text-color);
--sidebar-collapsible-fld-link-hover-bg: var(--swatch-primary-darker);
--sidebar-collapsible-fld-link-hover-color: var(--swatch-text-secondary-color);
--sidebar-collapsible-fld-arrow-color: var(--swatch-text-tertiary-color);
--sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-secondary-color);
/* Unfolded Colors */
--sidebar-collapsible-ufld-link-bg: var(--sidebar-collapsible-fld-link-bg);
--sidebar-collapsible-ufld-link-color: var(--sideblock-heading-text-color);
--sidebar-collapsible-ufld-link-hover-bg: var(--swatch-primary);
--sidebar-collapsible-ufld-link-hover-color: var(--sidebar-collapsible-fld-link-hover-color);
--sidebar-collapsible-ufld-arrow-color: var(--sidebar-collapsible-fld-arrow-color);
--sidebar-collapsible-ufld-arrow-hover-color: var(--sidebar-collapsible-fld-arrow-hover-color);
/* Unfolded Body Colors */
--sidebar-collapsible-body-bg: var(--swatch-primary), 0.125;
--sidebar-collapsible-link-color: var(--sidebar-links-text);
--sidebar-collapsible-link-hover-bg: var(--sidebar-links-hover-bg-color);
--sidebar-collapsible-link-hover-color: var(--sidebar-links-hover-text-color);
}
#main-content {
/* ===TABLES=== */
--tables-header-bg: var(--writing-pages);
}
/* Center Header */
#header h1, #header h2 {
width: 100%;
}
#header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#skrollr-body {
background-image: none;
}
:root {
--header-h1-font-size: 4rem;
--gradient-header: url(http://scp-sandbox-3.wikidot.com/local--files/theme:eventyr-theme/eventyrbanner.png);
--header-background-image-size: auto var(--header-height-on-desktop);
background-position-x: center;
}
body {
background-position-x: center;
}
#footer {
position: relative;
background-color: transparent;
color: rgb(var(--dark-accent));
margin-top: 100px !important;
overflow: unset;
isolation: isolate;
--footer-link-color: var(--writing-ink);
--footer-link-hover-color: var(--writing-ink);
}
#footer .options a {
color: rgb(var(--dark-accent));
width: auto;
background-repeat: repeat-x;
background-size: inherit;
}
#footer::before {
position: absolute;
z-index: auto;
min-height: 100px;
content: "Vort Jordliv her er Evighedens Frø";
color: var(--writing-ink);
font-size: 3rem;
text-align: center;
font-family: Lavishly Yours;
line-height: calc(1rem + 13.25vw); /* Same as the height */
bottom: 0; left: 0;
height: calc(1rem + 13.25vw); width: 100%;
background-image: url('http://scp-sandbox-3.wikidot.com/local--files/theme:eventyr-theme/eventyrfooter.png');
background-size: cover;
background-position: center top;
pointer-events: none;
}
@media only screen and (max-width: 56.25rem) {
:root {
--gradient-header: url(http://scp-sandbox-3.wikidot.com/local--files/theme:eventyr-theme/mobileeventyrbanner.png);
}
#footer::before {
font-size: 1.5rem;
content: "Evighedens Frø";
}
#footer {
margin-top: 40px !important;}
}
/* CUSTOM DIVS */
.storybook-hca {
font-family: Philosopher, cursive;
background-image: url(http://scp-sandbox-3.wikidot.com/local--files/theme:eventyr-theme/HCAbackground.png);
padding: 15px;
font-size: 105%;
border: 2px solid #5d0f87;
}
.eventypewriter{
font-family: Cutive, serif;
background-image: url(http://scp-sandbox-3.wikidot.com/local--files/theme:eventyr-theme/HCAbackground.png);
padding: 15px;
font-size: 90%;
border: 2px solid #5d0f87;
}
.eventypewriter-left{
font-family: Cutive, serif;
background-image: url(http://scp-sandbox-3.wikidot.com/local--files/theme:eventyr-theme/HCAbackground.png);
padding: 15px;
font-size: 80%;
float: left;
width: 40%;
border: 2px solid #5d0f87;
margin: 20px;
}
.eventypewriter-right{
font-family: Cutive, serif;
background-image: url(http://scp-sandbox-3.wikidot.com/local--files/theme:eventyr-theme/HCAbackground.png);
padding: 15px;
font-size: 80%;
float: right;
width: 40%;
border: 2px solid #5d0f87;
margin: 20px;
}
.eventyr-title{
font-family: var(--header-font), cursive;
padding: 5px;
font-size: 300%;
text-align: center;
color: var(--writing-ink);
}
.eventyr-butterfly-div{
min-height: 200px;
background-image: url(https://i.imgur.com/RLmLIsQ.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.eventyr-hr{
min-height: 6em;
background-image: url(https://i.imgur.com/aktVFfc.png);
background-size: cover;
@media only screen and (max-width: 600px) {
background-size: contain;
}
background-repeat: no-repeat;
background-position: center;
}
.eventyr-hr-short{
min-height: 6em;
background-image: url(https://i.imgur.com/ZpDbBPq.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.evenflowery{
background-image: url(https://i.imgur.com/tfyjpWh.png), url(https://i.imgur.com/oxowJJQ.png);
background-repeat: no-repeat;
background-size: 24%;
background-position: top left, 102% 110%;
padding: 1em 1em 1em 2em;
}
Author
Translator
