The Master Of Keys

Link to article: The Master Of Keys.

Module Styles

• :root{
  
  /*
  Variable guide:
  I forgot which variable controls what, sorry
  */
      --accent-h: 276deg;
  
      --primary-accent-1: var(--accent-h) 0% 60%; /* the 2nd layer of the city, table of contents text, city block and blockquote border, info button on the rating module */
      --primary-accent-2: calc(var(--accent-h) - 5deg) 0% 71%; /* the 1st layer of the city, headings */
      --primary-accent-3: calc(var(--accent-h) - 15deg) 0% 68%; /* hr */
  
      --light-accent-1: calc(var(--accent-h) + 12.5deg) 0% 10%; /* bg, header title */
      --light-accent-2: calc(var(--accent-h) + 7.5deg) 0% 80.5%; /* idk */
      --light-accent-3: calc(var(--accent-h) + 5deg) 0% 36%; /* the mountain*/
  
      --dark-accent: calc(var(--accent-h) - 16.5deg) 0% 20%; /* menu under the header, tabs */
   
      --primary-complement: var(--complement-h) 0% 48.5%; /* city block */
      --light-complement: calc(var(--complement-h) + 12.5deg) 0% 75%; /* rating module text, other misc text */
      --dark-complement: var(--complement-h) 0% 81.75%; /* text color */
   
      --assist-color: var(--accent-h) 0% 46%; /* rating module, top bar */
  
      --header-title: "SCP Foundation";
      --header-subtitle: "Division of Alagaddan Studies";
  }
  
  #header::before {
      background-color: hsl(var(--light-accent-1));
      filter: invert(90%);
  }
  
  #header h1 a {
      color: hsl(var(--light-accent-1));
  }
  
  #top-bar div:is(.top-bar, .mobile-top-bar) > ul > li > a:any-link {
      color: hsl(var(--dark-accent-1));
  }
  
  .page-source, .code {
      border: none;
      color: hsl(var(--dark-accent));
      background-color: hsl(var(--light-complement));
  }
  
  .city-block {
      background-color: hsl(var(--primary-complement) / 0.5);
  }
  
  /* ACS color modification based on Midnight Rush/Flopstyle */
  
  div.anom-bar-container {
    --five-color: 150, 150, 150;   /*  red  */
    --four-color: 150, 150, 150;   /*  orange  */
    --three-color: 150, 150, 150;   /*  yellow  */
    --two-color: 150, 150, 150;   /*  blue  */
    --one-color: 150, 150, 150;   /*  green  */
   
    --white-bar: 207, 207, 207;
    --lg-bar: 118, 118, 130;
    --gray-bg: 66, 66, 72;
  }
  
  div.anom-bar-container .danger-diamond > .arrows{
     /* Inverted Arrows */
       background-color: rgb(208, 208, 208) !important;
  }
  
  div.anom-bar-container .anom-bar > .bottom-box{
     /* Horizontal Bar */
       -webkit-box-shadow: 0 -.5rem 0 0 rgb(208, 208, 208) !important;
       -moz-box-shadow: 0 -.5rem 0 0 rgb(208, 208, 208) !important;
       box-shadow: 0 -.5rem 0 0 rgb(208, 208, 208) !important;
  }
  div.anom-bar-container .bottom-box > .diamond-part{
     /* Vertical Bar */
       -webkit-box-shadow: -.5rem 0 0 0 rgb(208, 208, 208) !important;
       -moz-box-shadow: -.5rem 0 0 0 rgb(208, 208, 208) !important;
       box-shadow: -.5rem 0 0 0 rgb(208, 208, 208) !important;
  }
  
  .anom-bar-container.keter .text-part .main-class,
  .anom-bar-container.vlam .text-part .disrupt-class,
  .anom-bar-container.danger .text-part .risk-class {
      background-color: rgba(150, 150, 150, 0.35) !important;
  }
  
  .danger-diamond > .quadrants > div {
      background-color: rgba(150, 150, 150, 0.35) !important;
  }
  

