Tales of the Mosaic

Link to article: Tales of the Mosaic.

Module Styles

• 
  @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');
  
  .licensebox {
      color: white;
  }
  
  /* COLORS */
  
  #content-wrap {
  background: linear-gradient(34.77deg, #011018 29.51%, #132934 76.89%, #011018 107.83%);
  }
  
  :root {
  --bright-accent: 3, 104, 171;
  --dark-accent: 16, 61, 91; 
  --medium-accent: 40, 40, 40; 
  --newpage-color: 123, 46, 206;
  --pale-accent: 255, 255, 255;
  --gray-monochrome: 30,30,30;
  --visited-link-color: 150, 150, 150;
  }
  
  /* SETTING VARIABLES */
  :root {
  --base-font-size: 1rem;
  --header-title: "Tales of the Mosaic";
  --header-subtitle: "It's always been this way";
  --logo-image: none;
  --header-font: "Hepta Slab", serif;
  --diagonal-stripes: none;
  --body-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";
  }
  
  /*MAKING ACTION AREA READABLE */
  
  .licensebox .collapsible-block-link {
      color: white;
   }
  
  #action-area {
      background: white;
  border-radius: 8px;
  padding: 1rem;
  }
  
  #action-area a {
  color: black;
  }
  
  /* HEADER TEXT */
  
  #header h1 a::before {
  display: none;
  }
  
  #header h2 span::before {
  display: none;
  }
  
  #header h1 a::after {
      font-weight: 600;
      font-size: 2.2rem;
      font-family: 'IM Fell DW Pica SC', serif;
  }
  
  #header h2 span::after {
      text-transform: none;
      font-family: 'EB Garamond', 'IM Fell DW Pica SC', serif;
      font-size: 1.2rem;
      font-weight: bold;
      margin-top: 0.5rem;
  }
  
  /* TITLE  */
  
  div#page-title {
      display: none;
  }
  
  span.title {
      font-weight: bold;
      color: white;
      font-size: 3rem;
      width: max-content;
      display: block;
      margin-inline: 1rem;
      text-align: center;
      font-family: 'IM Fell DW Pica SC', serif;
  }
  
  @media only screen and (max-width: 500px) {
  span.title {
  /*    font-size: 2.3rem; */
      max-width: 14rem;
  }
  
  .whiteline-label {
      font-size: 1.5rem;
      max-width: 14rem;
  }
  
  }
  
  .whiteline-header {
      margin: 3.5rem auto 1rem;
      display: flex;
      align-items: center;
  }
  
  .earthworm .whiteline-header {
      margin: 3rem auto 1rem;
  }
  
  .earthworm p, .earthworm a {
  font-weight: bold;
  margin-bottom: 1rem;
  }
  
  .whiteline-label {
      color: white;
      font-weight: 700;
      font-size: 1.7rem;
      display: block;
      margin-inline: 1rem;
      letter-spacing: 0.15rem;
      font-family: 'IM Fell DW Pica SC', serif;
      max-width: 16rem;
      text-align: center;
      width: max-content;
  }
  
  .whiteline-header p, .centerbox p {
  margin: 0px;
  }
  
  .whiteline-header::before, .whiteline-header::after {
      content: "";
      height: 1px;
      background: white;
      width: 100%;
  }
  
  div#u-authorlink {
      text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  }
  
  div#u-authorlink a {
      color: rgb(var(--link-color));
  font-weight: 700;
  }
  
  div#u-authorlink p {
  margin: 0px;
  color: white;
  }
  
  .centerbox {
  width: fit-content;
  margin: 1rem auto 0rem;
  text-align: center;
  }
  
  /* INTRO TEXT DIV */
  
  .intro-text {
      color: white;
      font-size: 1.4rem;
      margin: 1rem auto 2.5rem;
      max-width: 35rem;
  font-weight: bold;
  }
  
  .small {
  font-size: 1.2rem;
  font-weight: regular;
  }
  
  /* ARTICLE LIST */
  
  .article-list {
      max-width: 25rem;
      margin: 2rem auto 4rem;
  }
  
  .article-list p {
  margin: 0px;
  }
  
  .article-list br {
  display: none;
  }
  
  .article-list 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: #011018;
      border-radius: 0px 8px 0px 8px;
      border-left-color: #f0a475;
      border-bottom-color: #f0a475;
  }
  
  .article-list a:visited {
  color: white;
  border-color: #8a8a8a;
  }
  
  .article-list a:hover {
      text-decoration: none;
      border: 1px solid #f0a475;
      color: #f0a475;
  }
  
  /* FAQS DIV */
  
  .faqs {
  max-width: 35rem;
  margin: auto;
  }
  
  /* PAPER DOCUMENT */
  
  .paper {
      padding: 1rem 3rem;
      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;
      max-width: 35rem;
      margin: 2rem auto;
  }
  
  .paper p, .paper li {
      font-weight: 500;
  font-size: 1.2rem;
  color: #262521;
  margin-top: 0.5rem;
  }
  
  .paper h2 {
  font-family: EB Garamond, serif;
  margin-block: 1rem 0.5rem;
  font-size: 1.5rem;
  }
  
  .paper a {
  color: black;
  font-weight: bold;
  }
  
  @media (max-width: 479px) {
      .paper {
          padding:1rem 1rem;
      }
  }
  
  
  /* FIXING NAV BAR FONT SIZE ON MOBILE */
  @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));
  }
  }
  
  /* EARTHWORM */
  
  .earthworm {
      margin-block: 3rem;
      font-weight: bold;
      font-size: 1.5rem;
      color: white;
  text-align: center;
  }
  

