'Pataphysics Department Theme

Link to article: 'Pataphysics Department Theme.

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

/* ---- PRESENTATION ---- */
 .templateInfo{margin:1em 0;padding:0 1em;background:hsl(0,0%,100%);border:1px solid hsl(0,0%,87%)}

```
margin-right: 2em;
```
```
margin-right: 2em;
```

```
templateInfo
```
```
templateInfo
```
```
code
```
```
templateInfo
```
```
code
```
```
templateInfo
```

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

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

[[iftags +theme]]
[[module CSS]]
/* ---- PRESENTATION ---- */
 .templateInfo{margin:1em 0;padding:0 1em;background:hsl(0,0%,100%);border:1px solid hsl(0,0%,87%)}
[[/module]]

[[>]]
[[span style="margin-right: 2em;"]]**Rating:**[[/span]]
[[module Rate]]
[[span style="margin-right: 2em;"]]**Rating w/ Info Pane:**[[/span]]
[[include :scp-wiki:info:start]]
[[<]]
**'Pataphysics Department Theme**
**Author:** [[*user Lt Flops]]
**Published on 19 Aug 2018**

Thank you to [[*user stormbreath]] for suggesting adjustments and fixes over time.
[[/<]]
[[include :scp-wiki:info:end]]
[[/>]]

[[div class="templateInfo"]]
[[=]]
+* What Is This?
[[/=]]
----
This is the 'Pataphysics Department Theme, by [[*user Lt Flops]].

It is inspired by the "Pataphysics Department", created by [[*user Rimple]].

This theme's animated logo was created by [[*user Woedenaz]].
[[/div]]

[[div class="templateInfo"]]
[[=]]
+* How to Use
[[/=]]
----
To use this theme, please copy this syntax onto the top of your page:

[[div class="code"]]
@@[[include :scp-wiki:theme:pataphysics]]@@
[[/div]]

**What is this theme used for?**

This theme exists to represent __**one**__ interpretation of the Pataphysics Department. It is not definitive of all pataphysical stories on the Wiki.

The Pataphysics (or 'Pataphysics) Department is not defined by any single canon:

* Sometimes, it's a group of fictional characters documenting anomalies from various literature.
* Sometimes, it's a group of people protecting the world from imagined monsters turned real.
* Sometimes, it's a study of characters in a story interacting with or recognizing their shared fiction.
* Other times, it's an exercise in breaking the fourth wall.

This theme is suitable for use in SCPs, Tales, and other pages.

,,For further information — like why //this// interpretation uses an apostrophe — see: **[https://en.wikipedia.org/wiki/%27Pataphysics The Wikipedia entry on 'Pataphysics]**.,,
[[/div]]

[[div class="templateInfo"]]
[[=]]
+* Example Formatting
[[/=]]
[[/div]]

[[include component:image-block
|width=100px
|name=pata-logo.png
|caption=Image Block]]

+ L1 Heading

++ L2 Heading

+++ L3 Heading

++++ L4 Heading

+++++ L5 Heading

++++++ L6 Heading

**bold** | //italic// | __underline__ | --strikethrough-- | {{teletype}} | ^^superscript^^,,subscript,,

Type 4 hyphens ("@@----@@") to create a horizontal rule.

----

> Block Quote
>> Nested Block Quote

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

[[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])

[[collapsible show="+ A collapsible" hide="- A collapsible"]]
Something inside the collapsible
[[/collapsible]]

# numbered list
# list item
# list item

* bulleted list
* list item
* list item

[[tabview]]
[[tab First Tab]]
Tab content
[[/tab]]
[[tab Second Tab]]
Tab content
[[/tab]]
[[tab Third Tab]]
Tab content
[[/tab]]
[[tab Fourth Tab]]
Tab content
[[/tab]]
[[tab Fifth Tab]]
Tab content
[[/tab]]
[[/tabview]]

[[div class="templateInfo"]]
[[=]]
+* Source Code
[[/=]]
[[/div]]

[[=]]
[[collapsible show="▷ Show Code ◁" hide="△ Hide Code △"]]
[[/=]]
[[<]]

[[code type="CSS"]]
@import url(https://fonts.bunny.net/css2?family=Carrois+Gothic&display=swap);

/* 'Pataphysics Department Theme
 * [2018 Wikidot Theme]
 * Based on Aelanna's Sigma-9 Theme as Edited by Dr Devan
 * Inspired by Rimple's "Pataphysics Department"
 * Created by Lt Flops, Logo Designed by TSATPWTCOTTTADC, Animated Logo by Woedenaz
 * With Code Help From Stormbreath
**/

/* ---- COLOUR VARIABLES ---- */
 body{
                                  /* ---- GREY --- */
             --very-dark-grey: hsl(000, 000%, 05%);
                       --grey: hsl(000, 000%, 75%);
                 --light-grey: hsl(000, 000%, 88%);
               --lighter-grey: hsl(000, 000%, 91%);
            --very-light-grey: hsl(000, 000%, 95%);
                                 /* ---- GOLD ---- */
              --strong-orange: hsl(036, 067%, 49%);
                --pure-yellow: hsl(051, 100%, 50%);
                                /* ---- GREEN ---- */
           --vivid-lime-green: hsl(112, 077%, 48%);
                                 /* ---- BLUE ---- */
                  --dark-blue: hsl(253, 060%, 33%);
   --light-grayish-lime-green: hsl(127, 050%, 94%);
                               /* ---- VIOLET ---- */
           --very-dark-violet: hsl(268, 039%, 10%);
  --very-dark-moderate-violet: hsl(268, 040%, 25%);
                --dark-violet: hsl(266, 100%, 25%);
     --very-dark-muted-violet: hsl(268, 033%, 30%);
              --strong-violet: hsl(268, 100%, 37%);
       --dark-moderate-violet: hsl(268, 040%, 45%);
   --mostly-muted-dark-violet: hsl(268, 025%, 50%);
                      /* ---- GRADIENT VIOLET ---- */
--grad-very-dark-muted-violet: hsl(268, 040%, 19%);
  --grad-dark-moderate-violet: hsl(268, 040%, 33%);
                              /* ---- MAGENTA ---- */
               --dark-magenta: hsl(298, 086%, 37%);
}

/* ---- CONTENT WRAP ---- */
 div#container-wrap{
     background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Apataphysics/pataphysics-header-updated.png) top left repeat-x !important;
}
 body{
     color: hsl(0, 0%, 05%);
     color: var(--very-dark-grey);
     background-color: hsl(0, 0%, 95%);
     background-color: var(--very-light-grey);

     word-break: unset;
}