• @import url('https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=White+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
  #page-title {
      display: none;
  }
  .splash h1 {
      font-size: 700%;
      font-family: 'Domine', serif;
      font-weight: 700;
      text-align: center;
      margin-bottom: -2rem;
      letter-spacing: 0.25rem;
  }
  .splash h3 {
      font-size: 300%;
      font-family: 'Domine', serif;
      font-weight: 700;
      text-align: center;
  }
  .splash {
      font-family: 'Domine', serif;
      font-weight: 400;
      text-align: center;
  }
  #page-content > p {
      text-justify: inter-word;
      text-align: justify;
      text-indent: 1rem;
      font-family: "White Text", serif;
      font-size: 1.2rem;
  }
  .chapterstart {
      font-size: 4rem;
      line-height: 8rem;
  }
  .links {
  display: block;
  text-align: center;
  }
  .links a {
      background: rgb(var(--bright-accent));
      color: white;
      padding: 3px;
      border-radius: 4px;
      font-family: monospace;
      white-space: nowrap;
  }
  .links a:visited {
      color: white;
  }
  .links a:hover {
      color:rgb(var(--bright-accent));
  }

Inline Styles

• margin-right: 2em; margin-top: -10px;

Includes

• component:preview
• :scp-wiki:theme:sunside [info]
• :scp-wiki:info:start [info]
• :scp-wiki:info:end [info]
• :scp-wiki:component:license-box [info]
• :scp-wiki:component:license-box-end [info]

CSS Classes

• (none)

Page Source

=====
[[include component:preview
text= An artist with ambition but no idea what he wants jouneys to the Hanged King's city, and becomes  chained to the city.]]
=====



[[include :scp-wiki:theme:sunside]]

[[module css]]
:root{

/*
Variable guide:
I forgot which variable controls what, sorry
*/
    --accent-h: 276deg;

    --primary-accent-1: var(--accent-h) 0% 60%; /* the 2nd layer of the city, table of contents text, city block and blockquote border, info button on the rating module */
    --primary-accent-2: calc(var(--accent-h) - 5deg) 0% 71%; /* the 1st layer of the city, headings */
    --primary-accent-3: calc(var(--accent-h) - 15deg) 0% 68%; /* hr */

    --light-accent-1: calc(var(--accent-h) + 12.5deg) 0% 10%; /* bg, header title */
    --light-accent-2: calc(var(--accent-h) + 7.5deg) 0% 80.5%; /* idk */
    --light-accent-3: calc(var(--accent-h) + 5deg) 0% 36%; /* the mountain*/

    --dark-accent: calc(var(--accent-h) - 16.5deg) 0% 20%; /* menu under the header, tabs */
 
    --primary-complement: var(--complement-h) 0% 48.5%; /* city block */
    --light-complement: calc(var(--complement-h) + 12.5deg) 0% 75%; /* rating module text, other misc text */
    --dark-complement: var(--complement-h) 0% 81.75%; /* text color */
 
    --assist-color: var(--accent-h) 0% 46%; /* rating module, top bar */

    --header-title: "SCP Foundation";
    --header-subtitle: "Division of Alagaddan Studies";
}

#header::before {
    background-color: hsl(var(--light-accent-1));
    filter: invert(90%);
}

#header h1 a {
    color: hsl(var(--light-accent-1));
}

#top-bar div:is(.top-bar, .mobile-top-bar) > ul > li > a:any-link {
    color: hsl(var(--dark-accent-1));
}

.page-source, .code {
    border: none;
    color: hsl(var(--dark-accent));
    background-color: hsl(var(--light-complement));
}

.city-block {
    background-color: hsl(var(--primary-complement) / 0.5);
}

/* ACS color modification based on Midnight Rush/Flopstyle */

div.anom-bar-container {
  --five-color: 150, 150, 150;   /*  red  */
  --four-color: 150, 150, 150;   /*  orange  */
  --three-color: 150, 150, 150;   /*  yellow  */
  --two-color: 150, 150, 150;   /*  blue  */
  --one-color: 150, 150, 150;   /*  green  */
 
  --white-bar: 207, 207, 207;
  --lg-bar: 118, 118, 130;
  --gray-bg: 66, 66, 72;
}

div.anom-bar-container .danger-diamond > .arrows{
   /* Inverted Arrows */
     background-color: rgb(208, 208, 208) !important;
}

