Initial Variables with Default Settings
File initial-core-variables.css contains the CSS variables that drive all the elements and components.
:root {
/* version 0.1.0 - April 29, 2022 - v3 */
/* awareness variables - for info only */
/** typically (and sadly) @media does not support variables; so we need to hard code the mobile breakpoint **/
/** files affected: gridbox.css, level.css, page.css, pagination.css, blockquote.css, navbar.css, sidebar.css, image.css, media.css **/
--mobile-breakpoint: 576px; /* or 36rem at 16px base size */
/* Base measurement unit to be used for font, margins and padding */
/* changing the base html factor allows a user to change the font sizes to meet accessibility needs */
--base-html-factor: 100%;
--base-rem: 1rem;
/* Typography */
/** Note: text colors are set in file: initial-colors.css **/
/** basic is a fixed font size for all screen sizes **/
--base-font-size: var(--base-rem);
/** alternatively, you can use a variable font size for all screen sizes
- font-size is variable and tracks viewport to a width of 100rem (1600 px)
- maximum font-size is set to 3 * base (48px)
**/
/** --base-font-size: clamp( var(--base-rem), 2vw , calc(3 * var(--base-rem ) ) ); **/
/** Default is to use system fonts as much as possible **/
--family-sans-serif: "Tahoma", "Helvetica Neue", "Helvetica", "Arial", "Segoe UI", "Roboto", sans-serif;
--family-serif: "Georgia", "Times New Roman", serif;
--family-monospace: monospace;
--render-mode: optimizeLegibility;
/** Define font weights here **/
--weight-light: 300;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/** Text line heights to match size **/
--line-height-125: 125%;
--line-height-150: 150%;
--line-height-175: 175%;
--line-height-200: 200%;
/** Sizing pattern - typically for text **/
--size-factor: 1.125;
--size-1: calc( 1rem * var(--size-factor) * var(--size-factor) * var(--size-factor) * var(--size-factor) * var(--size-factor) );
--size-2: calc( 1rem * var(--size-factor) * var(--size-factor) * var(--size-factor) * var(--size-factor) );
--size-3: calc( 1rem * var(--size-factor) * var(--size-factor) * var(--size-factor) );
--size-4: calc( 1rem * var(--size-factor) * var(--size-factor) );
--size-5: calc( 1rem * var(--size-factor) );
--size-6: 1rem;
--size-7: calc( 1rem / var(--size-factor) );
/* Example 1.125 scale factor:
--size-1: 1.80rem;
--size-2: 1.60rem;
--size-3: 1.42rem;
--size-4: 1.27rem;
--size-5: 1.13rem;
--size-6: 1rem;
--size-7: 0.9rem;
*/
/* Grid Key Variables */
--gutter: calc(3 * var(--base-rem)); /** grid column gutter **/
--grid-min-px-width: 100px; /** minimum absolute column width in a grid layout **/
--grid-min-width: 5rem; /** minimum relative column width in a grid layout **/
/* basic spacing values */
/* based on https://medium.com/user-experience-design-1/ui-cheat-sheet-spacing-friendships-e37a6fccc407*/
--space-element: var(--base-font-size);
--space-block: calc(2 * var(--base-font-size));
--space-collection: calc(4 * var(--base-font-size));
--space-container: calc(5 * var(--base-font-size));
/* Flexbox element spacing */
--gap-row: calc( 1 * var(--base-font-size) );
--gap-col: calc( 1 * var(--base-font-size) );
/* Elements Controls */
--pad-horz: var(--base-font-size);
--pad-vert: calc( 0.5 * var(--base-font-size) );
--pad-horz-small: calc( 0.5 * var(--base-font-size) );
--pad-vert-small: calc( 0.25 * var(--base-font-size) );
--padding: calc(0.75 * var(--base-font-size));
--padding-normal: var(--base-font-size);
--padding-medium: calc( 1.5 * var(--base-font-size) );
--padding-large: calc( 3 * var(--base-font-size) );
--mar-horz: calc( 0.5 * var(--base-font-size) );
--mar-vert: calc( 0.5 * var(--base-font-size) );
--margin: var(--base-font-size);
--margin-form: calc(1.5 * var(--base-font-size));
--margin-medium: calc(3 * var(--base-font-size));
--margin-large: calc(5 * var(--base-font-size));
/* Component Controls */
--radius: calc(0.5 * var(--base-font-size));
--radius-small: calc(0.5 * var(--radius));
--radius-comp: calc(1 * var(--radius));
--radius-elem: calc(1.5 * var(--radius));
--radius-rounded: 10000px;
/* Navbar settings */
--navbar-height: 4rem;
--navbar-offset: 0;
--navbar-z: 30; /* z-index to ensure that navbar gets priority */
/* Widgetbar settings */
--widgetbar-height: calc( 2 * var(--base-font-size) + 0.25rem);
--widget-z: 30; /* z-index to ensure that navbar gets priority */
/* Breadcrumb setting */
/* other options are: arrow-separator = ">", bullet-separator = "\02022" or quote-separator = "\BB" */
--breadcrumb-separator: "/";
/* magazine normal width */
--magazine-width: 40ch;
/* carousel image height */
--carousel-image-height: 8rem;
--carousel-image-width: calc( 4 / 3 * 8rem); /* aspect ratio of image */
/* uri encoded icon for select and dropdown - chevron down and initially set to primary color */
--indicator: url("data:image/svg+xml;charset=utf8,\
%3Csvg%20xmlns='http://www.w3.org/2000/svg'\
%20viewBox='0%200%2024%2024'%20\
fill='none'%20stroke='currentColor'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E\
%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E\
%3C/svg%3E");
--indicator-down: url('data:image/svg+xml;charset=utf8,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="24" height="24" viewBox="0 0 24 24" \
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\
<polyline points="6 9 12 15 18 9"/>\
</svg>');
--indicator-up: url('data:image/svg+xml;charset=utf8,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="24" height="24" viewBox="0 0 24 24" \
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\
<polyline points="18 15 12 9 6 15"></polyline>\
</svg>');
--indicator-right: url('data:image/svg+xml;charset=utf8,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="24" height="24" viewBox="0 0 24 24" \
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\
<polyline points="9 18 15 12 9 6"/>\
</svg>');
}
Initial Colour Settings with Default Settings
File initial-colors.css contains the CSS variables that drive all colour choices for light / day theme.
/*
main theme color definitions
use https://www.colorhexa.com/ or https://paletton.com/ to build complimentary colors
*/
:root {
--shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.15), 0 0 0 1px rgba(10, 10, 10, 0.02);
/* main theme colour parameters
- based on split complementary color selection
- for triadic color selection, set --main-color-offset to 120 degrees
*/
--main-color: 140; /** primary hue value **/
--main-color-offset: 30; /** +,- degree offset from main + 180° **/
--main-color-sl-light: 100%, 96%; /** color lightening saturation and lightness **/
--main-color-sl-dark: 100%, 24%; /** color darkening saturation and darkness **/
--main-color-complement-low: calc( var(--main-color) + 180 - var(--main-color-offset) );
--main-color-complement-high: calc( var(--main-color) + 180 + var(--main-color-offset) );
/* build main theme colours */
--primary: hsl( var(--main-color), 70%, 31% );
--secondary: hsl( var(--main-color-complement-low), 70%, 45% );
--tertiary: hsl( var(--main-color-complement-high), 70%, 40%);
/* define text colours for main theme, adjusted for expected theme colour luminosity */
--primary-text: hsl( var(--main-color), 100%, 100%);
--secondary-text: hsl( var(--main-color-complement-low), 100%, 100%);
--tertiary-text: hsl( var(--main-color-complement-high), 100%, 100%);
--primary-text-invert: hsl( var(--main-color), 100%, 99%);
--secondary-text-invert: hsl( var(--main-color-complement-low), 100%, 99%);
--tertiary-text-invert: hsl( var(--main-color-complement-high), 100%, 100%);
/* optional light colors; use carefully as accessibility is hard to achieve */
--primary-light: hsl( var(--main-color), var(--main-color-sl-light));
--secondary-light: hsl( var(--main-color-complement-low), var(--main-color-sl-light));
--tertiary-light: hsl( var(--main-color-complement-high), var(--main-color-sl-light));
--primary-dark: hsl( var(--main-color), var(--main-color-sl-dark) );
--secondary-dark: hsl( var(--main-color-complement-low), var(--main-color-sl-dark) );
--tertiary-dark: hsl( var(--main-color-complement-high), var(--main-color-sl-dark) );
--link: hsl(217, 71%, 48%);
--link-light: hsl(217, 70%, 90%);
--link-dark: hsl(217, 71%, 30%);
--link-text: hsl( 217, 100%, 95%);
--link-text-invert: hsl( 217, 100%, 95%);
--success: hsl(150, 65%, 53%);
--success-light: hsl(141, 70%, 96%);
--success-dark: hsl(141, 70%, 31%);
--success-text: hsl( 141, 100%, 5%);
--success-text-invert: hsl( 141, 100%, 95%);
--warning: hsl(48, 100%, 48%);
--warning-light: hsl(48, 100%, 95%);
--warning-dark: hsl(48, 100%, 40%);
--warning-text: hsl( 48, 100%, 5%);
--warning-text-invert: hsl( 48, 100%, 95%);
--danger: hsl(348, 86%, 48%);
--danger-light: hsl(348, 90%, 97%);
--danger-dark: hsl(348, 86%, 33%);
--danger-text: hsl( 348, 100%, 100%);
--danger-text-invert: hsl( 348, 100%, 100%);
/* additional greys */
--black: hsl(0, 0%, 4%);
--black-bis: hsl(0, 0%, 10%);
--black-ter: hsl(0, 0%, 16%);
--grey-darker: hsl(0, 0%, 25%);
--grey-dark: hsl(0, 0%, 40%);
--grey: hsl(0, 0%, 60%);
--grey-light: hsl(0, 0%, 85%);
--grey-lighter: hsl(0, 0%, 93%);
--white-ter: hsl(0, 0%, 95%);
--white-bis: hsl(0, 0%, 98%);
--white: hsl(0, 0%, 100%);
/* set the body level colours for light mode*/
--border-main: var(--grey-light);
--border-main-darker: var(--grey);
--bg-main: var(--white);
--bg-main-elem: var(--white);
--bg-main-comp: var(--white);
--bg-main-bis: var(--white-bis);
--bg-main-ter: var(--white-ter);
--bg-main-invert: var(--black-ter);
--bg-main-code: var(--white-ter);
--bg-grid: var(--white-ter);
--bg-element: var(--white-ter);
--bg-component: var(--white-bis);
--bg-highlight: var(--warning-light);
--bg-hover: var(--grey-lighter);
--text: var(--black-ter);
--text-invert: var(--white);
--text-light: var(--grey-dark);
--text-darker: var(--black);
--text-elem: var(--black-ter);
--text-comp: var(--black-ter);
--text-invert-ter: var(--white-ter);
--text-btn: var(--black);
--text-btn-invert: var(--white);
--text-bg: var(--white);
--text-code: var(--secondary-dark);
}
Alternate Dark Colour Settings with Default Settings
File initial-dark-theme.css contains the CSS variables that over-ride the default colour choices to provide night / dark mode colour themes.
/*
main dark theme color definitions
use https://www.colorhexa.com/ or https://paletton.com/ to build complimentary colors
*/
.main-theme-dark {
--shadow: 0 0.1em 0.1em 0.1em rgba(240, 245, 245, 0.25), 0 0 0 1px rgba(245, 245, 245, 0.02);
/* main theme colour parameters
- based on split complementary color selection
- for triadic color selection, set --main-color-offset to 120 degrees
*/
--main-color: 140; /** primary hue value **/
--main-color-offset: 30; /** +,- degree offset from main + 180° **/
--main-color-sl: 53%, 35%; /** saturation and lightness **/
--main-color-sl-light: 100%, 90%; /** color lightening saturation and lightness **/
--main-color-sl-dark: 100%, 48%; /** color lightening saturation and lightness **/
--main-color-complement-low: calc( var(--main-color) + 180 - var(--main-color-offset) );
--main-color-complement-high: calc( var(--main-color) + 180 + var(--main-color-offset) );
/* build main theme colours */
--primary: hsl( var(--main-color), 80%, 65% );
--secondary: hsl( var(--main-color-complement-low), 75%, 75% );
--tertiary: hsl( var(--main-color-complement-high), 85%, 65% );
/* define text colours for main theme, adjusted for expected theme colour luminosity */
--primary-text: hsl( var(--main-color), 100%, 5%);
--secondary-text: hsl( var(--main-color-complement-low), 100%, 5%);
--tertiary-text: hsl( var(--main-color-complement-high), 100%, 5%);
--primary-text-invert: hsl( var(--main-color), 100%, 5%);
--secondary-text-invert: hsl( var(--main-color-complement-low), 100%, 99%);
--tertiary-text-invert: hsl( var(--main-color-complement-high), 100%, 100%);
/* optional light colors; use carefully as accessibility is hard to achieve */
--primary-light: hsl( var(--main-color), var(--main-color-sl-light));
--secondary-light: hsl( var(--main-color-complement-low), var(--main-color-sl-light));
--tertiary-light: hsl( var(--main-color-complement-high), var(--main-color-sl-light));
--primary-dark: hsl( var(--main-color), var(--main-color-sl-dark) );
--secondary-dark: hsl( var(--main-color-complement-low), var(--main-color-sl-dark) );
--tertiary-dark: hsl( var(--main-color-complement-high), var(--main-color-sl-dark) );
--link: hsl(217, 80%, 68%);
--link-light: hsl(217, 70%, 90%);
--link-dark: hsl(217, 75%, 40%);
--link-text: hsl( 217, 100%, 5%);
--link-text-invert: hsl( 217, 100%, 98%);
--success: hsl(150, 85%, 75%);
--success-light: hsl(141, 80%, 96%);
--success-dark: hsl(141, 70%, 31%);
--success-text: hsl( 141, 100%, 5%);
--success-text-invert: hsl( 141, 100%, 95%);
--warning: hsl(48, 900%, 55%);
--warning-light: hsl(48, 100%, 95%);
--warning-dark: hsl(48, 100%, 40%);
--warning-text: hsl( 48, 100%, 5%);
--warning-text-invert: hsl( 48, 100%, 95%);
--danger: hsl(348, 80%, 70%);
--danger-light: hsl(348, 90%, 97%);
--danger-dark: hsl(348, 86%, 33%);
--danger-text: hsl( 348, 100%, 5%);
--danger-text-invert: hsl( 348, 100%, 100%);
--grey-light: hsl(0, 0%, 75%);
--grey-lighter: hsl(0, 0%, 85%);
/** invert colours for elements and components **/
--border-main: var(--grey);
--border-main-darker: var(--grey-light);
--bg-main: var(--black);
--bg-main-elem: var(--grey-darker);
--bg-main-comp: var(--black-ter);
--bg-main-bis: var(--black-bis);
--bg-main-ter: var(--black-ter) ;
--bg-main-invert: var(--white);
--bg-main-invert-ter: var(--white-ter);
--bg-main-code: var(--grey-darker);
--bg-grid: var(--grey-darker);
--bg-element: var(--grey-darker);
--bg-component: var(--black-ter);
--bg-highlight: hsl(48, 100%, 15%);;
--bg-hover: var(--grey-dark);
/** invert or adjust colours for text **/
--text: var(--white-bis);
--text-invert: var(--black);
--text-light: var(--grey);
--text-darker: var(--white-ter);
--text-elem: var(--white-bis);
--text-comp: var(--white-bis);
--text-invert-ter: var(--black-ter);
--text-btn: var(--black-bis);
--text-btn-invert: var(--white-ter);
--text-bg: var(--black-bis);
--text-code: var(--secondary-light);
}