Pack Of Peanuts Theme

Link to article: Pack Of Peanuts Theme.

@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Apack-of-peanuts/1);

```
font-family: var(--mono-font)
```
```
letter-spacing: .33rem
```
```
font-family: var(--mono-font)
```

```
pseudocrumbs
```
```
code
```
```
code
```
```
licensebox
```
```
blockquote
```
```
blockquote
```

[[iftags +theme]]

[[div class="pseudocrumbs"]]
[[[sigma-9-themes|Sigma-9 Themes]]] >> Pack of Peanuts Theme
[[/div]]

[[=]]
[[module Rate]]
[[/=]]

@@ @@

++* What Is This?

This is a variant theme that was used for the 173 Fifteenth Anniversary Celebration.
----
++* How to Use

Copy this syntax and paste it onto the top of your page:

[[div class="code"]]
= @@[[include :scp-wiki:theme:pack-of-peanuts]]@@
[[/div]]
----
[[include :scp-wiki:component:image-block
|name=173-icon.png
|caption=Standard Image Block
|width=100px
|align=right
]]

++* Example Formatting

@@ @@

||~ header ||~ header ||~ header ||~ header ||
|| cell-content || cell-content || cell-content || cell-content ||

+ L1 Heading
++ L2 Heading
+++ L3 Heading
++++ L4 Heading
+++++ L5 Heading
++++++ L6 Heading

= **bold** | //italic// | __underline__ | --strikethrough-- | [[span style="font-family: var(--mono-font)"]]teletype[[/span]] | ^^superscript^^,,subscript,,

= Type 4 hyphens {{[[span style="letter-spacing: .33rem"]]@@----@@[[/span]]}} to create a horizontal rule.
----
[[toc]]

[[div class="code"]]
@@ fake code selector{@@
@@     fake code property: fake code value;@@
@@}@@
[[/div]]

[https://scp-wiki.wikidot.com/# A link] ([https://google.com A link you probably visited])

# numbered list
# list item
# list item

* bulleted list
* list item
* list item

[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.
[[/tab]]
[[tab This empty tab has a really long name for some odd reason. I wonder why? It is very strange.]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

> This is a blockquote.
>
> More text
> -----
> That's a horizontal rule.
>
>> Nested blockquotes
----
++* Source Code

@@ @@

[[=]]
[[collapsible hideLocation="both" show="Show Code" hide="Hide Code"]]
[[<]]

[[code type="CSS"]]
/* FONTS */
 @import url(https://fonts.googleapis.com/css2?family=Sriracha&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap);
/* YUI TAB BASE */
 @import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css);

/* Pack of Peanuts Theme
 * [2022 Wikidot Theme]
 * Created by Lt Flops
 * Based On:
 *   Cosmonaut Theme by EstrellaYoshte
 *   Flopstyle: DARK by Lt Flops
**/

/* -------- HEADER AREA -------- */
/* ---- COMMON ---- */
 :root{
   /* -- CENTERED HEADER VARS -- */
   --header-title: "SCP FOUNDATION";
   --header-subtitle: "15 Years of Scraping Concrete, Personnel";
   --titleColor: var(--textColor);
   --subtitleColor: hsl(357, 75%, 37%);
   --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Apack-of-peanuts/173-icon.png);

   /* -- COLORS -- */
   --textColor: hsl(0, 0%, 5%);
   --bgColor: hsl(36, 57%, 87%);
     background: var(--bgColor);

   --milk: hsl(0, 0%, 95%);
   --sugar: hsl(60, 54%, 87%);
   --peanut-lite: hsl(36, 63%, 68%);
   --peanut-dark: hsl(36, 43%, 58%);
   --jellybean: hsl(114, 42%, 53%);
   --juice: hsl(357, 70%, 45%);
   --chocolate: hsl(80, 3%, 19%);

   --contour: hsla(0, 0%, 20%, .5);

   /* -- FONTS -- */
   --title-font: "Sriracha", cursive;
   --subtitle-font: "Comic Neue", cursive;
   --body-font: "Inter", sans-serif;

   /* -- MISCELLANEOUS --
    *   Courtesy Of EstrellaYoshte
    */
   --side-bar-width: 16.5rem;
   --body-width: 55.53rem;
}

 body{
     color: var(--textColor);
     background-image:
        linear-gradient(
          var(--bgColor) 20rem 27rem,
          var(--sugar) 35rem 100%);

     font: 15px var(--body-font);
     text-rendering: optimizeLegibility;
     overflow-wrap: break-word;
}

 #content-wrap{
     display: flex;
     justify-content: space-between;
     max-width: 100%;
     padding-top: 1em;
}

 #content-wrap::after{
     width: max(calc(100vw - var(--side-bar-width) - var(--body-width)));
     max-width: var(--side-bar-width);
     content: "";
}

 #side-bar{
     width: var(--side-bar-width);
}

 #main-content{
     width: 55.53rem;
     margin: 0;
     padding: 2em 1em;

     box-sizing: border-box;

     z-index: 0;
}

 @media (max-width: 767px){
     #main-content{
          margin: 0 5%;
    }
}

 @media (min-width: 768px){
     #page-content{
          font-size: calc(15px * 1.05);
    }
}

