CARTOON THEME

CARTOON THEME
Placeholder McD, pastarasta1
Published March 2021

This is a sidebox! It's some genius tech that EstrellaYoshte invented because I pestered them about it; you can see it, and learn how to use it, on their Penumbra Theme.

Rating:

Rating w/ Info Pane:

Info

---

CARTOON THEME
Author(s): Placeholder McD, pastarasta1
Published March 2021

---

What Is This?

---

This is the CARTOON THEME! It makes your articles CARTOONY! It was designed by Placeholder McD and pastarasta1! It includes EstrellaYoshte's BetterFootnotes and Toggle Sidebar components. It also includes their sidebox technology. Use the associated links to learn how to use them!

How to Use

---

To use this theme, please copy this syntax onto the top of your page:

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

What is this theme used for?

For when you want a lil cartoonish flavor on your articles! or you want to write a crazy format screw from inside a cartoon Or if you had a cartoon-based GoI, or really whatever you want. It's cartoony.

Example Formatting

Cartoony Foundation Logo by pastarasta1!

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
cell-content	cell-content

fake code selector{
fake code property: fake code value;
}

A link (A link you probably visited)

+ A collapsible

Something inside the collapsible

1. numbered list
2. list item
3. list item

• bulleted list
• list item
• list item

First Tab

Tab content

Second Tab

Tab content

Third Tab

Tab content

Fourth Tab

Tab content

Fifth Tab

Tab content

Text with normal footnote¹.

Text with BetterFootnotes footnote.Text in BetterFootnotes footnote. .

Footnotes

1. Text in normal footnote.

---

Source Code

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
}
 
@media (min-width: 768px) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    .close-menu {
        margin-left: 19em;
        opacity: 0;
    }
}

:root {
    --posX: calc(50% - 358px - 12rem);
}
 
/*--- Footnote Auto-counter --*/
#page-content {
    counter-reset: megacount;
}
 
/*--- Footnote Superscript Number --*/
.fnnum {
    display: inline-block;
    text-indent: calc(-1% - 0.1em);
    overflow: hidden;
    line-height: 83%;
    text-decoration: none;
    font-weight: bold;
    font-style: initial;
    color: transparent;
    position: relative; top: -0.25em; font-size: 82%;
    padding: .15em calc(.21em - 0.4px) .12em calc(.11em - 1px);
    margin-left: -0.06em;
    margin-right: -0.25em;
    counter-increment: megacount;
    user-select: none;
}
.fnnum::after {
    content: "" counter(megacount);
    color: var(--fnColor, #E6283C);
}
.fnnum:hover {
    text-decoration: none;
    cursor: pointer;
    background-color: var(--fnColor, #E6283C);
}
.fnnum:hover::after { color: white; }
 
/*--- Footnote Content Wrapper --*/
.fncon {
    position: absolute;
    right: calc(var(--posX) + 80px);
    line-height: 1.2;
    padding: 0.82rem;
    width: 10.3rem;
    background: white;
    border: 2px solid black;
    font-weight: initial;
    font-style: initial;
    text-align: initial;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s linear, right 0.3s cubic-bezier(.08,.72,.5,.94);
    z-index: 9;
}
.fnnum:hover + .fncon {
    opacity: 1;
    right: var(--posX);
}
.fncon::before {
    position: absolute;
    top: 0; left: 0;
    transform: translateX(-52%) translateY(-55%) scale(1.15);
    background-color: var(--fnColor, #E6283C);
    color: white;
    content: counter(megacount);
    font-size: initial;
    font-weight: bold;
    font-style: initial;
    padding-left: 0.32em; padding-right: 0.32em;
    padding-top: 0.18rem; padding-bottom: 0.08rem;
}
 
/*--- Mobile Query --*/
@media only screen and (max-width: 1279px) {
    .fncon {
        position: fixed;
        bottom: 1.3rem;
        left: calc(11% - 50px);
        width: 70%;
        transition: opacity 0.15s linear, left 0.3s cubic-bezier(.08,.72,.5,.94);
    }
    .fnnum:hover + .fncon {
        left: 11%;
     }
}

+ CODE

/* CARTOON THEME
 * [2021 Wikidot Theme]
 * Created by Placeholder McD
 */
 
@import url('https://fontlibrary.org//face/mitica');
@import url('https://fontlibrary.org//face/blogger-sans');
@import url('https://fontlibrary.org//face/ponyo');
 
/* ---- PAGE WRAP ---- */
 div#container-wrap{
     background-image: url(http://scpdsandbox.wdfiles.com/local--files/theme%3Acartoon-theme/cartoon_header_bg.png);
     background-repeat: repeat-x;
}
 
/* ---- HEADERS ---- */
 span, a{
     word-break: unset;
}
 h1{
     font-size: 200%;
}
 h1, h2, h3, h4, h5, h6 {
    font-family: 'MiTicaRegular';
    color: #3a2b4c;
    letter-spacing: 2px;
}
 
/* ---- SITE HEADER ---- */
 #header h1 a,
 #header h2 span{
     color: transparent;
     text-shadow: none;
     font-size: 0px;
}
 #header h1 a{
   font-family: 'MiTicaRegular';
}
 #header h1 a::before,
 #header h2 span::before{
     padding-left: 2rem;
     color: #3a2b4c;
     text-shadow: none;
}
 #header h1 a::before{
     content: "SCP Foundation";
     font-size: 3rem;
}
 #header h2 span::before{
     content: "Secure, Contain, Protect";
     font-size: 1.2rem;
}
#header {
    background-image: url('http://scp-sandbox-3.wdfiles.com/local--files/placeholder-mcd/TOONLOGO.png');
}
 
