173 Anniversary Hub

Link to article: 173 Anniversary Hub.

/* 173 Anniversary Hub
 * Based on Code by Woedenaz
**/

 :root{
   --red-mod: hsl(357, 90%, 75%, .35);
   --red-mod-2: hsl(357, 90%, 33%);

   --yellow-mod: hsl(69, 90%, 65%, .35);
   --yellow-mod-2: hsl(69, 90%, 33%);

   --green-mod: hsl(141, 90%, 75%, .35);
   --green-mod-2: hsl(141, 90%, 33%);

   --blue-mod: hsl(213, 90%, 75%, .35);
   --blue-mod-2: hsl(213, 90%, 33%);

   --purple-mod: hsl(285, 90%, 75%, .35);
   --purple-mod-2: hsl(285, 90%, 33%);
}

 .containment-chamber{
     position: relative;
     overflow: hidden;
     margin: 0 2rem 1rem;

     background-color: hsla(36, 57%, 68%, .55);
     border: solid .53rem transparent;
     border-radius: 4rem;
     box-shadow:
          inset 0 0 0 .27rem var(--milk),
          inset 0 0 0 .4rem var(--textColor);
     transition: all 600ms cubic-bezier(.45, .05, .55, .95);
}
 
 .containment-chamber:hover{
     background-color: transparent;
     border-radius: 4rem;
     transition: all 600ms cubic-bezier(.45, .05, .55, .95);
}

 .containment-chamber.red-mod:hover{
     background-color: var(--red-mod);
}

 .containment-chamber.yellow-mod:hover{
     background-color: var(--yellow-mod);
}

 .containment-chamber.green-mod:hover{
     background-color: var(--green-mod);
}

 .containment-chamber.blue-mod:hover{
     background-color: var(--blue-mod);
}

 .containment-chamber.purple-mod:hover{
     background-color: var(--purple-mod);
}

 .placard{
     position: relative;
     display: -ms-grid;
     display: grid;
     -ms-grid-columns: 1fr .5rem 2fr;
     grid-template-columns: 1fr 2fr;
     -ms-grid-rows: auto .5rem auto;
     grid-template-areas:
          "card-image wl-header"
          "card-image card-text";
     grid-gap: 0;
     gap: 0;
     padding: .27rem;

     color: var(--textColor);
     box-sizing: border-box;
     border-radius: 3rem;

     text-align: center;
     overflow: hidden;
}

 .placard > a:first-of-type{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     color: transparent;
     background: 0;

     user-select: none;
     z-index: 1;
}

 .placard > div.wl-headers,
 .placard > div.card-text,
 .placard > div.card-image{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
}

 .placard > div.wl-headers{
     -ms-grid-row: 1;
     -ms-grid-column: 3;
     grid-area: wl-header;
     padding: 0 1em;
}

 .placard > div.wl-headers > div{
     width: 100%;
     margin: 0;
     padding: 0;
}

 .placard > div.card-text{
     position: relative;
     bottom: 1em;
     -ms-grid-row: 3;
     -ms-grid-column: 3;
     grid-area: card-text;
     padding: 0 .5em;

     line-height: 1.5;
     text-decoration: underline;
     text-decoration-thickness: 0;
     text-decoration-color: rgba(228, 180, 28, 0);
     transition:
          text-decoration-thickness 150ms cubic-bezier(.4, 0, .2, 1),
          text-decoration-color 125ms cubic-bezier(.4, 0, .2, 1);
     text-underline-offset: 25%;
}

 .placard:hover > div.card-text,
 .placard:active > div.card-text{
     text-decoration: underline var(--chocolate);
     text-decoration-thickness: .0625rem;
     transition:
          text-decoration-thickness 150ms cubic-bezier(.4, 0, .2, 1),
          text-decoration-color 50ms cubic-bezier(.4, 0, .2, 1);
}

 .placard:focus-within > div.card-text{
     text-decoration: underline var(--chocolate);
     text-decoration-thickness: .0625rem;
     transition:
          text-decoration-thickness 150ms cubic-bezier(.4, 0, .2, 1),
          text-decoration-color 50ms cubic-bezier(.4, 0, .2, 1);
}

 .placard > div.card-image{
     -ms-grid-row: 1;
     -ms-grid-row-span: 3;
     -ms-grid-column: 1;
     grid-area: card-image;
     height: min-content;
     margin: 1.5vw;
     -ms-grid-row-align: center;
     align-self: center;

     border-radius: 50%;

     overflow: hidden;
}

 .placard > div.card-image img{
     -o-object-fit: contain;
     object-fit: contain;
     width: 100%;
     max-width: 15.625rem;
     margin: .25rem;

     border-radius: .5rem;
}

 .placard .fake-h2{
     display: inline-block;

     font-family: var(--title-font);
     letter-spacing: .0625rem;
}

 .placard .fake-h2{
     margin-top: -.5em;
     margin-bottom: .7em;

     font-size: 1.5em;
}

