@govuk-pay/run-amock
Version:
A drop-in replacement for Mountebank in our govuk-pay codebases.
1,294 lines (1,062 loc) • 31.4 kB
CSS
/* ==================================================================
CSS Boilerplate v2.0.2
The Unlicense <https://unlicense.org>
https://github.com/MattMcAdams/CSS-Boilerplate
================================================================== */
/* =================================================================
/* SECTION Tokens
================================================================= */
:root {
/* Spacing */
--space_05: 0.25rem; /* 4px - utility to substitute 0 margins */
--space_1: 0.5rem; /* 8px - utility for tight paddings etc */
--space_2: 1rem; /* 16px - 1/2 line height, for closely related elements */
--space_4: 2rem; /* 32px - 1 line height, for related elements */
--space_8: 4rem; /* 64px - 2 line heights, for loosely related elements */
--space_16: 8rem; /* 128px - 4 line heights, for unrelated elements */
/* Semantic Space */
--space_flow: var(--space_4);
--space_gutter: var(--space_2);
--space_section: var(--space_8);
--space_grid-gap: var(--space_4);
--space_flex-gap: var(--space_2);
--space_layout-gap: var(--space_4);
/* Layout Widths */
--width_content: 60rem; /* 960px + gutters */
--width_sidebar: 20rem; /* 320px + gutters */
--width_wide: calc(
var(--width_content) +
var(--width_sidebar) +
var(--space_layout-gap)
);
/* Total wide width: 60rem + 20rem + 2rem = 82rem */
/* Colors */
--color_text--default: #18181b;
--color_text--subtle: #71717a;
--color_text--link: #6366f1;
--color_text--link-alt: #4f46e5;
--color_text--accent: var(--color_text--link);
--color_background--surface: white;
--color_background--element: #f4f4f5;
--color_background--chip: #e4e4e7;
--color_accent: var(--color_text--link);
/* Font Families */
--font_body: system-ui, sans-serif;
--font_head: inherit;
--font_mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
/* Font Weights */
--font_weight--thin: 100;
--font_weight--extralight: 200;
--font_weight--light: 300;
--font_weight--normal: 400;
--font_weight--medium: 500;
--font_weight--semibold: 600;
--font_weight--bold: 700;
--font_weight--extrabold: 800;
--font_weight--black: 900;
/* Font Sizes & Line Heights */
/* Based on a modular scale 1.125 by 1.2 */
/* Exact values have been refined to be a whole pixel value */
--font_size--small: 0.9375rem; /* 15px */
--font_size--normal: 1.125rem; /* 18px */
--font_size--medium: 1.375rem; /* 22px */
--font_size--large: 1.625rem; /* 26px */
--font_size--xlarge: 1.9375rem; /* 31px */
--font_size--xxlarge: 2.3125rem; /* 37px */
--font_size--xxxlarge: 2.8125rem; /* 45px */
/* Line heights */
--font_height--small: 1.2;
--font_height--normal: 1.8;
--font_height--medium: 1.5;
--font_height--large: 1.3;
--font_height--xlarge: 1.2;
--font_height--xxlarge: 1.1;
--font_height--xxxlarge: 1;
}
/* Medium font sizes */
/* Based on a modular scale 1.125 by 1.25 */
/* Exact values have been refined to be a whole pixel value */
@media (min-width: 30rem) {
:root {
--font_size--small: 0.875rem; /* 14px */
--font_size--medium: 1.4375rem; /* 23px */
--font_size--large: 1.75rem; /* 28px */
--font_size--xlarge: 2.1875rem; /* 35px */
--font_size--xxlarge: 2.75rem; /* 44px */
--font_size--xxxlarge: 3.4375rem; /* 55px */
}
}
/* Large font sizes */
/* Based on a modular scale 1.125 by 1.3 */
/* Exact values have been refined to be a whole pixel value */
@media (min-width: 60em) {
:root {
--font_size--large: 1.875rem; /* 30px */
--font_size--xlarge: 2.5rem; /* 40px */
--font_size--xxlarge: 3.1875rem; /* 51px */
--font_size--xxxlarge: 4.1875rem; /* 67px */
}
}
del {
--color_background--element: #fdebeb;
}
ins {
--color_background--element: #e3fcec;
}
/* !SECTION Tokens */
/* =================================================================
/* SECTION Reset
** http://meyerweb.com/eric/tools/css/reset/
** v2.0 | 20110126 * License: none (public domain)
** Modified by Matt McAdams
================================================================= */
* {
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, hr {
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) {
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 ;
}
/* Ensures disabled elements do not accept events */
[disabled] {
pointer-events: none ;
cursor: not-allowed ;
}
/* 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(--space_flow);
scroll-margin-bottom: var(--space_flow);
}
/* ::selection {
background-color: var(--color-primary-100);
} */
/* ==============================
/* SECTION Typography
============================== */
/* Set the document's default font, color, size, and line height */
body {
font-family: var(--font_body);
font-size: var(--font_size--normal);
line-height: var(--font_height--normal);
color: var(--color_text--default);
background: var(--color_background--surface);
accent-color: var(--color_accent);
}
/* Heading typography */
h1, h2, h3, h4, h5 {
font-family: var(--font_head);
font-weight: var(--font_weight--bold);
}
h1,
.util_txt--h1 {
font-size: var(--font_size--xxxlarge);
line-height: var(--font_height--xxxlarge);
}
h2,
.util_txt--h2 {
font-size: var(--font_size--xxlarge);
line-height: var(--font_height--xxlarge);
}
h3,
.util_txt--h3 {
font-size: var(--font_size--xlarge);
line-height: var(--font_height--xlarge);
}
h4,
.util_txt--h4 {
font-size: var(--font_size--large);
line-height: var(--font_height--large);
}
h5 {
font-size: var(--font_size--medium);
line-height: var(--font_height--medium);
}
/* Set typography for small text */
small,
.util_txt--small {
font-size: var(--font_size--small);
line-height: var(--font_height--small);
}
/* Basic styles for inline semantics */
strong, b { font-weight: bold; }
em, cite, i, q { font-style: italic; }
s { text-decoration: line-through; }
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 {
background: var(--color_background--element);
text-decoration: line-through;
padding: 0.1em 0.3em;
}
ins {
background: var(--color_background--element);
text-decoration: underline;
padding: 0.1em 0.3em;
}
/* Mark styles - see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark */
mark {
background: var(--color_text--accent);
color: var(--color_background--surface);
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;
}
/* !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(--color_text--link);
text-decoration: none;
font-weight: bold;
}
/* a:not([class]):visited { } */
a:not([class]):hover,
a:not([class]):focus {
text-decoration: underline;
text-decoration-color: var(--color_text--link-alt);
text-decoration-thickness: 2px;
}
/* OPTIONAL STYLES - Add an icon for special links */
/* a:not([class])[target="_blank"]::after,
a:not([class])[data-link-type="external"] {
content: '';
padding-inline-start: 0.1em;
} */
/* a:not([class])[href$='.pdf']::after,
a:not([class])[data-link-type='document']::after {
content: '';
padding-inline-start: 0.1em;
} */
/* a:not([class])[href^="tel:"]::before,
a:not([class])[data-link-type="telephone"]::before {
content: '';
padding-inline-end: 0.1em;
} */
/* a:not([class])[href^="mailto:"]::before,
a:not([class])[data-link-type="email"]::before {
content: '';
padding-inline-end: 0.1em;
} */
/* !SECTION Links */
/* ==============================
/* SECTION Blockquote
============================== */
blockquote {
border-left: 5px solid var(--color_accent);
padding: var(--space_2) var(--space_4);
font-weight: var(--font_weight--semibold);
}
blockquote footer,
blockquote cite {
font-size: var(--font_size--small);
line-height: var(--font_height--small);
font-weight: var(--font_weight--normal);
}
blockquote cite {
font-style: italic;
}
blockquote > cite,
blockquote > footer {
display: block;
margin-block-start: calc(var(--space_flow) / 2);
}
/* !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 */
ol:not([class]) li,
ul:not([class]) li {
margin-block-end: var(--space_1);
margin-inline-start: var(--space_4);
}
/* Add basic styles for definition lists */
dt { font-weight: bold; }
dd { padding-inline-start: var(--space_2); }
/* !SECTION Lists */
/* ==============================
/* SECTION Media
============================== */
/* Allow media to sit correctly in content flow */
img,
figure,
video,
.aspect-ratio,
.embed-wrapper {
display: block;
width: 100%;
}
img {
max-width: 100%;
width: auto;
height: auto;
}
/* Add placeholder background for video */
video:not(:has(source)) {
background: var(--color_background--element);
}
/* Basic style for figcaption */
figcaption {
display: block;
font-style: italic;
}
/* Allow audio to sit correctly in content flow,
* Adjust border radius to allow consistency across browsers */
audio {
display: block;
width: 100%;
max-width: 100%;
border-radius: 900px;
}
/* Setup media wrappers */
.aspect-ratio,
.embed-wrapper {
--aspect-ratio: 16/9;
width: 100%;
padding-block-start: calc(100%/(var(--aspect-ratio)));
position: relative;
}
/* Position inner elements in media wrappers */
.embed-wrapper > iframe,
.embed-wrapper > embed,
.embed-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: 1px solid var(--color_text--subtle);
width: 100%;
}
hr.spacer {
--spacer-height: calc(var(--space_flow) * 2);
border: none;
margin-block-start: var(--spacer-height) 0;
}
/* !SECTION Rules*/
/* ==============================
/* SECTION Tables
============================== */
table {
width: 100%;
}
caption {
font-size: inherit;
line-height: inherit;
text-align: start;
margin-block-end: var(--space_2);
}
thead {
background-color: var(--color_text--default);
color: var(--color_background--surface);
}
th, td {
font-size: var(--font_size--small);
line-height: var(--font_height--small);
padding: var(--space_2);
text-align: start;
}
th { font-weight: bold; }
tr {
border-block-end: 0.5px solid var(--color_text--subtle);
}
tbody tr:hover {
background-color: var(--color_background--element);
}
tfoot {
background-color: var(--color_background--chip);
}
/* !SECTION Tables */
/* ==============================
/* SECTION Code
============================== */
code, samp, kbd, var {
font-family: var(--font_mono);
padding: 0.1em 0.3em;
}
code, samp {
background-color: var(--color_background--element);
}
var {
font-style: italic;
font-weight: bold;
}
kbd {
background-color: var(--color_text--default);
color: var(--color_background--surface);
border-radius: 5px;
}
pre code,
pre samp {
display: block;
padding: var(--space_2);
overflow: auto;
font-family: var(--font_mono);
font-size: var(--font_size--small);
line-height: var(--font_height--small);
}
/* !SECTION Code */
/* ==============================
/* SECTION Details
============================== */
/* Display:block removes Firefox's marker
* ::webkit-details-marker removed Chrome & Safair's marker */
details {
display: block;
position: relative;
}
summary::-webkit-details-marker {
display: none;
}
summary {
display: block;
cursor: pointer;
color: var(--color_text--default);
font-weight: var(--font_weight--bold);
font-weight: bold;
}
summary::before {
content: "+";
box-sizing: border-box;
text-align: center;
display: inline-block;
font-size: 1em;
width: 1em;
margin-inline-end: 0.5em;
will-change: transform;
transition: transform 300ms ease;
}
summary:focus::before {
color: var(--color_accent);
}
summary + * {
margin-block-start: calc(var(--space_flow) / 2);
}
details[open] > summary::before {
transform: rotate(45deg);
}
details {
background: var(--color_background--element);
padding: var(--space_2);
}
/* !SECTION Details */
/* ==============================
/* SECTION Meter
============================== */
meter {
--meter-color_track: var(--color_background--element);
--meter-color_optimum: #15803d;
--meter-color_sub-optimum: #f59e0b;
--meter-color_sub-sub-optimum: #dc2626;
display: block;
width: 100%;
height: 1rem;
-webkit-appearance: none;
border-radius: 0;
background: none;
background-color: var(--meter-color_track);
}
/* Set the track color for webkit browsers */
meter::-webkit-meter-bar {
background: var(--meter-color_track);
}
/* Set the optimum color */
meter::-webkit-meter-optimum-value {
background: var(--meter-color_optimum);
}
meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--meter-color_optimum);
}
/* Set the sub optimum color */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--meter-color_sub-optimum);
}
meter::-webkit-meter-suboptimum-value {
background: var(--meter-color_sub-optimum);
}
/* Set the sub sub optimum color */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--meter-color_sub-sub-optimum);
}
/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
background: var(--meter-color_sub-sub-optimum);
}
/* !SECTION Meter */
/* ==============================
/* SECTION Progress
============================== */
progress[value] {
--progress-color_track: var(--color_background--element);
--progress-color_fill: var(--color_accent);
display: block;
width: 100%;
height: 0.25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 0;
background: var(--progress-color_track);
}
progress[value]::-webkit-progress-bar {
background: var(--progress-color_track);
}
progress[value]::-webkit-progress-value {
background: var(--progress-color_fill);
}
progress[value]::-moz-progress-bar {
background: var(--progress-color_fill);
}
/* !SECTION Progress */
/* !SECTION Core */
/* =================================================================
/* SECTION Forms
** File uploads are not styled, you're better off implementing
** something with JS.
** Date & Color inputs are not styled, they're far too complicated
** for the scope of this project.
================================================================= */
/* Setup form specific styles and variables */
form {
--form_invalid-color: #dc2626;
}
/* Add required input notice if required fields exist */
form:has(.form-field input[required])::after {
content: "* indicates a required field";
color: var(--form_invalid-color);
margin-block-start: var(--space_flow);
display: block;
}
/* Standardize labels */
label, legend {
background-color: transparent;
font: inherit;
}
/* Standard styles for normal inputs */
input:not([type="checkbox"], [type="radio"], [type="color"]),
select,
textarea,
button {
font: inherit;
padding: var(--space_1);
display: block;
width: 100%;
border: 1px solid var(--color_text--subtle);
line-height: inherit;
box-sizing: border-box;
background: transparent;
}
/* Remove border and padding for file inputs */
input[type="file"] {
padding: var(--space_1) 0;
border: none;
}
/* Set textarea default height and restrict resize to vertical */
textarea {
resize: vertical;
min-height: 10rem;
font-family: var(--font_mono);
font-size: var(--font_size--small);
line-height: var(--font_height--small);
}
/* ==============================
/* SECTION Form field class
============================== */
.form-field label {
display: block;
}
/* Add required marker to labels if their input is required */
.form-field:has(input[required]) label::after {
content: " *";
color: var(--form_invalid-color);
}
/* !SECTION Form field class */
/* ==============================
/* SECTION Radio & Checkbox
============================== */
ul:has(input[type="checkbox"]),
ul:has(input[type="radio"]),
ol:has(input[type="checkbox"]),
ol:has(input[type="radio"]) {
list-style: none;
}
ul:has(input[type="checkbox"]) li,
ul:has(input[type="radio"]) li,
ol:has(input[type="checkbox"]) li,
ol:has(input[type="radio"]) li {
margin: 0;
}
/* !SECTION Radio & Checkbox */
/* ==============================
/* SECTION Range
============================== */
input[type="range"],
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
font-size: 1rem;
height: 1rem;
padding: 0;
border: none;
}
/* Track Styles */
input[type="range"]::-webkit-slider-runnable-track {
border: none;
height: 5px;
border-radius: 0;
background-color: var(--color_background--element);
}
input[type="range"]::-moz-range-track {
height: 5px;
border: none;
border-radius: 0;
background-color: var(--color_background--element);
}
input[type="range"]::-moz-range-progress{
background-color: var(--color_accent);
height: 5px;
}
/* Thumb Styles */
input[type="range"]::-webkit-slider-thumb {
margin-block-start: calc((1.2rem / -2) + 2.5px);
width: 1.2rem;
height: 1.2rem;
border: 2px solid var(--color_background--surface);
border-radius: 1000rem;
background: var(--color_accent);
}
input[type="range"]::-moz-range-thumb {
border: 2px solid var(--color_background--surface);
border-radius: 1000rem;
font-size: 1.2rem;
background: var(--color_accent);
}
/* !SECTION Range */
/* ==============================
/* SECTION Buttons
============================== */
.button,
.button--secondary,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
width: auto;
text-align: center;
white-space: nowrap;
text-decoration: none;
background-color: var(--color_text--link);
cursor: pointer;
box-sizing: border-box;
color: var(--color_background--surface);
border: 2px solid var(--color_text--link);
padding-inline: var(--space_4);
padding-block: var(--space_1);
}
a.button:hover,
a.button--secondary:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.button:focus,
a.button--secondary:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
border-color: var(--color_text--link-alt);
background-color: var(--color_text--link-alt);
}
.button--secondary,
button[type="reset"],
input[type="reset"] {
background-color: var(--color_background--surface);
color: var(--color_text--link);
border-color: var(--color_text--link);
}
a.button--secondary:hover,
button[type="reset"]:hover,
input[type="reset"]:hover,
a.button--secondary:focus,
button[type="reset"]:focus,
input[type="reset"]:focus {
background-color: var(--color_background--surface);
color: var(--color_text--link-alt);
border-color: var(--color_text--link-alt);
}
span.button,
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
cursor: auto;
background-color: var(--color_background--chip);
color: var(--color_text--subtle);
border-color: var(--color_background--chip);
}
span.button--secondary,
input[type="reset"][disabled],
button[type="reset"][disabled] {
cursor: auto;
background-color: var(--color_background--surface);
color: var(--color_background--chip);
border-color: var(--color_background--chip);
}
/* !SECTION Buttons */
/* !SECTION Forms */
/* =================================================================
/* SECTION Layout
================================================================= */
/* ==============================
/* SECTION Container System
** Containers allow for a robust and flexible layout system by
** applying the gutter padding and max width to the container itself.
** Containers can be nested as needed.
============================== */
/* Setup containers */
.container {
margin-inline: auto;
padding-inline: var(--space_gutter);
max-width: var(--width_content);
}
.container--wide {
margin-inline: auto;
padding-inline: var(--space_gutter);
max-width: var(--width_wide);
}
.container--full {
margin-inline: auto;
padding-inline: var(--space_gutter);
}
/* Allow nested containers wider than parent */
.container > .container--wide {
max-width: var(--width_wide);
margin-inline: calc(
min(
calc(100vw - 100%),
calc(var(--width_wide) - 100%)
) / -2
);
}
.container > .container--full,
.container--wide > .container--full {
max-width: 100vw;
margin-inline: calc((100vw - 100%) / -2);
}
/* Remove duplicate gutters from nested containers the same size as parent */
.container > .container,
.container--wide > .container--wide,
.container--full > .container--full {
margin-inline: calc(var(--space_gutter) * -1);
}
/* Account for containers smaller than parent */
.container--wide > .container,
.container--full > .container {
margin-inline: max(
calc(var(--space_gutter) * -1),
calc((100% - var(--width_content)) / 2)
);
}
.container--full > .container--wide {
margin-inline: max(
calc(var(--space_gutter) * -1),
calc((100% - var(--width_wide)) / 2)
);
}
/* !SECTION Containers */
/* ==============================
/* SECTION Flow Spacing
** Flow spacing is the space between elements in a vertical flow.
** The .section class is provided for larger gaps between sections.
** Flow spacing can be applied to a individual container using the .layout--flow class. or to the entire document using the .global--flow class. The implementation is different for each method, so consider how you want the spacing to be applied.
============================== */
.layout--flow > * + *,
blockquote > * + *,
details > * + * {
margin-block-start: var(--space_flow);
}
.layout--flow-double > * + * {
margin-block-start: calc(var(--space_flow) * 2);
}
.layout--flow-half > * + * {
margin-block-start: calc(var(--space_flow) / 2);
}
.layout--flow > * + h1,
.layout--flow > * + h2,
.layout--flow > * + h3,
.layout--flow > * + h4,
.layout--flow > * + h5,
.layout--flow > * + h6 {
margin-block-start: calc(var(--space_flow) * 2);
}
.layout--flow > h1 + h2,
.layout--flow > h2 + h3,
.layout--flow > h3 + h4,
.layout--flow > h4 + h5,
.layout--flow > h5 + h6 {
margin-block-start: calc(var(--space_flow) / 2);
}
.section {
margin-block-start: var(--space_section);
}
/* !SECTION Flow Spacing */
/* ==============================
/* SECTION Level
** Creates a bar with content vertically aligned on both sides
** Good for split navigation bars etc.
============================== */
.layout--level {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
gap: var(--space_gutter);
}
/* !SECTION Level */
/* ==============================
/* SECTION Grid
** The grid layout creates a responsive grid with a fluid number of columns.
** You can define the number of columns to allow as well as the minimum
** width of each grid item. Just be aware that if you set the minimum width
** too high, the grid may not fit on viewports smaller than the minimum width.
============================== */
.layout--grid {
--grid-column--count: 6;
--grid-gap--width: var(--space_grid-gap);
--grid-gap--count: calc(var(--grid-column--count) - 1);
--grid-gap--total: calc(var(--grid-gap--width) * var(--grid-gap--count));
--grid-item--min-width: 14rem;
--grid-item--max-width: calc((100% - var(--grid-gap--total)) / var(--grid-column--count));
display: grid;
grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
gap: var(--grid-gap--width);
}
/* Stabilize height of components that are side by side */
.layout--grid > div > :only-child,
.layout--grid > li > :only-child {
display: flex;
align-items: stretch;
height: 100%;
}
.layout--grid > div > :only-child > *,
.layout--grid > li > :only-child > * {
flex: 1;
}
/* !SECTION Grid */
/* ==============================
/* SECTION App
** The app wrapper ensures the the site footer sticks to the
** bottom of the viewport on short pages.
** Structure should be as follows:
** <div id="app">
** <header></header>
** <main></main>
** <footer></footer>
** </div>
** No other elements should be present in the app div.
============================== */
#app {
min-height: 100vh;
display: flex;
flex-direction: column;
max-width: 100vw;
}
#app > :nth-child(2) {
width: 100%;
flex: 1 0 auto;
place-content: start center;
}
/* !SECTION App */
/* ==============================
/* SECTION Page Layout
** The page layout provides grid areas for a hero, content, and sidebar.
** It arranges the grid areas responsively based on the presence of a sidebar.
** Inside the <main class="page"> tag, the structure should follow:
** <div class="page_header"> (optional, may use header element)
** <div class="page_content"> (may use article element)
** <div class="page_sidebar"> (optional, may use aside or nav elements)
============================== */
.page {
display: grid;
grid-template-areas:
"header"
"content"
"sidebar";
grid-template-columns: 1fr;
column-gap: var(--space_layout-gap);
max-width: var(--width_wide);
margin-inline: auto;
}
/* Fix for x overflow elements breaking layout */
.page > * {
min-width: 0;
}
/* Page areas */
.page__header {
grid-area: header;
}
.page__content {
grid-area: content;
margin-block: var(--space_section);
}
.page__sidebar {
grid-area: sidebar;
margin-block-end: var(--space_section);
}
/* Layout fixes */
.page:has(.page__sidebar) .container > .container--wide,
.page:has(.page__sidebar) .container > .container--full,
.page:has(.page__sidebar) .container--wide > .container,
.page:has(.page__sidebar) .container--wide > .container--full,
.page:has(.page__sidebar) .container--full > .container,
.page:has(.page__sidebar) .container--full > .container--wide {
margin-inline: calc(var(--space_gutter) * -1);
}
.page:not(:has(.page__sidebar)) .width--full,
.page:not(:has(.page__sidebar)) .container--full {
width: 100vw;
max-width: 100vw;
margin-inline: calc((100vw - 100%) / -2);
}
/* Enable sidebar */
@media (min-width: 60rem) {
.page:has(.page__sidebar) {
grid-template-areas:
"header header"
"sidebar content";
grid-template-columns:
minmax(calc(25% - (var(--space_layout-gap) / 2)), var(--width_sidebar))
min(calc(75% - (var(--space_layout-gap) / 2)), var(--width_content));
}
.page__sidebar {
margin-block-start: var(--space_section);
}
}
/* !SECTION Page Layout */
/* !SECTION Layout */