/* ---- LOGO IMAGE | [PRE] ---- */
 #header{
     background-image: none;
}

/* 'Pataphysics Department Logo | [ANIMATION]
 * Logo Designed by TSATPWTCOTTTADC, Animated Logo by Woedenaz
 * Released Under CC BY-SA 3.0
**/

 #header #header-extra-div-1{
     width: 6.25rem;
     height: 6.25rem;
     display: flex;
     position: absolute;
     left: .25rem;
     top: 2rem;
}

 #header #header-extra-div-1::before{
     content: "";
     width: 6.25rem;
     height: 6.25rem;
     position: absolute;
     background-image: url("https://scp-wiki.wikidot.com/local--files/theme:pataphysics/pataphysicslogo-ani.svg");
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
     flex: 1;
}

/* ---- MOBILE ANIMATION ---- */
 @media (max-width: 767px){
     #header{
         background: none !important;
    }
     #header #header-extra-div-1{
         width: 5rem !important;
         height: 5rem !important;
         left: -1rem !important;
         top: 3rem !important;
    }
     #header #header-extra-div-1::before{
         width: 5rem !important;
         height: 5rem !important;
    }
}

/* ---- GENERAL ---- */
 span,
 a{
     word-break: unset;
}
 hr{
     height: 0;
     margin: 1em 0;
 
     background-color: transparent;
     border-top: 1px solid hsl(0, 0%, 62%);
}
 table.wiki-content-table{
     background-color: white;
}
 table.wiki-content-table th{
     background-color: hsl(0, 0%, 88%);
     background-color: var(--light-grey);
}

/* ---- LINKS ---- */
 a{
     color: hsl(268, 100%, 37%);
     color: var(--strong-violet);
}
 a:visited{
     color: hsl(253, 60%, 33%);
     color: var(--dark-blue);
}
 #side-bar a{
     color: hsl(268, 100%, 37%);
     color: var(--strong-violet);
}
 a.newpage{
     color: hsl(298, 86%, 47%);
     color: var(--dark-magenta);
}
 a.footnoteref,
 a.footnoteref:before{
     color: hsl(307, 100%, 37%);
     color: var(--dark-magenta);
}
 a.collapsible-block-link{
     font-weight: bold;
}
 .pata-notice a{ /* ---- PATA-NOTICE LINK COLOUR ---- */
     color: hsl(51, 100%, 50%);
     color: var(--pure-yellow);
}
 .pata-notice a:visited{
     color: hsl(36, 67%, 49%);
     color: var(--strong-orange);
}
 .pata-notice a.footnoteref, /* ---- PATA-NOTICE FOOTNOTE COLOUR ---- */
 .pata-notice a.footnoteref:before{
     color: hsl(51, 100%, 50%);
     color: var(--pure-yellow);
}

