Rottingraisins' Directory

Link to article: Rottingraisins' Directory.

@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn+SC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sekuya&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

/* ===Header=== */

#page-title {
    display: none;
}

:root {
 --logo-image: none;
 --header-title: " ";
 --header-subtitle: " ";

 --gradient-header: url(https://scp-wiki.wdfiles.com/local--files/rottingraisins/Header.png);

 --header-height-on-desktop: 9rem;
 --header-height-on-mobile: 4rem;
--diagonal-stripes: none;

/* ===Fonts=== */
 --body-font: Vollkorn, serif;
 --UI-font: Vollkorn, serif;
 --header-font: Vollkorn SC, serif;
 --title-font: Vollkorn SC, serif;

/* ===Colors=== */
 --alabaster: 236, 230, 216;
 --licorice: 25, 16, 10;
--cornflower-blue: 104, 123, 176;
 --sea-blue: 15, 40, 84;
 --navy: 8, 14, 28;

  --swatch-background: var(--sea-blue);
  --background-gradient-color: var(--navy);
  --background-gradient-distance: 100rem;

  --bright-accent: var(--cornflower-blue);
  --medium-accent: var(--cornflower-blue);
  --dark-accent: var(--navy);
  --toggle-border-color: rgb(var(--navy));
  --toggle-icon-color: rgb(var(--navy));
  --barColour: var(--navy);

  --swatch-topmenu-bg-color: var(--sea-blue);
  --swatch-topmenu-border-color: var(--sea-blue);

  --swatch-text-dark: var(--alabaster);
  --swatch-text-light: var(--licorice);
  --swatch-menubg-color: var(--alabaster);
  --link-color: var(--cornflower-blue);
  --visited-link-color: var(--cornflower-blue)

   --rating-module-button-plus-color: var(--cornflower-blue);
   --rating-module-button-negative-color: var(--licorice);
   --rating-module-button-cancel-color: var(--cornflower-blue);
   --rating-module-button-credit-color: var(--cornflower-blue);
   --rating-module-bg-color: var(--alabaster);
   --rating-module-bottom-border-color: var(--cornflower-blue);
   --rating-module-text-color: var(--licorice);
   --rating-module-text-hover-color: var(--alabaster);

    --ui-button-bg: var(--alabaster);
    --ui-button-txt: var(--licorice);
    --ui-button-hover-bg: var(--cornflower-blue);
    --ui-button-hover-txt: var(--alabaster);
    --ui-button-hover-outline: var(--cornflower-blue);
}

#top-bar {
    --topmenu-category-color: var(--alabaster);
    --topmenu-category-hover-color: var(--alabaster);
    --topmenu-category-hover-bg: 0, 0, 0, 0;
    --topmenu-hover-border-color: var(--alabaster);

    --dropdown-bg-color: var(--sea-blue), 0.9;
    --dropdown-border-color: var(--navy), 0.5;
    --dropdown-links-color: var(--alabaster);
    --dropdown-links-bg-color: 0, 0, 0, 0;
}

#main-content {
    --ui-icon-color: var(--alabaster);
    --ui-icon-hover-color: var(--alabaster);
    }

#footer {
    --footer-text-color: var(--alabaster);
    --footer-link-color: var(--cornflower-blue);
    --footer-link-hover-color: var(--alabaster);
    --footer-link-hover-bg-color: var(--cornflower-blue);
}

/* ===Structure Elements=== */

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(10px, 1fr));
    align-items: stretch;
    column-gap: 0.75rem;
    row-gap: 0.75rem;
    grid-auto-flow: dense;
    width: auto;
    max-width: 100vw;
}

.box {
    position: relative;
    padding: 5px;
    transform: translateZ(0);
    box-sizing: border-box;
    z-index: 0;
    place-self: stretch;
    transition: all 0.5s ease-in-out;
    height: auto;
    display: flex;
    flex-direction: column;
}

.box:hover,
.box:focus,
.box:active {
    transform: scale(1.05);
    z-index: 1;
    transition: 0.5s;
}

/* ===Comics=== */
.comic {
    color: #ECE6D8;
    padding-bottom: 15px;
    padding-top: 15px;
    border-bottom: 3px solid #ECE6D8;
    text-align: center;
}