/* ---- TOP MENU ---- */
 #top-bar ul li,
 #top-bar ul li ul{
     box-shadow: none;
}
 #top-bar ul li ul{
     border-color: hsl(0, 0%, 27%);
     border-style: solid;
     border-width: 0 1px 1px;
}
 #top-bar ul li a{
     border-color: hsl(0, 0%, 27%);
     border-style: solid;
     border-width: 0 0 0 1px;
}
 
 #top-bar ul li a::after{
     position: relative;
      left: -.3em;
}
 #top-bar ul li ul li a::before{
     content: unset;
}
 #top-bar ul li ul li a::after{
     content: unset;
}
 .mobile-top-bar{
     bottom: -.5px;
}
 
#login-status {
    color: #3a2b4c;
}
#login-status a {
    color: #3a2b4c;
}
#login-status ul a {
    color: #3a2b4c;
    background: #e9e3bb;
}
#login-status ul a:hover {
    color: #3a2b4c;
}
 
#account-topbutton{
    border: solid 1px var(--accentColor);
}
#top-bar div.open-menu a {
    border-radius: 20px;
    box-shadow: none;
    color: #e9e3bb;
    background-color: #3a2b4c;
    border: solid 2px #3a2b4c;
}
 
/* ---- SEARCH BOX ---- */
 #search-top-box {
     font-size: 0.81rem;
}
 #search-top-box input.empty{
     color: hsl(0, 0%, 45%);
}
 #search-top-box-input{
     color: hsl(0, 0%, 5%);
     background-color: hsl(0, 0%, 100%);
     border: 1px solid #3a2b4c;
     border-radius: 0px;
     box-shadow: none;
}
 #search-top-box-input:hover,
 #search-top-box-input:focus{
     color: hsl(0, 0%, 5%);
     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 47%);
     box-shadow: none;
}
 #search-top-box-form input[type="submit"]{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 96%);
     border: 1px solid hsl(0, 0%, 67%);
     border-radius: 0;
     box-shadow: none;
     font-size: 100%;
     font-weight: normal;
}
 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 87%);
     border: 1px solid hsl(0, 0%, 67%);
     box-shadow: none;
}
 
/* ---- SIDE MENU ---- */
 #side-bar{
     clear: both;
     padding: .78em;
     padding-bottom: 0;
     border: 1px solid hsl(0, 0%, 87%);
     border-radius: 0;
     box-shadow: none;
     font-size: 0.8rem;
}
 #side-bar .side-block{
     margin-bottom: .78em;
     background: white;
     border: none;
     border-radius: 20px;
     box-shadow: none;
}
 #side-bar .heading{
     padding-left: 0;
     color: hsl(0, 0%, 5%);
     border-bottom: 1px solid hsl(0, 0%, 67%);
}
 
/* ---- INFO BAR ---- */
 body{
     --barColour: hsl(0, 0%, 28%);
}
 
/* ---- INFO PANE ---- */
#page-content .creditRate{
     margin-right: 0;
     border: none;
}
#page-content .rate-box-with-credit-button{
     background-color: #3a2b4c;
     border: 2px solid #3a2b4c;
}
#page-content .creditButton {
     background-color: #3a2b4c;
     border: 2px solid #3a2b4c;
     border-radius: 10px;
}
#page-content .creditButton p a{
     background-color: #3a2b4c;
     color: #e9e3bb;
     border-left: none;
}
#page-content .rate-box-with-credit-button .fa-info:hover{
     background-color: #e9e3bb;
     color: #3a2b4c;
}
#page-content .modalbox{
     max-height: unset;
}
 
/* ---- PAGE RATING ---- */
 .page-rate-widget-box{
     background-color: #3a2b4c;
     margin-right: 0;
     box-shadow: none;
     border: 2px solid #3a2b4c;
     border-radius: 10px;
}
 .page-rate-widget-box .rate-points{
     color: #e9e3bb;
     background-color: #3a2b4c!important;
     border: 2px solid #3a2b4c;
}
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown {
    background-color: hsl(267deg 28% 23%);
    border-top: solid 1px hsl(267deg 28% 23%);
    border-bottom: solid 1px hsl(267deg 28% 23%);
    border-left: none;
    border-right: none;
    font-weight: normal;
}
.page-rate-widget-box .cancel {
    background-color: hsl(267deg 28% 23%);
    border: solid 1px hsl(267deg 28% 23%);
}
 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a,
 .page-rate-widget-box .cancel a {
     background-color: #3a2b4c;
     color: #e9e3bb;
}
 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown a:hover,
 .page-rate-widget-box .cancel a:hover {
     color: #3a2b4c;
     background: #e9e3bb;
     text-decoration: underline;
}
 