/* ---- SCROLLBAR + SELECTION ---- */
 :root{
     scroll-behavior: smooth;
     scrollbar-color: var(--subtitleColor) var(--chocolate);
}

/* Cross-Browser Supports */
 ::-webkit-scrollbar{
     width: 1rem;
}

 ::-webkit-scrollbar-thumb{
     background: var(--subtitleColor);
}

 ::-webkit-scrollbar-track{
     background: var(--chocolate);
}

 ::selection{
     background: hsla(114, 42%, 53%, .55);
}

/* ---- SITE BANNER ---- */
 div#container-wrap{
     background: 0;
}

 #header{
     height: 15rem;
}

  #header::before{
     background-size: auto 15em;
     opacity: 1;
}

 #header h1 a::before{
     top: 7.4rem;

     font-family: var(--title-font);
     font-size: 125%;
}

 #header h2::before{
     top: 7.8rem;

     font-family: var(--subtitle-font);
     font-size: 155%;
}

 @media (max-width: 767px){
     #header h2::before{
          font-size: 135%;
    }
}

/* ---- SEARCH ---- */
 @media (max-width: 767px){
     #search-top-box{
          top: 2.85em;
    }
}

 #search-top-box-form input[type=submit]{
     padding: .47rem .47rem .4rem;

     color: var(--milk);
     transition: color .2s ease-in-out;
}

 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus{
     background: var(--juice);
     border-color: var(--juice);
     border-radius: 1rem;

     font-family: var(--body-font);
     font-size: calc(15px * 1.05);
}

 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:active,
 #search-top-box-form input[type=submit]:focus{
     color: var(--jellybean);
}

 #search-top-box-form > input[type=text]{
     width: 8rem;
     padding: .47rem .47rem .4rem;

     border: 2px solid var(--chocolate);
}

/* ---- TOP-BAR ---- */
 #top-bar{
     top: 17rem;
}

 #top-bar a{
     color: var(--milk);
}

 .top-bar,
 .mobile-top-bar,
 #top-bar ul li a{
     border-right: thin solid var(--chocolate);
     border-left: thin solid var(--chocolate);
}

 .top-bar,
 .mobile-top-bar{
     height: 2rem;
}

 #top-bar ul li a{
     padding: .4rem min(.75vw, 1rem) .33rem;
}

 #top-bar ul li.sfhover a,
 #top-bar ul li:hover a{
     color: var(--juice);
     border-radius: 0;
}

 #extrac-div-1,
 #extrac-div-2{
     position: absolute;
     width: 100%;
}

 #extrac-div-1{
     top: 0;
     height: 17rem;

     background: var(--peanut-dark);
     background-image: url(https://scp-wiki.wikidot.com/local--files/theme:pack-of-peanuts/concrete.png);
     background-repeat: repeat-x;
}

 #extrac-div-2{
     top: 16.8rem;
     height: 2rem;

     background: var(--juice);
     border-top: medium solid var(--chocolate);
     border-bottom: medium solid var(--chocolate);
}