/* ---- HEADER ---- */
 h1, h2, h3, h4, h5, h6{
     word-break: unset;
}
 h1,
 #page-title,
 .meta-title{
     color: hsl(266, 100%, 25%);
     color: var(--dark-violet);
}
 #header h1 a,
 #header h1 a::before{
     position: relative;
     left: -1.5px;

     letter-spacing: -.02em;
}
 #header h1 a{
     color: transparent;

     font-family: "Carrois Gothic", "Arial", sans-serif;
     text-shadow: none;
}
 #header h1 a::before{
     content: "‘Pataphysics Department";

     color: hsl(0, 0%, 91%);
     color: var(--lighter-grey);

     text-shadow: 1px 1px 1px hsl(0, 0%, 05%);
     text-shadow: 1px 1px 1px var(--very-dark-grey);
}
 #header span{
     color: hsl(0, 0%, 91%);
     color: var(--lighter-grey);
}
 #header h2 span{
     color: transparent;

     text-shadow: none;
}
 #header h1 a span{
     content: "";

     visibility: hidden;
}
 #header h2 span::before{
     content: "Killing Our Gods";

     color: hsl(0, 0%, 91%);
     color: var(--lighter-grey);

     text-shadow: 1px 1px 1px hsl(0, 0%, 05%);
     text-shadow: 1px 1px 1px var(--very-dark-grey);
     text-shadow: 1px 1px 1px hsla(0, 0%, 5%, .8);
}
 @media only screen and (max-width: 425px){
     #header h1 a::before{
         content: "‘Pataphysics Dept.";
    }
}

/* ---- TOP MENU ---- */
 #top-bar ul li ul{
     border: solid 1px hsl(268, 40%, 25%);
     border: solid 1px var(--very-dark-moderate-violet);
}
 #top-bar a{
     color: hsl(0, 0%, 91%);
     color: var(--lighter-grey);
}
 #login-status ul a{
     color: hsl(268, 100%, 37%);
     color: var(--strong-violet);
}
 #top-bar ul .sfhover a,
 #top-bar ul li:hover a{
     color: hsl(268, 40%, 25%);
     color: var(--very-dark-moderate-violet);
     background: hsl(0, 0%, 95%);
     background: var(--very-light-grey);
}
 #my-account,
 #account-topbutton{
     color: hsl(0, 0%, 95%);
     color: var(--very-light-grey);
}

/* ---- SEARCH BAR ---- */
 #search-top-box-input{
     background-color: hsl(268, 40%, 25%);
     background-color: var(--very-dark-moderate-violet);
     border: solid 1px hsl(268, 33%, 30%);
     border: solid 1px var(--very-dark-muted-violet);
     border-radius: 0;
}
 #search-top-box-input:hover,
 #search-top-box-input:focus{
     background: hsl(268, 25%, 50%);
     background: var(--mostly-muted-dark-violet);
     border: solid 1px hsl(0, 0%, 95%);
     border: solid 1px var(--very-light-grey);
     border-radius: 0;
}
 #search-top-box-form input[type="submit"]{
     color: hsl(270, 75%, 76%);
     background: hsl(268, 33%, 30%);
     background: var(--very-dark-muted-violet);
     border: solid 1px hsl(268, 40%, 45%);
     border: solid 1px var(--dark-moderate-violet);
     border-radius: 0;
     box-shadow: none;

     font-size: unset;
}
 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus{
     color: hsl(0, 0%, 95%);
     color: var(--very-light-grey);
     background: hsl(268, 25%, 50%);
     background: var(--mostly-muted-dark-violet);
     border: solid 1px hsl(0, 0%, 95%);
     border: solid 1px var(--very-light-grey);
     border-radius: 0;
     box-shadow: none;
}