/* ----- GENERAL ----- */
 #page-title {
     color: #3a2b4c;
}
 
 body{
     color: #3a2b4c;
     word-break: unset;
     background-color: #e9e3bb;
     font-family: 'BloggerSansRegular';
     font-size: 1.1rem;
}
 
 tt { 
    font-family: "Ponyo", monospace;
}
 
 hr {
     height: 2px;
     margin: 1em 30px;
     background: #3a2b4c;
}
 
a {
     color: #5d65cb;
     font-weight: bold;
}
a.newpage {
     color: #8389d7;
}
a:visited {
     color: #52126e;
}
a.collapsible-block-link {
     color: #5d65cb;
}
 
#page-content .wiki-content-table {
    border-collapse: separate;
    border-spacing: 3px;
}
#page-content .wiki-content-table tr th {
    border: solid 2px #3a2b4c;
    border-radius: 10px;
    background-color: #3a2b4c;
    color: #e9e3bb;
}
#page-content .wiki-content-table tr td {
    border: solid 2px #3a2b4c;
    border-radius: 10px;
    background-color: #b6b9e7;
}
#page-content .wiki-content-table a, #toc a {
    color: #77589d;
}
#page-content .wiki-content-table a.newpage, #toc a.newpage {
    color: #a189bd;
}
#page-content .wiki-content-table a:visited, #toc a:visited {
    color: #250831;
}
 
blockquote, div.blockquote, #toc {
    background-color: #b6b9e7;
    border: dashed 2px #3a2b4c;
    border-radius: 20px;
}
 
/* Footnotes */
.hovertip {
    font-size: 1rem;
    background-color: #b6b9e7 !important;
    border: solid 2px #3a2b4c !important;
    border-radius: 20px;
}
.footnotes-footer {
    background-color: #b6b9e7;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    padding-bottom: 1.5rem;
    border: 2px solid #3a2b4c;
    border-radius: 20px;
}
.footnotes-footer .title {
    color: #3a2b4c;
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
/* ---- IMAGE BLOCK ---- */
 .scp-image-block {
    border: 2px solid #3a2b4c;
    border-radius: 0px 0px 20px 20px;
}
 .scp-image-block .scp-image-caption {
    background-color: #3a2b4c;
    color: #e9e3bb;
    border-top: 2px solid #3a2b4c;
    border-radius: 0px 0px 15px 15px;
}
 
/* ---- YUI TABS ---- */
 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a{
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: #b6b9e7;
     color: #3a2b4c;
     border: 2px solid #3a2b4c;
     border-radius: 20px 20px 0px 0px;
    /* -------- */
     background-image: none;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: #8389d7;
     color: #3a2b4c;
     border: 2px solid #3a2b4c;
     border-radius: 20px 20px 0px 0px;
    /* -------- */
     background-image: none;
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:hover{
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: #3a2b4c;
     color: #e9e3bb;
     border: 2px solid #3a2b4c;
     border-radius: 20px 20px 0px 0px;
    /* -------- */
     background-image: none;
}
 .yui-navset .yui-content {
     background-color: #b6b9e7;
     border: 2px solid #3a2b4c;
     border-radius: 0px 0px 20px 20px;
}
.yui-navset .yui-nav li a em, 
.yui-navset-top .yui-nav li a em, 
.yui-navset-bottom .yui-nav li a em {
     border: none;
}
 
/* --- INTERWIKI --- */
 iframe.scpnet-interwiki-frame{
     position: relative;
     width: 17em;
     height: 12em;
     margin-left: .313em;
     background-color: transparent;
}
 
/* ---- MOBILE MEDIA QUERIES ---- */
 @media (max-width: 767px) {
       #side-bar .side-block{
          background-color: hsl(0, 0%, 100%);
     }
      #side-bar:after{
          background-color: hsla(0, 0%, 30%, .2);
     }
      #header h1 a::before{
          font-size: 1.6rem;
          padding-left: 2rem;
     }
      #header h2 span::before{
          font-size: 0.9rem;
          padding-left: 2rem;
     }
       #search-top-box-form{
          display: none;
     }
}
 
/* ---- CUSTOM ---- */
 
#page-content .sidebox tr td,
#page-content .sidebox tr th {
    padding: 0.35em;
}
 
.anchor {
    position: sticky;
    height:0;
    top: 0;
}
.sidebox {
    padding: .14rem;
    margin-top: 0;
    margin-bottom: 8px;
    width: calc((100vw - 870px)/2);
    max-height: calc(100vh - 18rem);
    position: absolute;
    top: 0;
    left: 103.5%;
    z-index: 5;
    overflow: auto;
    box-sizing: border-box;
}
@media (max-width: 1290px) {
    .sidebox {
        display: none;
        visibility:hidden;
    }
}
 
/* BetterFootnotes Patch */
.fncon {
    background-color: #b6b9e7;
    border-color: #3a2b4c;
    border-radius: 20px;
}
.fncon::before {
    border-radius: 10px;
    background-color: #3a2b4c;
}
 
:root {
    --fnColor: #8389d7;
}