/* Simplicity style for gosimplicity.org - dark */ /* last update: 2021-09-03 */ :root { /* ###################################################################################################### */ /* ## MAIN LAYOUT: General ## */ /* ###################################################################################################### */ /* Sidebars are off by default, enable them by setting a size and a display style. */ /* --sidebar-start-inline-size: 0px; */ /* --content-width-normal: 32em; */ /* --content-width-xwide: 45em; */ /* --sidebar-end-inline-size: 0px; */ /* To show one or the other sidebar only on wide screens, enable them here. */ /* enable: 'block', disable: 'none' */ /* --sidebar-start-display-wide: block; */ /* --sidebar-end-display-wide: block; */ /* To show one or the other sidebar on all screen widths, enable them here. */ /* enable: 'block', disable: 'none' */ /* --sidebar-start-display-narrow: block; */ /* --sidebar-end-display-narrow: block; */ /* gap between sidebar and main on narrow displays. */ /* --sidebars-spacers-size: 2em; */ /* size of content margins. Unless specified, -end will be equal. */ /* --content-margin-normal: 3em; */ /* extra inline-padding for main content for wide screens */ /* --content-padding-inline-start-wide: 0em; */ /* --content-padding-inline-end-wide: 0em; */ /* fixme: implement / remove */ /* --max-paragraph-width: 32em; */ /* To show sidebars for printing, set these to 'block' or appropriate value. */ /* --sidebar-start-display-print: block; */ /* --sidebar-end-display-print: block; /* /* For printing, if using 'grid', broken browsers may truncate after one page. */ /* To workaround: */ /* @media print { :root { --sidebar-start-display: block; --sidebar-end-display: block; } } */ /* ###################################################################################################### */ /* ## Content: Text Colors ## */ /* ###################################################################################################### */ --main-text-color: #ddceda; /* ## content text is displayed in this color ## */ --main-text-faded-color: #aeadad; /* ## less important text, e.g. lastModified ## */ --link-color: var(--main-contrast-color); --link-empty-color: #b7b6b6; --infobox-border-color: #8c6e7e; /* ## infoboxes (class="infobox") and header border ## */ --quote-mark-color: #3c1f37; /* ## for nice large block quotes... ## */ --quote-cite-color: #777474; /* ## ...and for the author of the block quote ## */ --image-border-width: 0px; /* ## border for stand-out images. '0' to disable. ## */ /* ###################################################################################################### */ /* ## Header and Footer Elements ## */ /* ###################################################################################################### */ /* ############################### A p p e a r a n c e ############################################# */ /* ## Logo left of Home text. To disable, comment out this line. ## */ /* ## The Home button will then acquire the same shape as the other buttons . ## */ /* --home-bg-image: url('/.simplicity-content/.skeleton/favicon.svg'); */ --home-bg-image: url('/.simplicity/.skeleton/media/logo.svg'); --home-bg-image-width: 4em; /* ## adjust this if your logo is not square ## */ --main-border-radius: 0em; /* ## radius of content box. Use manually. ## */ --main-border-style: solid; /* ## to demarcate content. Use manually. ## */ --main-border-width: 1px; --main-border-color: #8a8a8a; --nav-border-radius: 1em; /* ## shape of buttons. Use 'none' for rectangle. ## */ /* --menu-block-end-padding: 0vh; */ /* ## space from top of page to menu ## */ /* --main-block-start-padding: 0em; */ /* ## space from menu or breadcrumbs to main text ## */ --hero-text-color: var(--main-bg-color); /* should be the same as hero text bg color, but possibly somewhat transparent */ --hero-text-shadow-color: #000000aa; /* choose your hero text bg color according to the hero text color and the background of the hero */ /* options: --hero-text-bg-color-{dark|light}-{opaque|translucent}, or choose your own */ --hero-text-bg-color: var(--hero-text-bg-color-light-translucent); /* ############################# H i d e E l e m e n t s ########################################### */ /* ## Uncomment to hide header. ## */ /* ## Before doing so, please disable all elements from the header in the config file. ## */ /* --show-header: var(--no); */ /* ###################################################################################################### */ /* ## Typography ## */ /* ###################################################################################################### */ /* ## Note that you also need corresponding '@font-face' rules for all styles ## */ /* ## (bold, italic, bold + italic) to be able to use a font. ## */ /* --main-font: "URWPalladioL"; */ /* ## default: serif. Used for your content. ## */ /* ## This font should have small capitals, and be defined as such in '@font-face' rule. ## */ /* --main-font-sc: "TeXPalladioL-SC"; */ /* ## default: sans-serif ## */ /* ## Font used for header buttons and navigation menus. ## */ /* --header-font: var(--main-font-sc); */ /* ## default: sans-serif ## */ /* ## Base font size. On narrow screens, the font size will be between 1em and this. ## */ --main-font-size: calc( 1rem + 0.3vw ); /* ###################################################################################################### */ /* ## Background: Images and Colors ## */ /* ###################################################################################################### */ /* ## To not use a background image, set 'bg-image' ## */ /* ## and 'body-bg-filter' (see "Advanced Background Tweaks", below) to 'none' ## */ --body-bg-color: var(--content-bg-color-darker); /* ## color of background around content ## */ --main-bg-color: var(--content-bg-color-darker); /* ## main background color ## */ --main-contrast-color: #cecece; /* ## needs to contrast well with 'main-bg-color' ## */ --main-contrast-color-louder: #b7604f; /* ## a starker contrast, calls attention ## */ /* --autofill-bg-color: var(--main-bg-color); */ /* ## screen side to main box. default=body ## */ --content-margin-start-bg-color: var(--content-bg-color); /* ## ## */ --content-margin-end-bg-color: var(--content-margin-start-bg-color); /* ## ## */ --header-contrast-color: var(--main-contrast-color); /* ## needs to contrast with 'header-bg-color' ## */ --header-bg-color: var(--main-bg-color); /* ## try a shade of 'main-bg-color' ## */ --content-bg-color: #202020; /* ## Try '#00000040' for beautiful contrast ## */ --content-bg-color-darker: #121212; /* ## contrasting color against --content-bg-color ## */ --bg-image: none; --bg-size: cover; /* ## try 100vmax or 100vmin. ## */ --bg-position-y: 0rem; /* ## image offset. Try +(-?) ~50%. ## */ --bg-repeat: no-repeat; /* ## try 'repeat' if image is smaller than window ## */ --content-bg-image: var(--body-bg-image); /* ## normally same as body, or none ## */ --gallery-background-color: none; /* ## background color of galleries ## */ /* ## Image to use for the fade-in intro. Set to 'none' to use only color for intro. ## */ --intro-bg-image: url('/.simplicity/.skeleton/media/logo.svg'); /* ## Note: See "Advanced Background Tweaks" below for more control over ## */ /* ## background images or to specify distinct header and footer images. ## */ /* ###################################################################################################### */ /* ## Navigation Menu: Colors ## */ /* ###################################################################################################### */ /* ## Navigation menu color. Usually same as 'header-bg-color'. ## */ --nav-menuButton-bg-color-focus: none; /* ## hamburger menuButton focused ## */ --nav-menu-bg-color: var(--header-bg-color); --nav-menuitem-text-color: var(--main-text-color); /* ## header buttons and menu items ## */ --header-text-color: var(--main-text-color); /* ## breadcrumbs, mainly ## */ --header-link-color: var(--link-color); /* ## breadcrumbs, mainly ## */ --nav-link-empty-color: #c8c8c8; /* ## empty, disabled menu items ## */ --nav-link-checkmark-color: var(--link-color); /* ## tick in language menu ## */ --nav-selected-highlight-color: var(--header-contrast-color); /* ## open menus without focus ## */ --nav-text-shadow-color: none; /* ## set to 'none' for no shadow ## */ --nav-main-menu-border-radius: 0em; /* ## 0 for straight line ## */ /* ###################################################################################################### */ /* ## Footer: Colors ## */ /* ###################################################################################################### */ --footer-text-color: var(--header-text-color); --footer-link-color: var(--header-link-color); /* ###################################################################################################### */ /* ## Advanced Background Tweaks ## */ /* ###################################################################################################### */ /* ## These filters and gradients are combined with the background image and color. ## */ --header-bg-gradient: none; --body-bg-gradient: none; --body-bg-filter: none; /* ## Here the images are combined with the gradients and filter. ## */ /* ## To disable filters and gradients, remove the gradient part from these two lines. ## */ --body-bg-image-with-gradient: var(--bg-image), var(--body-bg-gradient); --header-bg-image-with-gradient: var(--bg-image), var(--header-bg-gradient); /* ## Here you can specify separate images and colors for the header and footer. ## */ --header-bg-image: var(--header-bg-image-with-gradient); --body-bg-image: var(--body-bg-image-with-gradient); --footer-bg-image: var(--header-bg-image-with-gradient); --footer-bg-color: var(--main-bg-color); } /* ///////////////////////////////////////////////////// */ /* //////////// :: custom styles below :: ///////// */ /* ///////////////////////////////////////////////////// */ ::selection { color: var(--main-bg-color); /* slightly better contrast */ } .content-margin-inline-start { /* box-shadow: 0px 1px 10px 0px #cacacaaa; */ /* box-shadow: 0px 0px 10px 1px #cacacaaa; */ } .mainContentWrapper { /* order: last goes bottom */ /* box-shadow: 11px 0px 0px 0px var(--content-bg-color), -11px 0px 0px 0px var(--content-bg-color), 0px 1px 10px 0px #cacacaaa; */ } .content-margin-inline-end { /* box-shadow: 0px 1px 10px 0px #cacacaaa; */ /* box-shadow: 0px 0px 10px 1px #cacacaaa; */ } /* BEGIN: content borders */ /* needs to correspond to: --max-content-width + margins */ @media screen and ( min-width: calc( 3em + 0px + 32em + 0px + 3em ) ) { .mainContentWrapper, .content-margin-inline-start, .content-margin-inline-end { border-block-start-style: var(--main-border-style); border-block-end-style: var(--main-border-style); } .content-margin-inline-start { border-inline-start-style: var(--main-border-style); } .content-margin-inline-end { border-inline-end-style: var(--main-border-style); } } /* END: content borders */ @font-face { font-family: "JanLippunerScript-Regular"; src: url("/.simplicity-content/.skeleton/font/JanLippunerScript-Regular.woff2") format("woff2"); } @font-feature-values 'JanLippunerScript-Regular' { @styleset { styleset01: 1; } } .signatureJan { display: inline; font-family: "JanLippunerScript-Regular"; font-synthesis: none; font-size: 1.6em; } nav .signatureJan { font-size: 1.3em; } .signatureJanBeforeFirstP { display: inline; letter-spacing: -0.15em; /* fix kerning */ } .signatureJanSS01 { display: inline; font-variant-alternates: styleset(styleset01); /* for second p */ font-feature-settings: 'ss01'; /* temp fix for some browsers */ letter-spacing: -0.034em; /* fix kerning */ }