/* ================================================================== CSS Boilerplate The Unlicense https://github.com/MattMcAdams/CSS-Boilerplate ================================================================== */ /** ----------------------------------------------------------------- * SECTION TOKENS * font: font-style font-variant font-weight font-size/line-height font-family; } ------------------------------------------------------------------ */ :root { /* Fonts */ --font-body: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-head: var(--font-body); --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* --font-icon: null; */ --text-color: #2D2F34; --heading-color: var(--text-color); --light-text-color: #707682; --link-color: #0074E0; --link-color-alt: #0263BC; --ins-background: #E6F7EB; --del-background: #FFE6E6; --mark-background: #FFF9E6; --page-background: white; --element-background: #F0F1F3; --accent-color: var(--link-color); --invalid-color: #DC2F2F; /* Colors */ /* --color-gray-100: #F0F1F3; */ /* --color-gray-500: #707682; */ /* --color-gray-900: #2D2F34; */ /* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/707682/112/118/130/white */ /* --color-red-100: #FFE6E6; */ /* --color-red-500: #DC2F2F; */ /* --color-red-900: #551616; */ /* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/DC2F2F/220/47/47/white */ /* --color-yellow-100: #FFF9E6; */ /* --color-yellow-500: #D08200; */ /* --color-yellow-900: #4F3304; */ /* https://hihayk.github.io/scale/#4/4/60/90/0/-10/50/-10/D08200/208/130/0/white */ /* --color-green-100: #E6F7EB; */ /* --color-green-500: #00883E; */ /* --color-green-900: #033419; */ /* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/00883E/0/136/62/white */ /* --color-primary-100: #E6F1FF; */ /* --color-primary-500: #0074E0; */ /* --color-primary-900: #052E55; */ /* https://hihayk.github.io/scale/#4/4/60/90/0/0/50/-10/0074E0/0/116/224/white */ /* Spacing */ --content-width: 55rem; /* 880px */ --sidebar-width: 15rem; /* 240px */ /* -------------------------------------------------------------------------- * Size table using 8pt grid * PX REM STEP * :---- :------- :----- * 4px 0.25rem 0.5 * 8px 0.5rem 1 * 12px 0.75rem 1.5 * 16px 1rem 2 * 18px 1.25rem 2.5 * 24px 1.5rem 3 * 28px 1.75 3.5 * 32px 2rem 4 * 36px 2.25rem 4.5 * 44px 2.75rem 5.5 * 48px 3rem 6 * 64px 4rem 8 * 72px 4.5rem 9 * 80px 5rem 10 * 128px 8rem 16 -------------------------------------------------------------------------- */ --sp_0: 0.25rem; /* 4px utility to substitute 0 margins to add some polish */ --sp_1: 0.5rem; /* 8px utility for tight paddings etc */ --sp_2: 1rem; /* 16px 1/2 line height, for closely related elements */ --sp_4: 2rem; /* 32px 1 line height, for related elements */ --sp_8: 4rem; /* 64px 2 line heights, for loosly related elements */ --sp_16: 8rem; /* 128px 4 line heights, for unrelated elements */ --flow-space: var(--sp_4); --gutter: var(--sp_2); --section-space: var(--sp_16); /* Modular Scale */ --typeset_-1: 1rem/1.5rem var(--font-body); /* 16px/24px */ --typeset_0: 1.25rem/2rem var(--font-body); /* 18px/32px */ --typeset_1: 1.5rem/2rem var(--font-body); /* 24px/32px */ --typeset_2: 2rem/2.5rem var(--font-body); /* 36px/44px */ --typeset_3: 2.5rem/3rem var(--font-body); /* 48px/56px */ --typeset_4: 3rem/3rem var(--font-body); /* 72px/72px */ --typeset_5: 5rem/5rem var(--font-body); /* 80px/80px */ } @media (min-width: 55rem) { :root { --typeset_-1: 1rem/1.5rem var(--font-body); /* 16px/24px */ --typeset_0: 1.25rem/2rem var(--font-body); /* 18px/32px */ --typeset_1: 1.5rem/2rem var(--font-body); /* 24px/32px */ --typeset_2: 2.25rem/2.75rem var(--font-body); /* 36px/44px */ --typeset_3: 3rem/3.5rem var(--font-body); /* 48px/56px */ --typeset_4: 4.5rem/4.5rem var(--font-body); /* 72px/72px */ --typeset_5: 5rem/5rem var(--font-body); /* 80px/80px */ } } /* END !SECTION TOKENS */ /** ----------------------------------------------------------------- * SECTION RESET * http://meyerweb.com/eric/tools/css/reset/ * v2.0 | 20110126 * License: none (public domain) ------------------------------------------------------------------ */ * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* END !SECTION RESET */ /** ----------------------------------------------------------------- * SECTION CORE ------------------------------------------------------------------ */ /* Links that point to a location on the same page will scroll * smoothly down to that location. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Hide content visually, but allow screen readers to read the * content. Note that for Accessibility guidelines, this content * must become visible if toggled over using a keyboard. */ .visually-hidden:not(:focus):not(:active), .sr-only:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* Give the hidden attribute most priority - fixes issue where * an html element can be marked as hidden but is still visible. * Use aria-hidden="true" to hide visual elements from * screen readers. */ [hidden] { display: none !important; } /* Ensures disabled elements do not accept events */ [disabled] { pointer-events: none !important; cursor: not-allowed !important; } /* Use primary color for focus styles */ :focus-visible { outline-color: var(--color-accent); outline-offset: 3px; outline-width: 2px; } /* Adds a margin above an element when it is the target of an ID link */ * { scroll-margin-top: var(--flow-space); scroll-margin-bottom: var(--flow-space); } /* ::selection { background-color: var(--color-primary-100); } */ /** ----------------------------------------------------------------- * SECTION TYPOGRAPHY ------------------------------------------------------------------ */ /* Set the document's default font, color, size, and line height */ body { font: var(--typeset_0); color: var(--text-color); background: var(--page-background); } /* Setup flow spacing for typography elements */ h1, h2, h3, h4, h5, h6, p, label, legend, address { margin-block-end: var(--flow-space); } /* Double flow spacing before headings & set heading color. */ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); margin-block-start: calc(var(--flow-space) * 2); } /* Decrease space between sequential headings */ h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-block-start: 0; } /* Heading typography */ h1, .txt-h1 { font: var(--typeset_4); font-weight: 800; letter-spacing: -0.01em; margin-block-start: 0;} h2, .txt-h2 { font: var(--typeset_3); font-weight: 600; letter-spacing: -0.01em;} h3, .txt-h3 { font: var(--typeset_2); font-weight: 600; letter-spacing: -0.01em; } h4, .txt-h4 { font: var(--typeset_1); font-weight: 700; letter-spacing: -0.01em; } h5, .txt-h5, h6, .txt-h6, label, th, legend { font: var(--typeset_0); font-weight: bold; } /* Set typography for small text */ small, .txt-small { font: var(--typeset_-1); } /* Basic styles for inline semantics */ strong { font-weight: bold; } em, cite { font-style: italic; } u { text-decoration: underline; font-style: normal;} /* Basic style for subscript and superscript text */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* del, ins, and s styles. Note that these are opinionated and may * need to be restyled to suit your use case. These pseudoelements * exist to announce the presence of these elements. Read more * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins#accessibility_concerns */ /* del::before, del::after, ins::before, ins::after, s::before, s::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } */ /* del::before { content: " [deletion start] "; } del::after { content: " [deletion end] "; } ins::before { content: " [insertion start] "; } ins::after { content: " [insertion end] "; } s::before { content: " [start of stricken text] "; } s::after { content: " [end of stricken text] "; } */ del { background: var(--del-background); text-decoration: line-through; padding: 0.1em 0.3em; } ins { background: var(--ins-background); text-decoration: none; padding: 0.1em 0.3em; } /* See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s */ s { text-decoration: line-through; } /* Mark styles - see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark */ mark { background: var(--mark-background); padding: 0.1em 0.3em; } /* Basic styles for abbreviation. Only style differently when * a title is present. */ abbr { text-decoration: none; } abbr[title] { cursor: help; text-decoration: underline; text-decoration-style: dotted; } /* Italisize q when it includes a cite */ q[cite] { font-style: italic; } /* !SECTION TYPOGRAPHY */ /** ----------------------------------------------------------------- * SECTION LINKS * :not([class]) is so that the styles won't need to be overridden * in special use cases like navigation / buttons ------------------------------------------------------------------ */ a:not([class]) { color: var(--link-color); text-decoration: none; font-weight: bold; } /* VISITED STYLES GO HERE */ a:not([class]):hover, a:not([class]):focus { text-decoration: underline; text-decoration-color: var(--link-color); text-decoration-thickness: 2px; } /* OPTIONAL STYLES Add an icon for links that go to a PDF and/or links that open in a new tab */ /* a:not([class])[target="_blank"]::after, a:not([class])[data-link-type="external"] { content: ' \e91f'; font-size: 90%; } a:not([class])[href$='.pdf']::after, a:not([class])[data-link-type='document']::after { content: '\e91d'; font-size: 90%; padding-left: 0.1em; } */ /* !SECTION LINKS */ /** ----------------------------------------------------------------- * SECTION BLOCKQUOTE ------------------------------------------------------------------ */ /* Add basic styling for blockquotes, and provide a utility class * to apply these styles outside of a quote context */ blockquote, .callout { border-left: 5px solid var(--accent-color); padding: var(--sp_2) var(--sp_4); margin-block-end: var(--flow-space); } /* Remove the bottom margin from the last child in the blockquote */ blockquote :last-child, .callout :last-child { margin-block-end: 0; } /* !SECTION BLOCKQUOTE */ /** ----------------------------------------------------------------- * SECTION LISTS * :not([class]) is so that the styles won't need to be overridden * in special use cases. For example, when list markup might need * to be paired with a grid layout ------------------------------------------------------------------ */ /* Set nested unordered list styles */ ul:not([class]) { list-style-type: disc; } ul:not([class]) ul:not([class]) { list-style-type: circle; } ul:not([class]) ul:not([class]) ul:not([class]) { list-style-type: square; } /* Set nested ordered list styles */ ol:not([class]) { list-style-type: decimal; } ol:not([class]) ol:not([class]) { list-style-type: upper-alpha; } ol:not([class]) ol:not([class]) ol:not([class]) { list-style-type: lower-roman; } /* Set indention and flow spacing for lists */ ul:not([class]), ol:not([class]) { margin-inline-start: 1em; } /* Add flow spacing to list elements */ ul, ol, dl { margin-block-end: var(--flow-space); } /* Add spacing between list items */ ul:not([class]) li, ul:not([class]) ol, ul:not([class]) ul, ol:not([class]) li, ol:not([class]) ol, ol:not([class]) ul { margin-block-end: var(--sp_1); } /* Ensure nested lists have the correct spacing */ ul:not([class]) ol, ul:not([class]) ul, ol:not([class]) ol, ol:not([class]) ul { margin-block-start: var(--sp_1); } /* Add basic styles for definition lists */ dt { font-weight: bold; } dd { padding-inline-start: var(--flow-space); } /* !SECTION LISTS */ /** ----------------------------------------------------------------- * SECTION MEDIA ------------------------------------------------------------------ */ /* Allow media to sit correctly in content flow */ img, figure, video, .aspect-ratio, .video-wrapper, .embed-container { display: block; width: 100%; margin: auto; margin-block-end: var(--flow-space); } img { max-width: 100%; width: auto; height: auto; } /* Let SVG scale without boundaries */ img[src$=".svg"] { width: 100%; height: auto; max-width: none; } /* Basic style for figcaption */ figcaption { display: block; text-align: center; font-style: italic; } /* Allow audio to sit correctly in content flow, * Adjust border radius to allow consistency across browsers */ audio { display: block; max-width: 100%; border-radius: 900px; margin-block-end: var(--flow-space); } /* Setup media wrappers */ .aspect-ratio, .video-wrapper, .embed-container { width: 100%; padding-block-start: calc(100%/(var(--aspect-ratio))); position: relative; } /* Define aspect ratios */ .video-wrapper, .embed-container, .sixteen-by-nine { --aspect-ratio: 16/9; } .one-by-one { --aspect-ratio: 1/1; } .three-by-two { --aspect-ratio: 3/2; } .four-by-three { --aspect-ratio: 3/2; } .eight-by-five { --aspect-ratio: 8/5; } /* Position inner elements in media wrappers */ .embed-container > iframe, .embed-container > embed, .embed-container > object, .video-wrapper > iframe, .video-wrapper > embed, .video-wrapper > object .aspect-ratio > iframe, .aspect-ratio > embed, .aspect-ratio > object, .aspect-ratio > img { position: absolute; inset: 0; height: 100%; width: 100%; } /* Allow img to crop to avoid being stretched */ .aspect-ratio > img { object-fit: cover; } /* Wrapper to allow horizontal overflow, * Useful for tables and other wide content */ .overflow-x, .table-wrapper { overflow-x: auto; } /* !SECTION MEDIA */ /** ----------------------------------------------------------------- * SECTION RULES ------------------------------------------------------------------ */ hr { border: none; border-block-end: 0.5px solid var(--light-text-color); width: 100%; margin-block-end: var(--flow-space); } hr.spacer { border: none; margin: calc(var(--flow-space) * 2) 0; } /* !SECTION RULES */ /** ----------------------------------------------------------------- * SECTION TABLES ------------------------------------------------------------------ */ table { width: 100%; margin-block-end: var(--flow-space); } caption { padding: var(--sp_1); font: var(--typeset_1); text-align: left; } th, td { font: var(--typeset_-1); padding: var(--sp_1); text-align: left; } th { font-weight: bold; } tr { border-block-end: 0.5px solid var(--light-text-color); } tr:hover { background-color: var(--element-background); } /* !SECTION TABLES */ /** ----------------------------------------------------------------- * SECTION CODE ------------------------------------------------------------------ */ code, samp, kbd, var { font-family: var(--font-mono); padding: 0.1em 0.3em; } code, samp { background-color: var(--element-background); } var { font-style: italic; font-weight: bold; } kbd { background-color: var(--text-color); color: white; border-radius: 5px; } pre { margin-bottom: var(--flow-space); } pre code, pre samp { display: block; padding: var(--sp_2); overflow: auto; font: var(--typeset_-1); font-family: var(--font-mono); } /* !SECTION CODE */ /** ----------------------------------------------------------------- * SECTION DETAILS ------------------------------------------------------------------ */ /* Display:block removes Firefox's marker * ::webkit-details-marker removed Chrome & Safair's marker */ details { display: block; position: relative; margin-block-end: var(--flow-space); } summary::-webkit-details-marker { display: none; } summary { display: block; cursor: pointer; padding-inline-start: 1.5em; font-weight: bold; } summary::before { position: absolute; will-change: transform; transition: transform 300ms ease; font-size: 1em; content: "▸"; left: 0; display: inline-block; text-align: center; width: 1em; } summary:focus::before { color: var(--accent-color); } details[open] > summary::before { transform: rotate(90deg); } details .details-content { padding-inline-start: 1.5em; } /* !SECTION DETAILS */ /* !SECTION CORE */ /** ----------------------------------------------------------------- * SECTION FORMS * Form elements not styled: * Meter. Next to impossible to size consistently * File. You're better off implementing something with JS * Date & Color. Styling these is far too complicated for the * scope of this project. ------------------------------------------------------------------ */ label, legend { background-color: transparent; display: block; font: var(--typeset_-1); font-weight: bold; margin-block-end: var(--sp_0); } label + label { margin-block-start: var(--sp_1); } label.required::after { content: " *"; color: var(--invalid-color); } fieldset { border: 0.5px solid var(--light-text-color); padding: var(--sp_2); margin-block-end: var(--flow-space); background-color: var(--element-background); } fieldset > :last-child { margin-block-end: 1rem; } legend { padding: 0 0.5em; margin-inline-start: -0.5em; } /* Normalize fonts, sizes, and borders */ .button, button, input, select, textarea, datalist { font-family: inherit; font-size: 100%; line-height: inherit; box-sizing: border-box; padding: var(--sp_1) var(--sp_2); border: 1px solid var(--light-text-color); margin: 0; margin-block-end: var(--flow-space); background-color: var(--page-background); } /* Normalize input width */ .button, input, select, textarea, datalist { width: 100%; } textarea { resize: vertical; min-height: 10rem; } input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus, datalist:focus, datalist:active { outline-offset: 1px; } /** ----------------------------------------------------------------- * SECTION RADIO & CHECKBOX ------------------------------------------------------------------ */ @supports (appearance: none) or (-moz-appearance: none) or (-webkit-appearance: none) { input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; display: inline-block; top: -0.1em; width: 1em; height: 1em; padding: 0; margin: 0; vertical-align: middle; transition: box-shadow 0.1s ease; } input[type="checkbox"]:checked, input[type="radio"]:checked { box-shadow: inset 0 0 0 .25em var(--accent-color); border-color: var(--accent-color); } input[type="radio"] { border-radius: 50%; } } /* !SECTION RADIO & CHECKBOX */ /** ----------------------------------------------------------------- * SECTION NUMBER, SELECT, SEARCH ------------------------------------------------------------------ */ /* Remove increment/decrement buttons from number fields */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { appearance: none; } input[type="number"] { -moz-appearance: textfield; } /* Hide the default arrow icon and implement a custom one */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* hides the native UI */ padding-inline-end: var(--sp_4); /* prevents input text from running into background image */ background-image: url('data:image/svg+xml;utf8,'); background-size: 0.7em; background-repeat: no-repeat; background-position: right var(--sp_1) center; } /* Remove the chrome cancel button */ input[type="search"]::-webkit-search-cancel-button { display: none; } /* !SECTION NUMBER, SELECT, SEARCH */ /** ----------------------------------------------------------------- * SECTION PROGRESS ------------------------------------------------------------------ */ /* Normalize progress bar */ progress[value] { border: 0; background-color: var(--element-background); -webkit-appearance: none; display: block; width: 100%; margin-block-end: var(--flow-space); } progress[value]::-webkit-progress-bar { background-color: var(--element-background); } progress[value]::-webkit-progress-value { background: var(--accent-color); } progress[value]::-moz-progress-bar { background: var(--accent-color); } /* indeterminate styles * progress:not([value]) {} */ /* !SECTION PROGRESS */ /** ----------------------------------------------------------------- * SECTION RANGE ------------------------------------------------------------------ */ input[type="range"], input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; font-size: 1rem; padding: 0; border: none; } input[type="range"]:focus, input[type="range"]:active { outline: none; --light-text-color: var(--accent-color); } /* Track Styles */ input[type="range"]::-webkit-slider-runnable-track { border: none; height: 5px; border-radius: 0; background-color: var(--element-background); } input[type="range"]::-moz-range-track { height: 5px; border: none; border-radius: 0; background-color: var(--element-background); } /* Thumb Styles */ input[type="range"]::-webkit-slider-thumb { margin-block-start: -0.5rem; width: 1.2rem; height: 1.2rem; border: 2px solid var(--page-background); border-radius: 1000rem; background: var(--light-text-color); } input[type="range"]::-moz-range-thumb { border: 2px solid var(--page-background); border-radius: 1000rem; font-size: 1.2rem; background: var(--light-text-color); } /* !SECTION RANGE */ /* !SECTION FORMS */ /** ----------------------------------------------------------------- * SECTION BUTTONS ------------------------------------------------------------------ */ label + button, label + .button, label + input[type="submit"], label + input[type="reset"], label + input[type="button"] { margin-block-start: var(--flow-space); } .button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: block; text-align: center; white-space: nowrap; text-decoration: none; width: min-content; background-color: transparent; cursor: pointer; box-sizing: border-box; color: white; background-color: var(--link-color); border: 1px solid var(--link-color); margin-block-end: var(--flow-space); font-weight: bold; padding-inline-start: var(--sp_4); padding-inline-end: var(--sp_4); } .button img, button img, input[type="submit"] img, input[type="reset"] img, input[type="button"] img { margin: 0; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { border-color: var(--link-color-alt); background-color: var(--link-color-alt); } input[type="submit"]:active, input[type="submit"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="button"]:active, input[type="button"]:focus { outline-offset: 3px; } .button[tabindex="-1"], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] { background-color: var(--element-background); color: var(--light-text-color); border-color: var(--element-background); } /* !SECTION BUTTONS */ /** ----------------------------------------------------------------- * SECTION LAYOUT ------------------------------------------------------------------ */ /* Section spacing */ .section { margin: var(--section-space) 0; } /* Standard content container */ .container { max-width: var(--content-width); padding: 0 var(--gutter); margin: 0 auto; width: 100%; } .container-wide { max-width: calc(var(--content-width) + var(--gutter) + var(--sidebar-width) + var(--section-space)) } /** ----------------------------------------------------------------- * SECTION FLOW SPACING * Use flow spacing in flow areas, provide a fallback for browsers * that don't support css variables ------------------------------------------------------------------ */ /* .flow > * + * { margin-top: 1.5rem; margin-top: var(--flow-space); } .flow > * + h1, .flow > * + h2, .flow > * + h3, .flow > * + h4, .flow > * + h5, .flow > * + h6, .flow > * + .txt-h1, .flow > * + .txt-h2, .flow > * + .txt-h3, .flow > * + .txt-h4, .flow > * + .txt-h5, .flow > * + .txt-h6 { margin-top: 1.5rem; margin-top: calc(var(--flow-space) * 2); } .flow > h1 + h2, .flow > h2 + h3, .flow > h3 + h4, .flow > h4 + h5, .flow > h5 + h6, .flow > .txt-h1 + .txt-h2, .flow > .txt-h2 + .txt-h3, .flow > .txt-h3 + .txt-h4, .flow > .txt-h4 + .txt-h5, .flow > .txt-h5 + .txt-h6 { margin-top: 1.5rem; margin-top: calc(var(--flow-space) * 0.5); } */ /* END !SECTION FLOW SPACING */ /** ----------------------------------------------------------------- * SECTION LEVEL ------------------------------------------------------------------ */ /* Level * Creates a bar with content vertically aligned on both sides * Good for split navigation bars etc. */ .level { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: center; gap: var(--gutter); } /* The first level item will be aligned to the left of the level * the second will be aligned to the right. * You can add more items, they will be evenly spaced, * though 2 is recommended */ /* END !SECTION LEVEL */ /** ----------------------------------------------------------------- * SECTION GRID ------------------------------------------------------------------ */ /* Super simple grid * min-width should be just under the pixel value in minmax * 2 * This helps avoid grid blowout on screens smaller than the * preferred min-width of a grid item. */ @media ( min-width: 25em ) { .grid { --grid-gap: var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: var(--grid-gap); } } @media ( orientation: portrait ) and ( min-width: 25em ) { .grid-portrait { --grid-gap: var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: var(--grid-gap); } } @media ( orientation: landscape ) and (min-width: 25em ) { .grid-landscape { --grid-gap: var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: var(--grid-gap); } } /* END !SECTION GRID */ /** ----------------------------------------------------------------- * SECTION PAGE SCAFFOLDING ------------------------------------------------------------------ */ /* Setup page container * This, and the next three style declarations help fix an * issue so that the page will never be shorter than the * screen is tall. This ensures the footer will always * be at the bottom of the page. */ #app { min-height: 100vh; display: flex; flex-direction: column; max-width: 100vw; } /* Stick the top header to the top of the screen * Good place to put a level with some navigation */ #top-header { position: absolute; z-index: 1000; width: 100%; } /* The main content will absorb any free vertical space, * pushing the footer neatly to the bottom. * * Extra space is given above and below the main area between the * header and footer (or the top and bottom of the page when such * elements don't exist) */ #main { width: 100%; flex: 1 0 auto; align-self: center; padding-block-start: var(--section-space); padding-block-end: var(--section-space); } /* Ensure footer does not shrink */ #footer { flex-shrink: 0; } /* SIDEBAR LAYOUT */ /* Container of content & sidebar * Max width equals the combined width of the sidebar, content, * and the space between them. * * Setup grid layout. Display sidebar under the content by default * This mostly matters for mobile. * Add space between content and sidebar */ .has-sidebar { max-width: calc(var(--content-width) + var(--section-space) + var(--sidebar-width)); padding: 0 var(--gutter); margin: 0 auto; display: grid; grid-template-areas: "content" "sidebar"; gap: var(--section-space); } /* Assign sidebar to the sidebar area, * Assign content to the content area, * Min-Width prevents grid blow out */ .has-sidebar > .sidebar { grid-area: sidebar; min-width: 0; } .has-sidebar > .content { grid-area: content; min-width: 0; } /* On landscape, adjust layout for two columns, * Arange areas so that the sidebar is on the left side of content. * minmax prevents content from being larger than screen width */ @media ( min-width: 65em ) { .has-sidebar { grid-template-columns: var(--sidebar-width) minmax(1px, 1fr); grid-template-areas: "sidebar content" } } /* END !SECTION PAGE SCAFFOLDING */ /* END !SECTION LAYOUT */ /** ----------------------------------------------------------------- * SECTION ACCORDION * Border radius has been commented out to avoid being too * opinionated, but left in so you can see how to implement it ------------------------------------------------------------------ */ details.accordion summary { display: block; cursor: pointer; padding: var(--sp_1); padding-left: calc(var(--sp_2) + 1em); background: var(--element-background); /*border-radius: 5px;*/ } details.accordion summary::before { left: var(--sp_1); } /*details.accordion[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }*/ details.accordion .details-content { padding: var(--sp_1); padding-left: calc(var(--sp_2) + 1rem); border: 2px solid var(--element-background); /*border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;*/ } /* END !SECTION ACCORDION */ /* Clearfix if you still need that sort of thing */ .clearfix:after { content: ""; display: table; clear: both; } /* Utility to make any element cover the area of it's parent. * You will have to give the parent { position: relative; } though */ .cover { position: absolute; inset: 0; object-fit: cover; } /* Center utility */ .center { display: grid; place-items: center; }