gemwr theme test

[[iftags +theme]]

Hello World!

Include this CSS on your page by adding the following code:

[[include :scp-sandbox-3:theme]]

[[//* 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: "black-highlighter";
/* must be either "black-highlighter" or "sigma9" */
—theme-id: "black-highlighter";
/* 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("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
—header-title: "SCP Foundation";
—header-subtitle: "SECURE, CONTAIN, PROTECT";

/* Typefaces */
—body-font: freight-sans-pro, sans-serif;
—header-font: "Poppins", sans-serif;
—title-font: "Poppins", sans-serif;
—mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace;

/* Standard Colors */
—white-monochrome: 252, 252, 252;
/* white */
—pale-gray-monochrome: 244, 244, 244;
/* v light gray for blockquotes and stuff */
—light-pale-gray-monochrome: 244, 244, 244;
/* very light pale gray for misc. use */
—very-light-gray-monochrome: 215, 215, 215;
/* very light accent gray for misc. use */
—light-gray-monochrome: 160, 160, 160;
/* 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 */
—pale-accent: 230, 40, 60;
/* light red, for visited links */
—bright-accent: 133, 0, 5;
/* bright red */
—medium-accent: 100, 46, 44;
/* medium red - the "default" accent color */
—dark-accent: 100, 3, 15;
/* dark red */
—alt-accent: 221, 102, 17;
/* pale orange, for newpage links */

/* Background and Header Colors */
background-gradient-color: var(very-light-gray-monochrome);
header-gradient-color-bottom: var(medium-accent);
header-gradient-color-middle: var(black-monochrome);
header-gradient-color-top: var(black-monochrome);

/* 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(black-monochrome);
swatch-topmenu-bg-color: var(gray-monochrome);

/* Link Colors */
link-color: var(pale-accent);
visited-link-color: var(swatch-primary);
hover-link-color: var(swatch-primary);
newpage-color: var(alt-accent);
sidebar-links-text: var(swatch-menutxt-dark-color);

/* Rating Module Colors */
rating-module-button-color: var(black-monochrome);
rating-module-button-plus-color: 0, 200, 0;
—rating-module-button-negative-color: 200, 0, 0;
—rating-module-button-cancel-color: 200, 200, 200;
—rating-module-button-credit-color: 50, 50, 50;
—rating-module-text-color: var(
swatch-menutxt-dark-color);
rating-module-text-hover-color: var(swatch-menutxt-light-color);

/* Header Gradients */

gradient-header: linear-gradient(
to top,
rgb(var(
header-gradient-color-bottom)) 0%,
rgb(var(header-gradient-color-middle)) 90%,
rgb(var(
header-gradient-color-top)) 100%
);
gradient-topmenu: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) var(
header-height-on-desktop),
rgba(var(swatch-topmenu-border-color),1) var(header-height-on-desktop),
rgba(var(swatch-topmenu-bg-color), 1) calc(var(header-height-on-desktop) + 0.125rem),
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(var(topbar-height-on-mobile) - 0.125rem),
rgba(var(
swatch-topmenu-bg-color), 1) calc(var(topbar-height-on-mobile) - 0.125rem),
rgba(var(
swatch-topmenu-border-color),1) var(topbar-height-on-mobile));
—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(
medium-accent), 0.45) 0%,
rgba(var(medium-accent), 0.55) 100%
);
—background-gradient-distance: 40rem;
—gradient-background: linear-gradient(
to bottom,
rgba(var(
background-gradient-color),1) 0,
rgba(var(background-gradient-color),0.987) calc(0.008 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.951) calc(0.029 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.896) calc(0.064 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.825) calc(0.110 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.741) calc(0.166 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.648) calc(0.231 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.550) calc(0.304 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.450) calc(0.383 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.352) calc(0.467 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.259) calc(0.554 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.175) calc(0.644 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.104) calc(0.735 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.049) calc(0.825 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0.013) calc(0.914 * var(background-gradient-distance)),
rgba(var(background-gradient-color),0) var(background-gradient-distance));

/* Spacing Measurements */

/* header measurements */
header-height-on-desktop: 7.5rem;
—header-height-on-mobile: 7.5rem;
—topbar-height-on-desktop: 1.875rem;
—topbar-height-on-mobile: 3rem;
—header-background-image-size: 100% var(
header-height-on-desktop);

body-width-on-desktop: 44.25rem;
—sidebar-width-on-desktop: calc((var(
base-font-size) * (14/15)) * 19);
sidebar-width-on-mobile: calc((var(base-font-size) * (14/15)) * 16);
scrollbar-width: 1rem;
—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;

/* final values */
base-font-size: 0.9375rem;
—base-line-height: 1.313rem;
—final-header-height-on-desktop: calc(var(
header-height-on-desktop) + var(topbar-height-on-desktop));
—final-header-height-on-mobile: calc(var(
header-height-on-mobile) + var(—topbar-height-on-mobile));
}]]