Pataphysicsthemenf

Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.

How to add Black Highlighter:
On your page, add

 [[include :wanderers-library:component:black-highlighter-theme-dev]]

That's it.

How to add New Foundation Pataphysics:
This is a bit longer. On your page, add

[[module css]]
/* Fonts */

@import url('https://fonts.googleapis.com/css?family=Lato:400,900|PT+Mono|Poppins:600,800');

/* 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: "Pataphysicsthemenf";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Pataphysics NF Theme";
    /* set this to your theme's full name */

    /* Header */
    --logo-image: url("http://sekiyotest2.wdfiles.com/local--files/pataphysicsthemenf/pataphysicsnf.gif");
    --header-title: "The New Foundation";
    --header-subtitle: "RESEARCH DEPARTMENT / PATAPHYSICS DIVISION";

    /* Typefaces */
    --body-font: 'Lato', sans-serif;
    --header-font: 'Poppins', sans-serif;
    --title-font: 'Poppins', sans-serif;
    --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;

    /* Standard Colors */
    --white-monochrome: 255, 255, 255;
    /* white */
    --pale-gray-monochrome: 33, 33, 33;
    /* v light gray for blockquotes and stuff */
    --light-gray-monochrome: 33, 33, 33;
    /* light accent gray for login status */
    --gray-monochrome: 53, 53, 53;
    /* gray */
    --dark-gray-monochrome: 87, 68, 91;
    /* dark accent gray for sidebar background */
    --black-monochrome: 25, 25, 25;
    /* black */
    --bright-accent: 87, 68, 91;
    /* blue */
    --medium-accent: 25, 25, 25;
    /* medium blue */
    --dark-accent: 25, 25, 25;
   /* dark blue */
    --newpage-color: 87, 68, 91;
    /* 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);

    /* Header Gradients */

    --gradient-header: linear-gradient(to bottom, rgba(var(--black-monochrome),0.97) 0%, 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);
    --gradient-sidemenu-header: linear-gradient(40deg,
        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;

    /* Box-Shadow 1px Borders */
    --box-border-bottom: 0 0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-top: 0 -0.0625rem 0 0 rgb(var(--swatch-border-color));
    --box-border-left: -0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-right: 0.0625rem 0 0 0 rgb(var(--swatch-border-color));
    --box-border-all: 0 0 0 0.0625rem rgb(var(--swatch-border-color));

    /* Sidebar */
    --sidebar-transition-timing: 0.5s ease-in-out 0.1s;
    --sidebar-internal-border-thickness: 0.125rem;

    --background-gradient-color: 90, 90, 90;
    --background-gradient-distance: 30rem;

    /* 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);
}

.scp-image-block {
   color: rgb(var(--white-monochrome));
}
#login-status { 
   color: rgb(var(--light-gray-monochrome));
}

#side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link {
   color: rgb(var(--black-monochrome));
   background-color: rgb(var(--light-gray-monochrome));
}
blockquote {
    background-color: rgba(0,0,0,0.70);
}
#side-bar div.menu-item>:not(:nth-child(2)):not(.collapsible-block) {
   color: rgb(var(--pale-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;
}
.footnotes-footer{display:none}

#page-content .collapsible-block-link{color: #000;}

#page-title{
margin-bottom: 0px!important;
text-align: center!important;
}
@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));
    }
}

    div#extra-div-1 {
        width: 100%;
        height: calc(100% - 9.375rem);
        position: absolute;
        top: 9.375rem;
        left: 0;
        z-index: -1;
        background-color: rgba(252, 252, 252, 1);
        background-color: rgba(var(--swatch-background), 1);
        -webkit-mask: var(--gradient-background);
        background-image: url(http://sekiyotest2.wdfiles.com/local--files/pataphysicsthemenf/PataphysicsNFBackground.png), var(--gradient-background);
        background-size: 10%, 100% var(--background-gradient-distance);
        background-repeat: repeat, repeat-x;
        pointer-events: none;
    }
}

@supports (background-blend-mode: screen) {
    #extrac-div-1 {
        width: 100%;
        height: 7.75rem;
        position: absolute;
        top: 0;
        left: 0;
        background-image: var(--gradient-header), url(http://sekiyotest2.wdfiles.com/local--files/pataphysicsthemenf/PataphysicsNFBackground2.png);
        background-size: var(--header-background-image-size) 100%, 100% 100%;
        background-blend-mode: color-burn;
        pointer-events: none;
    }
[[/module]]

Examples

Impromptu Suns Logo

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

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

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.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.

More text

---

That's a horizontal rule

Nested blockquotes. In order for these to be readable, I advise changing the color to white.

This is a	table
You should know	how to make these
already

---