Fish^12:SUCKENmyFUCKENnuttens

SANTA CLAUS HAS A FAT ASS.

This is the aesthetic theme for Site-225, primarily created by MetalRavioli, a site dedicated to biological anomalies like birds and fish. This theme was created by me, Fish^12 for Art Exchange.

This theme is a Sigma Plus theme and uses the Toggle Sidebar Component and the Better Footnotes Component. Aesthetically, this theme uses lots of large, chunky blocks and lots of oranges and green, cause science… is orange. And biology? Green.

To include this theme on your page, use the following code:

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

---

Example image block.

	Euclid	Keter
Man	Mathematician	King
Religion	Pythagoreanism	Judaism

Click Me

You're in the right place.

Don't Click Me

Idiot.

Header font is Stick No Bills.
Subheader font is Taprom.
Body font is Roboto Flex.

Theme Source

/*
    Shoebill Theme
    [2026 Wikidot Theme]
    by Fish^12
*/
 
@import url(https://fonts.bunny.net/css?family=stick-no-bills:200,300,400,500,600,700,800);
@import url(https://fonts.bunny.net/css?family=taprom:400);
@import url(https://fonts.bunny.net/css?family=roboto-flex:400);
 
:root {
    --green: #aadd56;
    --darkgreen: #007e30;
    --yellow: #ffec8e;
    --orange: #ff7f27;
    --white: #FCFBF4;
    --black: #171717;
    --trans: transparent;
 
    --stic: "Stick No Bills";
    --tapr: "Taprom";
    --robo: "Roboto Flex";
 
    --timer: 200ms;
 
    --fnColor: var(--darkgreen);
 
    --header-title: "SITE-225";
    --header-subtitle: "Protecting The Small";
    --sp_header-logo: url("https://scpdsandbox.wikidot.com/local--files/theme:raviolistyle/225.7");
    --sp_header-logo-adaptive-size: 0;
    --sp_header-title-size: clamp(2.5rem, 1.974rem + 2.807vw, 5.5rem);
    --sp_header-subtitle-size: clamp(1.3rem, 0.086rem + 3.238vw, 4rem);
 
    --sp_header-height: 20rem;
    --sp_top-bar-height: 2rem;
 
    --sp_top-bar-gradient-top-color: var(--orange);
    --sp_top-bar-gradient-bottom-color: var(--orange);
 
    --sp_top-bar-link-color: var(--black);
    --sp_top-bar-link-hover-color: var(--darkgreen);
    --sp_top-bar-link-hover-background: var(--white);
 
    --sp_dropdown-link-color: var(--black);
    --sp_dropdown-link-hover-color: var(--darkgreen);
    --sp_dropdown-link-background: var(--orange);
    --sp_dropdown-link-hover-background: var(--white);
    --sp_dropdown-link-border: none;
 
    --sp_rate-module-text-color: var(--black);
    --sp_rate-module-background: var(--orange);
    --sp_rate-module-sub-color: var(--black);
    --sp_rate-module-active-color: var(--black);
    --sp_rate-module-button-color: var(--black);
    --sp_rate-module-button-background: var(--white);
    --sp_rate-module-button-hover-color: var(--white);
    --sp_rate-module-button-hover-background: var(--orange);
 
    --sp_tab-text-color: var(--white);
    --sp_tab-background: var(--orange);
    --sp_tab-border-color: var(--orange);
    --sp_tab-hover-text-color: var(--black);
    --sp_tab-hover-background: var(--orange);
    --sp_tab-hover-border-color: var(--orange);
    --sp_tab-selected-text-color: var(--black);
    --sp_tab-selected-background: var(--orange);
    --sp_tab-selected-border-color: var(--orange);
 
    --sp_hovertip-background: var(--white);
    --sp_hovertip-border: 0.2em solid var(--orange);
}
 
/* From the top! */
 
#container {
    overflow-x: hidden;
}
#login-status {
    padding-right: 0.5em;
    padding-top: 0.5em;
    font-size: 1rem;
    color: var(--black);
    font-weight: bold;
}
#login-status a {
    color: var(--black);
    box-shadow: 0 2px 0 0 var(--trans);
    transition: var(--timer);
}
#login-status a:hover {
    box-shadow: 0 2px 0 0 var(--black);
    text-decoration: none;
}
#top-bar .open-menu a {
    height: 35px;
    border-radius: 100% / 125% 125% 80% 80%;
    border: 0.2rem solid var(--black);
    background-color: var(--white);
    color: var(--black);
    transition: var(--timer);
    align-content: center;
    filter: 
        drop-shadow(2px 2px 0 var(--orange))
        drop-shadow(-1px 2px 0 var(--orange))
        drop-shadow(0px -2px 0 var(--orange))
        drop-shadow(2px 0px 0 var(--orange));
}
#top-bar .open-menu a:hover {
    border: 0.2rem solid var(--darkgreen);
    background-color: var(--yellow);
    color: var(--darkgreen);
    box-shadow: 1px 1px 0 3px var(--black);
    filter: 
        drop-shadow(2px 2px 0 var(--black))
        drop-shadow(-1px 2px 0 var(--black))
        drop-shadow(0px -2px 0 var(--black))
        drop-shadow(2px 0px 0 var(--black));
    box-shadow: none;
}
 
