ミニマリストテーマ改修

ミニマリストテーマ

クレジット

タイトル: ミニマリストテーマ
著者: ©Nanimono Demonai
作成年: 2018

使い方

[[include :scp-jp:theme:min-theme]]

カスタム要素

このdivを使用すると、横に1emのパディングが出来ます。

使い方:

[[div class="contents"]]
テキスト
[[/div]]

---

このspanを使用すると、改行されずにブロック要素を作成することが出来ます。

使い方:

[[span class="break"]]テキスト[[/div]]

---

このspanを使用すると、細字にすることが出来ます。

使い方:

[[span class="thin"]]テキスト[[/span]]

ソースコード

/* General Element */
* {
    color: #707070;
}
p {
    margin-top: 1.5em;
    line-height: 180%;
}
.contents {
    padding-left: 1em;
}
.break {
    display: inline-block;
    color: #707070;
}
.thin {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 100;
}
 
/* Hidden Element*/
#header h1 a span, #header h2, #login-status > a > strong, #search-top-box, #page-title {
    display: none;
}
 
/* Wrapper */
div#container-wrap {
    background: none;
}
#content-wrap {
    max-width: 780px;
}
#main-content {
    margin: auto;
    padding: 0 1em 1em 1em;
}
 
/* Header */
#header {
    background: none;
    height: 5rem;
    max-width: 800px;
}
#header h1 {
    height: 100%;
    margin: 0;
}
#header h1 a {
    background: url("https://scp-jp.wdfiles.com/local--files/component%3Amin-theme/1.svg") center no-repeat;
    background-size: contain;
    height: 100%;
    line-height: unset;
    max-height: unset;
    padding: 0;
    width: 90px;
}
#top-bar {
    max-width: 800px;
    pointer-events: none;
    top: 3rem;
}
#top-bar a {
    color: #b01;
}
#top-bar ul {
    pointer-events: all;
}
#top-bar ul li a {
    border: none;
}
#top-bar ul li.sfhover a, #top-bar ul li:hover a {
    background: #fff;
    border: none;
}
#top-bar ul li ul {
    box-shadow: none;
}
#top-bar li:hover ul, #top-bar li.sfhover ul {
    border-color: #eee;
}
#top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
    border-top: 1px solid #eee;
}
.mobile-top-bar {
    right: 0;
}
#top-bar .open-menu a {
    border: solid 1px #000 !important;
    color: #000 !important;
    font-weight: 100;
    font-size: 27px;
    line-height: 27px;
    padding: 3px;
    pointer-events: all;
}
.open-menu a:hover {
    box-shadow: none;
}
#login-status {
    filter: grayscale();
}
#login-status a {
    color: #000;
}
 
/* Sidebar */
#side-bar {
    background: #eee;
}
#side-bar:target .close-menu {
    opacity: .39;
}
#side-bar .side-block, #side-bar .scpnet-interwiki-wrapper iframe.scpnet-interwiki-frame {
    border-color: #eee;
    border-radius: 0;
    box-shadow: none;
}
#side-bar hr {
    background-color: #000;
}
 
/* Other */
.number {
    color: #fff;
}

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        bottom: 0.5em;
        left: 0.5em;
        z-index: 15;
        font-family: san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888 !important;
        background-color: #fff !important;
        border-radius: 3em;
        color: #888 !important;
        text-decoration: none!important;
}
 
@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;
        position: fixed;
        top: 0;
        left: -25em;
        width: 17em;
        height: 100%;
        background-color: rgb(184, 134, 134);
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        -webkit-transition: left 0.5s ease-in-out 0.1s;
        -moz-transition: left 0.5s ease-in-out 0.1s;
        -ms-transition: left 0.5s ease-in-out 0.1s;
        -o-transition: left 0.5s ease-in-out 0.1s;
        transition: left 0.5s ease-in-out 0.1s;
    }
 
    #side-bar:after {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
 
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        border: 1px solid #dedede;
        z-index: 10;
    }
 
    #side-bar:target + #main-content {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.3) 1px 1px repeat;
        z-index: -1;
    }
}