div.anom-bar-container .anom-bar > .bottom-box{
   /* Horizontal Bar */
     -webkit-box-shadow: 0 -.5rem 0 0 rgb(208, 208, 208) !important;
     -moz-box-shadow: 0 -.5rem 0 0 rgb(208, 208, 208) !important;
     box-shadow: 0 -.5rem 0 0 rgb(208, 208, 208) !important;
}
div.anom-bar-container .bottom-box > .diamond-part{
   /* Vertical Bar */
     -webkit-box-shadow: -.5rem 0 0 0 rgb(208, 208, 208) !important;
     -moz-box-shadow: -.5rem 0 0 0 rgb(208, 208, 208) !important;
     box-shadow: -.5rem 0 0 0 rgb(208, 208, 208) !important;
}

.anom-bar-container.keter .text-part .main-class,
.anom-bar-container.vlam .text-part .disrupt-class,
.anom-bar-container.danger .text-part .risk-class {
    background-color: rgba(150, 150, 150, 0.35) !important;
}

.danger-diamond > .quadrants > div {
    background-color: rgba(150, 150, 150, 0.35) !important;
}

[[/module]]

[[module CSS]]
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=White+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
#page-title {
    display: none;
}
.splash h1 {
    font-size: 700%;
    font-family: 'Domine', serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: -2rem;
    letter-spacing: 0.25rem;
}
.splash h3 {
    font-size: 300%;
    font-family: 'Domine', serif;
    font-weight: 700;
    text-align: center;
}
.splash {
    font-family: 'Domine', serif;
    font-weight: 400;
    text-align: center;
}
#page-content > p {
    text-justify: inter-word;
    text-align: justify;
    text-indent: 1rem;
    font-family: "White Text", serif;
    font-size: 1.2rem;
}
.chapterstart {
    font-size: 4rem;
    line-height: 8rem;
}
.links {
display: block;
text-align: center;
}
.links a {
    background: rgb(var(--bright-accent));
    color: white;
    padding: 3px;
    border-radius: 4px;
    font-family: monospace;
    white-space: nowrap;
}
.links a:visited {
    color: white;
}
.links a:hover {
    color:rgb(var(--bright-accent));
}
[[/module]]


[[include :scp-wiki:info:start]]
[[div style="margin-right: 2em; margin-top: -10px;"]]
^^by [[*user Strange Matter]] & [[*user TboneBerryhill]]^^
[[/div]]
[[include :scp-wiki:info:end]]



[[=]]
+ The Master of Keys
[[/=]]

= He came with ink-stained hands and dreams,
= A nameless soul adrift in streams.
= Through gates unseen, he sought the way,
= Where echoes wept and colors swayed.
= **.**
= A painter lost in shifting halls,
= Each frame alive upon the walls.
= Yet none would claim his name or art,
= For Alagadda stole the heart.
= **.**
= In golden masks and silken guise,
= They laughed with hollow, empty eyes.
= "Create," they sang, "and we shall see,
= What fate, dear artist, waits for thee."

-----------

= The keys were placed within his hand,
= A gift, a burden, a demand.
= No longer brush, no longer ink,
= But locks and doors that bid him think.
= **.**
= He turned the way for those who knocked,
= With keys of brass and gates he locked.
= No mark of his, no stroke, no line,
= Only passage, not design.
= **.**
= The Lords would feast, the Lords would call,
= He bowed his head and bore it all.
= His passion dimmed, his purpose torn,
= A master now, yet still forlorn.

-----------

= He traced the halls in weary tread,
= A ghost among the silken dead.
= His hands once made, his hands once spoke,
= Now only turned the rusting yoke.
= **.**
= "Is this my craft? Is this my fate?"
= He asked the masks who bore no weight.
= No answer came, no praise, no scorn,
= Only laughter, twisted, worn.
= **.**
= He cracked the locks, he forced the door,
= A master bound would serve no more.
= Yet in his flight, in his dissent,
= The Lords decreed his art’s lament.

-----------

= The keys fell silent, cold, unmade,
= His hollowed hands began to fade.
= No brush, no lock, no voice, no frame,
= And with his death, the gates unchained.
= **.**
= Now Alagadda breathes once more,
= The passage wide, the open door.
= Yet echoes whisper through the keys,
= His art was lost upon the breeze.
= **.**
= No name remains, no portrait set,
= No tale to tell, no vain regret.
= For artists trapped in endless halls,
= Are never missed when silence calls.






@@ @@

@@ @@



[[include :scp-wiki:component:license-box
|author=TboneBerryhill]]
[[include :scp-wiki:component:license-box-end]]