/* Pop-up page. */
 
.owindow {
    background-color: var(--yellow);
    border: none;
    color: var(--black);
}
.owindow .title {
    cursor: auto;
    background-color: var(--orange);
    border-bottom: 0.2em solid var(--orange);
    text-align: center;
    font-family: var(--stic);
    padding: 0.8rem 0 0 0;
    text-transform: uppercase;
    font-size: 2.5rem;
}
.owindow img {
    background-color: var(--trans) !important;
    padding: 0 !important;
    margin-right: 1em;
}
.owindow td img {
    display: none;
}
.owindow .button-bar a {
    border-color: var(--orange);
    border-width: 0.2em;
    background-color: var(--orange);
    color: var(--black);
}
.owindow .button-bar a:hover {
    background-color: var(--white);
    color: var(--darkgreen);
    border-color: var(--white);
    box-shadow: 5px 0 var(--darkgreen), -5px 0 var(--darkgreen);
}
.odialog-shader {
    background-image:
        linear-gradient(45deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%),
        linear-gradient(135deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%),
        linear-gradient(225deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%),
        linear-gradient(315deg, var(--trans) 10%, var(--orange) 10% 20%, var(--trans) 20%),
        linear-gradient(45deg, var(--trans) 45%, var(--red) 45% 55%, var(--trans) 55%),
        linear-gradient(135deg, var(--trans) 45%, var(--red) 45% 55%, var(--trans) 55%);
}
 
/* Account and search buttons. */
 
#account-topbutton {
    font-size: 80%;
    border: none;
    margin-left: 0;
    transition: var(--timer);
    padding: 3px 2px 1px 2px;
}
#account-options {
    margin-top: 0.2em;
    margin-right: 0.5em;
    text-align: center;
    border: none;
    border-color: var(--trans);
    background-color: var(--orange);
    width: 8rem;
}
#account-options li a {
    color: var(--black);
    background-color: var(--orange);
    text-transform: capitalize;
    transition: var(--timer);
}
#account-options li a:hover {
    color: var(--darkgreen);
    background-color: var(--white);
    box-shadow:
        5px 0 var(--darkgreen),
        -5px 0 var(--darkgreen);
    text-decoration: none;
}
#search-top-box {
    align-items: flex-start;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    padding-right: 0.5em;
    padding-top: 0.5em;
    font-size: 1rem;
}
#search-top-box-form input[type=submit] {
    background-color: var(--orange);
    background-image: none;
    color: var(--black);
    border: 0.2em solid var(--orange);
    box-shadow: none;
    border-radius: 0;
    padding: 0 5px;
    transition: var(--timer);
}
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{
    background-color: var(--white);
    border: 0.2em solid var(--white);
    background-image: none;
    color: var(--darkgreen);
    box-shadow: 5px 0 var(--darkgreen), -5px 0 var(--darkgreen);
}
 
