cat theme
≡
MENU
For Newbies
初めての方へ
 このサイトに参加する
GuideLines
ガイドハブ
 サイトルール
 ライセンスガイド
SCP Series JP
Ⅰ | Ⅱ | Ⅲ
SCP Series
Ⅰ | Ⅱ | Ⅲ | Ⅳ | Ⅴ | Ⅵ
INT - Hub
Tales
JP | EN
GoI Formats
JP | EN | Others
SBⅢ
|
Storage
SCP
FOUNDATION
Secure, Contain, Protect
example formatting

Image Block
L1 Heading

L2 Heading

L3 Heading

L4 Heading

L5 Heading

L6 Heading

ハイフン4つ"----"で水平線をひくことができます。¹
Block Quote

Nested Block Quote
header	header	header	header	header	header
cell-content	cell-content	cell-content	cell-content	cell-content	cell-content
Table of Contents
fake code selector{
fake code property: fake code value;
}
A link (A link you probably visited)
+ A collapsible
numbered list
list item
list item
bulleted list
list item
list item
how to use

このテーマを使用するには、以下のコードをページの一番上に貼り付けてください。
[[include :1nu:scpcat]]
このテーマは何のために使われるの？

遊び
source

show code
hide code
[[a class="open-side" href="#u-side"]][[span]]≡
[[span class="menu"]]MENU[[/span]][[/span]][[/a]]
[[div id="u-side" class="new-side"]]
[[a href="#close" class="close-side"]][[/a]]
[[div class="side-content"]]
 
[[div class="side-outside"]]
[[span]]For Newbies[[/span]]
[[div class="side-inside"]]
[[[guide-for-newbies|初めての方へ]]]
[[[system:join|このサイトに参加する]]]
[[/div]]
[[/div]]
------
[[div class="side-outside"]]
[[span]]GuideLines[[/span]]
[[div class="side-inside"]]
[[[guide-hub|ガイドハブ]]]
[[[Site Rules|サイトルール]]]
[[[Licensing Guide|ライセンスガイド]]]
[[/div]]
[[/div]]
------
[[div class="side-outside"]]
[[span]]SCP Series JP[[/span]]
[[div class="side-inside"]]
[[[scp-series-jp|Ⅰ]]] | [[[scp-series-jp-2|Ⅱ]]] | [[[scp-series-jp-3|Ⅲ]]]
[[/div]]
[[/div]]
------
[[div class="side-outside"]]
[[span]]SCP Series[[/span]]
[[div class="side-inside"]]
[[[scp-series|Ⅰ]]] | [[[scp-series-2|Ⅱ]]] | [[[scp-series-3|Ⅲ]]] | [[[scp-series-4|Ⅳ]]] | [[[scp-series-5|Ⅴ]]] | [[[scp-series-6|Ⅵ]]]
[[/div]]
[[/div]]
------
[[[scp-international|INT - Hub]]]
------
[[div class="side-outside"]]
[[span]]Tales[[/span]]
[[div class="side-inside"]]
[[[foundation-tales-jp|JP]]] | [[[foundation-tales|EN]]]
[[/div]]
[[/div]]
------
[[div class="side-outside"]]
[[span]]GoI Formats[[/span]]
[[div class="side-inside"]]
[[[goi-formats-jp|JP]]] | [[[goi-formats|EN]]] | [[[international-goi-formats|Others]]]
[[/div]]
[[/div]]
 
[[span class="side-sites"]]
[[a class="n-sites" href="//scp-jp-storage.wikidot.com/"]]SBⅢ[[/a]]
[[span class="center-line"]]|[[/span]]
[[a class="n-sites" href="//scp-jp-storage.wikidot.com/"]]Storage[[/a]]
[[/span]]
 
[[span class="side-links"]]
[[a class="side-twitter" href="https://twitter.com/scpjp_announce"]][[/a]]
[[a class="side-discord" href="http://ja.scp-wiki.net/discord-guideline"]][[/a]]
[[a class="site-other" href="http://scp-jp.wikidot.com/links"]][[/a]]
[[/span]]
[[module ListPages range="." wrapper="no" separate="no"]]
[[a class="side-credit" href="//%%site_name%%.wikidot.com"]]© %%site_title%%[[/a]]
[[/module]]
[[/div]]
[[/div]]
 
