图解主题 - SCP基金会

图解主题

评分:

评分与著作信息栏：

著作信息

你好

此为 shaftmetal, thd-glasses, Denevola, fluxman 设计的图解主题。

若需将该版式导入到你的页面中，请将以下文本放置到任意位置：

[[include :scp-wiki-cn:theme:scheme]]

该主题是为齿轮正教相关文章而设计。

以下是齿轮正教的GOI格式，元老图解。

元老图解

a. 缺乏意向之设计，其充满了庸俗之美，而无有标准化。以是，圣 Baffle 提及，所谓标准化，关键是标准化需要如何写。

b. 于设计机械时，美感并非来自单只追求美观。真正之美，自然衍生于改善之时的愈发高效率与清晰。

c. 见证于齿轮交联与蒸汽吹拂，谁能否认其中之美？——圣 Lathe，观见工业座堂

d. 清淡之色，减轻眼中的负担。简约之人，减轻阅读的负担。—— 图解员 Platon, 《印刷的设计》

99.99.ζ9-99卷
1. 标准化的发生^a 到底需要如何做到，不标准化的发生，又会如何产生。所谓标准化，关键是标准化需要如何写。这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。

2. 一切节省^b ，归根到底都归结为时间的节省。我希望诸位也能好好地体会这句话. 一般来讲，我们都必须务必慎重的考虑考虑。

3. 本人也是经过了深思熟虑，^c 可是，即使是这样，标准化的出现仍然代表了一定的意义^d，标准化到底应该如何实现。

代码块:

[[div style="float:right;width:45%;font-size:90%;padding:5px;"]]
##red|a.## 你可以改变旁批div的宽度与文本大小。

##red|b.## 旁批二
[[/div]]

**XX.XX.XX-XX卷**
**1.** 内容一
**2.** 内容二
~~~~

+ 显示源代码

- 隐藏源代码

/*
    Scheme Theme
    [2021 Wikidot Theme]
    Created by shaftmetal, thd-glasses and Denevola
    Inspired by team Rapid Nomenclature Shift's Cogwork Orthodox Church
    Logo originally from SunnyClockwork
 
    CC BY-SA 3.0
 
    https://pixabay.com/images/id-1711946/
    https://pixabay.com/images/id-282404/
    https://pixabay.com/images/id-201499/
    https://pixabay.com/images/id-70893/
 
    sidebar code from theme:dustjacket-sigma by DrMacro
    animation code from theme:pataphysics by Lt Flops
*/
 
@import url('https://fonts.googleapis.com/css2?family=Song+Myung&display=swap');
@font-face {
    font-family: ELAND_Nice_M;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/ELAND_Nice_M.woff') format('woff');
    font-weight: 700;
    font-style: normal
}
 
:root {
    /*
    한글 대용 - FOR KOREAN
    --title: "총대주교들의 도식";
    --short_title: "도식";
    --subtitle: "충실한 우리, 신의 주물을 뜬다";
    --short_subtitle: "신의 주물을 뜬다";
    */
 
    --title: "元老之图解";
    --short_title: "图解";
    --subtitle: "依神之设计而铸造，吾等满怀信仰";
    --short_subtitle: "依神之设计而铸造";
 
    --dark-accent: 185, 150, 17
}
 
div#container-wrap {
    z-index :-5;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/line.png'), url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/header_cogs.jpg');
    background-repeat: repeat-x, repeat-x;
    background-position: top 14.2em right, top;
    background-size: auto 14em, auto 14em
}
 
/* ---- 헤더 - HEADER ---- */
 
#header {
    background: 0 0;
    height: 180px
}
 
#header h1 {
    padding-left: 2.5em
}
 
#header h1 a {
    padding: 100px 0 25px;
    font-family: ELAND_Nice_M, BauhausLTDemi,  sans-serif
}
 
#header h1 a span {
    font-size: 0
}
 
#header h1 a:before {
    content: var(--title);
    color: #eee;
    text-shadow: 2px 2px 2px #000
}
 
#header h2 {
    padding-left: 4.5em;
    font-family: ELAND_Nice_M, BauhausLTDemi, sans-serif;
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px)
}
 
#header h2 span {
    font-size: 0;
    padding: 14px
}
 
#header h2:after {
    content: var(--subtitle);
    font-weight: 700;
    color: #f0f0c0;
    padding: 19px 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
    white-space: pre
}
 