/* Header. */
 
#header {
    grid-template-areas:
        ". . login login login"
        ". . . . search"
        "h1 h1 h1 h1 h1"
        "h2 h2 h2 h2 h2"
        ". . . . ."
        "top-bar top-bar top-bar top-bar top-bar";
    grid-template-columns: repeat(5, 1fr);
    background-color: var(--yellow);
    background-image:
        url(https://smlt.wikidot.com/local--files/fish-12:suckenmyfuckennuttens/shoebill-stork.png),
        url(https://smlt.wikidot.com/local--files/fish-12:suckenmyfuckennuttens/tropical-fish.png);
    background-size: 20rem;
    background-repeat: no-repeat;
    background-position:
        -1rem 1rem,
        100% 2rem;
    position: relative;
}
#header::before {
    grid-row: none;
    grid-column: none;
    width: 15rem;
    height: 15rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:
        translate(-50%, -50%)
        rotate(15deg);
    opacity: 10%;
}
#header h1, #header h2 {
    padding-inline-start: 0;
    text-align: center;
    position: relative;
}
#header h1 a::before {
    font-family: var(--stic);
}
#header h2 span::before {
    font-family: var(--tapr);
}
#header h1 a::before, #header h2 span::before {
    color: var(--black);
}
#header h1 a, #header h2 span {
    text-shadow: none;
}
 
/* Top bar. */
 
#top-bar {
    box-shadow:
        72vw -5px var(--darkgreen),
        -72vw -5px var(--darkgreen),
        68vw 5px var(--darkgreen),
        -68vw 5px var(--darkgreen);
}
#top-bar ul li a {
    transition: var(--timer);
}
#top-bar ul li ul {
    border-width: 0 0;
    box-shadow: none;
}
#top-bar div[class*="top-bar"] > ul {
    justify-content: center;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    line-height: 2;
    text-align: center;
    font-weight: bold;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover,:focus) {
    box-shadow: -5px 0 var(--darkgreen), 5px 0 var(--darkgreen);
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover, #top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a {
    box-shadow: 0 -5px var(--darkgreen);
}
 
/* Side bar and side bar button. */
 
#side-bar {
    background-color: rgba(0, 0, 0, 0.5);
}
#side-bar a {
    padding: 0 5px;
}
#side-bar a:hover {
    text-decoration: none;
}
#interwiki .menu-item, #side-bar .menu-item {
    text-align: center;
}
#interwiki .heading, #side-bar .heading {
    color: var(--black);
    border-bottom: solid 0.2em var(--darkgreen);
    font-weight: 400;
}
#side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block, #interwiki .side-block {
    background-color: var(--yellow);
    border-radius: 0;
    box-shadow: none;
    border: solid 0.2rem var(--orange);
}
#side-bar .side-block.media a {
    padding: 0;
}
#side-bar .side-block.media a:hover {
    background-color: var(--trans);
    filter: invert(1);
}
 
/* Body content. */
 
body, html {
    background-color: var(--white);
    font-family: var(--robo);
}
h1, h2, h3, h4, h5 {
    color: var(--darkgreen);
    font-family: var(--robo);
}
a, a.newpage, a:visited, #interwiki a, #side-bar a {
    color: var(--darkgreen);
    font-weight: 700;
    transition: var(--timer);
}
a:hover, a:visited:hover, #interwiki a:hover, #side-bar a:hover {
    color: var(--white);
    background-color: var(--darkgreen);
    text-decoration: none;
}
.licensebox a.collapsible-block-link:hover {
    background-color: var(--trans);
}
#page-title, .meta-title {
    font-family: var(--stic);
    font-weight: bold;
    color: var(--darkgreen);
    font-size: clamp(1.5rem, 0.786rem + 1.905vw, 2.5rem);
    margin-bottom: 2rem;
    border-color: var(--darkgreen);
    border-width: 5px;
}
#breadcrumbs, .pseudocrumbs {
    margin: 1em 0em 1em;
}
.preview-message {
    color: var(--black);
    background-color: var(--white);
    border: solid 0.2rem var(--darkgreen);
}
 
