Cufflink Theme: Close your front door on just another day, a backwards glance and on your way once on the street you find your--

MICHAEL GOES BY… who walks by night?

This theme was made by scutoid studios using parts from the Black Highlighter theme by Woedenaz and Croquembouche. Its focus is on using icons to create a simple user interface for the wiki, and is highly customisable. It also focuses on using HSL colours instead of hex or RGB colours.

---

My friend, you are a walking non-talking man…

…once on the street you find your feet!

/*====== IMPORTS ======*/
/*==== bhl normalification ====*/
@import url(http://backrooms-wiki.wikidot.com/local--files/component:theme/nulim-norm.min.css);
 
/*==== font ====*/
/*== roboto slab ==*/
@import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap);
 
/*== roboto ==*/
@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
 
/*== roboto mono ==*/
@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap);
 
/*====== ROOT VARIABLES ======*/
:root {
   /*==== s-css-p ====*/
   --theme-base: "none";
   --theme-id: "cufflink";
   --theme-name: "Cufflink";
 
   /*==== fonts ====*/
   --body-font: 'Roboto', sans-serif;
   --mono-font: 'Roboto Mono', mono;
 
   /*==== color ====*/
   /*== hues ==*/
   --main-hue: 220;
   --alternate-hue: 350;
   --extra-hue: 20;
 
   /*== saturation ==*/
   --gray-saturation: 10%;
   --accent-saturation: 90%;
 
   /*== white/gray ==*/
   --white: var(--main-hue), var(--gray-saturation), 97%;
   --gray-offwhite: var(--main-hue), var(--gray-saturation), 90%;
   --gray-light1: var(--main-hue), var(--gray-saturation), 80%;
   --gray-light2: var(--main-hue), var(--gray-saturation), 75%;
   --gray-medium: var(--main-hue), var(--gray-saturation), 50%;
   --gray-dark1: var(--main-hue), var(--gray-saturation), 30%;
   --gray-dark2: var(--main-hue), var(--gray-saturation), 20%;
   --black: var(--main-hue), var(--gray-saturation), 3%;
 
   /*== accent ==*/
   --accent-offwhite: var(--main-hue), var(--accent-saturation), 90%;
   --accent-light1: var(--main-hue), var(--acccent-saturation), 80%;
   --accent-light2: var(--main-hue), var(--accent-saturation), 75%;
   --accent-medium: var(--main-hue), var(--accent-saturation), 50%;
   --accent-dark1: var(--main-hue), var(--accent-saturation), 30%;
   --accent-dark2: var(--main-hue), var(--accent-saturation), 20%;
 
   /*== alternate accent ==*/
   --alternate-offwhite: var(--main-hue), var(--accent-saturation), 90%;
   --alternate-light1: var(--main-hue), var(--acccent-saturation), 80%;
   --alternate-light2: var(--main-hue), var(--accent-saturation), 75%;
   --alternate-medium: var(--main-hue), var(--accent-saturation), 50%;
   --alternate-dark1: var(--main-hue), var(--accent-saturation), 30%;
   --alternate-dark2: var(--main-hue), var(--accent-saturation), 20%;
 
   /*== menu ==*/
   --menu-bg-color: var(--gray-light1);
   --menu-bg-color-lighter: var(--white);
   --menu-bg-color-2: var(--gray-dark1);
   --menu-bg-color-2-darker: var(--gray-dark2);
   --menu-color: var(--gray-dark2);
   --menu-color-2: var(--gray-offwhite);
 
   /*== link ==*/
   --link-hue: var(--alternate-hue);
   --link-saturation: 90%;
   --link-lightness: 50%;
 
   --link-hue-visited: var(--link-hue);
   --link-saturation-visited: 10%;
   --link-lightness-visited: var(--link-lightness);
 
   --link-hue-newpage: var(--extra-hue);
   --link-saturation-newpage: var(--link-saturation);
   --link-lightness-newpage: var(--link-lightness);
 
   --link-hue-hover: var(--main-hue);
   --link-saturation-hover: 95%;
   --link-lightness-hover: 80%;
 
   --link-color: var(--link-hue), var(--link-saturation), var(--link-lightness);
   --link-color-visited: var(--link-hue-visited), var(--link-saturation-visited), var(--link-lightness-visited);
   --link-color-newpage: var(--link-hue-newpage), var(--link-saturation-newpage), var(--link-lightness-newpage);
   --link-color-hover: var(--link-hue-hover), var(--link-saturation-hover), var(--link-lightness-hover);
 
   /*== body ==*/
   --body-bg: var(--menu-bg-color-lighter);
   --body-container-bg: var(--menu-bg-color-2);
   --body-color: var(--menu-color);
 
   /*== other colours ==*/
   --header-color: var(--accent-dark1);
 
   /*==== transition ====*/
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
   /*==== measurements ====*/
   --topbar-width: 4rem;
   --header-height: 4rem;
   --body-width: 60rem;
}
 