/* ---- 검색창 - SEARCH-BOX ---- */
 
#search-top-box {
    top: 99px
}
 
#search-top-box-input, #search-top-box-input:hover {
    padding: 2px 5px;
    border: 2px solid;
    -o-border-image: -o-linear-gradient(left, #e9df95, #917b3c);
    border-image: -webkit-gradient(linear, left top, right top, from(#e9df95), to(#917b3c));
    border-image: linear-gradient(to right, #e9df95, #917b3c);
    border-image-slice: 1;
    border-radius: 0
}
 
#search-top-box-input {
    background-color: #7b6a33
}
 
#search-top-box-input:focus, #search-top-box-input:hover {
    background-color: #554920
}
 
#search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover {
    border: none;
    border-radius: 0;
    padding: 4px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #d9ca88), color-stop(50%, #63521c), color-stop(80%, #7b6a33), to(#d9ca88));
    background: -o-linear-gradient(left, #d9ca88 0, #63521c 50%, #7b6a33 80%, #d9ca88 100%);
    background: linear-gradient(to right, #d9ca88 0, #63521c 50%, #7b6a33 80%, #d9ca88 100%);
    -webkit-box-shadow: inset -2px -2px 5px #63521c;
    box-shadow: inset -2px -2px 5px #63521c
}
 
#search-top-box-form input[type=submit] {
    color: #e3dfd4
}
 
#search-top-box-form input[type=submit]:hover {
    -webkit-filter: brightness(.8);
    filter: brightness(.8)
}
 
/* ---- 상단 메뉴 - TOP-NAVIGATION ---- */
 
#top-bar {
    top: 179px
}
 
#top-bar ul li ul li ul {
    left: 159px
}
 
/* ---- 사이드바 - SIDE-BAR ---- */
/* partially copied from Sigma-9 Wanderers' DustJacket Theme by DrMacro */
 
#side-bar .side-block,
#interwiki .side-block {
    border-color: rgb(var(--dark-accent));
    background-color: #fff;
    -webkit-box-shadow: 0 2px 6px rgba(var(--dark-accent), .5);
    box-shadow: 0 2px 6px rgba(var(--dark-accent), .5)
}
#side-bar .side-block.media {
    background-color: #f8f1da !important
}
#side-bar .side-block.resources {
    background-color: #f6eac4 !important
}
#side-bar .heading,
#interwiki .heading {
    font-size: 1rem;
    color: rgb(126, 103, 44,80%);
    background: linear-gradient(to right, rgb(206, 193, 133,70%), transparent);
    border-bottom-color: rgb(126, 103, 44);
    font-family: 'Song Myung', 'Nanum Gothic', serif;
}
 
/* ---- 평가 모듈 - RATE-MODULE ---- */
 