/* ---- LOGIN ---- */
 #login-status{
     padding: .53rem 1rem;

     color: var(--milk);
     background: var(--juice);
     border-radius: 1rem;
}

 @media (max-width: 767px){
     #login-status{
          top: .28em;
          left: unset;
          padding: .27rem .53rem .53rem;
    }
}

 #login-status ul a{
     color: var(--subtitleColor);
     background: var(--peanut-lite);
}

 #login-status ul a:hover{
     background: var(--peanut-dark);
     border-radius: 0;
}

 #account-options{
     border-color: var(--chocolate);
}

 @media (max-width: 767px){
     #header .printuser img.small{
          transform: translate(4px, 4px);
    }
}

 #my-account{
     display: none;
}

 #account-topbutton{
     color: var(--textColor) !important;
     background: var(--milk) !important;
     border-color: var(--milk);
     border-radius: .53rem;
     transition: all .2s ease-in-out;
}

  #account-topbutton:hover,
  #account-topbutton:active{
     background: var(--jellybean) !important;
     border-color: var(--jellybean);
     transition: all .2s ease-in-out;
}

/* ---- SIDE-BAR ---- */
 #top-bar .open-menu a{
     color: var(--juice);
     background: var(--milk);
     border: 2px solid var(--juice);
}

  #top-bar .open-menu a:hover{
     padding: 0;

     color: var(--jellybean);
     background: var(--juice);
     box-shadow: none;
}

 @supports (-moz-appearance: none){
     #top-bar .open-menu a:hover{
          color: var(--jellybean);
          background: var(--juice);
    }
}

 @media (max-width: 767px){
     #side-bar:target{
          background-color: var(--sugar);
          border: 0;
          border-right: 2px solid var(--chocolate);
    }
}

 @media (min-width: 768px){
     #side-bar{
          position: -webkit-sticky;
          position: sticky;
          top: 0;
          left: 0;
          height: calc(100vh - 2rem);
          margin: 0;
          padding: 1rem;

          text-align: left;


          direction: rtl;
          overflow-x: hidden;
          overflow-y: scroll;
          will-change: transform;
    }
}

 #side-bar .side-block,
 #interwiki .side-block{
     border: 2px solid hsl(357, 100%, 20%);
     box-shadow: 3px 3px var(--contour);
}

 #side-bar .side-block.media{
     border: 2px solid hsl(240, 100%, 20%);
}

 #side-bar .side-block.resources{
     border: 2px solid hsl(127, 100%, 20%);
}

/* ---- COLLAPSBILES ---- */
  .licensebox .collapsible-block-link{
     color: var(--juice);
}

   .licensebox .collapsible-block-link:hover{
     color: var(--milk);
}

/* ---- PAGE RATING ---- */
 .page-rate-widget-box{
     margin-right: 0;

     box-shadow: 3px 5px var(--contour);
}

 div.page-rate-widget-box .rate-points,
 .page-rate-widget-box .cancel{
     background-color: var(--juice);
     border-color: var(--chocolate);

     text-transform: capitalize;
}

 .page-rate-widget-box .rate-points,
 #action-area .page-rate-widget-box .rate-points{
     padding: 1px 10px !important;
}

 .page-rate-widget-box .rateup,
 .page-rate-widget-box .ratedown{
     padding: 1px;

     background-color: var(--milk);
     border-color: var(--chocolate);
}

 .page-rate-widget-box .cancel{
     padding: 1px;
}

 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a{
     color: var(--chocolate);
}

 .page-rate-widget-box .cancel a{
     color: var(--milk);
}

 .page-rate-widget-box .rateup:hover,
 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown:hover,
 .page-rate-widget-box .ratedown a:hover{
     background: var(--chocolate);
}

 .page-rate-widget-box .rateup a:hover{
     color: var(--jellybean);
}

 .page-rate-widget-box .ratedown a:hover{
     color: var(--juice);
}

 .page-rate-widget-box .cancel:hover,
 .page-rate-widget-box .cancel a:hover{
     background: var(--juice);
}

 .page-rate-widget-box .cancel a:hover{
     color: var(--textColor);
}

