A Gally Fellow's Lens

Link to article: A Gally Fellow's Lens.

Module Styles

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

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

CSS Classes

• 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

Page Source

=====
[[include :scp-wiki:component:preview |text= In which we watch time pass. (Tales of the Mosaic - 350 Words)]]
=====

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

[[module CSS]]
/*
    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;
}
[[/module]]

[[div class="title-container"]]
[[module rate]]

[[div class="tessera-eyebrow-container"]]
[[span class="tessera-eyebrow-text"]]Tessera[[/span]]
[[/div]]

[[span class="tessera-title"]]A Gally Fellow's Lens[[/span]]

[[div id="title-byline"]]
written by [[user LibraryOfBabel]]
narration and music by [[user Jezixo]]
art by [[user Costodic]]
[[/div]]

[[div class="audio"]]
[[include :snippets:html5player
|type=audio
|url=https://scp-wiki.wdfiles.com/local--files/a-gally-fellows-lens/Gally%20Fellow.mp3
]]
[[/div]]

[[/div]]

[[div class="tessera-body"]]
The young of Hickory Street gathered on a brumal eve to look upon a strange fellow, his lanky limbs curled tight around a lamppost and his still head slumped down to greet them, with one giant eye displaying a distant sunny sky. They'd called it a portal, a porthole, a telly-scope and window, the lens of a Gally Fellow who'd show them the stars. They'd called it their own.

In rain they'd huddle beneath Ms. Cherelle's spare umbrellas and try to catch sight of King Something-Or-Other amongst the Fellow's new showings, and in sun they'd bring out blankets to set upon the pavement while his lens shifted to trawler-chased canvas fish. They'd rumor in murmurs, "What can’t this thing see?", and look on in wonder as pirates sailed on cerulean seas, making play after each new display from this Gally Fellow.

[[image
http://scp-wiki.wikidot.com/local--files/a-gally-fellows-lens/finalgallyman.webp]]

With sharpened minds they went on their ways— toward other districts and universities— and the young grew older and the younger grew old enough to want to be older still and the spare space beneath Ms. Cherelle's umbrellas grew larger with each passing year. Ms. Cherelle became Ms. Jacobs and Ms. Jacobs moved away and soon after, someone's mother had invented a Telly-scope that could be watched whenever and wherever. The sights weren’t nearly as grand but it soon became clear to actors and wide-eyed investors that citizens and their children preferred refuge from the wet weather.

The Gally Fellow stayed silent in his place, the same wonders flickering across his porthole portal, and the Telly became larger, and industry grew in kind, and the dreamers that once would visit slept in instead. The newcomers taking their place would offer the odd comment or awkward glare, though none would stop and give the Gally more than a minute of thought. Still, some days a familiar face would come and stare, lamenting duller children and worser days, but the Gally would not answer, showing its myriad glimpses of the worlds that shaped these once-had-been-children and their supposed better days, when Ms. Cherelle and those kids all huddled in the rain.
[[/div]]

[[div class="earthworm"]]
[[div class="tessera-eyebrow-container"]]
[[span class="tessera-eyebrow-text"]]Previous[[/span]]
[[/div]][[[Juni Writes A Poem]]]

[[div class="tessera-eyebrow-container"]]
[[span class="tessera-eyebrow-text"]]Next[[/span]]
[[/div]][[[Leasehold on Daylight]]]
[[/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]]
> **Filename:** finalgallyman.webp
> **Author:** [[*user Costodic]]
> **License:** CC BY-SA 3.0

> **Filename:** Gally Fellow.mp3
> **Author:** [[*user Jezixo]]
> **License:** CC BY-SA 3.0
[[include :scp-wiki:component:license-box-end]]