Nukaktus Theme
rating: 0+x

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

logo_kakkon.jpg

Logo for The Inner Circle

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/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/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: "Kaktus Kontainer Theme";
    /* set this to your theme's full name */
 
    /* Header */
    --logo-image: url("http://kontainer.djkakt.us/local--files/component:nukaktus-theme/logo_kakkon.svg");
    --header-title: "KaktusKontainer";
    --header-subtitle: "The Inner Circle";
 
    /* 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: 247, 94, 17;
    /* bright red */
    --medium-accent: 187, 73, 16;
    /* medium red */
    --dark-accent: 187, 73, 16;
    /* dark red */
    --newpage-color: 221, 102, 17;
    /* 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: unset;
    --gradient-sidemenu-header: linear-gradient(10deg,
        rgba(var(--dark-accent), 1) 0%,
        rgba(var(--swatch-primary), 1) 100%);
}
 
div#extra-div-1 {
    position: absolute;
    display: block;
    width: 100%;
    height: 7.5rem;
    top: 0;
    left: 0;
    z-index: -1;
    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.3'%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");
    background-size: 2.5rem;
    transform: scaleX(-1);
}
 
#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;
    overscroll-behavior: none;
    overflow: hidden;
    padding-bottom: 2rem;
}
 
#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-end;
    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;
    }
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License