/* Stuff you make. */
 
table.wiki-content-table th {
    background-color: var(--green);
    border-color: var(--darkgreen);
}
table.wiki-content-table td {
    background-color: var(--yellow);
    border-color: var(--darkgreen);
}
#toc {
    border: solid 0.2rem var(--orange);
    background-color: var(--yellow);
}
blockquote, div.blockquote {
    background-color: rgba(255, 236, 142, 0.3);
    border-color: var(--trans);
    border-bottom: solid 0.2rem var(--orange);
}
.scp-image-block, div.scp-image-block {
    box-shadow: none;
    border-width: 0;
}
.scp-image-block img, div.scp-image-block img  {
    background-color: var(--yellow);
}
.scp-image-block .scp-image-caption, div.scp-image-block .scp-image-caption {
    background-color: var(--orange);
    border-top: 0;
    color: var(--black);
    padding: 0.5rem 0;
    font-weight: normal;
    font-size: 0.9rem;
}
div.scp-image-block.block-right, .scp-image-block.block-right, div.scp-image-block.block-left, .scp-image-block.block-left {
    position: relative;
}
div.scp-image-block.block-right::after, .scp-image-block.block-right::after, div.scp-image-block.block-left::after, .scp-image-block.block-left::after {
    position: absolute;
    content: "";
    top: -2rem;
    width: 100vw;
    height: calc(100% + 2rem);
}
div.scp-image-block.block-right::after, .scp-image-block.block-right::after {
    left: calc(100% + 5px);
    clip-path:
        polygon(2rem 0,
        100% 0,
        100% 2rem,
        4rem 2rem,
        2rem 4rem,
        2rem calc(100% - 2rem),
        0 100%,
        0 2rem);
    background-image: linear-gradient(
90deg, var(--orange) 0 4rem, transparent 4rem calc(4rem + 5px), var(--orange) 4rem);
}
div.scp-image-block.block-left::after, .scp-image-block.block-left::after {
    right: calc(100% + 5px);
    clip-path:
        polygon(0 0,
        calc(100% - 2rem) 0,
        100% 2rem,
        100% 100%,
        calc(100% - 2rem) calc(100% - 2rem),
        calc(100% - 2rem) 4rem,
        calc(100% - 4rem) 2rem, 0 2rem);
    background-image: linear-gradient(
270deg, var(--orange) 0 4rem, transparent 4rem calc(4rem + 5px), var(--orange) 4rem);
}
div.page-rate-widget-box, div.rate-box-with-credit-button, .page-rate-widget-box {
    text-transform: uppercase;
    box-shadow: none;
    border-radius: 3px;
    border: solid var(--orange);
    padding: 3px;
    position: relative;
}
div.page-rate-widget-box::before, div.rate-box-with-credit-button::before, .page-rate-widget-box::before{
    position: absolute;
    content: "";
    background-image: url(https://smlt.wikidot.com/local--files/fish-12:suckenmyfuckennuttens/hummingbird.png);
    top: 35%;
    right: 102%;
    height: 3rem;
    width: 3rem;
    background-size: contain;
    transform: translate(0%, -50%);
}
#main-content div.page-rate-widget-box span:is(.rate-points) {
    border-radius: 3px 0 0 3px;
    background-color: var(--white);
}
#main-content div.page-rate-widget-box span:is(.btn) {
    border-radius: 0 3px 3px 0;
    background-color: var(--white);
}
div.page-rate-widget-box .ratedown, div.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .rateup {
    background-color: var(--white);
}
div.page-rate-widget-box .cancel a:is(:hover,:focus), .page-rate-widget-box .cancel a:is(:hover,:focus) {
    color: var(--white);
    background-color: var(--orange);
}
.authorlink-wrapper > a {
    padding: 1px 5px;
}
.fncon {
    background-color: var(--white);
    border: solid 0.2rem var(--orange);
}
.fncon::before {
    color: var(--black);
    background-color: var(--orange);
}
.hovertip {
    width: fit-content;
    height: fit-content;
    box-shadow: 0 5px var(--orange);
}
hr {
    margin: 1ex 3ex;
    background-color: var(--darkgreen);
    height: 0.2rem;
    position: relative;
    overflow: inherit;
}
hr::before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: var(--darkgreen);
}
 