/* ---- SIDE MENU ---- */
 #side-bar{
     background: none;
}
 #side-bar .side-block{
     background: hsl(0, 0%, 91%);
     background: var(--lighter-grey);
     border: 3px solid hsl(268, 40%, 25%);
     border: 3px solid var(--very-dark-moderate-violet);
     border-radius: 0;
     box-shadow: none;
}
 #side-bar .heading{
     color: hsl(268, 40%, 25%);
     color: var(--very-dark-moderate-violet);
     border-bottom: 1px solid hsl(268, 40%, 45%);
     border-bottom: 1px solid var(--dark-moderate-violet);
}
 .side-block .menu-item > .image{
     filter: hue-rotate(268deg) saturate(90%) brightness(100%);
     -webkit-filter: hue-rotate(268deg) saturate(90%) brightness(100%);
}
 #side-bar div.menu-item.inactive a{
     color: hsl(268, 40%, 25%);
     color: var(--very-dark-moderate-violet);
}
 #side-bar div.menu-item .sub-text{
     color: hsl(268, 40%, 25%);
     color: var(--very-dark-moderate-violet);
}
 #side-bar .collapsible-block-folded{
     background: none;
}
 #side-bar .collapsible-block-unfolded-link{
     border-bottom: solid 1px hsl(268, 40%, 25%);
     border-bottom: solid 1px var(--very-dark-moderate-violet);
}
 #side-bar .collapsible-block-unfolded-link .collapsible-block-link{
     color: hsl(268, 40%, 25%);
     color: var(--very-dark-moderate-violet);

     font-weight: bold;
}

/* ---- INFO BAR ---- */
 body{
     --linkColour: hsl(0, 0%, 95%);
     --linkColour: var(--very-light-grey);
     --barColour: hsl(268, 39%, 10%);
     --barColour: var(--very-dark-violet);
}

/* ---- INFO PANE ---- */
 .rate-box-with-credit-button{
     background-color: hsl(268, 40%, 25%) !important;
     background-color: var(--very-dark-moderate-violet) !important;
     border-color: hsl(268, 40%, 25%) !important;
     border-color: var(--very-dark-moderate-violet) !important;
     border-radius: 0 !important;
     box-shadow: none !important;
}
 .rate-box-with-credit-button .fa-info{
     color: hsl(0, 0%, 95%);
     color: var(--very-light-grey);
     border-color: hsl(268, 40%, 45%);
     border-color: var(--dark-moderate-violet);
}
 .rate-box-with-credit-button .fa-info:hover{
     color: hsl(112, 77%, 48%);
     color: var(--vivid-lime-green);
}
 .rate-box-with-credit-button .cancel{
     border: 0;
}
 .close-credits,
 .credit-back{
     filter: hue-rotate(268deg);
}
 .modalbox{
     box-shadow: 0 1px 10px hsla(282, 73%, 51%, .3);
}

/* ---- PAGE RATING ---- */
 .page-rate-widget-box{
     border: none;
     border-radius: 0;
     box-shadow: none;
}
 div.page-rate-widget-box .rate-points{
     background-color: hsl(268, 40%, 25%);
     background-color: var(--very-dark-moderate-violet);
     border: solid 1px hsl(268, 33%, 30%);
     border: solid 1px var(--very-dark-muted-violet);
     border-radius: 0;
}
 .page-rate-widget-box .rateup,
 .page-rate-widget-box .ratedown{
     background-color: hsl(0, 0%, 95%);
     background-color: var(--very-light-grey);
     border-top: solid 1px hsl(268, 33%, 30%);
     border-top: solid 1px var(--very-dark-muted-violet);
     border-bottom: solid 1px hsl(268, 33%, 30%);
     border-bottom: solid 1px var(--very-dark-muted-violet);
}
 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a{
     color: hsl(268, 40%, 25%);
     color: var--very-dark-moderate-violet);
}
 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown a:hover{
     color: hsl(0, 0%, 95%);
     color: var(--very-light-grey);
     background: hsl(268, 40%, 25%);
     background: var(--very-dark-moderate-violet);
}
 .page-rate-widget-box .cancel{
     background-color: hsl(268, 40%, 25%);
     background-color: var(--very-dark-moderate-violet);
     border: solid 1px hsl(268, 33%, 30%);
     border: solid 1px var(--very-dark-muted-violet);
     border-left: 0;
     border-radius: 0;
}
 .page-rate-widget-box .cancel a{
     color: hsl(268, 40%, 45%);
     color: var(--dark-moderate-violet);
}
 .page-rate-widget-box .cancel a:hover{
     color: hsl(0, 0%, 95%);
     color: var(--very-light-grey);
     background: hsl(268, 40%, 25%);
     background: var(--very-dark-moderate-violet);
     border-radius: 0;
}