/*====== BASIC ELEMENTS ======*/
/*==== body ====*/
body {
   font-family: var(--body-font);
   color: hsl(var(--body-color));
}
 
/*==== link ====*/
a {
   color: hsl(var(--link-color));
}
 
a:visited {
   color: hsl(var(--link-color-visited));
}
 
a.newpage {
   color: hsl(var(--link-color-newpage));
}
 
a, a:visited {
   transition: text-decoration-color var(--link-transition-length) var(--ease-in-out), color var(--link-transition-length) var(--ease-in-out);
   text-decoration: underline transparent;
}
 
a:is(:hover, :active, :focus, :focus-within) {
   transition: text-decoration-color var(--link-transition-length) var(--ease-in-out), color var(--link-transition-length) var(--ease-in-out);
   background-color: transparent;
   color: hsl(var(--link-color-hover));
   text-decoration: underline currentcolor;
}
 
/*==== textarea ====*/
textarea {
   font-family: var(--mono-font);
}
 
/*==== blocks ====*/
/*== code ==*/
.code, .page-source {
   overflow-x: scroll;
   background-color: hsl(var(--menu-bg-color));
   color: hsl(var(--menu-color));
   padding: 0.5rem 1rem;
   border: 0.1rem dashed rgba(var(--menu-color), 0.25);
}
 
/*====== TOP BAR ======*/
#top-bar {
   width: var(--topbar-width);
   height: calc(100vw - var(--header-height));
   position: fixed;
   top: var(--header-height);
   left: 0;
   background: hsl(var(--menu-bg-color));
   color: hsl(var(--menu-color));
}
 
/*==== menus ====*/
.mobile-top-bar {
   display: none;
}
 
.top-bar > ul li ul {
   display: none;
}
 
.top-bar > ul {
   display: flex;
   flex-direction: column;
   width: inherit;
}
 
.top-bar > ul li {
   height: var(--topbar-width);
   position: relative;
}
 
.top-bar > ul li a {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}
 
.top-bar > ul li::hover > ul, #top-bar ul li::hover > ul li::hover > ul {
   display: grid;
}
 
/*==== make space ====*/
 
#container-wrap-wrap {
   margin-left: var(--topbar-width);
}
 
#content-wrap {
   padding: 2rem;
   background: hsl(var(--body-container-bg));
   margin-top: var(--header-height);
}
 
#main-content {
   max-width: var(--body-width);
   background: hsl(var(--body-bg));
   margin: auto;
   padding: 1.5rem 2.5rem;
}
 
#header {
   position: absolute;
   top: 0;
   left: var(--topbar-width);
   height: var(--header-height);
   background: hsl(var(--menu-bg-color-lighter));
   color: hsl(var(--menu-color));
   width: calc(100vw - var(--topbar-width));
}
 
/*====== PAGE CONTENT ======*/
#page-title,.meta-title {
   --wght: 700;
   margin: 0.5em 0 1em;
   padding: 0 0 0.5rem;
   border-bottom: 0.1rem solid hsla(var(--body-color), 0.25);
   color: hsl(var(--header-color));
   font-family:
 
 var(--header-font);
   font-size: 1.5em;
   font-weight: var(--wght);
}
 
/*====== SIDE BAR ======*/
/* for now just fuck it */
#side-bar { display: none; }