@media (max-width: 48rem){
     .placard{
          grid-template-areas:
               "wl-header wl-header"
               "card-image card-text";
    }
     .placard > div.wl-headers{
         -ms-grid-row: 1;
         -ms-grid-column: 1;
         -ms-grid-column-span: 3;
    }
     .placard > div.card-text{
         -ms-grid-row: 3;
         -ms-grid-column: 3;
    }
     .placard > div.card-image{
         -ms-grid-row: 3;
         -ms-grid-row-span: 1;
         -ms-grid-column: 1;
    }
}
 @media (max-width: 25.875rem){
     .placard{
         grid-template-areas:
               "wl-header wl-header"
               "card-image card-image"
               "card-text card-text";
    }
     .placard > div.card-image{
         -ms-grid-column-align: center;
         justify-self: center;
         height: auto;
    }
     .placard > div.card-image img{
         max-height: 20vh;
    }
     .placard > div.wl-headers{
         -ms-grid-row: 1;
         -ms-grid-column: 1;
         -ms-grid-column-span: 3;
    }
     .placard > div.card-text{
         -ms-grid-row: 5;
         -ms-grid-column: 1;
         -ms-grid-column-span: 3;
    }
     .placard > div.card-image{
         -ms-grid-row: 3;
         -ms-grid-row-span: 1;
         -ms-grid-column: 1;
         -ms-grid-column-span: 3;
    }
}

```
border-color: var(--red-mod-2)
```
```
border-color: var(--yellow-mod-2)
```
```
border-color: var(--green-mod-2)
```
```
border-color: var(--blue-mod-2)
```
```
border-color: var(--purple-mod-2)
```

```
containment-chamber
```
```
red-mod
```
```
placard
```
```
card-image
```
```
wl-headers
```
```
fake-h2
```
```
card-text
```
```
containment-chamber
```
```
yellow-mod
```
```
placard
```
```
card-image
```
```
wl-headers
```
```
fake-h2
```
```
card-text
```
```
containment-chamber
```
```
green-mod
```
```
placard
```
```
card-image
```
```
wl-headers
```
```
fake-h2
```
```
card-text
```
```
containment-chamber
```
```
blue-mod
```
```
placard
```
```
card-image
```
```
wl-headers
```
```
fake-h2
```
```
card-text
```
```
containment-chamber
```
```
purple-mod
```
```
placard
```
```
card-image
```
```
wl-headers
```
```
fake-h2
```
```
card-text
```

[[include :scp-wiki:theme:pack-of-peanuts]]

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