/* ---- FORMATTING | [GENERAL] ---- */
 h1, h2, h3, h4, h5, h6{
     display: flex;
     justify-content: center;

     text-align: center;
}

 h2, h3, h4, h5, h6{
     font-family: var(--subtitle-font);
     line-height: 1.2;
}

 h1,
 #page-title,
 .meta-title{
     color: var(--subtitleColor);

     font-family: var(--title-font);
     line-height: .95;
}

 #page-title,
 .meta-title{
     border-color: var(--chocolate);
}

 hr{
     height: 0;
     margin: 1rem 0;

     background: transparent;
     border-top: thin solid var(--chocolate);
}

 *, a, span{
   /* No Line Breaks Mid-Word */
     word-break: normal;
}

 li, p{
     line-height: 1.5;
     text-decoration-color: var(--textColor);
     text-underline-offset: 30%;
}

 #toc{
     background: var(--peanut-lite);
     border: 2px solid var(--juice);
}

/* Links */
 a,
 a.newpage,
 a:visited,
 #side-bar a:visited{
     color: var(--juice);
     transition: color .2s ease-in-out;
}

 a:hover,
 a.newpage:hover,
 a:visited:hover,
 #side-bar a:visited:hover{
     padding-bottom: .13rem;

     color: var(--milk);
     background-color: var(--juice);
     border-radius: .33rem;

     text-decoration: none;
}

 #page-content a{
     padding-bottom: .067rem;

     border-bottom: thin solid var(--juice);
}

 #page-content a:hover{
     padding: .2rem .2rem .13rem;
}

 #page-content a:hover,
 #page-content .rateup a, #page-content .ratedown a,
 #page-content .cancel a, #page-content .cancel a:hover,
 #page-content .pseudocrumbs a,
 #page-content .creditButtonStandalone p a,
 #page-content .yui-nav li a,
 #page-content #toc a{
     border: 0;
}

 #page-content h1 a{
     padding-bottom: 0;
}

 #page-content .cancel a:hover{
     padding-bottom: .067rem;
}

 #page-content .yui-nav li a{
     padding: 0;
}

 #side-bar .side-block.media a:hover{
     padding: 0;

     background: 0;
}

/* ---- IMAGE BLOCK ---- */
 .scp-image-block{
     border: thin solid var(--chocolate);
     border-radius: 1rem;
     box-shadow: 3px 3px var(--contour);
}

 .scp-image-block.block-right{
     margin-right: 0;
}

 .scp-image-block .scp-image-caption{
     position: relative;
     top: 1px;
     right: 1px;

     background: var(--peanut-lite);
     border: thin solid var(--chocolate);
     border-radius: 1rem;
}

/* ---- TABLES ---- */
 table.wiki-content-table th{
     color: var(--milk);
     background: var(--juice);
     border-color: var(--chocolate);
}

 table.wiki-content-table td{
     border-color: var(--chocolate);
}

/* ---- CUSTOM DIV BLOCKS ---- */
 blockquote,
 div.blockquote{
     padding: 2rem;

     background: hsla(36, 57%, 68%, .55);
     border: none;
     border-radius: 40% 40% / 20% 20%;
}

/* ---- YUI TABS ---- */
/* -- YUI TAB CUSTOMIZATION -- */
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .13rem);
     margin: 0 auto;

     border-color: var(--chocolate);
}

 .yui-navset .yui-nav li,
 .yui-navset .yui-navset-top .yui-nav li{   /* -- Listitem Modifier -- */
     display: flex;
     flex-grow: 2;
     margin: 0;
     padding: 0;

     color: var(--milk);
     background: var(--juice);

     font-size: 1.05rem;
}

 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a{   /* -- Link Modifier -- */
   /* -- Tab | [UNSELECTED] -- */
     color: var(--textColor);
     background: var(--milk);
     transition: all .2s ease-in-out;

     font-family: var(--subtitle-font);
}

 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     width: 100%;
}

 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
   /* -- Tab | [HOVER] -- */
     background: var(--juice);
     transition: all .2s ease-in-out;
}

 .yui-navset .yui-nav li em{
     border: 0;
}

 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding-top: .47rem;
     padding-bottom: .47rem;

     text-align: center;
     text-overflow: ellipsis;

     overflow: hidden;
}

 .yui-navset .yui-nav .selected,
 .yui-navset .yui-navset-top .yui-nav .selected{   /* -- Selection Modifier -- */
   /* -- Tab | [SELECTED] -- */
     flex-grow: 2;
     margin: 0;
     padding: 0;

     color: var(--milk);
     background: var(--juice);
}

 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: 0;
}

 .yui-navset .yui-nav .selected a em{
     padding-top: .47rem;
     padding-bottom: .47rem;
}

 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .53rem;

     border: 0;

     line-height: 1.5;
}