• /* 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;
  }

Inline Styles

• (none)

Includes

• :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]
• :scp-wiki:component:license-box [info]
• :scp-wiki:component:license-box-end [info]

CSS Classes

• centerbox

• intro-text

• whiteline-header

• title

• whiteline-header

• whiteline-label

• small

• article-list

• faqs

• whiteline-header

• whiteline-label

• paper

• paper

• paper

• paper

• earthworm

• whiteline-header

• whiteline-label

• article-list

• ab-test-subject

• bottom-rating-module

Page Source

=====
[[include :scp-wiki:component:preview |text=Our city is a picture of a thousand little worlds – a thousand little stories, each one truer than the last.]]
=====

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:component:centered-header-bhl]]

[[module CSS]]

@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');

.licensebox {
    color: white;
}

/* COLORS */

#content-wrap {
background: linear-gradient(34.77deg, #011018 29.51%, #132934 76.89%, #011018 107.83%);
}

:root {
--bright-accent: 3, 104, 171;
--dark-accent: 16, 61, 91; 
--medium-accent: 40, 40, 40; 
--newpage-color: 123, 46, 206;
--pale-accent: 255, 255, 255;
--gray-monochrome: 30,30,30;
--visited-link-color: 150, 150, 150;
}

/* SETTING VARIABLES */
:root {
--base-font-size: 1rem;
--header-title: "Tales of the Mosaic";
--header-subtitle: "It's always been this way";
--logo-image: none;
--header-font: "Hepta Slab", serif;
--diagonal-stripes: none;
--body-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";
}

/*MAKING ACTION AREA READABLE */

.licensebox .collapsible-block-link {
    color: white;
 }

#action-area {
    background: white;
border-radius: 8px;
padding: 1rem;
}

#action-area a {
color: black;
}

/* HEADER TEXT */

#header h1 a::before {
display: none;
}

#header h2 span::before {
display: none;
}

#header h1 a::after {
    font-weight: 600;
    font-size: 2.2rem;
    font-family: 'IM Fell DW Pica SC', serif;
}

#header h2 span::after {
    text-transform: none;
    font-family: 'EB Garamond', 'IM Fell DW Pica SC', serif;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

/* TITLE  */

div#page-title {
    display: none;
}

span.title {
    font-weight: bold;
    color: white;
    font-size: 3rem;
    width: max-content;
    display: block;
    margin-inline: 1rem;
    text-align: center;
    font-family: 'IM Fell DW Pica SC', serif;
}

@media only screen and (max-width: 500px) {
span.title {
/*    font-size: 2.3rem; */
    max-width: 14rem;
}

.whiteline-label {
    font-size: 1.5rem;
    max-width: 14rem;
}

}

.whiteline-header {
    margin: 3.5rem auto 1rem;
    display: flex;
    align-items: center;
}