[[div_ class="top_block"]]
[[div_ class="star"]]
[[div_ class="stars"]]
[[/div]]
[[div_ class="stars2"]]
[[/div]]
[[div_ class="stars3"]]
[[/div]]
[[/div]]
[[div_ class="top_titles"]]
 
[[div_ class="top_maintitle"]]
SCP
FOUNDATION
[[/div]]
 
[[div_ class="top_subtitle"]]
Secure, Contain, Protect
[[/div]]
 
[[/div]]
[[/div]]
 
[[module CSS]]
/*
    [no title]
    Created at 2020
    Created by dog_punch
    CC BY-SA 3.0
*/
@import url(http://1nu.wdfiles.com/local--files/scpcat/%E3%81%BB%E3%81%97%E3%81%BC%E3%81%97.css);
@import url(https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;600;700&display=swap');
:root {
    --font-color: #000;
    --background: #fff;
    --base-color: #000000;
    --title-color: linear-gradient(to right, #695602, #ffc100);
}
 
a {
    color: var(--base-color);
}
 
#page-content a {
    text-decoration: underline;
}
 
#side-bar,
#top-bar {
    display: none;
}
 
body {
    color: var(--font-color);
    background: #000;
    overflow-x: hidden;
    font-family: 'Roboto Mono', verdana, arial, helvetica, sans-serif;
}
 
h1 {
    color: var(--base-color);
    font-family: 'Major Mono Display', 'Noto Sans JP', monospace;
    font-weight: 100;
}
 
div#container-wrap {
    background: var(--background);
}
 
#header {
    background: var(--base-color);
    padding: 0 !Important;
    height: 60px;
    width: 100%;
    border-bottom: 1px solid var(--base-color);
    max-width: none;
    position: fixed;
    top: 0%;
    left: 0%;
    box-shadow: 0 0 5px #5f5f5f;
}
 
#header h2 {
    display: none;
}
 
#login-status {
    top: 2px
}
 
#login-status {
    display: flex;
    flex-direction: column;
    align-content: space-around;
    font-size: 0
}
 
#login-status .printuser {
    margin: 0;
    background-color: none;
    position: absolute;
    top: 13px;
    right: 0px;
    width: 28px;
    padding: 0;
}
 
#login-status .printuser img.small {
    background: none !Important;
    margin: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 100px;
    box-shadow: 0 0 3px #3f3f3f;
}
 
#login-status [id] {
    font-size: .72rem
}
 
#login-status > a[href="javascript:;"] {
    font-size: 0;
    font-weight: bold;
    margin: 0;
    text-align: center;
    text-decoration: none;
    background: none;
    width: 21.8px;
    position: absolute;
    top: 13px;
    height: 21px;
    right: 30px;
    border: none;
}
 
#login-status > a[href="javascript:;"]:before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: 1.3rem;
    margin: 4px 3px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    transform: translate(0, 0);
}
 
#account-options {
    width: 17em;
}
 
#login-status #account-topbutton:before {
    content: "\f013";
    color: var(--background);
}
 
#login-status .login-status-sign-in {
    right: 35px !Important;
}
 
#login-status .login-status-sign-in:before {
    content: "\f13e";
    color: var(--base-color)
}
 
#login-status .login-status-create-account {
    right: 11px !Important;
    margin: 0 0 .25rem;
}
 
div#login-status a.login-status-create-account {
    right: 11px;
}
 
#login-status .login-status-create-account:before {
    content: "\f067";
    color: var(--base-color)
}
 
#login-status #my-account {
    display: none
}
 
#login-status a strong {
    position: absolute;
    top: 0;
    right: 2.25rem;
    font-family: var(--bauhaus);
    font-size: 1rem;
    white-space: nowrap
}
 
#login-status #account-topbutton:not(:focus):not(:focus-within):not(:hover):not(:active) + #account-options {
    display: none !important
}
 
#header #login-status #account-topbutton + #account-options:focus,
#header #login-status #account-topbutton + #account-options:focus-within,
#header #login-status #account-topbutton + #account-options:hover,
#header #login-status #account-topbutton + #account-options:active {
    display: block !important
}
 
#account-options ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}
 
#account-options ul > li {
    flex-grow: 1;
    text-align: center;
    width: 40%
}
 