/* ---- CROQSTYLE ALTERATIONS ---- */
 #edit-page-textarea{
     font-family: unset;
}

 tt{
     padding: unset;

     background: unset;

     font-size: unset;
}

 .code{
     background: var(--peanut-lite);
     border: 2px solid var(--juice);
}

 .terminal,
 .terminal > .code{
     background: var(--c-bg) !important;
     border: medium solid var(--c-comment) !important;
}

/* ---- SITE FOOTER ---- */
 #edit-page-title{
     width: 85%;
     padding: .2rem;

     color: var(--juice);

     font: 155% var(--title-font);
}

 #footer{
     margin-top: 0;

     background: var(--juice);
}

 #license-area{
     color: var(--milk);
     background: var(--chocolate);
}
[[/code]]

[[/<]]
[[/collapsible]]

@@ @@
----
+* The TITLE font is [*https://fonts.google.com/specimen/Sriracha Sriracha].
++* The SUBTITLE font is [*https://fonts.google.com/specimen/Comic+Neue Comic Neue].
The BODY font is [*https://fonts.google.com/specimen/Inter Inter].

[[span style="font-family: var(--mono-font)"]]The MONOSPACE font is [*https://fonts.google.com/specimen/Fira+Code Fira Code].[[/span]]
----
[[div class="licensebox"]]
[[collapsible show="‡ Licensing / Citation" hide="‡ Hide Licensing / Citation"]]
Cite this page as:
[[module listpages range="."]]
> "%%title_linked%%" by [[user Lt Flops]], from the [https://scp-wiki.wikidot.com SCP Wiki]. Source: https://scp-wiki.wikidot.com/%%fullname%%. Licensed under [https://creativecommons.org/licenses/by-sa/3.0/ CC-BY-SA].
[[/module]]
For more information, see [https://scp-wiki.wikidot.com/licensing-guide Licensing Guide].
**Licensing Disclosures**
[[<]]
=====
[[div class="blockquote"]]
**Filename:** 173-icon.png
**Author:** [[*user EstrellaYoshte]]
**License:** [https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
**Source Link:** [https://scp-wiki.wdfiles.com/local--files/theme%3Apack-of-peanuts/173-icon.png Pack Of Peanuts Theme - SCP Foundation]
[[/div]]

[[div class="blockquote"]]
**Filename:** concrete.png 
**Name:** retro, abstract, old, pattern, texture, cement, red wall
**Author:** Devanath
**License:** [https://creativecommons.org/publicdomain/zero/1.0/ CC0 1.0 Universal (CC0 1.0) Public Domain Dedication]
**Source Link:** [https://pixnio.com/textures-and-patterns/wall-texture/retro-abstract-old-pattern-texture-cement-red-wall PIXNIO]
**Note:** Edited by [[*user Lt Flops]]. Changed hue, lowered opacity, applied transparent gradient.
[[/div]]
=====
[[/<]]
[[include :scp-wiki:component:license-box-end]]
[[/=]]
[[/iftags]]

[[include :scp-wiki:component:centered-header-sigma-9]]
[[include :scp-wiki:component:croqstyle]]

[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Apack-of-peanuts/1);
[[/module]]

[[include :scp-wiki:component:interwiki-style
|priority=2
|theme=https://scp-wiki.wdfiles.com/local--code/theme%3Apack-of-peanuts/1
]]

Pack Of Peanuts Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source