Link to article: Chaos Insurgency Hub.
/* CHAOS INSURGENCY CSS by ubergoober */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap");
:root {
/* header */
--header-title: "Chaos Insurgency";
--header-subtitle: "Creating Logic from Illogic";
--header-font: "Orbitron", sans-serif;
/* red */
--dept-blue: 20, 2, 2;
--saucer-steel: 26, 19, 19;
--believe-grey: 43, 25, 25;
--einhander-gun: 92, 78, 78;
--fiic-blue: 105, 16, 16;
--fiic-grey: 140, 119, 119;
--cooper: 140, 98, 98;
--mulder: 115, 69, 69;
--skinner: 91, 41, 41;
--scully: 54, 34, 34;
--standard-visited: 136, 34, 68;
--blue-grey: 13, 11, 11;
--blue-highlighter: 207, 41, 41;
--sterile-container: 163, 33, 33;
--logo-image: url("https://scp-wiki.wdfiles.com/local--files/chaos-insurgency-hub/CI-Marcus-header.png");
--header-height-on-desktop: 12.5rem;
--header-height-on-mobile: 12.5rem;
--swatch-background: var(--blue-grey);
--hover-link-color: var(--blue-highlighter);
--newpage-color: var(--sterile-container);
--link-color: var(--sterile-container);
--visited-link-color: var(--standard-visited);
}
@media (max-width: 200px) {
:root {
--header-title: "Insurgency";
}
}
@media (min-width: 201px) {
:root {
--header-title: "Chaos Insurgency";
}
}
#header h1 a {
width: 100%;
}
#header h1 a {
font-size: min(var(--header-h1-font-size), 8vw);
}
#extra-div-1 {
background-size: calc(var(--header-height-on-desktop) * 2.5);
background-image: url("https://scp-sandbox-3.wdfiles.com/local--files/css-insurgency/CI_Grid_Red.png");
mix-blend-mode: normal;
opacity: 1;
}
#header h1 {
margin-top: 100px;
}
#header h1 a {
background-image: none;
}
@media screen and (max-width: 768px) {
#header h1 {
/* Note to self: fix the header on mobile */
}
}
.code {
background-color: rgb(var(--believe-white));
max-width: 100%;
}
#page-content div#toc {
background-color: rgb(var(--einhander-gun));
}
/* PAGE DIVs */
.motto1 {
width: 100%;
font-family: 'Zilla Slab', serif;
font-size: 2rem;
line-height: 1.85rem;
text-align: center;
}
.motto2 {
font-family: 'Outfit', sans-serif;
font-size: 1.55rem;
text-decoration: underline;
}
.linkswitcher {
--hover-link-color: var(--red-room);
--newpage-color: var(--skinner);
--link-color: var(--coffee-ring);
--visited-link-color: var(--coffee-ring);
}
.linkswitcher hr {
background-color: rgb(var(--faded-type));
border-top: .0625rem solid rgb(var(--faded-type)) !important;
}
.singleliner p {
margin-bottom: 0em;
}
.icon {
position: relative;
width: 18rem;
padding: 10px;
text-align: center;
transition: transform .16s;
display: inline-table;
flex-wrap: wrap;
z-index: 2;
}
.icon_image {
border-radius: 50%;
overflow: hidden;
}
.icon_name,
.icon_link {
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.sticky-note {
float: right;
width: 200px;
margin: 10px;
padding: 15px;
background-color: #fff9c4;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
border: 1px solid #f0e68c;
font-family: sans-serif;
font-size: 14px;
}
/* fixing Edit box CSS */
#edit-page-comments#edit-page-comments {
color: white;
}
/* Making listpages look good */
.pager-no {
color: brown;
}
#page-content table.wiki-content-table th {
background: rgb(116, 97, 78);
}
#page-content table.wiki-content-table tD {
background: rgb(208, 189, 169);
}
/* TOC CSS Ethagon stole from F120A hub and then slightly modified*/
.anchor {
position: sticky;
height:0;
top: 0.5rem;
z-index: 4;
}
.tocbox {
margin-top: 0;
position: absolute;
top: 0;
right: max(-18.75rem, -17vw);
z-index: 4;
box-sizing: border-box;
width: max-content;
pointer-events: none;
}
#page-content .tocbox .toc-u {
padding: 0.5rem;
border-right: solid 0.2rem var(--headerColor);
box-shadow: 0 0 4px rgba(0,0,0,0.3);
position: relative;
width: 15rem;
max-height: calc(98vh - 2rem);
max-width: calc((30vw - 50% - 6rem)/1.2);
margin-right: 0; margin-left: auto;
pointer-events: all;
}
.toc-u #toc::before, .toc-u #toc::after { display: none; }
.toc-u::before, .toc-u::after {
content: "";
display: block;
height: 0.5rem; width: 0.5rem;
position: absolute;
right: 0;
background-color: var(--headerColor);
}
.toc-u::before {
top: 0;
transform: translate(calc(0.1rem + 50%),-50%) rotate(45deg);
}
.toc-u::after {
bottom: 0;
transform: translate(calc(0.1rem + 50%),50%) rotate(45deg);
}
#page-content .tocbox .toc-u #toc-list {
overflow-y: auto;
overflow-x: hidden;
max-height: 84vh;
padding: 0 0.5em 1em;
scrollbar-width: thin;
}
#page-content .tocbox .toc-u #toc-list::-webkit-scrollbar {
width: 6px;
}
.tocbox table,
.tocbox tbody,
.tocbox tr,
.tocbox td,
.tocbox #toc {
display: contents;
}
#toc-list > div { position: relative; }
#toc-list > div[style*="1em"]::before {
content: "•";
display: inline-block;
position: absolute;
left: -0.75em;
color: var(--accentColor);
}
@media (max-width: 1340px) {
.anchor {
filter: none;
transition: filter 0.2s ease-out;
}
.tocbox {
right: -1rem;
width: unset;
}
.tocbox::before {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 1.5rem; height: 100%;
top: 0; right: -0.25rem;
pointer-events: all;
}
.tocbox::after {
content: "";
display: block;
position: absolute;
background-color: transparent;
width: 0; height: 0;
border: solid 1rem transparent;
border-left-width: 0.5rem;
border-right-color: var(--headerColor);
top: calc(50% - 1rem); right: 0;
pointer-events: all;
transition: border-right-width 0.15s ease-out;
}
#page-content .tocbox .toc-u {
width: -moz-fit-content;
width: fit-content;
max-width: 60vw;
box-shadow: none;
clip-path: inset(-0.5rem -0.5rem -0.5rem calc(100% - 0.65rem));
transition: clip-path 0.2s ease-out;
pointer-events: none;
}
.anchor:hover { filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2)); }
.tocbox:hover {
pointer-events: all;
}
.tocbox:hover::after {
border-right-width: 0;
}
#page-content .tocbox:hover .toc-u {
pointer-events: all;
clip-path: inset(-0.5rem -0.5rem -0.5rem -0.35rem);
}
}
float:right
component:preview
:scp-wiki:theme:black-highlighter-theme
[info]
:scp-wiki:theme:twin-files
[info]
:scp-wiki:component:centered-header-bhl
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
anchor
tocbox
toc-u
blokquote-alt
blokquote-alt
icon
icon_image
icon_name
icon
icon_name
icon
icon_name
icon
icon_name
icon
icon_image
icon_name
icon
icon_name
icon
icon_image
icon_name
icon
icon_image
icon_name
icon
icon_name
icon
icon_image
icon_name
icon
icon_image
icon_name