#account-options ul > li a {
    transition: all .25s ease-in-out
}
 
#account-options ul > li a:hover {
    background-color: var(--base-color);
    color: var(--background);
    text-decoration: none
}
 
#login-status ul a {
    color: #000
}
 
div#search-top-box {
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    right: 70px;
}
 
div#search-top-box form {
    display: flex;
    justify-content: flex-end
}
 
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover {
    background-color: var(--base-color) !IMPORTANT;
    display: inline-block;
    height: 1.1rem;
    width: 8rem;
    transition: width .25s;
    outline: none;
    z-index: 0;
}
 
#search-top-box-input {
    border-radius: 0;
    border-width: 0px;
}
 
#search-top-box-input:hover,
#search-top-box-input:focus {
    border: none;
}
 
#search-top-box-input:focus {
    border-bottom: 1px solid #fff;
    border-radius: 0;
}
 
_::-webkit-full-page-media,
_:future,
:root div#search-top-box form input[type="text"] {
    font-size: 16px
}
 
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
    background-color: var(--background);
    color: transparent;
    cursor: pointer;
    display: inline-block;
    width: 27px;
    height: 27px;
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: none;
    background-position: center;
    background-size: 55%;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E);
}
 
div#search-top-box form input[type="submit"] {
    display: none
}
 
#search-top-box-input {
    border-radius: 0
}
 
#header h1 a {
    padding: 0;
    color: var(--base-color);
    text-shadow: none;
    font-family: 'Arapey';
    font-size: 180% !Important;
}
 
#header h1 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}
 
#header h1 a span {
    display: none;
}
 
#header h1 a:before {
    content: 'SCP';
    color: var(--base-color);
    text-shadow: none;
    font-size: 92%;
    font-family: 'Pinyon Script', cursive;
    font-weight: normal;
    margin-right: -13px;
    background: -webkit-linear-gradient(to right, #ed213a, #93291e);
    background: var(--title-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 5px;
}
 
.new-side {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 266px;
    box-sizing: border-box;
    height: 100%;
    min-height: 500px;
    z-index: 20;
    background: var(--base-color);
    overflow-y: auto;
    transition: 0.5s;
    transform: translateX(-266px);
    box-shadow: 0 0 7px #707070;
    font-family: verdana, arial, helvetica, sans-serif;
}
 
.new-side:target {
    transform: translateX(0px);
}
 
.side-content {
    text-align: center;
    margin-top: 5em;
}
 
.side-content p {
    margin: 0 !Important;
}
 
.side-content,
.side-content a,
.side-content span {
    color: var(--background);
    text-decoration: none !Important;
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    overflow-x: hidden;
}
 
.open-side {
    color: var(--background) !important;
    display: block;
    position: fixed;
    top: 0%;
    left: 0%;
    font-size: 2.1em;
    height: 61px;
    width: 61px;
    font-weight: bold;
    background: var(--base-color) !Important;
    z-index: 12;
    text-align: center;
}
 
.open-side > * {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 2px;
}
 
.open-side > span > span {
    font-size: 9px;
    font-weight: normal;
}
 
#content-wrap {
    position: relative;
    margin: 4.8em auto 0;
}
 
.side-outside {
    transition: 0.5s;
    max-height: 30px;
    overflow: hidden;
}
 
.side-outside:hover {
    max-height: 100px;
}
 
.side-outside a,
.side-outside span {
    transition: .3s;
}
 
.side-outside:hover span {
    color: rgba(255, 255, 255, .7) !Important;
}
 
.side-outside a:hover {
    color: rgba(255, 255, 255, .7) !Important;
}
 
.side-content a {
    transition: .3s !important;
}
 
.side-content a:hover {
    color: rgba(255, 255, 255, .7) !Important;
}
 
.side-inside {
    display: block;
    padding: 4px 0;
}
 
.side-inside a {
    transition: .3s;
}
 
.side-inside a:hover {
    color: rgba(255, 255, 255, .7);
}
 
.new-side hr {
    margin: 0.3em auto;
    height: 0.5px;
    width: 10px;
    background-color: rgba(255, 255, 255, .3);
}
 
.new-side:target .side-content > .side-outside,
.new-side:target .side-content > a,
.new-side:target .side-content > p {
    opacity: 0;
    animation-name: two;
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: .2s;
}
 