.page-rate-widget-box {
    background: -webkit-gradient(linear, left top, right top, color-stop(5%, #bc9744), color-stop(25%, #fbd076), color-stop(50%, #fff6aa), color-stop(75%, #f0c86d), color-stop(80%, #eac068), to(#bb9645));
    background: -o-linear-gradient(left, #bc9744 5%, #fbd076 25%, #fff6aa 50%, #f0c86d 75%, #eac068 80%, #bb9645 100%);
    background: linear-gradient(to right, #bc9744 5%, #fbd076 25%, #fff6aa 50%, #f0c86d 75%, #eac068 80%, #bb9645 100%);
    border: 1px solid #bdaa79;
    border-radius: 0;
    -webkit-box-shadow: 1px 1px 0 rgb(12 12 12 / 15%);
    box-shadow: 1px 1px 0 rgb(12 12 12 / 15%);
    color: #6b5829;
    font-size: .9rem;
}
 
.page-rate-widget-box .rate-points {
    background-color: transparent !important;
    border: none;
    color: #6b5829;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: transparent;
    border: none;
    font-weight: normal;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    color: inherit;
}
 
.page-rate-widget-box .cancel {
    background-color: transparent;
    border: none;
}
 
.page-rate-widget-box .cancel a {
    color: inherit;
}
 
.page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}
 
/* ---- 정보 모듈 - INFO-MODULE ---- */
 
.rate-box-with-credit-button {
    background: -o-linear-gradient(left, #bc9744 5%, #fbd076 25%, #fff6aa 50%, #f0c86d 75%, #eac068 80%, #bb9645 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(5%, #bc9744), color-stop(25%, #fbd076), color-stop(50%, #fff6aa), color-stop(75%, #f0c86d), color-stop(80%, #eac068), to(#bb9645));
    background: linear-gradient(to right, #bc9744 5%, #fbd076 25%, #fff6aa 50%, #f0c86d 75%, #eac068 80%, #bb9645 100%);
    border: 1px solid #bdaa79 !important;
    border-radius: 0 !important;
    -webkit-box-shadow: 1px 1px 0 rgb(12 12 12 / 15%) !important;
    box-shadow: 1px 1px 0 rgb(12 12 12 / 15%) !important;
    color: #6b5829;
    font-size: .9rem;
}
 
.rate-box-with-credit-button .page-rate-widget-box {
    background: none;
    border: none;
}
 
.rate-box-with-credit-button .fa-info {
    border-color: #6b5829;
    color: #6b5829;
}
 
.rate-box-with-credit-button .fa-info:hover {
     color: #fff;
}
 
#u-credit-view:target,
#u-credit-otherwise:target {
    z-index: 31;
}
 
.modalbox {
    border: 1px solid #af9a1c !important;
    box-shadow: 0 2px 6px rgb(173 162 31 / 50%) !important;
}
 
/* ---- 인터위키 - INTERWIKI ---- */
 
iframe.scpnet-interwiki-frame {
    filter: drop-shadow(0 2px 6px rgba(var(--dark-accent), 0.5));
    -webkit-filter: drop-shadow(0 2px 6px rgba(var(--dark-accent), 0.5));
}
 
/* ----  로고 - LOGO ---- */
 
/* LOGO-BASE */
div#extra-div-2 {
    display: block;
    z-index: 20;
    background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/base.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 48px;
    left: 50%;
    -webkit-transform: translateX(-485px);
    -ms-transform: translateX(-485px);
    transform: translateX(-485px);
    width: 130px;
    height: 130px
}
 
/* GEAR-SMALL */
div#extra-div-3 {
    z-index: 10;
    width: 13px;
    height: 13px;
    display: block;
    position: absolute;
    top: 78px;
    left: 50%;
    -webkit-transform: translateX(-431px);
    -ms-transform: translateX(-431px);
    transform: translateX(-431px)
}
 
div#extra-div-3::before {
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 
div#extra-div-3::before {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/cogS.png');
    -webkit-animation: spin 5s linear infinite;
    -webkit-animation-direction: reverse;
    animation: spin 5s linear infinite
    animation-direction: reverse;
}
 
/* GEAR-MEDIUM */
div#extra-div-4 {
    z-index: 30;
    width: 13px;
    height: 13px;
    display: block;
    position: absolute;
    top: 125px;
    left: 50%;
    -webkit-transform: translateX(-395px);
    -ms-transform: translateX(-395px);
    transform: translateX(-395px)
}
 
div#extra-div-4::before {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 
div#extra-div-4::before {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/cogM.png');
    -webkit-animation: spin 8s linear infinite;
    animation: spin 8s linear infinite;
    animation-direction: reverse
}
 
/* GEAR-LARGE */
div#extra-div-5 {
    z-index: 10;
    width: 13px;
    height: 13px;
    display: block;
    position: absolute;
    top: 48px;
    left: 50%;
    -webkit-transform: translateX(-485px);
    -ms-transform: translateX(-485px);
    transform: translateX(-485px)
}
 
div#extra-div-5::before {
    content: "";
    width: 130px;
    height: 130px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 
div#extra-div-5::before {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/cogL.png');
    -webkit-animation: spin 24s linear infinite;
    animation: spin 24s linear infinite
}
 
/* RACK-GEAR */
/*
::-webkit-scrollbar {
  display: none;
}
*/
html {
  scrollbar-width: thin !important;  /* Firefox */
}
 
div#extra-div-6 {
    z-index: 10;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    top: 173.5px;
    left: 0;
    -webkit-transform: translateX(-18px);
    -ms-transform: translateX(-18px);
    transform: translateX(-18px);
}
 
div#extra-div-6::before {
    content: "";
    width: calc( 100vw + 18px );
    height: 270%;
    position: absolute;
    background-repeat: repeat-x;
    background-position: center center;
    background-size: 18px 10px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}
 