.earthworm .whiteline-header {
    margin: 3rem auto 1rem;
}

.earthworm p, .earthworm a {
font-weight: bold;
margin-bottom: 1rem;
}

.whiteline-label {
    color: white;
    font-weight: 700;
    font-size: 1.7rem;
    display: block;
    margin-inline: 1rem;
    letter-spacing: 0.15rem;
    font-family: 'IM Fell DW Pica SC', serif;
    max-width: 16rem;
    text-align: center;
    width: max-content;
}

.whiteline-header p, .centerbox p {
margin: 0px;
}

.whiteline-header::before, .whiteline-header::after {
    content: "";
    height: 1px;
    background: white;
    width: 100%;
}

div#u-authorlink {
    text-align: center;
font-weight: 700;
font-size: 1.2rem;
}

div#u-authorlink a {
    color: rgb(var(--link-color));
font-weight: 700;
}

div#u-authorlink p {
margin: 0px;
color: white;
}

.centerbox {
width: fit-content;
margin: 1rem auto 0rem;
text-align: center;
}

/* INTRO TEXT DIV */

.intro-text {
    color: white;
    font-size: 1.4rem;
    margin: 1rem auto 2.5rem;
    max-width: 35rem;
font-weight: bold;
}

.small {
font-size: 1.2rem;
font-weight: regular;
}

/* ARTICLE LIST */

.article-list {
    max-width: 25rem;
    margin: 2rem auto 4rem;
}

.article-list p {
margin: 0px;
}

.article-list br {
display: none;
}

.article-list 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: #011018;
    border-radius: 0px 8px 0px 8px;
    border-left-color: #f0a475;
    border-bottom-color: #f0a475;
}

.article-list a:visited {
color: white;
border-color: #8a8a8a;
}

.article-list a:hover {
    text-decoration: none;
    border: 1px solid #f0a475;
    color: #f0a475;
}

/* FAQS DIV */

.faqs {
max-width: 35rem;
margin: auto;
}

/* PAPER DOCUMENT */

.paper {
    padding: 1rem 3rem;
    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;
    max-width: 35rem;
    margin: 2rem auto;
}

.paper p, .paper li {
    font-weight: 500;
font-size: 1.2rem;
color: #262521;
margin-top: 0.5rem;
}

.paper h2 {
font-family: EB Garamond, serif;
margin-block: 1rem 0.5rem;
font-size: 1.5rem;
}

.paper a {
color: black;
font-weight: bold;
}

@media (max-width: 479px) {
    .paper {
        padding:1rem 1rem;
    }
}


/* FIXING NAV BAR FONT SIZE ON MOBILE */
@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));
}
}

/* EARTHWORM */

.earthworm {
    margin-block: 3rem;
    font-weight: bold;
    font-size: 1.5rem;
    color: white;
text-align: center;
}

[[/module]]


[[div class="centerbox"]]
[[module rate]]
[[/div]]

[[div class="intro-text"]]

[[div class="whiteline-header"]]
[[span class="title"]]Tales of the Mosaic[[/span]]
[[/div]] 


From the Raining Stairs to the Skinside markets, from the neon glow of Trestle Street to the gleaming Pearl Estates, our city is a picture of a thousand little worlds – a thousand little stories, each one truer than the last. 

Don't complain of broken paving stones or strange miasma; the sewer pipes – the city's roots – grow wherever they please. The churning river bursts its banks, the foundry smoke lies thickly on the streets, and the morning sun may only rise for those who can afford it. The wardens have a plan, they say, but nobody has heard it. 

Don't ask how it came to be like this, or why, or who's to blame: this is the Mosaic. It’s always been this way.

[[div class="whiteline-header"]]
[[span class="whiteline-label"]]Tesserae[[/span]]
[[/div]] 

[[div class="small"]]
The Mosaic is a city built at the intersection of the wondrous and the mundane. Vast, complex and ever-expanding, its stacked and crooked streets are a kaleidoscope of cultures and eras, fortunes and failures.

Its stories are the collective unconscious of every city given shape. Beautiful and grotesque, whimsical and horrific, it is a place where the fanciful logic of dreams and legends meets the grim reality of urban life.