@keyframes two {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
 
.new-side .close-side {
    display: block;
    position: absolute;
    top: 10px;
    right: 5px;
    font-size: 2.5em;
    text-decoration: none !IMPORTANT;
    color: var(--background);
}
 
.new-side .close-side:after {
    font-family: FontAwesome;
    content: '\f00d';
}
 
.side-sites {
    width: 70%;
    display: flex;
    height: 45px;
    border-bottom: 0.5px solid rgba(255, 255, 255, .3);
    border-top: 0.5px solid rgba(255, 255, 255, .3);
    justify-content: space-around;
    align-items: center;
    margin: 5px auto 0 auto;
    position: relative;
}
 
.side-sites a {
    font-size: 90%;
    transition: .3s;
}
 
.side-sites a:hover {
    color: rgba(255, 255, 255, .7) !Important;
}
 
.side-sites * {
    flex-basis: 100%;
    flex-shrink: 1;
    flex-grow: 1;
}
 
span.center-line {
    display: inline-block;
    font-size: 70%;
    color: rgba(255, 255, 255, .3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
.new-side::-webkit-scrollbar {
    width: 5px;
    height: 9px;
    border: none;
}
 
.new-side::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .6);
}
 
.new-side::-webkit-scrollbar-track {
    background: none;
}
 
.side-links {
    width: 70%;
    margin: 0 auto;
    display: flex;
    height: 45px;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
 
.side-links a {
    flex-basis: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    font-size: 110%;
}
 
.side-twitter:before {
    content: '\f099';
    font-family: FontAwesome;
}
 
.side-discord:before {
    content: '\f0c0';
    font-family: FontAwesome;
    font-weight: normal;
}
 
.site-other:before {
    content: '\f0c1';
    font-family: FontAwesome;
}
 
a.side-credit {
    display: inline-block;
    font-size: 80% !important;
}
 
@media (max-height:515px) {
    .side-content {
        margin-top: 1em;
    }
}
 
#login-status a > strong {
    font-size: 0;
    width: 12px;
    height: 12px;
    background: #e0bd00ab;
    border-radius: 50%;
    top: 10px;
    left: -10px;
}
 
#content-wrap,
#main-content {
    position: static;
}
 
.top_block {
    background: #fff;
    overflow: hidden;
}
 
.top_block {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    background-color: #000;
    background-image: url(http://dog-punch.wikidot.com/local--files/tes:10125/ねこ);
    background-size: 100%;
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    box-shadow: 0 0 8px #464646;
}
 
@media (max-width: 700px) {
    .top_block {
        background-size: cover;
    }
}
 
@media (min-width: 1200px) {
    .top_block {
        background-size: 75%;
        background-position-x: right;
    }
}
 
::-webkit-scrollbar-thumb {
    background: rgb(85 85 85);
}
 
::-webkit-scrollbar-track {
    background: rgb(33 33 33);
}
 
.top_titles {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    mix-blend-mode: difference;
}
 
.top_maintitle {
    font-size: 7em;
    line-height: .9;
    font-weight: 700;
    display: inline-block;
    border-bottom: 2px solid #fff;
    padding-bottom: .1em;
}
 
.top_subtitle {
    font-size: 3em;
    line-height: .9;
}
 
@media (max-width:455px) {
    .top_maintitle {
        font-size: 5.55em;
    }
}
 
@media (min-width:1000px) {
    .top_maintitle {
        font-size: 10em;
    }
    .top_subtitle {
        font-size: 3.5em;
    }
}
 
#page-content {
    padding: 0 1.5em;
    margin: 0 auto 0 auto;
    max-width: 800px;
}
 
#main-content {
    margin: 0;
    padding: 100vh 0;
    max-width: 100%;
}
 
@media (max-width: 767px) and (min-width: 581px) {
    #page-content {
        margin: 0 0.5em 0 0.5em !important;
    }
}
 
@media (max-width: 479px) {
    #page-content {
        margin: 0 !Important;
    }
}
 
#content-wrap {
    margin: inherit;
    width: 100%;
    max-width: none;
}
 
div#page-title {
    border: none;
    color: #fff;
    background: #000;
    font-family: 'Major Mono Display', 'Noto Sans JP', monospace;
    padding: 10px 5px;
    font-size: 225%;
    text-align: center;
    box-shadow: 0 0 3px #000;
    overflow: hidden;
    position: relative;
}
 
