Convert to css style comments, part 2.
This commit is contained in:
parent
2eee4d3c24
commit
9f8b1eaf18
38 changed files with 234 additions and 201 deletions
|
|
@ -8,6 +8,13 @@ rules:
|
|||
hue-degree-notation: number
|
||||
media-feature-range-notation: prefix
|
||||
no-descending-specificity: null
|
||||
comment-empty-line-before:
|
||||
- always
|
||||
- except:
|
||||
- first-nested
|
||||
ignore:
|
||||
- stylelint-commands
|
||||
- after-comment
|
||||
selector-class-pattern:
|
||||
- "^[a-z0-9\\-]+$"
|
||||
- message: Selector should be written in lowercase with hyphens (selector-class-pattern)
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
// Theme colours.
|
||||
// Override css variables in "assets/sass/_custom.scss"
|
||||
/* Theme colours. */
|
||||
|
||||
/* Override css variables in "assets/sass/_custom.scss" */
|
||||
|
||||
:root {
|
||||
// Base colours.
|
||||
/* Base colours. */
|
||||
--color-black: oklch(1% 0.01 0);
|
||||
--color-nearblack: oklch(25% 0.01 0);
|
||||
--color-grey-700: oklch(38% 0 0);
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
--color-green: oklch(65% 0.19 138);
|
||||
--color-blue: oklch(65% 0.16 247);
|
||||
|
||||
// Transparent colours.
|
||||
/* Transparent colours. */
|
||||
--color-black-60: oklch(0% 0 0 / 0.6);
|
||||
--color-black-40: oklch(0% 0 0 / 0.4);
|
||||
--color-black-20: oklch(0% 0 0 / 0.2);
|
||||
|
|
@ -27,20 +28,20 @@
|
|||
--color-white-20: oklch(100% 0 0 / 0.2);
|
||||
--color-white-10: oklch(100% 0 0 / 0.1);
|
||||
|
||||
// Brand colours.
|
||||
/* Brand colours. */
|
||||
--color-brand: var(--color-nearblack);
|
||||
--color-brand-alt: var(--color-grey-500);
|
||||
--color-brand-light: var(--color-grey-300);
|
||||
--color-brand-dark: var(--color-grey-700);
|
||||
|
||||
// Text colours.
|
||||
/* Text colours. */
|
||||
--color-text: var(--color-black);
|
||||
--color-text-bg: var(--color-white);
|
||||
--color-text-meta: var(--color-grey-600);
|
||||
--color-headings: var(--color-nearblack);
|
||||
--color-code: var(--color-nearblack);
|
||||
|
||||
// Link colours.
|
||||
/* Link colours. */
|
||||
--color-link: var(--color-brand);
|
||||
--color-link-visited: var(--color-brand);
|
||||
--color-link-hover: var(--color-brand-alt);
|
||||
|
|
@ -50,37 +51,37 @@
|
|||
--color-link-hover-inverted: var(--color-white);
|
||||
--color-link-active-inverted: var(--color-red);
|
||||
|
||||
// Button colours.
|
||||
/* Button colours. */
|
||||
--color-button: var(--color-brand);
|
||||
--color-button-hover: var(--color-brand-alt);
|
||||
--color-button-text: var(--color-white);
|
||||
--color-button-text-hover: var(--color-white);
|
||||
--color-button-disabled: var(--color-grey-400);
|
||||
|
||||
// Border colours.
|
||||
/* Border colours. */
|
||||
--color-border: var(--color-brand);
|
||||
--color-border-light: var(--color-brand-light);
|
||||
--color-border-dark: var(--color-brand-dark);
|
||||
|
||||
// Background colours.
|
||||
/* Background colours. */
|
||||
--color-header-bg: var(--color-white);
|
||||
--color-body-bg: var(--color-white);
|
||||
--color-footer-bg: var(--color-white);
|
||||
--color-backdrop: var(--color-grey-100);
|
||||
|
||||
// Mobil menu colours.
|
||||
/* Mobil menu colours. */
|
||||
--color-mobile-menu: var(--color-brand);
|
||||
--color-mobile-menu-cover: var(--color-black-20);
|
||||
|
||||
// Form colours.
|
||||
/* Form colours. */
|
||||
--color-accent: var(--color-brand);
|
||||
|
||||
// Row (e.g. in table) colours.
|
||||
/* Row (e.g. in table) colours. */
|
||||
--color-row-header: transparent;
|
||||
--color-row-odd: var(--color-nearwhite);
|
||||
--color-row-even: transparent;
|
||||
|
||||
// Status colours.
|
||||
/* Status colours. */
|
||||
--color-info: var(--color-blue);
|
||||
--color-info-bg: oklch(from var(--color-blue) 100% 0.03 h);
|
||||
--color-success: var(--color-green);
|
||||
|
|
@ -90,7 +91,7 @@
|
|||
--color-error: var(--color-red);
|
||||
--color-error-bg: oklch(from var(--color-red) 100% 0.03 h);
|
||||
|
||||
// Highlight colours.
|
||||
/* Highlight colours. */
|
||||
--color-highlight: var(--color-brand-alt);
|
||||
--color-mark-highlight: var(--color-red);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Site custom styles and colours. This file loads last.
|
||||
/* Site custom styles and colours. This file loads last. */
|
||||
|
||||
/* Override colours like this
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
// Add and override variables. This file loads last during init.
|
||||
/* Add and override variables. This file loads last during init. */
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ project, each .scss file has a `@import 'init';` declaration. The _init.scss
|
|||
file is in charge of importing all the other partials needed for the
|
||||
project. */
|
||||
|
||||
// Variables.
|
||||
/* Variables. */
|
||||
@import 'sass_variables';
|
||||
@import 'extra';
|
||||
|
||||
// Mixins and functions.
|
||||
/* Mixins and functions. */
|
||||
@import 'mixins/breakpoint/respond-to';
|
||||
@import 'mixins/flex-calc/flex-calc';
|
||||
@import 'mixins/spacing/spacing';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
These need to be sass variables since they are used in sass functions and mixins.
|
||||
Override sass variables in "assets/sass/_extra.scss" */
|
||||
|
||||
// Base line height, unitless.
|
||||
/* Base line height, unitless. */
|
||||
$base-line-height: 1.5;
|
||||
|
||||
/* The font sizes in our type hierarchy as tee shirt sizes.
|
||||
|
|
@ -33,8 +33,7 @@ $font-size-fluid: (
|
|||
xs: 0.778rem,
|
||||
);
|
||||
|
||||
/* Set the font sizes to use, fixed or fluid.
|
||||
$font-size: $font-size-fluid; */
|
||||
/* Set the font sizes to use, fixed or fluid. */
|
||||
$font-size: $font-size-fixed;
|
||||
|
||||
/* Breakpoints (Deprecated in v5, use css @media directly instead.)
|
||||
|
|
@ -65,7 +64,7 @@ $spacing: (
|
|||
0: 0,
|
||||
);
|
||||
|
||||
// The max content width. (Consider using one of the breakpoints.)
|
||||
/* The max content width. (Consider using one of the breakpoints.) */
|
||||
$max-content-width: 1111px;
|
||||
|
||||
/* The max page width. Defaults to max-content-width.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
:root {
|
||||
// Convert sass variables to css variables.
|
||||
/* Convert sass variables to css variables. */
|
||||
|
||||
@each $name, $size in $font-size {
|
||||
--fs-#{$name}: #{$size};
|
||||
|
|
@ -8,22 +8,20 @@
|
|||
--max-content-width: #{$max-content-width};
|
||||
--max-page-width: #{$max-page-width};
|
||||
|
||||
// Base line height, unitless.
|
||||
/* Base line height, unitless. */
|
||||
--base-line-height: #{$base-line-height};
|
||||
|
||||
|
||||
// Set theme css variables.
|
||||
// Override css variables in "assets/sass/_custom.scss"
|
||||
/* Set theme css variables.
|
||||
Override css variables in "assets/sass/_custom.scss" */
|
||||
|
||||
// Heading line height, unitless.
|
||||
/* Heading line height, unitless. */
|
||||
--heading-line-height: 1.3;
|
||||
|
||||
// The font size set on the root html element.
|
||||
// Specify unitless, it will be recalculated as %.
|
||||
/* The font size set on the root html element.
|
||||
Specify unitless, it will be recalculated as %. */
|
||||
--base-font-size: 18;
|
||||
|
||||
// stylelint-disable value-keyword-case
|
||||
|
||||
/* Modern font stacks. See how they look at https://modernfontstacks.com/.
|
||||
|
||||
The following font family declarations use widely available fonts.
|
||||
|
|
@ -33,13 +31,15 @@
|
|||
monospace) hints at what type of font to use if the web browser doesn't
|
||||
find any of the fonts in the list. */
|
||||
|
||||
// Emojis font stack. Add to end of other stacks when needed.
|
||||
/* stylelint-disable value-keyword-case */
|
||||
|
||||
/* Emojis font stack. Add to end of other stacks when needed. */
|
||||
--emojis: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
// System-ui font stack.
|
||||
/* System-ui font stack. */
|
||||
--system-ui: system-ui, sans-serif;
|
||||
|
||||
// Serif font stacks.
|
||||
/* Serif font stacks. */
|
||||
--ui-serif: ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
||||
--transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
||||
--old: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
--antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
|
||||
--didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
|
||||
|
||||
// Sans-serif font stacks.
|
||||
/* Sans-serif font stacks. */
|
||||
--ui-sans-serif: ui-sans-serif, system-ui, sans-serif;
|
||||
--humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
||||
--geometric: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
||||
|
|
@ -56,20 +56,20 @@
|
|||
--industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
|
||||
--futura: Futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
||||
|
||||
// Rounded Sans-serif font stacks.
|
||||
/* Rounded Sans-serif font stacks. */
|
||||
--ui-rounded: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
|
||||
|
||||
// Monospace font stacks.
|
||||
/* Monospace font stacks. */
|
||||
--ui-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||
// stylelint-enable value-keyword-case
|
||||
/* stylelint-enable value-keyword-case */
|
||||
|
||||
// Font family.
|
||||
/* Font family. */
|
||||
--ff-body: var(--ui-serif);
|
||||
--ff-headings: var(--ui-sans-serif);
|
||||
--ff-alt: var(--system-ui);
|
||||
--ff-monospace: var(--ui-monospace);
|
||||
|
||||
// Font weights.
|
||||
/* Font weights. */
|
||||
--fw-headings: 700;
|
||||
--fw-bolder: 900;
|
||||
--fw-bold: 700;
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
--fw-light: 300;
|
||||
--fw-lighter: 200;
|
||||
|
||||
// Spacing.
|
||||
/* Spacing. */
|
||||
--spacing-xxl: calc(3rem * var(--base-line-height));
|
||||
--spacing-xl: calc(2rem * var(--base-line-height));
|
||||
--spacing-l: calc(1.5rem * var(--base-line-height));
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
--spacing-xs: calc(0.5rem * var(--base-line-height));
|
||||
--spacing-xxs: calc(0.3rem * var(--base-line-height));
|
||||
|
||||
// Border radius.
|
||||
/* Border radius. */
|
||||
--radius-xl: 1rem;
|
||||
--radius-l: 0.75rem;
|
||||
--radius-m: 0.5rem;
|
||||
|
|
@ -98,16 +98,16 @@
|
|||
How much should the "breakout" be. Defaults to same as gutters value. */
|
||||
--breakout: calc(5px + 1.5625vw);
|
||||
|
||||
// The left/right gutter/padding.
|
||||
/* The left/right gutter/padding. */
|
||||
--gutters: calc(5px + 1.5625vw);
|
||||
--gutters-reverse: calc(0px - (5px + 1.5625vw));
|
||||
|
||||
// The amount lists, blockquotes and comments are indented.
|
||||
/* The amount lists, blockquotes and comments are indented. */
|
||||
--indent-amount: 2rem;
|
||||
|
||||
// The max line width for readability.
|
||||
/* The max line width for readability. */
|
||||
--max-line-width: 70ch;
|
||||
|
||||
// The pt font-size to be used for printing.
|
||||
/* The pt font-size to be used for printing. */
|
||||
--print-font-size: 12pt;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Zen custom styles
|
||||
/* Zen custom styles */
|
||||
|
||||
// Page
|
||||
/* Page */
|
||||
|
||||
body {
|
||||
background-color: var(--color-backdrop);
|
||||
|
|
@ -14,7 +14,7 @@ body {
|
|||
border-block-start: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
// Apply smaller text to blocks, footer etc.
|
||||
/* Apply smaller text to blocks, footer etc. */
|
||||
|
||||
th,
|
||||
label,
|
||||
|
|
@ -28,7 +28,7 @@ figcaption {
|
|||
font-size: var(--fs-xs);
|
||||
}
|
||||
|
||||
// Apply heading font stack and colour to labels etc.
|
||||
/* Apply heading font stack and colour to labels etc. */
|
||||
|
||||
th,
|
||||
label,
|
||||
|
|
@ -45,7 +45,7 @@ label {
|
|||
font-weight: var(--fw-headings);
|
||||
}
|
||||
|
||||
// Article and content.
|
||||
/* Article and content. */
|
||||
|
||||
article,
|
||||
aside {
|
||||
|
|
@ -105,7 +105,7 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
// Navigation
|
||||
/* Navigation */
|
||||
|
||||
.main-menu {
|
||||
a {
|
||||
|
|
@ -127,13 +127,13 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
/* Search */
|
||||
|
||||
.search-text {
|
||||
font-size: var(--fs-l);
|
||||
}
|
||||
|
||||
// Copy code
|
||||
/* Copy code */
|
||||
|
||||
[data-codeblock] {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Base styles.
|
||||
/* Base styles. */
|
||||
|
||||
// Broken into modular pieces to make it easier to edit.
|
||||
/* Broken into modular pieces to make it easier to edit. */
|
||||
@import 'reset/reset';
|
||||
@import 'document/document';
|
||||
@import 'forms/forms';
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
// Document
|
||||
/* Document */
|
||||
|
||||
html {
|
||||
// Change the default font family in all browsers.
|
||||
/* Change the default font family in all browsers. */
|
||||
font-family: var(--ff-body);
|
||||
// Set base font size in percent.
|
||||
|
||||
/* Set base font size in percent. */
|
||||
font-size: calc(var(--base-font-size) / 16 * 100%);
|
||||
// Set text colour.
|
||||
|
||||
/* Set text colour. */
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
body {
|
||||
// Correct the line height in all browsers.
|
||||
/* Correct the line height in all browsers. */
|
||||
line-height: var(--base-line-height);
|
||||
// Accent colour for forms.
|
||||
|
||||
/* Accent colour for forms. */
|
||||
accent-color: var(--color-accent);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Form defaults.
|
||||
/* Form defaults. */
|
||||
|
||||
form {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
}
|
||||
|
||||
|
|
@ -14,13 +14,13 @@ select {
|
|||
label {
|
||||
font-weight: var(--fw-bold);
|
||||
|
||||
// Display as block if before input.
|
||||
/* Display as block if before input. */
|
||||
&:has(+ input),
|
||||
&:has(+ textarea){
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Mark field as required if needed.
|
||||
/* Mark field as required if needed. */
|
||||
&:has(+ :required) {
|
||||
&::after {
|
||||
content: '*';
|
||||
|
|
@ -29,7 +29,7 @@ label {
|
|||
}
|
||||
}
|
||||
|
||||
// Valid and invalid state.
|
||||
/* Valid and invalid state. */
|
||||
input,
|
||||
textarea {
|
||||
&:user-valid {
|
||||
|
|
@ -54,7 +54,7 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
// Set max text line width for readability.
|
||||
/* Set max text line width for readability. */
|
||||
input,
|
||||
label,
|
||||
textarea,
|
||||
|
|
@ -66,31 +66,31 @@ fieldset {
|
|||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
// Make field where you enter more info a bit wider.
|
||||
/* Make field where you enter more info a bit wider. */
|
||||
[type='email'],
|
||||
[type='password'],
|
||||
[type='range'],
|
||||
[type='search'],
|
||||
[type='url'] {
|
||||
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
|
||||
// stylelint-disable-next-line function-name-case
|
||||
/* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
|
||||
/* stylelint-disable-next-line function-name-case */
|
||||
width: Min(20em, 100%);
|
||||
}
|
||||
|
||||
// Make field where you enter more info a bit wider.
|
||||
/* Make field where you enter more info a bit wider. */
|
||||
[type='text'],
|
||||
textarea {
|
||||
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
|
||||
// stylelint-disable-next-line function-name-case
|
||||
/* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
|
||||
/* stylelint-disable-next-line function-name-case */
|
||||
width: Min(30em, 100%);
|
||||
}
|
||||
|
||||
// Make sure textareas without a rows attribute are not tiny.
|
||||
/* Make sure textareas without a rows attribute are not tiny. */
|
||||
textarea:not([rows]) {
|
||||
min-height: 7lh;
|
||||
}
|
||||
|
||||
// For forms with multibple fields show submit button below the form.
|
||||
/* For forms with multibple fields show submit button below the form. */
|
||||
input:not(:only-of-type),
|
||||
textarea {
|
||||
& + [type='submit'] {
|
||||
|
|
@ -98,7 +98,7 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
// For forms on mobile with single field add space between it and the submit button.
|
||||
/* For forms on mobile with single field add space between it and the submit button. */
|
||||
@media (min-width: 666px) {
|
||||
input:only-of-type {
|
||||
&:has(+ [type='submit']) {
|
||||
|
|
|
|||
|
|
@ -1,25 +1,28 @@
|
|||
// Grouping content
|
||||
/* Grouping content */
|
||||
|
||||
// Block quotes
|
||||
/* Block quotes */
|
||||
|
||||
blockquote {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
// Nicer text wrap, e.g. no lone word on last line.
|
||||
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
// Also indent the quote on both sides.
|
||||
|
||||
/* Also indent the quote on both sides. */
|
||||
margin-inline: var(--indent-amount);
|
||||
// Set max text line width in main for readability.
|
||||
|
||||
/* Set max text line width in main for readability. */
|
||||
max-width: var(--max-line-width);
|
||||
}
|
||||
|
||||
// Lists
|
||||
/* Lists */
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +33,8 @@ dt {
|
|||
dd {
|
||||
margin: 0;
|
||||
margin-inline-start: var(--indent-amount);
|
||||
// Nicer text wrap, e.g. no lone word on last line.
|
||||
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +44,7 @@ menu {
|
|||
padding: 0;
|
||||
padding-inline-start: var(--indent-amount);
|
||||
|
||||
// Turn off margins on nested lists.
|
||||
/* Turn off margins on nested lists. */
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
|
|
@ -49,49 +53,51 @@ menu {
|
|||
}
|
||||
|
||||
li {
|
||||
// Nicer text wrap, e.g. no lone word on last line.
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
// Set max text line width in main for readability.
|
||||
|
||||
/* Set max text line width in main for readability. */
|
||||
.main & {
|
||||
max-width: var(--max-line-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal rule
|
||||
/* Horizontal rule */
|
||||
|
||||
hr {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
border: 0;
|
||||
border-block-start: 1px solid var(--color-border);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
/* Paragraphs */
|
||||
|
||||
p {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
// Nicer text wrap, e.g. no lone word on last line.
|
||||
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
|
||||
// Set max text line width in main for readability.
|
||||
/* Set max text line width in main for readability. */
|
||||
.main & {
|
||||
max-width: var(--max-line-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Preformatted text
|
||||
/* Preformatted text */
|
||||
|
||||
pre {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
font-family: var(--ff-monospace);
|
||||
}
|
||||
|
||||
// Code
|
||||
/* Code */
|
||||
|
||||
// Do not set colour for code with syntax highlighting.
|
||||
/* Do not set colour for code with syntax highlighting. */
|
||||
code:not([data-lang]),
|
||||
kbd,
|
||||
samp {
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@ h6,
|
|||
line-height: var(--heading-line-height);
|
||||
text-wrap: balance;
|
||||
|
||||
// Smaller margin when a headeing is right after another heading.
|
||||
/* Smaller margin when a headeing is right after another heading. */
|
||||
& + & {
|
||||
margin-block-start: .75em
|
||||
}
|
||||
|
||||
// Set max text line width in main for readability.
|
||||
/* Set max text line width in main for readability. */
|
||||
.main & {
|
||||
max-width: var(--max-line-width);
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@ h6,
|
|||
|
||||
h1,
|
||||
%h1 {
|
||||
// h1 only on top of page so different margins.
|
||||
/* h1 only on top of page so different margins. */
|
||||
margin-block-start: var(--spacing-m);
|
||||
margin-block-end: var(--spacing-xs);
|
||||
font-size: var(--fs-xxl);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Figure and image.
|
||||
/* Figure and image. */
|
||||
|
||||
figure,
|
||||
img {
|
||||
|
|
@ -30,16 +30,18 @@ img {
|
|||
}
|
||||
|
||||
figure {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
|
||||
&.image {
|
||||
figcaption {
|
||||
padding-block-start: var(--image-padding);
|
||||
contain: inline-size;
|
||||
// Set max text line width in main for readability.
|
||||
|
||||
/* Set max text line width in main for readability. */
|
||||
max-width: var(--max-line-width);
|
||||
// Nicer text wrap, e.g. no lone word on last line.
|
||||
|
||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||
text-wrap: pretty;
|
||||
|
||||
@media (min-width: 666px) {
|
||||
|
|
@ -79,7 +81,7 @@ figure {
|
|||
|
||||
img {
|
||||
&.image {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,13 +32,13 @@ a:active {
|
|||
color: var(--color-link-active);
|
||||
}
|
||||
|
||||
// Remove underline from links to current page to
|
||||
// indicate that there is no need to click on it.
|
||||
/* Remove underline from links to current page to */
|
||||
/* indicate that there is no need to click on it. */
|
||||
[aria-current] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Use smooth scrolling unless user prefer less motion.
|
||||
/* Use smooth scrolling unless user prefer less motion. */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:has(:target) {
|
||||
scroll-behavior: smooth;
|
||||
|
|
@ -58,7 +58,7 @@ a:active {
|
|||
}
|
||||
}
|
||||
|
||||
// Inverted links, for dark backgrounds.
|
||||
/* Inverted links, for dark backgrounds. */
|
||||
.link-inverted,
|
||||
%link-inverted {
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
// stylelint-disable property-no-vendor-prefix
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
|
||||
// Reset browsers to some sane defaults.
|
||||
/* Reset browsers to some sane defaults. */
|
||||
|
||||
// Document
|
||||
/* Document */
|
||||
|
||||
// Use the saner border-box model for all elements.
|
||||
/* Use the saner border-box model for all elements. */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
|
@ -12,36 +12,38 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
// Activate transition to intrinsic sizes like auto and fit-content.
|
||||
/* Activate transition to intrinsic sizes like auto and fit-content. */
|
||||
interpolate-size: allow-keywords;
|
||||
}
|
||||
|
||||
// Transitioning page view.
|
||||
/* Transitioning page view. */
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
html {
|
||||
// Prevent adjustments of font size.
|
||||
/* Prevent adjustments of font size. */
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
// Improve text rendering.
|
||||
|
||||
/* Improve text rendering. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Sections
|
||||
/* Sections */
|
||||
|
||||
body {
|
||||
// Remove the margin in all browsers.
|
||||
/* Remove the margin in all browsers. */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
// On short pages, we want the body to fill the entire height
|
||||
// of the browser.
|
||||
|
||||
/* On short pages, we want the body to fill the entire height */
|
||||
/* of the browser. */
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// Embedded content
|
||||
/* Embedded content */
|
||||
|
||||
img,
|
||||
svg,
|
||||
|
|
@ -66,7 +68,7 @@ figure {
|
|||
margin-inline: 0;
|
||||
}
|
||||
|
||||
// Form defaults.
|
||||
/* Form defaults. */
|
||||
|
||||
input,
|
||||
button,
|
||||
|
|
@ -79,12 +81,12 @@ select {
|
|||
|
||||
[type='search'] {
|
||||
@media (min-width: 666px) {
|
||||
// Correct the odd appearance in Safari on desktop.
|
||||
/* Correct the odd appearance in Safari on desktop. */
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
/* Code */
|
||||
|
||||
code,
|
||||
kbd,
|
||||
|
|
@ -92,7 +94,7 @@ samp {
|
|||
font-family: var(--ff-monospace);
|
||||
}
|
||||
|
||||
// Numbers
|
||||
/* Numbers */
|
||||
|
||||
td,
|
||||
math,
|
||||
|
|
|
|||
|
|
@ -1,29 +1,32 @@
|
|||
// Tables
|
||||
/* Tables */
|
||||
|
||||
table {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: 0 var(--spacing-m);
|
||||
// Remove default spacing between table cells.
|
||||
|
||||
/* Remove default spacing between table cells. */
|
||||
border-collapse: collapse;
|
||||
// Prevent cramped-looking tables
|
||||
|
||||
/* Prevent cramped-looking tables */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
// Remove most spacing between table cells.
|
||||
/* Remove most spacing between table cells. */
|
||||
padding: 0;
|
||||
// Align content to top of cells.
|
||||
|
||||
/* Align content to top of cells. */
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
th {
|
||||
// Align content to bottom of headers.
|
||||
/* Align content to bottom of headers. */
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
caption,
|
||||
th {
|
||||
// Align all text the same.
|
||||
/* Align all text the same. */
|
||||
text-align: start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Anchor
|
||||
/* Anchor */
|
||||
|
||||
.anchor,
|
||||
%anchor {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Box
|
||||
/* Box */
|
||||
|
||||
.box {
|
||||
// Add vertical rhythm margins.
|
||||
/* Add vertical rhythm margins. */
|
||||
margin-block: var(--spacing-m);
|
||||
padding: var(--spacing-xs);
|
||||
border: 5px solid var(--color-border);
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
background: var(--color-border);
|
||||
color: var(--color-text-bg);
|
||||
|
||||
// Make sure headings etc. also gets inverted.
|
||||
/* Make sure headings etc. also gets inverted. */
|
||||
* {
|
||||
color: var(--color-text-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
// Button
|
||||
/* Button */
|
||||
|
||||
.button,
|
||||
%button,
|
||||
[type='button'],
|
||||
[type='submit'] {
|
||||
@extend %button--disabled;
|
||||
// Some styles don't apply to <a> links since they are inline elements by default.
|
||||
|
||||
/* Some styles don't apply to <a> links since they are inline elements by default. */
|
||||
display: inline-block;
|
||||
font-family: var(--ff-headings);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
padding: .2rem 1rem;
|
||||
// Improve usability and consistency of cursor style between image-type `input` and others.
|
||||
|
||||
/* Improve usability and consistency of cursor style between image-type `input` and others. */
|
||||
cursor: pointer;
|
||||
color: var(--color-button-text);
|
||||
text-shadow: var(--color-button) 0 1px 0;
|
||||
|
|
@ -23,7 +25,7 @@
|
|||
&:hover,
|
||||
&:focus-visible,
|
||||
&:active {
|
||||
// Override any link underlines and color changes.
|
||||
/* Override any link underlines and color changes. */
|
||||
text-decoration: none;
|
||||
color: var(--color-button-text-hover);
|
||||
text-shadow: var(--color-button-hover) 0 1px 0;
|
||||
|
|
@ -35,7 +37,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Add button variations here.
|
||||
/* Add button variations here. */
|
||||
.button,
|
||||
%button {
|
||||
&--small {
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue