Azarasi Theme
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap); /* Centered Header Sigma-9 * [2021 Wikidot Component] * By Lt Flops (CC BY-SA 3.0) * Forked from: * Penumbra Theme by EstrellaYoshte * Also based on: * Centered Header BHL by Woedenaz **/ /* ---- VARS ---- */ :root{ --titleColor: hsl(0, 0%, 95%); --subtitleColor: hsl(60, 62%, 85%); --lgurl: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A7522555-167-g69b/logo.svg"); } /* ---- SITE BANNER ---- */ #header, div#header{ background-image: none; } #header::before{ position: absolute; width: 100%; height: 100%; content: ""; background-image: var(--lgurl); background-position: center top; background-repeat: no-repeat; background-size: auto 10.55em; opacity: .33; } #header h1, #header h2{ float: none; margin-left: 0; text-align: center; } #header h1 span, #header h2 span{ /* Hide the Existing Text */ display: none; } #header h1 a::before, #header h2::before{ /* Style the New Text */ font-family: "Montserrat", "Arial", sans-serif; text-shadow: none; } #header h1 a::before{ position: relative; bottom: .15em; color: var(--titleColor); font-size: 115%; font-weight: 700; } #header h2::before{ position: relative; top: .1em; color: var(--subtitleColor); font-size: 130%; font-weight: 600; } #header h1 a::before{ /* Set the New Text's Content From Variable */ content: var(--header-title, "SCP財団"); } #header h2::before{ content: var(--header-subtitle, "確保 - 収容 - 保護"); } /* ---- SEARCH ---- */ #search-top-box{ top: 1em; right: 0; } #search-top-box-form input.button{ margin-right: 0; } #search-top-box-input, #search-top-box-input:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus{ border-radius: 0; box-shadow: none; font-size: 100%; } /* ---- TOP BAR ---- */ #top-bar{ right: 0; display: flex; justify-content: center; } #top-bar ul li ul{ border-bottom: 1px solid hsl(0, 0%, 40%); box-shadow: none; } /* ---- LOGIN ---- */ #login-status{ top: 1.1em; right: initial; color: hsl(0, 0%, 87%); } #account-topbutton{ border-color: hsl(0, 0%, 87%); font-size: 100%; } /* ---- PAGE TITLE ---- */ .meta-title, #page-title{ text-align: center; } /* ---- BREADCRUMBS ---- */ .pseudocrumbs, #breadcrumbs{ text-align: center; } /* ---- MOBILE DISPLAY ---- */ @media (max-width: 767px){ #search-top-box{ top: 1.85em; width: unset; } .mobile-top-bar{ position: relative; left: 0; display: flex; justify-content: center; } #login-status{ top: 0; right: 0; } #header .printuser{ font-size: 0; } #header .printuser img.small{ margin: 0; transform: translate(6px, 4px); } #my-account{ display: none; } #account-topbutton{ margin-left: 2px; } }
/* 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; } }
:root { --timeScale: 1; --timeDelay: 0s; } /* Converting middle divider from box-shadow to ::before pseudo-element */ .anom-bar > .bottom-box { box-shadow: none!important; } .anom-bar > .bottom-box::before { position: absolute; content: " "; width: 100%; height: 0.5rem; background-color: rgb(var(--black-monochrome, 12, 12, 12)); transform: translateY(-0.74rem); } /* DIVIDER */ .anom-bar > .bottom-box::before { animation-name: divider; animation-duration: calc(0.74s * var(--timeScale)); animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.32,.38,.39,.94); animation-fill-mode: backwards; } /* CLASSIFIED LEVEL BARS */ div.top-center-box > * { animation-name: bar; animation-duration: calc(0.45s * var(--timeScale)); animation-iteration-count: 1; animation-timing-function: ease-out; animation-fill-mode: backwards; } div.top-center-box > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); } /* TOP TEXT */ div.top-left-box, div.top-right-box { clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%); } div.top-left-box > *, div.top-right-box > * { position: relative; animation-name: bottomup; animation-duration: calc(0.65s * var(--timeScale)); animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: ease-out; animation-fill-mode: backwards; } /*-----------------------------------*/ /*-----------------------------------*/ /* CONTAINMENT, DISRUPTION, RISK CLASSES */ div.text-part > * { clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%); animation-name: expand2; animation-duration: calc(0.5s * var(--timeScale)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } div.text-part > :nth-child(1) { animation-name: expand1; } div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); } div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); } div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); } div.main-class::before, div.main-class::after { animation-name: iconslide; animation-duration: calc(0.45s * var(--timeScale)); animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } /* BOTTOM TEXT */ div.main-class > *, div.disrupt-class > *, div.risk-class > * { white-space: nowrap; animation-name: flowIn; animation-duration: calc(0.42s * var(--timeScale)); animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: ease-out; animation-fill-mode: backwards; } /*-----------------------------------*/ /*-----------------------------------*/ /* DIAMOND */ div.arrows { animation-name: arrowspin; animation-duration: calc(0.7s * var(--timeScale)); animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } div.quadrants > * { animation-name: fade; animation-duration: calc(0.3s * var(--timeScale)); animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } div.top-icon, div.right-icon, div.left-icon, div.bottom-icon { animation-name: nodegrow; animation-duration: calc(0.4s * var(--timeScale)); animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.12,.41,.27,.99); animation-fill-mode: backwards; } div.diamond-part { clip-path: polygon( -10% 0.37%, 120% 0.37%, 120% 100%, -10% 100%); animation-name: diamondBorder; animation-duration: calc(0.8s * var(--timeScale)); animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); animation-iteration-count: 1; animation-timing-function: cubic-bezier(.32,.38,.39,.94); animation-fill-mode: backwards; will-change: box-shadow; } /* MOBILE QUERY */ @media (max-width: 480px ) { .anom-bar > .bottom-box::before { display:none; } .anom-bar > .bottom-box { box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12))!important; } div.top-center-box > * { animation-name: bar-mobile; animation-duration: calc(0.9s * var(--timeScale)); } div.top-center-box > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); } div.top-center-box > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); } } /*--- Motion Accessibility ---*/ @media screen and (prefers-reduced-motion: reduce) { div.anom-bar-container { --timeScale: 0!important; } } /*-------------------------*/ @keyframes divider { from { max-width: 0%; } to { max-width: 100%; } } @keyframes bar { from { max-width: 0%; } to { max-width: 100%; } } @keyframes bar-mobile { from { max-height: 0%; } to { max-height: 100%; } } @keyframes bottomup { from { top: 100px; } to { top: 0; } } @keyframes expand1 { from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); } to { opacity: 1; clip-path: inset(0); } } @keyframes iconslide { from { opacity: 0; transform: translateX(-5rem); } to { opacity: 1; transform: translateX(0); } } @keyframes expand2 { from { opacity: 0; width: 1%; } to { opacity: 1; width: calc(100% - 0.25rem); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes flowIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes arrowspin { from { clip-path: circle(0%); transform: rotate(135deg); } to { clip-path: circle(75%); transform: rotate(0deg); } } @keyframes nodegrow { from { transform: scale(0);} to { transform: scale(1);} } @keyframes diamondBorder { from { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); } to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); } }
例
画像。
罫線は、5つのハイフン「-----」を使用して作成でき、何かの内側(例: ブロック引用)に配置されていなければページ全体に適用されます。このドキュメントのセクションを区切る線は罫線です。
見出しは、行の先頭に1~6文字の「+」を置くことで作成できます。
これはタブです。1
見てください、ここにもテキストがあります。
なんと奇妙な。
そしてこれはルビ振り仮名です。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは長いタブです。テキストがたくさん入っています。
これは引用ブロックです。各行の先頭に半角の「> 」を置くことで作成されます。
追加のテキスト
これは罫線です
入れ子になった引用ブロック
これはメモブロックです。
これは | テーブルです |
---|---|
もう | 作り方は |
知っているはずです |
[[div class="notation"]].BetterFootnotes
Footnotes
1. そしてこれは脚注です。