[[iftags +theme]]
Usage
Note: This is a Black Highlighter based theme and will be included. To learn more go here.
To import this theme, add this to your page:
[[include component:nukaktus-theme]]
Examples
A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.
Titles can be created by putting between one and six plus "+" at the start of the line
This is a tab view.
The logic behind tabs have been adjusted to account for transitions. Click another tab to see the slick, smooth action.
This is a blockquote, created by putting "> " at the start of each line.
More text
That's a horizontal rule
Nested blockquotes
This is a | table |
---|---|
You should know | how to make these |
already |
The body font is Lato. The header font is Proxima Nova Condensed. The title font is Proxima Nova Extra Condensed. The monospace font used is Adaptive Mono.
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css"); @import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css"); @import url("https://use.typekit.net/hvf2nut.css"); :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "Black-Highlighter"; /* must be either "Black-Highlighter" or "sigma9" */ --theme-id: "kakkon-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Viro's Ethics Committee Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("http://scp-sandbox-3.wdfiles.com/local--files/component%3Aethics-committee-theme-viro/fas"); --header-title: "The Ethics Committee"; --header-subtitle: "Fiat Justitia, Ne Pereat Mundus"; /* Typefaces */ --body-font: 'Lato', sans-serif; --header-font: serenity, 'Poppins', sans-serif; --title-font: proxima-nova-extra-condensed, 'Poppins', sans-serif; --mono-font: adaptive-mono, "PT Mono", "Andale Mono", "Courier New", Courier, monospace; /* Standard Colors */ --white-monochrome: 252, 252, 252; /* white */ --pale-gray-monochrome: 204, 222, 221; /* v light gray for blockquotes and stuff */ --light-gray-monochrome: 151, 184, 182; /* light accent gray for login status */ --gray-monochrome: 64, 75, 75; /* gray */ --dark-gray-monochrome: 49, 45, 45; /* dark accent gray for sidebar background */ --black-monochrome: 12, 12, 12; /* black */ --bright-accent: 17, 196, 247; /* bright blue*/ --medium-accent: 16, 178, 187; /* medium red */ --dark-accent: 16, 139, 187; /* dark red */ --newpage-color: 17, 207, 221; /* pale orange */ /* Primary Theme Colors */ --swatch-background: var(--white-monochrome); --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--dark-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(--white-monochrome); --swatch-menubg-light-color: var(--pale-gray-monochrome); --swatch-menubg-medium-color: var(--light-gray-monochrome); --swatch-menubg-medium-dark-color: var(--gray-monochrome); --swatch-menubg-dark-color: var(--dark-gray-monochrome); --swatch-menubg-black-color: var(--black-monochrome); --swatch-menubg-hover-color: var(--black-monochrome); --swatch-menutxt-dark-color: var(--black-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(--bright-accent); --swatch-topmenu-bg-color: var(--black-monochrome); --rating-module-button-color: var(--black-monochrome); --rating-module-text-color: var(--swatch-menutxt-dark-color); /* Header Gradients */ --gradient-header: linear-gradient(to bottom, rgba(var(--dark-gray-monochrome), 1) 0%, rgba(var(--dark-gray-monochrome), 1) 30%, rgba(var(--swatch-primary), 1) 100%); --diagonal-stripes: repeating-linear-gradient(45deg, 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(--dark-accent), 1) 0%, rgba(var(--swatch-primary), 1) 100%); } #header h1 a { font-size: 175%; } #search-top-box-form * { font-family: var(--header-font); font-weight: 600 !important; letter-spacing: 0.05em; } #search-top-box-form { display: inline-flex; justify-content: center; position: absolute; height: 1.3rem; top: 47%; right: 3%; width: auto; text-align: center; justify-items: center; align-content: center; align-items: center; padding-top: 0.4rem!important; } input.button.btn { padding-top: 0.1em !important; } #login-status { color: rgb(var(--swatch-menubg-light-color)); font-weight: 600; letter-spacing: 0.05em; } #login-status * { font-family: var(--header-font); letter-spacing: 0.05em; } #search-top-box-form>input, #search-top-box-form>input[type="submit"] { min-height: 1.3rem; height: 1.3rem; padding: .25rem; margin: 0; box-sizing: border-box; flex-grow: 1; display: flex; font-weight: 500; } #top-bar div.top-bar>ul>li>a, #top-bar div.mobile-top-bar>ul>li>a { font-family: var(--title-font); font-size: var(--base-font-size); text-transform: uppercase; align-items: baseline; } #top-bar div.top-bar>ul>li>ul>li>a, #top-bar div.mobile-top-bar>ul>li>ul>li>a { font-weight: 700; } #side-bar { background: rgba(var(--swatch-menubg-light-color),0.5) !important; } #side-bar:hover { background: rgba(var(--swatch-menubg-light-color),0.5) !important; } #side-bar { height: calc(100vh - 1rem); scrollbar-width: thin; z-index: 9; } #side-bar .side-block { height: 100%; justify-content: space-around; background: transparent !important; box-shadow: unset !important; } #side-bar div.menu-item { flex-grow: 2; } #side-bar div.menu-item > p { height: 100%; width: 100%; display: flex; align-items: center; justify-content: flex-end; } #side-bar > div > div:nth-child(1) > div { border: unset !important; } .side-block div:nth-of-type(1) * { box-sizing: border-box; } .side-block div:nth-of-type(1) { display: flex; height: auto; width: 100%; border-left: none; justify-content: center !important; background-color: rgba(var(--pale-gray-monochrome)); } .side-block div:nth-of-type(1) form { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0 1rem; } .side-block div:nth-of-type(1) input.button, .side-block div:nth-of-type(1) input.text { font-family: var(--header-font); font-size: calc(var(--base-font-size)*1.1); width: 100%; background-color: rgba(var(--swatch-topmenu-bg-color)); color: rgba(var(--swatch-menutxt-light-color)); padding: 0.25rem; margin: 0 !important; } .side-block div:nth-of-type(1) input.text { background-color: rgba(var(--swatch-topmenu-bg-color),0.25)!important; height: 2rem!important; margin-bottom: -0.0625rem!important; } .side-block div:nth-of-type(1) input.button { border: unset!important; } #side-bar div.menu-item a, #side-bar div.menu-item .text { padding: 0 .6rem; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-start; font-weight: 700; font-family: var(--header-font); font-size: calc(var(--base-font-size) * 1.1); } #side-bar .heading, #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded { font-family: var(--title-font); background-image: url("data: image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23bb4910' fill-opacity='0.75'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), var(--gradient-sidemenu-header); background-size: 10%, auto; display: flex; justify-content: flex-end; align-items: center; text-transform: uppercase; color: rgba(var(--swatch-menutxt-light-color)); text-shadow: .063rem .063rem .063rem rgb(var(--swatch-border-color)); padding: 0 .6rem; box-shadow: inset 0 -0.625rem 0 0 rgb(var(--swatch-border-color)); } @media only screen and (max-width: 768px) { #header h1 a, #header h2 span { margin-left: 7.75rem; } #header h2 span { margin-top: calc(3.4rem + var(--offset-from-page-top)); } #search-top-box-form>input { display: none; } #top-bar div.top-bar>ul>li>a, #top-bar div.mobile-top-bar>ul>li>a { font-size: calc(var(--base-font-size) * 1.4); align-items: center; } }