div#page-options-container {
    margin: 0 1em;
}
 
.code,code {
    background: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 87%);
    color: var(--font-color);
    font-family: 'Source Code Pro', monospace;
}
 
ol {
    counter-reset: item;
    list-style-type: none;
    *list-style-type: decimal;
}
 
ol li {
    border-radius: 4px;
    line-height: 2;
    margin-bottom: 10px;
}
 
ol li:before {
    content: '' counter(item, decimal) '';
    background: var(--base-color);
    border-radius: 30px;
    color: var(--background);
    margin: 0 5px 0 8px;
    padding: 2px 5px;
    counter-increment: item;
    font-size: 0.8em;
}
 
ul {
    list-style-type: disc;
}
 
.op-btn {
    color: var(--background) !Important;
    padding: 0.8em;
    transition: .3s;
    text-decoration: none !IMPORTANT;
    text-align: center;
    position: relative;
}
 
.op-btn:hover {
    background: #292929 !important;
}
 
.op-btn:after {
    font-size: 1.9em;
    font-family: FontAwesome;
    font-weight: bold;
}
 
.op-btn:hover:before {
    content: attr(data-title);
    position: absolute;
    top: 10%;
    right: 110%;
    background: rgb(165 17 17 / 80%) !IMPORTANT;
    border: 1.5px solid #fff;
    box-shadow: 0 0 3px #ccc;
    display: inline-block;
    padding: 3px;
    opacity: 1;
    min-width: 7em;
}
 
blockquote,
div.blockquote {
    padding: 10px 20px;
    margin: 0 0 10px;
    border: 1px solid hsl(0, 0%, 87%);
    background: hsl(0, 0%, 100%);
}
 
.scp-image-block .scp-image-caption {
    background-color: var(--background);
    border-top: solid 1px #fff;
    padding: 3px 0;
}
 
.scp-image-block {
    border: none;
}
 
table.wiki-content-table th {
    background-color: #151515;
    color: #fff;
    border-color: #4f4f4f8c;
}
 
#toc {
    padding: 0.5em 0.5em;
    border: none;
    background-color: #1b1b1b;
    border-radius: 8px;
    color: var(--background);
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1em;
}
 
#toc:after {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    border: 2px solid var(--base-color);
}
 
#toc {
    padding: 0.5em;
    background-color: var(--background);
    color: var(--base-color);
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1em;
    border: 3px solid var(--base-color);
    position: relative;
    border-radius: 0;
    box-shadow: 0 0 5px hsl(0deg 0% 0% / 66%);
}
 
#toc a {
    color: var(--base-color);
    text-decoration: none;
    transition: .3s;
}
 
ol {
    padding-inline-start: 13px;
}
 
.hovertip {
    background: #ffffffc4 !Important;
    color: var(--base-color);
    border-radius: 0;
    padding: 1em;
    box-shadow: 0 0 3px var(--background);
    border: 3px solid #000000d6 !Important;
    position: relative;
}
 
.hovertip:before {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    border: 2px solid #000000d6;
}
 
div.page-options-bottom {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0;
}
 
a.btn-default {
    flex-grow: 1;
    text-align: center;
    margin: 0 2px !Important;
    margin-bottom: 4px !Important;
    color: var(--background);
    padding: 4px 10px;
    background: var(--base-color);
    border: 2px solid #ccc;
    border-radius: 3px;
    transition: 0.5s;
}
 
div#page-options-bottom {
    margin-top: 3px;
}
 
a.btn-default:hover {
    text-decoration: none;
    background: #292929;
}
 
#lock-info {
    background-color: #ffffff;
}
 
::selection {
    background: #ccc;
    color: var(--base-color);
}
 
::-moz-selection {
    background: #ccc;
    color: var(--base-color);
}
 
div#action-area {
    margin: auto;
    max-width: 90%;
    width: 90%;
}
 
hr {
    background-color: transparent;
    background-image: linear-gradient(to right, transparent, #636363, transparent);
    height: .8px;
}
 
[[/module]]
犬殴り

世に恥じようとも天には恥じず

example formatting

L1 Heading

L2 Heading

L3 Heading

L4 Heading

L5 Heading

L6 Heading

how to use

source
