Convert to css style comments, part 2.

This commit is contained in:
Fredrik Jonsson 2025-09-18 10:55:39 +02:00
commit 9f8b1eaf18
38 changed files with 234 additions and 201 deletions

View file

@ -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)

View file

@ -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);
}

View file

@ -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 {

View file

@ -1 +1 @@
// Add and override variables. This file loads last during init.
/* Add and override variables. This file loads last during init. */

View file

@ -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';

View file

@ -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.

View file

@ -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;
}

View file

@ -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;

View file

@ -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';

View file

@ -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);
}

View file

@ -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']) {

View file

@ -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 {

View file

@ -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);

View file

@ -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);
}
}

View file

@ -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 {

View file

@ -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,

View file

@ -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;
}

View file

@ -1,4 +1,4 @@
// Anchor
/* Anchor */
.anchor,
%anchor {

View file

@ -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);
}

View file

@ -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