div#extra-div-6::before {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/rack.png');
    -webkit-animation: line 1s linear infinite;
    animation: line 1s linear infinite;
    -webkit-animation-delay: -.25s;
    animation-delay: -.25s
}
 
/* LEVER & STICK ANIMATION */
#header #header-extra-div-2::before {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}
 
#header #header-extra-div-1::before, #header #header-extra-div-3::before {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}
 
/* LEVER */
#header #header-extra-div-1 {
    z-index: -1;
    width: 13px;
    height: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 47px;
    left: 34px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}
 
#header #header-extra-div-1::before {
    z-index: -1;
    content: "";
    width: 85px;
    height: 85px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 
#header #header-extra-div-1::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/lever.png');
    -webkit-animation-name: cont-spin;
    animation-name: cont-spin
}
 
/* STICK */
#header #header-extra-div-2 {
    z-index: -2;
    width: 13px;
    height: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 30px;
    top: 105px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0
}
 
#header #header-extra-div-2::before {
    z-index: -2;
    content: "";
    width: 20px;
    height: 35px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 
#header #header-extra-div-2::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/stick.png');
    -webkit-animation-name: dir;
    animation-name: dir;
    animation-direction: reverse
}
 
/* STICK-2 */
#header #header-extra-div-3 {
    z-index: -2;
    width: 13px;
    height: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 105px;
    top: 105px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0
}
 
#header #header-extra-div-3::before {
    z-index: -1;
    content: "";
    width: 15px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 15px 40px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 
#header #header-extra-div-3::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/stick.png');
    -webkit-animation-name: dir;
    animation-name: dir
}
 
body {
    overflow-x: hidden
}
 
/* STEAM */
div#extrac-div-1::before, div#extrac-div-2::before, div#extrac-div-3::before {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    -webkit-animation-name: dir2;
    animation-name: dir2;
    -webkit-animation-duration: 5s;
    animation-duration: 5s
}
 
div#extrac-div-1::before {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}
 
div#extrac-div-2::before {
    -webkit-animation-delay: -.5s;
    animation-delay: -.5s
}
 
div#extrac-div-3::before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}
 
div#extrac-div-1 {
    z-index: 10;
    width: 140px;
    height: 15px;
    display: block;
    position: absolute;
    top: -60px;
    left: calc(50% + 10px);
    -webkit-transform: translateX(-525px);
    -ms-transform: translateX(-525px);
    transform: translateX(-525px)
}
 
div#extrac-div-1::before {
    content: "";
    width: 100px;
    height: 200px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 
div#extrac-div-1::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/steam1.png');
    background-size: 70px;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
 
div#extrac-div-2 {
    z-index: 10;
    width: 140px;
    height: 15px;
    display: block;
    position: absolute;
    top: -80px;
    left: calc(50% + 10px);
    -webkit-transform: translateX(-545px);
    -ms-transform: translateX(-545px);
    transform: translateX(-545px)
}
 
div#extrac-div-2::before {
    content: "";
    width: 100px;
    height: 200px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 
div#extrac-div-2::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/steam2.png');
    background-size: 70px;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}
 
div#extrac-div-3 {
    z-index: 10;
    width: 140px;
    height: 15px;
    display: block;
    position: absolute;
    top: -60px;
    left: calc(50% + 10px);
    -webkit-transform: translateX(-545px);
    -ms-transform: translateX(-545px);
    transform: translateX(-545px)
}
 
div#extrac-div-3::before {
    content: "";
    width: 100px;
    height: 200px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
 
div#extrac-div-3::before {
    z-index: -1;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ascheme/steam3.png');
    background-size: 70px;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}
 
/* ANIMATION */
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
 
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
 
@keyframes spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
 
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
 
@-webkit-keyframes cont-spin {
    0% {
        -webkit-transform: rotate(195deg);
        transform: rotate(195deg)
    }
 
    80% {
        -webkit-transform: rotate(165deg);
        transform: rotate(165deg)
    }
 
    100% {
        -webkit-transform: rotate(195deg);
        transform: rotate(195deg)
    }
}
 