**Tales of the Mosaic are all 350 words or less, have no fixed reading order, and require no prior knowledge of lore or continuity.**

Each tessera reveals more about the world of the Mosaic and the people who live there, but can still be read as a narratively complete standalone work. 
[[/div]]

[[div class="article-list"]]
[https://scp-wiki.wikidot.com/mosaic-crabmeat Hanson Perry and the Crabmeat Loss]
[https://scp-wiki.wikidot.com/mosaic-the-rainbow-pebble The Rainbow Pebble]
[https://scp-wiki.wikidot.com/the-broken-dawn The Broken Dawn]
[https://scp-wiki.wikidot.com/the-beast-of-liverwort-hill The Beast Of Liverwort Hill] 
[https://scp-wiki.wikidot.com/right-of-first-refuse Right of First Refuse] 
[https://scp-wiki.wikidot.com/the-gizzen-kirk The Gizzen Kirk]
[https://scp-wiki.wikidot.com/canvas-fish-fly Where Once the Canvas Fish Fly]
[https://scp-wiki.wikidot.com/the-parcelmens-creed The Parcelmen's Creed]
[[[Bessie Bogan and the Crow Road Inn]]]
[https://scp-wiki.wikidot.com/juni-writes-a-poem Juni Writes A Poem]
[https://scp-wiki.wikidot.com/a-gally-fellows-lens A Gally Fellow's Lens]
[https://scp-wiki.wikidot.com/leasehold-on-daylight Leasehold on Daylight]

[[/div]] 

[[/div]]

[[div class="faqs"]]
[[div class="whiteline-header"]]
[[span class="whiteline-label"]]Questions Most Frequently Asked[[/span]]
[[/div]] 

[[div class="paper"]]
++ What is this?

Tales of the Mosaic is a short-form Tale series, focused on a strange, otherworldly city where reality does not behave according to familiar rules.

Each story in this series is a “tessera”: the name given to tiles in a mosaic. Just like in a mosaic, each tessera is a standalone piece, unique and complete, which fits into the larger picture, revealing more about this weird and wonderful place.

The tales use a lyrical prose style inspired by the oral storytelling tradition, with an emphasis on prosody and cadence.
[[/div]] 

[[div class="paper"]]
++ What are the stories about?
Tales of the Mosaic are at their core about the city, and the ways in which it functions (or fails to function). Their scope may be vast or narrow, impersonal or intimate, systemic or humanistic, but the Mosaic itself is always at the center. 

The Mosaic is a place where the impossible can happen, but when it happens it needs no explanation. After all, if it could be explained it wouldn’t be impossible. 
[[/div]]

[[div class="paper"]]
++ How can I contribute? 

Tales of the Mosaic is a closed series, but we're always looking for new authors who are interested in building this city one pebble at a time. If you would like to contribute, please reach out to [https://www.wikidot.com/user:info/jezixo Jezixo], [https://www.wikidot.com/user:info/thechunk TheChunk], or **Dr Angell** on Discord.
[[/div]]

[[div class="paper"]]
++ Why are the Earface Folk below the bridge buying steel in bulk? 
No-one knows for sure, but so long as they can pay on time, what harm could it do?
[[/div]]



[[div class="earthworm"]]
[[div class="whiteline-header"]]
[[span class="whiteline-label"]]Next[[/span]]
[[/div]] 
[[div class="article-list"]]
[https://scp-wiki.wikidot.com/mosaic-crabmeat Hanson Perry and the Crabmeat Loss]
[[/div]] 
[[/div]]]

[[/div]]
[[/div]]

[!-- A/B testing whether rate module at the bottom of the page actually affects anything - see https://scp-wiki.wikidot.com/forum/t-17022412/should-your-article-have-a-2nd-rating-module --]
[[module css]]
/* 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;
}
[[/module]]
[[module ListUsers users="."]]
[[div class="ab-test ab-test--[[#ifexpr %%number%% % 2 == 0 | active | inactive ]]"]]
[[/div]]
[[/module]]
[[div class="ab-test-subject bottom-rating-module"]]
[[module Rate]]
[[/div]]


[[include :scp-wiki:component:license-box
|author=Jezixo, TheChunk]]
[[include :scp-wiki:component:license-box-end]]