.comic img {
    filter: sepia(90%) hue-rotate(-20deg) brightness(80%) saturate(100%);
    transition: all 0.5s ease-in-out;
    padding-bottom: 10px;
    width: 90%;
    margin:auto;
}

.comic:hover img {
    filter: sepia(10%) hue-rotate(-20deg) brightness(100%) saturate(100%);
    transition: 0.5s;
}

.title {
    font-family: "Vollkorn SC", serif;
    font-size: 130%;
    text-align: center;
}

a.comiclink:link, a.comiclink:visited {color:#ECE6D8;text-decoration:none;}
a.comiclink:hover, a.comiclink:active {color:#687bb0}

/* ===SCPs=== */
.scp {
    color: #19100A;
    background: #ECE6D8;
    text-align: center;
}

.scp img{
    filter: grayscale(100%) brightness(120%);
    mix-blend-mode: multiply;
    height: 100px;
    width: 100%;
    object-fit: cover;
    padding-top: 10px;
    padding-bottom: 10px;
}

.scp-no {
    font-family: "Sekuya", system-ui;
    font-size: 150%;
    padding: 0;
    line-height: 15px;
    height: 15px;
    text-align: left;
}

a.scplink:link, a.scplink:visited {color: #19100A;text-decoration:none;}
a.scplink:hover, a.scplink:active {color:#687bb0;}

/* ===Tales=== */
.tale {
    color: #19100A;
    background-image: url(http://scp-wiki.wikidot.com/local--files/scp-8166/paper-min%5B1%5D.png);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tale-name {
    font-family: "Fredericka the Great", serif;
    font-size: 150%;
}

a.talelink:link, a.talelink:visited {color: #19100A;background:none;text-decoration:none;}
a.talelink:hover, a.talelink:active {color:#687bb0;}

/* ===Art=== */

.art {
    background-image: url(https://live.staticflickr.com/65535/54970553787_5c4627d205_z.jpg);
    background-position: 45% 20%;
    background-size: 200%;
    filter: grayscale(100%) sepia(40%);
    transition: all 0.5s ease-in-out;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}

.art:hover, 
.art:focus, .art:active {
    background-position: 45% 60%;
    filter: sepia(30%);
    transition: 0.5s;
}

.artwork {
   font-family: "Sekuya", system-ui;
   font-size: 130%;
   padding: 5px;
   color:#ECE6D8; 
   background:#19100A;
}

a.artlink:link, a.artlink:visited {
   font-family:"Vollkorn SC", serif;
    font-size: 90%;
   padding: 5px;
   color:#ECE6D8; 
   background:#19100A;
   text-decoration:none;
}

a.artlink:hover, a.artlink:active {background:#687bb0}

/* Mobile Parity */
@media (max-width: 768px) {

    .grid {
        grid-template-columns: repeat(2, minmax(10px, 1fr));
        align-items: stretch;
        column-gap: 0.75rem;
        row-gap: 0.75rem;
        grid-auto-flow: dense;
        width: auto;
        max-width: 100vw;
    }
}

```
font-size: 175%;
```
```
font-size: 128%
```
```
font-size: 112%
```
```
200px
```

```
title
```
```
grid
```
```
box
```
```
comic
```
```
comiclink
```
```
title
```
```
box
```
```
scp
```
```
scplink
```
```
scp-no
```
```
title
```
```
box
```
```
scp
```
```
scplink
```
```
scp-no
```
```
title
```
```
box
```
```
tale
```
```
talelink
```
```
tale-name
```
```
box
```
```
comic
```
```
comiclink
```
```
title
```
```
box
```
```
tale
```
```
talelink
```
```
tale-name
```
```
box
```
```
scp
```
```
scplink
```
```
scp-no
```
```
title
```
```
box
```
```
art
```
```
artwork
```
```
artlink
```
```
artlink
```
```
box
```
```
comic
```
```
comiclink
```
```
title
```
```
box
```
```
comic
```
```
comiclink
```
```
title
```

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

[[module css]]
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn+SC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sekuya&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');

/* ===Header=== */

#page-title {
    display: none;
}

:root {
 --logo-image: none;
 --header-title: " ";
 --header-subtitle: " ";

 --gradient-header: url(https://scp-wiki.wdfiles.com/local--files/rottingraisins/Header.png);

 --header-height-on-desktop: 9rem;
 --header-height-on-mobile: 4rem;
--diagonal-stripes: none;

/* ===Fonts=== */
 --body-font: Vollkorn, serif;
 --UI-font: Vollkorn, serif;
 --header-font: Vollkorn SC, serif;
 --title-font: Vollkorn SC, serif;

/* ===Colors=== */
 --alabaster: 236, 230, 216;
 --licorice: 25, 16, 10;
--cornflower-blue: 104, 123, 176;
 --sea-blue: 15, 40, 84;
 --navy: 8, 14, 28;

  --swatch-background: var(--sea-blue);
  --background-gradient-color: var(--navy);
  --background-gradient-distance: 100rem;

  --bright-accent: var(--cornflower-blue);
  --medium-accent: var(--cornflower-blue);
  --dark-accent: var(--navy);
  --toggle-border-color: rgb(var(--navy));
  --toggle-icon-color: rgb(var(--navy));
  --barColour: var(--navy);

  --swatch-topmenu-bg-color: var(--sea-blue);
  --swatch-topmenu-border-color: var(--sea-blue);

  --swatch-text-dark: var(--alabaster);
  --swatch-text-light: var(--licorice);
  --swatch-menubg-color: var(--alabaster);
  --link-color: var(--cornflower-blue);
  --visited-link-color: var(--cornflower-blue)

   --rating-module-button-plus-color: var(--cornflower-blue);
   --rating-module-button-negative-color: var(--licorice);
   --rating-module-button-cancel-color: var(--cornflower-blue);
   --rating-module-button-credit-color: var(--cornflower-blue);
   --rating-module-bg-color: var(--alabaster);
   --rating-module-bottom-border-color: var(--cornflower-blue);
   --rating-module-text-color: var(--licorice);
   --rating-module-text-hover-color: var(--alabaster);

    --ui-button-bg: var(--alabaster);
    --ui-button-txt: var(--licorice);
    --ui-button-hover-bg: var(--cornflower-blue);
    --ui-button-hover-txt: var(--alabaster);
    --ui-button-hover-outline: var(--cornflower-blue);
}

#top-bar {
    --topmenu-category-color: var(--alabaster);
    --topmenu-category-hover-color: var(--alabaster);
    --topmenu-category-hover-bg: 0, 0, 0, 0;
    --topmenu-hover-border-color: var(--alabaster);

    --dropdown-bg-color: var(--sea-blue), 0.9;
    --dropdown-border-color: var(--navy), 0.5;
    --dropdown-links-color: var(--alabaster);
    --dropdown-links-bg-color: 0, 0, 0, 0;
}

#main-content {
    --ui-icon-color: var(--alabaster);
    --ui-icon-hover-color: var(--alabaster);
    }

#footer {
    --footer-text-color: var(--alabaster);
    --footer-link-color: var(--cornflower-blue);
    --footer-link-hover-color: var(--alabaster);
    --footer-link-hover-bg-color: var(--cornflower-blue);
}

/* ===Structure Elements=== */

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(10px, 1fr));
    align-items: stretch;
    column-gap: 0.75rem;
    row-gap: 0.75rem;
    grid-auto-flow: dense;
    width: auto;
    max-width: 100vw;
}

.box {
    position: relative;
    padding: 5px;
    transform: translateZ(0);
    box-sizing: border-box;
    z-index: 0;
    place-self: stretch;
    transition: all 0.5s ease-in-out;
    height: auto;
    display: flex;
    flex-direction: column;
}

.box:hover,
.box:focus,
.box:active {
    transform: scale(1.05);
    z-index: 1;
    transition: 0.5s;
}

/* ===Comics=== */
.comic {
    color: #ECE6D8;
    padding-bottom: 15px;
    padding-top: 15px;
    border-bottom: 3px solid #ECE6D8;
    text-align: center;
}

.comic img {
    filter: sepia(90%) hue-rotate(-20deg) brightness(80%) saturate(100%);
    transition: all 0.5s ease-in-out;
    padding-bottom: 10px;
    width: 90%;
    margin:auto;
}

.comic:hover img {
    filter: sepia(10%) hue-rotate(-20deg) brightness(100%) saturate(100%);
    transition: 0.5s;
}

.title {
    font-family: "Vollkorn SC", serif;
    font-size: 130%;
    text-align: center;
}

a.comiclink:link, a.comiclink:visited {color:#ECE6D8;text-decoration:none;}
a.comiclink:hover, a.comiclink:active {color:#687bb0}

/* ===SCPs=== */
.scp {
    color: #19100A;
    background: #ECE6D8;
    text-align: center;
}

.scp img{
    filter: grayscale(100%) brightness(120%);
    mix-blend-mode: multiply;
    height: 100px;
    width: 100%;
    object-fit: cover;
    padding-top: 10px;
    padding-bottom: 10px;
}

.scp-no {
    font-family: "Sekuya", system-ui;
    font-size: 150%;
    padding: 0;
    line-height: 15px;
    height: 15px;
    text-align: left;
}

a.scplink:link, a.scplink:visited {color: #19100A;text-decoration:none;}
a.scplink:hover, a.scplink:active {color:#687bb0;}

/* ===Tales=== */
.tale {
    color: #19100A;
    background-image: url(http://scp-wiki.wikidot.com/local--files/scp-8166/paper-min%5B1%5D.png);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tale-name {
    font-family: "Fredericka the Great", serif;
    font-size: 150%;
}

a.talelink:link, a.talelink:visited {color: #19100A;background:none;text-decoration:none;}
a.talelink:hover, a.talelink:active {color:#687bb0;}

/* ===Art=== */

.art {
    background-image: url(https://live.staticflickr.com/65535/54970553787_5c4627d205_z.jpg);
    background-position: 45% 20%;
    background-size: 200%;
    filter: grayscale(100%) sepia(40%);
    transition: all 0.5s ease-in-out;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}

.art:hover, 
.art:focus, .art:active {
    background-position: 45% 60%;
    filter: sepia(30%);
    transition: 0.5s;
}

.artwork {
   font-family: "Sekuya", system-ui;
   font-size: 130%;
   padding: 5px;
   color:#ECE6D8; 
   background:#19100A;
}

a.artlink:link, a.artlink:visited {
   font-family:"Vollkorn SC", serif;
    font-size: 90%;
   padding: 5px;
   color:#ECE6D8; 
   background:#19100A;
   text-decoration:none;
}

a.artlink:hover, a.artlink:active {background:#687bb0}

/* Mobile Parity */
@media (max-width: 768px) {

    .grid {
        grid-template-columns: repeat(2, minmax(10px, 1fr));
        align-items: stretch;
        column-gap: 0.75rem;
        row-gap: 0.75rem;
        grid-auto-flow: dense;
        width: auto;
        max-width: 100vw;
    }
}

[[/module]]

[[>]]
[[module rate]]
[[/>]]

[[span class="title" style="font-size: 175%;"]]In order of publication:[[/span]]

[[div class="grid"]]

[[div class="box comic"]]
[[a class="comiclink" href="https://scp-wiki.wikidot.com/cheers-to-new-beginnings"]]
[[image https://scp-wiki.wdfiles.com/local--files/cheers-to-new-beginnings/Preview%20Image]]
[[span class="title"]]Cheers to New Beginnings[[/span]]
[[/a]]
New Year's Eve at the Foundation's most desolate site
[[/div]]

[[div class="box scp"]]
[[a class="scplink" href="https://scp-wiki.wikidot.com/scp-8441"]]
[[span class="scp-no"]]SCP-8441[[/span]]
[[span class="title" style="font-size: 128%"]]Vampire Spruce[[/span]]
[[/a]]
[[image https://scp-wiki.wdfiles.com/local--resized-images/scp-8441/SCP-8441/medium.jpg]]
//"Found a dead rabbit by the tree again this morning. The little thing impaled itself on a branch."//
[[/div]]

[[div class="box scp"]]
[[a class="scplink" href="https://scp-wiki.wikidot.com/scp-8720"]]
[[span class="scp-no"]]SCP-8720[[/span]]
[[span class="title" style="font-size: 112%"]]Unremarkability[[/span]]
[[/a]]
[[image https://scp-wiki.wikidot.com/local--files/scp-8720/SCP-8720-1]]
Some people just fail to make an impact.
[[/div]]

[[div class="box tale"]]
[[a class="talelink" href="https://scp-wiki.wikidot.com/cave-canem"]]
[[span class="tale-name"]]CAVE CANEM[[/span]]
༻❁༺
[[/a]]
//The world keeps turning. SCP-166 does not know his name.//
[[/div]]

[[div class="box comic"]]
[[a class="comiclink" href="https://scp-wiki.wikidot.com/we-both-know-how-this-ends"]]
[[image https://scp-wiki.wdfiles.com/local--files/we-both-know-how-this-ends/Preview%20Image]]
[[span class="title"]]We Both Know How This Ends[[/span]]
[[/a]]
About Alicja Kondraki and her more famous brother
[[/div]]

[[div class="box tale"]]
[[a class="talelink" href="https://scp-wiki.wikidot.com/secondhand-smoke"]]
[[span class="tale-name"]]SECONDHAND SMOKE[[/span]]
༻❁༺
[[/a]]
//There is comfort in routine.//
[[/div]]

[[div class="box scp"]]
[[a class="scplink" href="https://scp-wiki.wikidot.com/scp-8191"]]
[[span class="scp-no"]]SCP-8191[[/span]]
[[span class="title"]]Fisher Queen[[/span]]
[[/a]]
[[image https://scp-wiki.wdfiles.com/local--resized-images/fragment:scp-8191-0/SCP-8191/medium.jpg]]
//"Kate. Kate. I found you."//
[[/div]]

[[div class="box art" href="https://scp-wiki.wikidot.com/art:they-thought-he-was-your-boyfriend"]]
[[span class="artwork" style="200px"]]Artwork [[/span]]
@@ @@
[[a class="artlink" href="https://scp-wiki.wikidot.com/art:rottingraisins"]] Art Page onsite [[/a]]
@@ @@
[[a class="artlink" href="https://rottingraisins.tumblr.com"]] Art Page offsite [[/a]]
[[/div]]

[[div class="box comic"]]
[[a class="comiclink" href="https://scp-wiki.wikidot.com/art:they-thought-he-was-your-boyfriend"]]
[[image https://scp-wiki.wdfiles.com/local--files/art%3Athey-thought-he-was-your-boyfriend/Preview%20Image]]
[[span class="title"]]They Thought He Was Your Boyfriend [[/span]]
[[/a]]
//"Can I tell you a secret, too?"//
[[/div]]

[[div class="box comic"]]
[[a class="comiclink" href="https://scp-wiki.wikidot.com/art:the-king-has-died"]]
[[image https://scp-wiki.wdfiles.com/local--files/art%3Athe-king-has-died/Preview%20Image]]
[[span class="title"]]The King Has Died [[/span]]
[[/a]]
//"You never know what orders people have, in this place."//
[[/div]]

[[/div]]

@@ @@

[[include :scp-wiki:component:license-box]]

> Filename: SCP-8441
> Author: Borealis55
> License: Public Domain
> Source Link: Wikimedia Commons

> **Filename:** SCP-8720-1
> **Author:** [[*user rottingraisins]]
> **License:** CC BY-SA 3.0
> **Derivative of:**
> ------
> **Name:** Scientists work on improving a new cholera vaccination inside a lab in IDDRB. (10720469596)
> **Author:** Department of Foreign Affairs and Trade
> **License:** CC BY-SA 4.0
> **Source Link:** [https://commons.wikimedia.org/w/index.php?curid=109252198 Wikimedia Commons]
> ------
> **Name:** hot latino bus rider - 2011
> **Author:** Tim Evanson
> **License:** CC BY-SA 2.0
> **Source Link:** [https://www.flickr.com/photos/23165290@N00/7483236852 flickr]

> **Name:** Everything else
> **Author:** [[*user rottingraisins]]
> **License:** CC BY-SA 4.0

[[include :scp-wiki:component:license-box-end]]

Rottingraisins' Directory

Module Styles

Inline Styles

Includes

CSS Classes

Page Source