@keyframes cont-spin {
    0% {
        -webkit-transform: rotate(195deg);
        transform: rotate(195deg)
    }
 
    80% {
        -webkit-transform: rotate(165deg);
        transform: rotate(165deg)
    }
 
    100% {
        -webkit-transform: rotate(195deg);
        transform: rotate(195deg)
    }
}
 
@-webkit-keyframes dir {
    0% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
 
    80% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
 
    100% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
}
 
@keyframes dir {
    0% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
 
    80% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
 
    100% {
        -webkit-transform: translateY(18px);
        transform: translateY(18px)
    }
}
 
@-webkit-keyframes dir2 {
    0% {
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
        opacity: 0;
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }
 
    20% {
        opacity: .6;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
 
    40% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: .7;
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
 
    100% {
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
        opacity: .5
    }
}
 
@keyframes dir2 {
    0% {
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
        opacity: 0;
        -webkit-transform: scale(.4);
        transform: scale(.4)
    }
 
    20% {
        opacity: .6;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
 
    40% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: .7;
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
 
    100% {
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
        opacity: .5
    }
}
 
@-webkit-keyframes line {
    from {
        -webkit-transform: translateX(18px);
        transform: translateX(18px)
    }
 
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}
 
@keyframes line {
    from {
        -webkit-transform: translateX(18px);
        transform: translateX(18px)
    }
 
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}
 
/* ---- 반응형 - RESPONSIVE-DESIGN ---- */
@media (min-width: 1104px){
    #header h1 {
        padding-left: 1.5em
    }
    #header h2 {
        padding-left: 3em
    }
}
 
@media (min-width: 1104px) and (min-height: 2079px) {
    div#extra-div-6::before {
        -webkit-animation-delay:-.05s;
        animation-delay: -.05s;
    }
}
 
@media (max-width: 1104px) {
    #header h1, #header h2 {
        margin-left:120px
    }
 
    #header h1 a:before {
        content: var(--short_title)
    }
 
    div#extra-div-2, div#extra-div-5 {
        left: calc(51px + 5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    div#extra-div-3 {
        left: calc(51px + 59px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    div#extra-div-4 {
        left: calc(51px + 95px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    div#extra-div-6::before {
        background-position: left center;
        -webkit-animation-delay:-.97s;
        animation-delay: -.97s;
    }
 
    #header #header-extra-div-1 {
        left: calc(-4.9vw + 51px + 27.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    #header #header-extra-div-2 {
        left: calc(-4.9vw + 51px + 24.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    #header #header-extra-div-3 {
        left: calc(-4.9vw + 51px + 97.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    div#extrac-div-1 {
        left: calc(51px - 25px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    div#extrac-div-2 {
        left: calc(51px - 45px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    div#extrac-div-3 {
        left: calc(51px - 45px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
 
@media (max-width: 767px) {
 
    #top-bar .open-menu a {
        border: .2em solid #ba9e57;
        color: #ba9e57
        position: fixed;
        bottom: 0.6em;
        top : auto;
        left: 0.5em;
    }
 
    #side-bar, #side-bar:target {
        z-index: 50;
    }
    #side-bar {
  background: linear-gradient(to bottom, #726969 0%, #d3cdcd 30%, #ececec 50%, #898383 100%);
    }
}
 
@media (max-width: 385px) {
    #header h1, #header h2 {
        margin-left:80px
    }
 
    #header h2:after {
        content: var(--short_subtitle)
    }
 
    div#extra-div-2, div#extra-div-5 {
        left: 5px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    div#extra-div-3 {
        left: 59px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    div#extra-div-4 {
        left: 95px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    #header #header-extra-div-1 {
        left: calc(27.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    #header #header-extra-div-2 {
        left: calc(24.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    #header #header-extra-div-3 {
        left: calc(97.5px);
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
 
    div#extrac-div-1 {
        left: -25px
    }
 
    div#extrac-div-2 {
        left: -45px
    }
 
    div#extrac-div-3 {
        left: -45px
    }
 
    div#extra-div-6::before {
        -webkit-animation-delay: -.81s;
        animation-delay: -.81s;
    }
}
 
/* ---- 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;
    }
}

- 隐藏源代码

合著版式

页面版本: 8, 最后编辑于: 06 May 2024 01:29

编辑评分 (+24) 标签讨论 (1) 历史记录附件打印网站工具 + 选项

SCP基金会

控制，收容，保护

著作信息

元老图解