component:the-way-out-theme-xc
테마 색상
말리부색--newpage-color#63BEFF
매디슨색--bright-accent#0E4166
윌리엄색--medium-accent#3C6478
코끼리색--dark-accent#0C2436
비고: 이 테마는 블랙 하이라이터 기반 테마입니다. 이 테마를 이용하기 위해서는 블랙하이라이터 테마도 임포트해주세요 자세한 사항은 여기를 참고해주세요.
위키의 어디서든
[[include :scp-wiki:theme:black-highlighter-theme]]
[[include component:the-way-out-theme]]
예시
수평줄은 하이픈 5개 "------"를 치면 만들어지며, 따로 들어 있는 곳 (인용 블록 등) 이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.
제목은 문장 처음에 "+"을 1개부터 6개까지 입력해서 적용할 수 있습니다.
탭뷰입니다.
다른 텍스트입니다.
멋지죠.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
긴 탭입니다. 텍스트가 많습니다.
인용 블록입니다. 문장 처음에 ">"를 붙여서 만들 수 있습니다.
다른 텍스트
요건 수평줄
블록 속의 블록
이건 | 표입니다 |
---|---|
어떤 식으로 | 만드는 건진 |
다 아시죠 |
제목 글꼴은 Proxima Nova + 나눔바른고딕,
Poppins + 나눔바른고딕,
고정폭 글꼴은 나눔고딕코딩입니다.
/* The Way Out Theme [2019 Wikidot Theme] Created by Rounderhouse, with massive help from Woedenaz. Based on Black Highlighter Theme created by Woedenaz and Croquembouche. The O5 Command logo was created by djkaktus. Licensed under CC BY SA 3.0. */ @import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css"); @import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css"); /* Fonts */ @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding&subset=korean'); @import url('https://xcninety.github.io/Black-Highlighter/NanumBarunCatsi.css'); /* All Vars Used */ :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "nuscp"; /* must be either "nuscp" or "sigma9" */ --theme-id: "nuscp"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "nu-SCP Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("http://scp-wiki.wikidot.com/local--files/component:the-way-out-theme/wtf.svg"); --header-title: "상급감시사령부"; --header-subtitle: "제01기지 내부 데이터베이스"; /* Typefaces */ --body-font: proxima-nova, 'NanumBarunCatsi', sans-serif; --header-font: 'Poppins', 'NanumBarunCatsi', sans-serif; --title-font: 'Poppins', 'NanumBarunCatsi', sans-serif; --mono-font: "Nanum Gothic Coding", monospace; /* Standard Colors */ --white-monochrome: 252, 252, 252; /* white */ --pale-gray-monochrome: 244, 244, 244; /* v light gray for blockquotes and stuff */ --light-gray-monochrome: 170, 170, 170; /* light accent gray for login status */ --gray-monochrome: 66, 66, 72; /* gray */ --dark-gray-monochrome: 48, 48, 52; /* dark accent gray for sidebar background */ --black-monochrome: 12, 12, 12; /* black */ --bright-accent: 14, 65, 102; /* blue */ --medium-accent: 60, 100, 120; /* medium blue */ --dark-accent: 12, 36, 54; /* dark blue */ --newpage-color: 99, 190, 255; /* bright blue */ /* Primary Theme Colors */ --swatch-background: var(--white-monochrome); --swatch-primary: var(--medium-accent); --swatch-primary-darker: var(--bright-accent); --swatch-primary-darkest: var(--bright-accent); /* Primary Text Colors */ --swatch-text-dark: var(--black-monochrome); --swatch-text-light: var(--white-monochrome); --swatch-important-text: var(--bright-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--gray-monochrome); --swatch-menubg-light-color: var(--gray-monochrome); --swatch-menubg-medium-color: var(--gray-monochrome); --swatch-menubg-medium-dark-color: var(--black-monochrome); --swatch-menubg-dark-color: var(--dark-gray-monochrome); --swatch-menubg-black-color: var(--black-monochrome); --swatch-menubg-hover-color: var(--gray-monochrome); --swatch-menutxt-dark-color: var(--white-monochrome); --swatch-menutxt-light-color: var(--white-monochrome); --swatch-border-color: var(--black-monochrome); /* Primary Header Colors */ --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); --swatch-topmenu-border-color: var(--dark-gray-monochrome); --swatch-topmenu-bg-color: var(--dark-gray-monochrome); --rating-module-button-color: var(--black-monochrome); --rating-module-text-color: var(--black-monochrome); /* Link Colors */ --link-color: 27, 65, 94 ; --visited-link-color: 133, 193, 233; --hover-link-color: 133, 193, 233; /* Header Gradients */ --gradient-header: linear-gradient(to bottom, rgba(var(--black-monochrome),0.97) 10%, rgb(var(--black-monochrome)) 65%, rgb(var(--dark-gray-monochrome)) 100%); --gradient-topmenu: linear-gradient(to bottom, white 0%, white 7.5rem, rgba(var(--swatch-topmenu-border-color), 1) 7.5rem, rgba(var(--swatch-topmenu-bg-color), 1) 7.625rem, rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) 100%); --gradient-topmenu-mobile: linear-gradient(to bottom, rgba(var(--swatch-topmenu-border-color), 1) 0, rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem, rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem), rgba(var(--swatch-topmenu-border-color), 1) 3rem); --diagonal-stripes: repeating-linear-gradient(25deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.1) 0.35vh, rgba(88, 88, 88, 0.2) 0.5vh); --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--medium-accent), 0.45) 0%, rgba(var(--medium-accent), 0.55) 100%); --gradient-background: linear-gradient(to bottom, rgba(var(--background-gradient-color), 1) calc(calc(0 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.987) calc(calc(0.8 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.951) calc(calc(2.9 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.896) calc(calc(6.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.825) calc(calc(11 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.741) calc(calc(16.6 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.648) calc(calc(23.1 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.55) calc(calc(30.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.45) calc(calc(38.3 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.352) calc(calc(46.7 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.259) calc(calc(55.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.175) calc(calc(64.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.104) calc(calc(73.5 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.049) calc(calc(82.5 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0.013) calc(calc(91.4 / 100) * var(--background-gradient-distance)), rgba(var(--background-gradient-color), 0) calc(calc(100 / 100) * var(--background-gradient-distance))); --header-background-image-size: 100% 7.5rem; /* Spacing Measurements */ --offset-from-page-top: 1.2rem; /* space between the top of the page and the start of the header */ --body-width-on-desktop: 44.25rem; --sidebar-width-on-desktop: calc(var(--base-font-size)*19); --sidebar-width-on-mobile: 14rem; --scrollbar-width: 0.5625rem; --border-styling: solid 0.0625rem rgb(var(--swatch-border-color)); --border-radius-width: 0.0625rem; /* Sidebar */ --sidebar-transition-timing: 0.5s ease-in-out 0.1s; --sidebar-internal-border-thickness: 0.125rem; --background-gradient-color: 12, 36, 54; --background-gradient-distance: 40rem; /* Dynamic Font Sizing */ /* This set of vars will make the base font size vary with screen width */ /* base font size ranges */ --unitless-min-font-size: 0.8; --unitless-max-font-size: 1; /* base viewport size ranges */ --unitless-min-viewport: 768; --unitless-max-viewport: 900; /* base line height size ranges */ --min-lineheight: 1.2; --max-lineheight: 1.5; /* calculating size differences */ --font-size-difference: calc(var(--unitless-max-font-size) - var(--unitless-min-font-size)); --lineheight-difference: calc(var(--max-lineheight) - var(--min-lineheight)); --viewport-range-difference: calc(var(--unitless-max-viewport) - var(--unitless-min-viewport)); --min-viewport-difference: calc(100vw - (var(--unitless-min-viewport) * 1px)); /* responsive fluid type formula */ --font-calc: calc((var(--unitless-min-font-size) * 1rem) + var(--font-size-difference) * var(--min-viewport-difference) / var(--viewport-range-difference)); --line-calc: calc(var(--min-lineheight) + var(--lineheight-difference) * var(--min-viewport-difference) / var(--viewport-range-difference)); /* final values */ --base-font-size: var(--font-calc); --base-line-height: var(--line-calc); } #side-bar div.menu-item a, #side-bar div.menu-item .text, #side-bar div.menu-item a:visited, #side-bar div.menu-item a:active { color: white; } .scp-image-block { color: rgb(var(--white-monochrome)); } #side-bar div.menu-item .sub-text { color: rgb(var(--white-monochrome)); } #login-status { color: rgb(var(--medium-accent)); } blockquote { background-color: rgb(var(--light-gray-monochrome)); } .yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em { color: white; } .code { background-color: rgb(var(--light-gray-monochrome)) !important; } iframe.scpnet-interwiki-frame { filter: invert(0.8) saturate(0.25) hue-rotate(50deg); } @media only screen and (max-width: 768px) { #header h1 a, #header h2 span { margin-left: 7.75rem; margin-top: 0.35em; } #header h1 a { line-height: 1; } #header h2 span { margin-top: -webkit-calc(5.5rem + var(--offset-from-page-top)); margin-top: calc(5.5rem + var(--offset-from-page-top)); } } #header { filter: drop-shadow(.042rem .042rem .042rem rgb(150,150,150)); } @media only screen and (max-width: 768px) { #header { background-position: calc(7.4rem - var(--size)) calc(((var(--size) * -1) + 7.5rem + var(--y-offset)) / 2); } }