++ On the 22nd of June, 2007, a user by the name of //S. S. Walrus// (later and more commonly known as //Moto42//) made the original SCP-173 post onto the /x/ board of 4chan. You can see an archived view of the post [https://archive.ph/QD9UF here]! This was the origin of SCP as we know it. 15 years and almost 7,000 SCP articles later with numerous tales, formats, and other kinds of pages, the SCP Foundation project is still going strong thanks to our vibrant community both on and off the site!
----
[[div_ class="containment-chamber red-mod" style="border-color: var(--red-mod-2)"]]
  [[div_ class="placard"]]
    [[a href="https://scp-wiki.wikidot.com/173thankyouletter" title="Staff Letter to the Community"]]Staff Letter to the Community[[/a]]
      [[div_ class="card-image"]]
        [[image https://scp-wiki.wdfiles.com/local--files/173-anniversary-hub/173-icon.png]]
      [[/div]]
      [[div_ class="wl-headers"]]
        [[div_ class="fake-h2"]]
Staff Letter to the Community
        [[/div]]
      [[/div]]
    [[div_ class="card-text"]]
Coordinated by our Community Outreach team, we have written a short letter to the wonderful userbase of the SCP Wiki. Additionally, many of us have provided responses on things we are thankful for concerning SCP. Stop by and tell us what YOU are thankful for!
    [[/div]]
  [[/div]]
[[/div]]


[[div_ class="containment-chamber yellow-mod" style="border-color: var(--yellow-mod-2)"]]
  [[div_ class="placard"]]
    [[a href="https://docs.google.com/forms/d/1wwIIN8uhnvalLgN6ZrBXQrwl77dS_mnD8oVMZNZ6wao/viewform?edit_requested=true" title="Your Origin on the SCP Wiki Survey"]]Your Origin on the SCP Wiki Survey[[/a]]
      [[div_ class="card-image"]]
        [[image https://scp-wiki.wdfiles.com/local--files/173-anniversary-hub/173-icon.png]]
      [[/div]]
      [[div_ class="wl-headers"]]
        [[div_ class="fake-h2"]]
Your Origin on the SCP Wiki Survey
        [[/div]]
      [[/div]]
    [[div_ class="card-text"]]
As we celebrate the 15th birthday of our origin story, we would like to know how you happened to come across the SCP Wiki. Please stop by and fill out this one-question survey!
    [[/div]]
  [[/div]]
[[/div]]


[[div_ class="containment-chamber green-mod" style="border-color: var(--green-mod-2)"]]
  [[div_ class="placard"]]
    [[a href="https://scp-wiki.wikidot.com/news-06-2022" title="An Investigation on the History of the Original Image for 173"]]An Investigation on the History of the Original Image for 173[[/a]]
      [[div_ class="card-image"]]
        [[image https://scp-wiki.wdfiles.com/local--files/173-anniversary-hub/173-icon.png]]
      [[/div]]
      [[div_ class="wl-headers"]]
        [[div_ class="fake-h2"]]
An Investigation on the History of the Original Image for 173
        [[/div]]
      [[/div]]
    [[div_ class="card-text"]]
The longstanding image that was previously on 173 was mired in controversy for quite some time. One of the members of our Site News team has completed an investigation into the image and its storied past.
    [[/div]]
  [[/div]]
[[/div]]


[[div_ class="containment-chamber blue-mod" style="border-color: var(--blue-mod-2)"]]
  [[div_ class="placard"]]
    [[a href="https://scp-wiki.wikidot.com/peanut-gallery" title="The SCP-173 Redesign Collab Hub"]]The SCP-173 Redesign Collab Hub[[/a]]
      [[div_ class="card-image"]]
        [[image https://scp-wiki.wdfiles.com/local--files/173-anniversary-hub/173-icon.png]]
      [[/div]]
      [[div_ class="wl-headers"]]
        [[div_ class="fake-h2"]]
The SCP-173 Redesign Collab Hub
        [[/div]]
      [[/div]]
    [[div_ class="card-text"]]
In light of the removal of the original image and the author's desire to not have it replaced, we have had artists from all over contribute their own renditions of 173. The Redesign Hub is the fruits of their labor separated into a number of galleries. Check them out!
    [[/div]]
  [[/div]]
[[/div]]


[[div_ class="containment-chamber purple-mod" style="border-color: var(--purple-mod-2)"]]
  [[div_ class="placard"]]
    [[a href="https://twitter.com/scpwiki/status/1539594065070936064?s=20&t=v6Umpbepb92yheXkDvUSng" title="Create Art Showing 173 Celebrating its Birthday!"]]Create Art Showing 173 Celebrating its Birthday![[/a]]
      [[div_ class="card-image"]]
        [[image https://scp-wiki.wdfiles.com/local--files/173-anniversary-hub/173-icon.png]]
      [[/div]]
      [[div_ class="wl-headers"]]
        [[div_ class="fake-h2"]]
Create Art Showing 173 Celebrating its Birthday!
        [[/div]]
      [[/div]]
    [[div_ class="card-text"]]
Coordinated by our Internet Outreach team, we are conducting a little art contest to celebrate the birthday of our beloved "peanut". The prompt is to create a rendition of SCP-173 celebrating its own birthday! The overall winner will be displayed on the front page of the Wiki for a week in July and we will select some others to be displayed as a gallery for the Redesign Hub! Click here for further details!
    [[/div]]
  [[/div]]
[[/div]]
-----
++ It has been 15 years since the concept behind SCP first started rolling. During that time, so many people have been able to obtain so much enjoyment and creative involvement from this massive collaborative writing project we call the SCP Foundation Wiki. It is our sincere hope on staff that we are all able to see another wonderful 15 years together with such a great community such as yourselves.

+ Happy birthday, 173!


[[=]]
^^Special thanks to [[*user Lt Flops]] for the wonderful theme!^^
[[/=]]


[[module CSS]]
/* 173 Anniversary Hub
 * Based on Code by Woedenaz
**/

 :root{
   --red-mod: hsl(357, 90%, 75%, .35);
   --red-mod-2: hsl(357, 90%, 33%);

   --yellow-mod: hsl(69, 90%, 65%, .35);
   --yellow-mod-2: hsl(69, 90%, 33%);

   --green-mod: hsl(141, 90%, 75%, .35);
   --green-mod-2: hsl(141, 90%, 33%);

   --blue-mod: hsl(213, 90%, 75%, .35);
   --blue-mod-2: hsl(213, 90%, 33%);

   --purple-mod: hsl(285, 90%, 75%, .35);
   --purple-mod-2: hsl(285, 90%, 33%);
}

 .containment-chamber{
     position: relative;
     overflow: hidden;
     margin: 0 2rem 1rem;

     background-color: hsla(36, 57%, 68%, .55);
     border: solid .53rem transparent;
     border-radius: 4rem;
     box-shadow:
          inset 0 0 0 .27rem var(--milk),
          inset 0 0 0 .4rem var(--textColor);
     transition: all 600ms cubic-bezier(.45, .05, .55, .95);
}
 
 .containment-chamber:hover{
     background-color: transparent;
     border-radius: 4rem;
     transition: all 600ms cubic-bezier(.45, .05, .55, .95);
}

 .containment-chamber.red-mod:hover{
     background-color: var(--red-mod);
}

 .containment-chamber.yellow-mod:hover{
     background-color: var(--yellow-mod);
}

 .containment-chamber.green-mod:hover{
     background-color: var(--green-mod);
}

 .containment-chamber.blue-mod:hover{
     background-color: var(--blue-mod);
}

 .containment-chamber.purple-mod:hover{
     background-color: var(--purple-mod);
}

 .placard{
     position: relative;
     display: -ms-grid;
     display: grid;
     -ms-grid-columns: 1fr .5rem 2fr;
     grid-template-columns: 1fr 2fr;
     -ms-grid-rows: auto .5rem auto;
     grid-template-areas:
          "card-image wl-header"
          "card-image card-text";
     grid-gap: 0;
     gap: 0;
     padding: .27rem;

     color: var(--textColor);
     box-sizing: border-box;
     border-radius: 3rem;

     text-align: center;
     overflow: hidden;
}

 .placard > a:first-of-type{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     color: transparent;
     background: 0;

     user-select: none;
     z-index: 1;
}

 .placard > div.wl-headers,
 .placard > div.card-text,
 .placard > div.card-image{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
}

 .placard > div.wl-headers{
     -ms-grid-row: 1;
     -ms-grid-column: 3;
     grid-area: wl-header;
     padding: 0 1em;
}

 .placard > div.wl-headers > div{
     width: 100%;
     margin: 0;
     padding: 0;
}

 .placard > div.card-text{
     position: relative;
     bottom: 1em;
     -ms-grid-row: 3;
     -ms-grid-column: 3;
     grid-area: card-text;
     padding: 0 .5em;

     line-height: 1.5;
     text-decoration: underline;
     text-decoration-thickness: 0;
     text-decoration-color: rgba(228, 180, 28, 0);
     transition:
          text-decoration-thickness 150ms cubic-bezier(.4, 0, .2, 1),
          text-decoration-color 125ms cubic-bezier(.4, 0, .2, 1);
     text-underline-offset: 25%;
}

 .placard:hover > div.card-text,
 .placard:active > div.card-text{
     text-decoration: underline var(--chocolate);
     text-decoration-thickness: .0625rem;
     transition:
          text-decoration-thickness 150ms cubic-bezier(.4, 0, .2, 1),
          text-decoration-color 50ms cubic-bezier(.4, 0, .2, 1);
}

 .placard:focus-within > div.card-text{
     text-decoration: underline var(--chocolate);
     text-decoration-thickness: .0625rem;
     transition:
          text-decoration-thickness 150ms cubic-bezier(.4, 0, .2, 1),
          text-decoration-color 50ms cubic-bezier(.4, 0, .2, 1);
}

 .placard > div.card-image{
     -ms-grid-row: 1;
     -ms-grid-row-span: 3;
     -ms-grid-column: 1;
     grid-area: card-image;
     height: min-content;
     margin: 1.5vw;
     -ms-grid-row-align: center;
     align-self: center;

     border-radius: 50%;

     overflow: hidden;
}

 .placard > div.card-image img{
     -o-object-fit: contain;
     object-fit: contain;
     width: 100%;
     max-width: 15.625rem;
     margin: .25rem;

     border-radius: .5rem;
}

 .placard .fake-h2{
     display: inline-block;

     font-family: var(--title-font);
     letter-spacing: .0625rem;
}

 .placard .fake-h2{
     margin-top: -.5em;
     margin-bottom: .7em;

     font-size: 1.5em;
}

@media (max-width: 48rem){
     .placard{
          grid-template-areas:
               "wl-header wl-header"
               "card-image card-text";
    }
     .placard > div.wl-headers{
         -ms-grid-row: 1;
         -ms-grid-column: 1;
         -ms-grid-column-span: 3;
    }
     .placard > div.card-text{
         -ms-grid-row: 3;
         -ms-grid-column: 3;
    }
     .placard > div.card-image{
         -ms-grid-row: 3;
         -ms-grid-row-span: 1;
         -ms-grid-column: 1;
    }
}
 @media (max-width: 25.875rem){
     .placard{
         grid-template-areas:
               "wl-header wl-header"
               "card-image card-image"
               "card-text card-text";
    }
     .placard > div.card-image{
         -ms-grid-column-align: center;
         justify-self: center;
         height: auto;
    }
     .placard > div.card-image img{
         max-height: 20vh;
    }
     .placard > div.wl-headers{
         -ms-grid-row: 1;
         -ms-grid-column: 1;
         -ms-grid-column-span: 3;
    }
     .placard > div.card-text{
         -ms-grid-row: 5;
         -ms-grid-column: 1;
         -ms-grid-column-span: 3;
    }
     .placard > div.card-image{
         -ms-grid-row: 3;
         -ms-grid-row-span: 1;
         -ms-grid-column: 1;
         -ms-grid-column-span: 3;
    }
}
[[/module]]

[[include :scp-wiki:component:license-box]]
=====
> **Filename:** 173-icon.png
> **Author:** [[*user EstrellaYoshte]]
> **License:** CC BY-SA 3.0
> **Source Link:** [https://scp-wiki.wikidot.com/173-anniversary-hub SCP Foundation Wiki]

> **Filename:** 173f.png
> **Author:** [[*user EstrellaYoshte]]
> **License:** CC BY-SA 3.0
> **Source Link:** [https://scp-wiki.wikidot.com/173-anniversary-hub SCP Foundation Wiki]
=====
[[include :scp-wiki:component:license-box-end]]

173 Anniversary Hub

Module Styles

Inline Styles

Includes

CSS Classes

Page Source