/* ---- DIV BLOCKS ---- */
 blockquote,
 div.blockquote{
     background-color: hsl(0, 0%, 91%);
     background-color: var(--lighter-grey);
     border: 1px solid hsl(0, 0%, 60%);
}
 .pata-notice{
     margin: 1em 0;
     padding: 0 1em;

     color: hsl(0, 0%, 95%);
     color: var(--very-light-grey);
     background-color: hsl(268, 40%, 25%);
     background-color: var(--very-dark-moderate-violet);
     border: 1px solid hsl(268, 33%, 30%);
     border: 1px solid var(--very-dark-muted-violet);

     text-align: center;
}
 .code{
     background-color: hsl(0, 0%, 92%);
     border-color: hsl(0, 0%, 82%);
}

/* ---- CUSTOM PAGE CONTENT CLASSES ---- */
 .content-panel .panel-body{
     background: hsl(0, 0%, 95%);
     background: var(--very-light-grey);
}
 .content-panel .panel-footer{
     color: hsl(0, 0%, 95%);
     color: var(--very-light-grey);
}
 .content-panel .panel-footer a{
     color: hsl(0, 0%, 95%);
     color: var(--very-light-grey);
}

/* ---- YUI TAB CUSTOMIZATION ---- */
 .yui-navset .yui-content{
    /* ---- Content Background ---- */
     background-color: white;
    /* -------- */
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-navset-left .yui-navset-right .yui-nav a{
     color: hsl(0, 0%, 05%);
     color: var(--very-dark-grey);
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: white;
    /* -------- */
     background-image: none;
     border: solid 1px #808080;
     border-bottom: none;

     transition: .125s;
}
 .yui-navset .yui-nav .selected a, /* ---- Selection Modifier ---- */
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:hover{
     color: hsl(0, 0%, 95%);
     color: var(--very-light-grey);
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background: hsl(268, 40%, 25%);
     background: var(--very-dark-moderate-violet);
    /* -------- */
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
    /* ---- Tab Background Colour | [HOVER] ---- */
     background: hsl(0, 0%, 75%);
     background: var(--grey);
    /* -------- */
}
 .yui-navset .yui-nav, /* ---- Between Tab And Content ---- */
 .yui-navset .yui-navset-top .yui-nav{
     border-color: hsl(268, 40%, 25%);
     border-color: var(--very-dark-moderate-violet);
}

/* ---- STANDARD IMAGE BLOCK ---- */
 .scp-image-block{
     box-shadow: none;
}
 .scp-image-block .scp-image-caption{
     background-color: hsl(0, 0%, 88%);
     background-color: var(--light-grey);
     border-top: solid 1px hsl(268, 40%, 25%);
     border-top: solid 1px var(--very-dark-moderate-violet);
}

/* ---- INTERWIKI ---- */
 #interwiki body{
     overflow: hidden;
}
 #interwiki .side-block{
     background: var(--light-grayish-lime-green);
     border: 3px solid var(--very-dark-moderate-violet);
     border-radius: 0;
     box-shadow: none;
}
 #interwiki .heading{
     color: var(--very-dark-moderate-violet);
     border-color: var(--dark-moderate-violet);
}


/* ---- ADJUST MOBILE IMAGE SIZE ---- */
 @media (max-width: 767px){
     #top-bar .open-menu a{
         color: hsl(268, 40%, 25%) ;
         color: var(--very-dark-moderate-violet);
         background-color: white;
         border: 2px solid hsl(268, 40%, 25%);
         border: 2px solid var(--very-dark-moderate-violet);
    }
     #side-bar{
         background-color: hsl(0, 0%, 75%);
         background-color: var(--grey);
    }
     #side-bar:target + #main-content{
         left: 0;
    }
}
 @media (min-width: 768px){
     #header h1 a{
         font-size: 150%;
    }
}

/* ---- REDUCED MOTION ACCESSIBILITY ----
 * By SMLT
**/
 @media (prefers-reduced-motion: reduce){
     *, *::before, *::after{
         animation-duration: .001s !important;
         animation-iteration-count: 1 !important;
         transition-duration: .001s !important;
    }
}
[[/code]]
[[/<]]
[[/collapsible]]
[[/iftags]]

'Pataphysics Department Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source