/* Bottom of page and editor. */
 
#main-content .page-tags {
    border-top: 2rem solid var(--orange);
    padding-top: 5px;
    position: relative;
    margin: 5rem 0 0;
}
.page-tags::before, .page-tags::after {
    position: absolute;
    content: "";
    top: 0;
    width: 100vw;
    height: 4rem;
    transform: translate(0, -50%);
}
.page-tags::before {
    right: calc(100% + 5px);
    clip-path:
        polygon(0 2rem,
        calc(100% - 6rem) 2rem,
        calc(100% - 4rem) 0,
        100% 0,
        100% 2rem,
        calc(100% - 2rem) 2rem,
        calc(100% - 4rem) 100%,
        0 100%);
    background-image: linear-gradient(270deg, var(--orange) 6rem, var(--trans) 6rem calc(6rem + 5px), var(--orange) 6rem 100%);
}
.page-tags::after {
    left: calc(100% + 5px);
    clip-path:
        polygon(0 0,
        4rem 0,
        6rem 2rem,
        100% 2rem,
        100% 4rem,
        4rem 100%,
        2rem 2rem,
        0 2rem);
    background-image: linear-gradient(90deg, var(--orange) 6rem, var(--trans) 6rem calc(6rem + 5px), var(--orange) 6rem 100%);
}
#main-content .page-tags span {
    border-width: 0;
}
#main-content .page-tags a {
    padding: 0 5px;
}
#page-info, .page-watch-options {
    width: fit-content;
    margin: auto;
    padding: 2px 6px;
    margin-top: 0.5rem;
}
.page-watch-options a:hover {
    text-decoration: none;
}
.page-options-bottom {
    text-align: center;
    margin-top: 1rem;
}
a.action-area-close:hover {
    text-decoration: none;
    background-color: var(--darkgreen);
    color: var(--white);
}
#footer {
    align-items: center;
    color: var(--black);
    background-color: var(--orange);
    max-height: fit-content;
}
#footer a {
    color: var(--black);
    font-weight: 900;
}
#footer a:hover {
    color: var(--darkgreen);
    background-color: var(--white);
}
#license-area {
    background-color: var(--white);
}
 
@media (max-width: 500px) {
    #header {
        background-position: -10rem 1rem, calc(100% + 11rem) 2rem;
    }
    #top-bar div[class*="top-bar"] > ul > li {
        flex: 1 1 0px;
    }
}

‡ Licensing / Citation

Cite this page as:

"Fish^12:SUCKENmyFUCKENnuttens" by Fish^12, from the SCP Wiki. Source: https://scpwiki.com/fish-12:suckenmyfuckennuttens. Licensed under CC BY-SA.

For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.

Name: Shoebill stork icon
Filename: shoebill-stork.png
Author: Delapouite
License: CC BY 3.0
Source Link: https://game-icons.net/1x1/delapouite/shoebill-stork.html#download

Name: Tropical fish icon
Filename: tropical-fish.png
Author: Delapouite
License: CC BY 3.0
Source Link: https://game-icons.net/1x1/delapouite/tropical-fish.html#download

Name: Hummingbird icon
Filename: hummingbird.png
Author: Delapouite
License: CC BY 3.0
Source Link: https://game-icons.net/1x1/delapouite/hummingbird.html#download