Link to article: A Gally Fellow's Lens.
/*
Tales of the Mosaic Theme
[2025 Wikidot Theme]
Created by Jezixo
CC BY-SA 3.0
*/
/* ADDING FANCY FONTS */
@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');
/* ———— COLORS ———— */
/* SETTING COLOR PALETTE */
:root {
--white-monochrome: 251,250,249;
--pale-gray-monochrome: 241, 241, 241;
--light-pale-gray-monochrome: 242, 245, 247;
--very-light-gray-monochrome: 211, 216, 222;
--light-gray-monochrome: 151, 160, 168;
--gray-monochrome: 40, 40, 40;
--dark-gray-monochrome: 30, 30, 30;
--black-monochrome: 12, 12, 12;
--pale-accent: 118, 162, 186;
--bright-accent: 44, 103, 166;
--medium-accent: 29, 60, 89;
--dark-accent: 19, 41, 52;
--alt-accent: 240, 164, 117;
}
/* ADJUSTING UI ELEMENT COLORS */
:root {
--link-color: var(--black-monochrome);
--visited-link-color: var(--black-monochrome);
--newpage-color: var(--white-monochrome);
--footnotes-footer-num-color: var(--medium-accent);
--header-gradient-color-bottom: var(--gray-monochrome);
--swatch-menubg-medium-dark-color: var(--dark-gray-monochrome);
--login-myaccount-underline-color: var(--swatch-text-secondary-color);
--login-myaccount-hover-color: var(--white-monochrome);
}
#main-content {
--tabs-bg: var(--dark-accent);
--tabs-bottom-border-color: none;
--toc-header-bg-color: var(--medium-accent);
--toc-header-text-color: var(--white-monochrome);
}
#page-content {
color: rgb(var(--white-monochrome));
}
#login-status #account-options {
background: rgb(var(--black-monochrome));
}
@media (min-width: 36rem) {
#search-top-box {
background: rgba(var(--search-focus-textbox-bg-color), 0.1);
}
}
#header h1 a:focus {
outline-color: rgb(var(--alt-accent));
}
#content-wrap {
background: linear-gradient(34.77deg, #011018 29.51%, #132934 76.89%, #011018 107.83%);
}
/* ———— STYLING UI ELEMENTS ———— */
/* PAGE VARIABLES */
:root {
--base-font-size: 1rem;
--body-font: "EB Garamond", serif;
--header-font: "EB Garamond", serif;
--UI-font: Hepta Slab, PTRootUI,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantrell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--header-title: "Tales of the Mosaic";
--header-subtitle: "It's always been this way";
--logo-image: none;
--diagonal-stripes: none;
--header-height-on-desktop: 16rem;
--header-height-on-mobile: 16rem;
}
/* LINKS */
#page-content a {
font-weight: bold;
text-decoration: underline;
color: rgba(var(--white-monochrome));
}
#page-content a:visited {
color: rgba(var(--white-monochrome));
}
#page-content a:hover:not(.footnote-footer a:hover, #u-source-code-button .collapsible-block a:hover, #page-content .tessera-body a:hover) {
color: rgb(var(--alt-accent));
}
/* MAKING UTILITY ELEMENTS READABLE */
.licensebox .collapsible-block-link {
color: rgba(var(--white-monochrome));
opacity: 1;
}
/* This extra margin fixes a bug on the theme page where the tags intersect the theme licensebox. */
.licensebox {
margin-bottom: 2rem;
}
div.page-watch-options a,
.licensebox p,
.page-tags a,
#page-info {
color: rgba(var(--white-monochrome));
}
#action-area {
background: rgb(var(--white-monochrome));
border-radius: 8px;
padding: 1rem;
}
#action-area a {
color: rgb(var(--black-monochrome));
text-decoration: underline;
}
div#revision-list .pager a:hover {
color: rgb(var(--black-monochrome));
text-decoration: underline;
}
div#revision-list .pager a,
.code p,
.footnotes-footer .footnote-footer a::before,
.modalbox a,
tbody tr td #toc #toc-list a
{
color: rgb(var(--black-monochrome));
}
/* PAGE HEADER TEXT */
#header h1 a, #header h1 a::before {
display: flex;
font-size: 0em;
}
#header h2 span::before {
display: none;
}
#header h2 span {
margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 4em);
width: 80%;
}
#header h1 a::after {
font-weight: 400;
font-size: 3.2rem;
font-family: 'IM Fell DW Pica SC', 'EB Garamond', serif;
}
#header h2 span::after {
text-transform: none;
font-family: 'EB Garamond', 'IM Fell DW Pica SC', serif;
font-size: 1.5rem;
font-weight: bold;
margin-top: 0.5rem;
}
/* BREADCRUMBS */
#breadcrumbs a:before, .pseudocrumbs a:before {
content: none;
display: none;
}
:is(#breadcrumbs,.pseudocrumbs) a {
margin-right: 0px;
color: rgb(var(--white-monochrome));
padding-right: 0.3rem;
}
:is(#breadcrumbs,.pseudocrumbs) a:hover {
color: rgb(var(--alt-accent));
text-decoration: underline;
}
#breadcrumbs, .pseudocrumbs {
color: rgb(var(--white-monochrome));
}
/* ———— SKYLINE HEADER ANIMATION ———— */
/* Making the nav bar solid, so the animation can appear from behind it */
div#header {
width: 100%;
max-width: 100%;
}
@media (min-width: 36rem) {
#search-top-box {
right: 15%;
}
#login-status {
left: 15%;
}
}
#header div#top-bar {
max-width: none;
}
.top-bar {
margin: auto;
}
#header div#top-bar {
max-width: none;
background: rgb(var(--dark-gray-monochrome));
border-block: 2px solid rgb(var(--black-monochrome));
}
/* SKYLINE LAYERS */
#extra-div-1,
#extra-div-2,
#extra-div-3,
#extra-div-4,
#extra-div-5 {
position: absolute;
top: 0;
width: 100%;
opacity: 0;
height: 310px;
}
/* Layer 1 – Background */
#extra-div-1 {
background: calc(50% - -40px) top/1640px repeat-x;
animation: fadeIn 1.5s ease-in 0.5s forwards;
z-index: 0;
}
/* Layer 2 - Lighthouse */
#extra-div-2 {
background: calc(50% - -40px) top/1640px repeat-x;
animation: fadeIn 0.5s ease-in 0.3s forwards;
z-index: 1;
}
/* Layer 3 - Farthest buildings */
#extra-div-3 {
background: calc(50% - -40px) top/1620px repeat-x;
animation: backgroundZoomIn 1.5s ease-out 0.5s forwards, fadeIn 1.5s ease-in 0.5s forwards;
z-index: 2;
}
/* Layer 4 - Mid-distance buildings */
#extra-div-4 {
background: calc(50% - -50px) top/1620px repeat-x;
animation: slideLeft 1.5s ease-out 0.5s forwards, backgroundZoomIn 1.5s ease-out 0.5s forwards, fadeIn 1s ease-in 0.5s forwards;
z-index: 3;
}
/* Layer 5 - Closest buildings */
#extra-div-5 {
background: calc(50% - -30px) top/1620px repeat-x;
animation: slideRight 1.5s ease-out 0.5s forwards, backgroundZoomIn 1.5s ease-out 0.5s forwards, fadeIn 0.5s ease-in 0.5s forwards;
z-index: 4;
}
/* HEADER TEXT ANIMATION */
#header h1 a::after {
transform: scale(0.7);
opacity: 0;
animation: textGrowIn 1s ease-out 1s forwards;
}
#header h2 span {
transform: scale(0.7);
opacity: 0;
animation: textGrowIn 1s ease-out 1.2s forwards;
}
/* SKYLINE ANIMATIONS */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes backgroundZoomIn {
0% {
background-size: 1620px;
}
100% {
background-size: 1640px;
}
}
@keyframes slideRight {
0% {
background-position-x: calc(50% - -30px);
}
100% {
background-position-x: calc(50% - -40px);
}
}
@keyframes slideLeft {
0% {
background-position-x: calc(50% - -50px);
}
100% {
background-position-x: calc(50% - -40px);
}
}
@keyframes textGrowIn {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* WHITE LINE ANIMATION */
/* Making the white line around the title grow in on page load */
.title-container .tessera-eyebrow-container::before, .title-container .tessera-eyebrow-container::after {
animation: whiteLineReveal 2s cubic-bezier(.43,0,.1,1) 0.5s;
animation-fill-mode: both;
}
.title-container .tessera-eyebrow-container::before {
transform: rotate(180deg);
}
@keyframes whiteLineReveal {
from { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
/* ACCESSIBILITY MODE */
/* Turning off all animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
#extra-div-1,
#extra-div-2,
#extra-div-3,
#extra-div-4,
#extra-div-5,
#header h1 a::after,
#header h2 span {
opacity: 1;
background: calc(50% - -40px) top/1640px repeat-x;
animation: none;
transform: none;
}
.title-container .tessera-eyebrow-container::before, .title-container .tessera-eyebrow-container::after {
animation: none;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}
/* ———— CUSTOM PAGE ELEMENTS ———— */
/* TITLE SECTION */
div#page-title {
display: none;
}
.title-container {
width: fit-content;
margin: 1rem auto 3rem;
text-align: center;
}
span.tessera-title {
font-weight: bold;
color: rgb(var(--white-monochrome));
font-size: 2.5rem;
max-width: 24.3rem;
display: block;
margin: 0.5rem auto 0.5rem;
}
/* EYEBROW HEADER */
.tessera-eyebrow-container {
margin: 3rem auto 0rem;
display: flex;
align-items: center;
}
.tessera-eyebrow-text {
text-transform: uppercase;
color: rgb(var(--white-monochrome));
font-weight: 700;
font-size: 1rem;
width: max-content;
display: block;
margin-inline: 1rem;
letter-spacing: 0.15rem;
font-family: 'IM Fell DW Pica SC', 'EB Garamond', serif;
}
.tessera-eyebrow-container p, .title-container p {
margin: 0px;
}
.tessera-eyebrow-container::before, .tessera-eyebrow-container::after {
content: "";
height: 1px;
background: rgb(var(--white-monochrome));
width: 100%;
}
/* AUTHOR TAG */
div#u-title-byline {
text-align: center;
font-weight: 700;
font-size: 1.2rem;
}
div#u-title-byline a {
font-weight: 700;
}
div#u-title-byline p {
margin: 0px;
}
/* TESSERA BODY PAPER DOCUMENT */
.tessera-body {
padding: 24px 40px;
background: linear-gradient(203.04deg, #FBFAF9 40.5%, #f1f1f1 100%);
box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05), inset 0px 0px 30px 0px #AE8B75;
border-radius: 0px;
margin-block: 2.5rem;
max-width: 35rem;
margin: 0rem auto 3rem;
}
.tessera-body p {
font-weight: 500;
font-size: 1.2rem;
color: rgb(var(--dark-gray-monochrome));
}
#page-content .tessera-body a {
font-weight: bold;
color: rgba(var(--bright-accent));
text-decoration: underline;
}
#page-content .tessera-body a:visited {
color: rgb(var(--black-monochrome));
}
#page-content .tessera-body a:hover {
color: rgb(var(--medium-accent));
text-decoration-style: double;
}
@media (max-width: 479px) {
.tessera-body {
padding: 1rem 1rem;
}
}
/* This makes the color of images in the paper doc blend with the paper color - ideal for Costodias' monochrome line art, though you might want to disable this when using other kinds of art. */
.paper img {
mix-blend-mode: multiply;
}
/* MOSAIC EARTHWORM */
.earthworm {
margin-block: 3rem;
font-weight: bold;
font-size: 1.5rem;
color: rgb(var(--white-monochrome));
text-align: center;
}
#page-content .earthworm a {
font-weight: bold;
padding: 0.5rem 1rem;
margin: 1rem auto;
display: block;
text-align: center;
font-size: 1.2rem;
text-decoration: none;
transition: 0.5s;
border: 1px solid white;
background: rgb(var(--dark-accent));
border-radius: 0px 8px 0px 8px;
border-left-color: rgb(var(--alt-accent));
border-bottom-color: rgb(var(--alt-accent));
max-width: 25rem;
}
#page-content .earthworm a:visited {
color: rgb(var(--white-monochrome));
border-color: rgb(var(--dark-gray-monochrome));
}
#page-content .earthworm a:hover {
text-decoration: none;
border: 1px solid rgb(var(--alt-accent));
color: rgb(var(--alt-accent));
}
.earthworm .tessera-eyebrow-container {
margin: 3rem auto 1rem;
}
.earthworm p, .earthworm a {
font-weight: bold;
}
/* AUDIO PLAYER */
.audio {
margin-top: 2rem;
}
.audio iframe {
width: 300px;
}
/* ———— MOBILE TWEAKS ———— */
/* Making the title text wrap on small screens */
@media (max-width: 460px) {
#header h1 a {
padding: 0;
line-height: 1;
}
#header h2 span {
padding-top: 15%;
}
}
/* Making the title size smaller on small screens */
@media (max-width: 300px) {
#header h1 a::after {
font-size: 2rem;
}
}
/* Fixing nav bar text size */
@media only screen and (max-width: 56.25rem) {
#header div[class*=top-bar]>ul>li>a {
background: 0 0;
font-size: calc(var(--base-font-size)*(13/15));
}
}
/* ———— DAY THEME ———— */
/* These values get replaced when the other themes are enabled. */
div#header {
--login-line-divider-color: var(--white-monochrome);
--login-username-color: var(--white-monochrome);
--login-myaccount-color: var(--white-monochrome);
--login-myaccount-underline-color: var(--pale-gray-monochrome);
--login-myaccount-hover-bg-color: var(--gray-monochrome);
--search-icon-color: var(--white-monochrome);
}
:root {
--header-gradient-color-bottom: 1, 16, 24;
--header-gradient-color-middle: 19, 41, 52;
--header-gradient-color-top: 28, 60, 77;
}
#extra-div-1 {
background-image: url('https://scp-sandbox-3.wikidot.com/local--files/theme:tales-of-the-mosaic/night-bg.webp');
}
#extra-div-2 {
background-image: url('https://scp-sandbox-3.wikidot.com/local--files/theme:tales-of-the-mosaic/night-lighthouse.webp');
}
#extra-div-3 {
background-image: url('https://scp-sandbox-3.wikidot.com/local--files/theme:tales-of-the-mosaic/night-layer1.webp');
}
#extra-div-4 {
background-image: url('https://scp-sandbox-3.wikidot.com/local--files/theme:tales-of-the-mosaic/night-layer2.webp');
}
#extra-div-5 {
background-image: url('https://scp-sandbox-3.wikidot.com/local--files/theme:tales-of-the-mosaic/night-layer3.webp');
}
#header h1 a::after {
text-shadow: 1px 1px #262521, -1px -1px #262521, 1px -1px #262521, -1px 1px #262521, 5px 0px 5px #183B4B, 0px 5px 5px #183B4B, -5px 0px 5px #183B4B, 0px -5px 5px #183B4B, 5px 5px 10px #183B4B, -5px 5px 10px #183B4B, -5px -5px 10px #183B4B, 5px -5px 10px #183B4B;
}
#header h2 span::after {
text-shadow: 1px 1px #262521, -1px -1px #262521, 1px -1px #262521, -1px 1px #262521, 5px 0px 5px #183B4B, 0px 5px 5px #183B4B, -5px 0px 5px #183B4B, 0px -5px 5px #183B4B, 5px 5px 10px #183B4B, -5px 5px 10px #183B4B, -5px -5px 10px #183B4B, 5px -5px 10px #183B4B;
}
/* Only show the A/B test subject when the A/B test is active */
:not(.ab-test--active) + .ab-test-subject { display: none; }
.bottom-rating-module {
display: flex;
flex-direction: column;
align-items: center;
margin-block: 1rem;
}
.bottom-rating-module .page-rate-widget-box {
margin: 0;
}
:scp-wiki:component:preview
[info]
:scp-wiki:theme:black-highlighter-theme
[info]
:scp-wiki:component:toggle-sidebar-bhl
[info]
:scp-wiki:component:centered-header-bhl
[info]
:snippets:html5player
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
title-container
tessera-eyebrow-container
tessera-eyebrow-text
tessera-title
audio
tessera-body
earthworm
tessera-eyebrow-container
tessera-eyebrow-text
tessera-eyebrow-container
tessera-eyebrow-text
ab-test-subject
bottom-rating-module