Implement new css.Build.

.stylelintrc.yaml

@@ -13,6 +13,7 @@ rules:
         - stylelint-commands
         - after-comment
   hue-degree-notation: number
+  import-notation: null
   keyframes-name-pattern:
     - "--.+"
     - message: Keyframe name should be written as <dashed-ident>

assets/css/_colors.css

@@ -2,8 +2,7 @@
 
 /* Override css variables in "assets/css/_custom.css" */
 
-@layer vars {
+:root {
-  :root {
   /* Base colours. */
   --color-black:                  oklch(1% 0.01 0);
   --color-nearblack:              oklch(25% 0.01 0);
@@ -95,5 +94,4 @@
   /* Highlight colours. */
   --color-highlight:              var(--color-brand-alt);
   --color-mark-highlight:         var(--color-red);
-  }
 }

assets/css/_fonts.css

@@ -28,7 +28,3 @@ used in any ruleset using a property like this:  font-family: Example, serif;
 
 The fonts layer is loaded early to minimize front-end performance impact.
 */
-
-@layer fonts {
-/* Add your fonts here. */
-}

assets/css/_variables.css

@@ -1,5 +1,4 @@
-@layer vars {
+:root {
-  :root {
   /* Set theme css variables.
   Override css variables in "assets/css/_custom.css" */
 
@@ -121,5 +120,4 @@
 
   /* The pt font-size to be used for printing. */
   --print-font-size: 12pt;
-  }
 }

assets/css/_zen.css

@@ -1,55 +1,54 @@
 /* Zen custom styles */
 
-@layer zen {
+/* Page */
-  /* Page */
 
-  body {
+body {
   background-color: var(--color-backdrop);
-  }
+}
 
-  .page {
+.page {
   background-color: var(--color-body-bg);
-  }
+}
 
-  .footer {
+.footer {
   border-block-start: 2px solid var(--color-border);
-  }
+}
 
-  /* Apply smaller text to blocks, footer etc. */
+/* Apply smaller text to blocks, footer etc. */
 
-  th,
+th,
-  label,
+label,
-  legend,
+legend,
-  figcaption {
+figcaption {
   font-size: var(--fs-s);
-  }
+}
 
-  .language-selector,
+.language-selector,
-  .footer {
+.footer {
   font-size: var(--fs-xs);
-  }
+}
 
-  /* Apply heading font stack and colour to labels etc. */
+/* Apply heading font stack and colour to labels etc. */
 
-  th,
+th,
-  label,
+label,
-  legend,
+legend,
-  .main-menu,
+.main-menu,
-  .header,
+.header,
-  .footer {
+.footer {
   color: var(--color-headings);
   font-family: var(--ff-headings);
-  }
+}
 
-  th,
+th,
-  label {
+label {
   font-weight: var(--fw-headings);
-  }
+}
 
-  /* Article and content. */
+/* Article and content. */
 
-  article,
+article,
-  aside {
+aside {
   & > ul {
     display: table;
     list-style: none;
@@ -85,9 +84,9 @@
       }
     }
   }
-  }
+}
 
-  article {
+article {
   .submitted,
   .tags {
     @media (min-width: 666px) {
@@ -119,24 +118,24 @@
       white-space: pre;
     }
   }
-  }
+}
 
-  .content-dates {
+.content-dates {
   text-align: end;
-  }
+}
 
-  .repository-links {
+.repository-links {
   justify-content: end;
   align-items: center;
 
   svg {
     order: 1;
   }
-  }
+}
 
-  /* Navigation */
+/* Navigation */
 
-  .main-menu {
+.main-menu {
   a {
     display: block;
     background-color: var(--color-button);
@@ -154,25 +153,25 @@
       text-decoration: underline;
     }
   }
-  }
+}
 
-  /* Search */
+/* Search */
 
-  .search-text {
+.search-text {
   font-size: var(--fs-l);
-  }
+}
 
-  /* Copy code */
+/* Copy code */
 
-  [data-codeblock] {
+[data-codeblock] {
   position: relative;
 
   & > pre {
     padding-block-start: 1lh;
   }
-  }
+}
 
-  .codebutton {
+.codebutton {
   position: absolute;
   inset-inline-end: 1rem;
   background: unset;
@@ -192,16 +191,15 @@
   &:active {
     scale: 1.15;
   }
-  }
+}
 
-  .flash-item {
+.flash-item {
   animation: --flash 500ms ease-in-out 1ms;
-  }
+}
 
-  @keyframes --flash {
+@keyframes --flash {
   50% {
     border-color: var(--color-warning);
     background-color: var(--color-warning-bg);
   }
-  }
 }

assets/css/base/_document.css

@@ -1,7 +1,6 @@
 /* Document */
 
-@layer base {
+html {
-  html {
   /* Change the default font family in all browsers. */
   font-family: var(--ff-body);
 
@@ -10,13 +9,13 @@
 
   /* Set text colour. */
   color: var(--color-text);
-  }
+}
 
-  body {
+body {
   /* Correct the line height in all browsers. */
   line-height: var(--base-line-height);
 
   /* Accent colour for forms. */
   accent-color: var(--color-accent);
-  }
 }
+

assets/css/base/_forms.css

@@ -1,18 +1,17 @@
 /* Form defaults. */
 
-@layer base {
+form {
-  form {
   /* Add vertical rhythm margins. */
   margin-block: 0 var(--spacing-m);
-  }
+}
 
-  input,
+input,
-  textarea,
+textarea,
-  select {
+select {
   margin-block: 0 var(--spacing-m);
-  }
+}
 
-  label {
+label {
   font-weight: var(--fw-bold);
 
   /* Display as block if before input. */
@@ -28,11 +27,11 @@
       color: var(--color-mark-highlight);
     }
   }
-  }
+}
 
-  /* Valid and invalid state. */
+/* Valid and invalid state. */
-  input,
+input,
-  textarea {
+textarea {
   &:user-valid {
     border-color: var(--color-success);
     border-style: solid;
@@ -53,37 +52,36 @@
     border-color: transparent;
     background-color: var(--color-warning-bg);
   }
-  }
+}
 
-  /* Set max text line width for readability. */
+/* Set max text line width for readability. */
-  input,
+input,
-  label,
+label,
-  textarea,
+textarea,
-  select {
+select {
   max-width: var(--max-line-width);
-  }
+}
 
-  fieldset {
+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='email'],
-  [type='password'],
+[type='password'],
-  [type='range'],
+[type='range'],
-  [type='search'],
+[type='search'],
-  [type='url'] {
+[type='url'] {
   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'],
+[type='text'],
-  textarea {
+textarea {
   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]) {
+textarea:not([rows]) {
   min-height: 7lh;
-  }
 }

assets/css/base/_grouping.css

@@ -1,9 +1,8 @@
 /* Grouping content */
 
-@layer base {
+/* Block quotes */
-  /* Block quotes */
 
-  blockquote {
+blockquote {
   /* Add vertical rhythm margins. */
   margin-block: 0 var(--spacing-m);
 
@@ -15,33 +14,33 @@
 
   /* Set max text line width in main for readability. */
   max-width: var(--max-line-width);
-  }
+}
 
-  /* Lists */
+/* Lists */
 
-  dl,
+dl,
-  ol,
+ol,
-  ul,
+ul,
-  menu {
+menu {
   /* Add vertical rhythm margins. */
   margin-block: 0 var(--spacing-m);
-  }
+}
 
-  dt {
+dt {
   font-weight: var(--fw-bold);
-  }
+}
 
-  dd {
+dd {
   margin: 0;
   margin-inline-start: var(--indent-amount);
 
   /* Nicer text wrap, e.g. no lone word on last line. */
   text-wrap: pretty;
-  }
+}
 
-  ol,
+ol,
-  ul,
+ul,
-  menu {
+menu {
   padding: 0;
   padding-inline-start: var(--indent-amount);
 
@@ -51,9 +50,9 @@
   menu {
     margin: 0;
   }
-  }
+}
 
-  li {
+li {
   /* Nicer text wrap, e.g. no lone word on last line. */
   text-wrap: pretty;
 
@@ -61,21 +60,21 @@
   .main & {
     max-width: var(--max-line-width);
   }
-  }
+}
 
-  /* Horizontal rule */
+/* Horizontal rule */
 
-  hr {
+hr {
   /* Add vertical rhythm margins. */
   margin-block: var(--spacing-m);
   border: 0;
   border-block-start: 1px solid var(--color-border);
   height: 0;
-  }
+}
 
-  /* Paragraphs */
+/* Paragraphs */
 
-  p {
+p {
   /* Add vertical rhythm margins. */
   margin-block: 0 var(--spacing-m);
 
@@ -86,22 +85,21 @@
   .main & {
     max-width: var(--max-line-width);
   }
-  }
+}
 
-  /* Preformatted text */
+/* Preformatted text */
 
-  pre {
+pre {
   /* 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]),
+code:not([data-lang]),
-  kbd,
+kbd,
-  samp {
+samp {
   color: var(--color-code);
-  }
 }

assets/css/base/_headings.css

@@ -2,13 +2,12 @@
 
 All HTML headings, `<h1>` through `<h6>`, are available. */
 
-@layer base {
+h1,
-  h1,
+h2,
-  h2,
+h3,
-  h3,
+h4,
-  h4,
+h5,
-  h5,
+h6 {
-  h6 {
   margin-block: 1.5em .5em;
   color: var(--color-headings);
   font-family: var(--ff-headings);
@@ -25,35 +24,34 @@ All HTML headings, `<h1>` through `<h6>`, are available. */
   .main & {
     max-width: var(--max-line-width);
   }
-  }
+}
 
-  h1 {
+h1 {
   /* 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);
   letter-spacing: -.01em;
-  }
+}
 
-  h2 {
+h2 {
   font-size: var(--fs-xl);
   letter-spacing: -.01em;
-  }
+}
 
-  h3 {
+h3 {
   font-size: var(--fs-l);
   letter-spacing: -.01em;
-  }
+}
 
-  h4 {
+h4 {
   font-size: var(--fs-m);
-  }
+}
 
-  h5 {
+h5 {
   font-size: var(--fs-s);
-  }
+}
 
-  h6 {
+h6 {
   font-size: var(--fs-xs);
-  }
 }

assets/css/base/_images.css

@@ -1,8 +1,7 @@
 /* Figure and image. */
 
-@layer base {
+figure,
-  figure,
+img {
-  img {
   &.image {
     --image-padding: .75rem;
 
@@ -28,9 +27,9 @@
       }
     }
   }
-  }
+}
 
-  figure {
+figure {
   /* Add vertical rhythm margins. */
   margin-block: 0 var(--spacing-m);
 
@@ -78,12 +77,11 @@
       width: 95%;
     }
   }
-  }
+}
 
-  img {
+img {
   &.image {
     /* Add vertical rhythm margins. */
     margin-block: 0 var(--spacing-m);
   }
-  }
 }

assets/css/base/_links.css

@@ -11,42 +11,41 @@ http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
 :focus   - A link that has been given keyboard focus.
 :active  - A link that is being actively clicked. */
 
-@layer base {
+a {
-  a {
   color: var(--color-link);
-  }
+}
 
-  /* Any element can receive focus, but only links can be visited, so we can
+/* Any element can receive focus, but only links can be visited, so we can
-  safely lower this selector's specificity. This also ensures visited links
+safely lower this selector's specificity. This also ensures visited links
-  with additional styles won't have their styles overridden. */
+with additional styles won't have their styles overridden. */
-  :visited {
+:visited {
   color: var(--color-link-visited);
-  }
+}
 
-  a:hover,
+a:hover,
-  a:focus {
+a:focus {
   color: var(--color-link-hover);
-  }
+}
 
-  a:active {
+a:active {
   color: var(--color-link-active);
-  }
+}
 
-  /* Remove underline from links to current page to */
+/* Remove underline from links to current page to */
-  /* indicate that there is no need to click on it. */
+/* indicate that there is no need to click on it. */
-  [aria-current] {
+[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) {
+@media (prefers-reduced-motion: no-preference) {
   :has(:target) {
     scroll-behavior: smooth;
     scroll-padding-block-start: var(--gutters);
   }
-  }
+}
 
-  .link-nav {
+.link-nav {
   a {
     text-decoration: none;
 
@@ -55,10 +54,10 @@ http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
       text-decoration: underline;
     }
   }
-  }
+}
 
-  /* Inverted links, for dark backgrounds. */
+/* Inverted links, for dark backgrounds. */
-  .link-inverted {
+.link-inverted {
   a {
     &:link {
       color: var(--color-link-inverted);
@@ -77,5 +76,4 @@ http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
       color: var(--color-link-active-inverted);
     }
   }
-  }
 }

assets/css/base/_tables.css

@@ -1,7 +1,6 @@
 /* Tables */
 
-@layer base {
+table {
-  table {
   /* Add vertical rhythm margins. */
   margin-block: 0 var(--spacing-m);
 
@@ -10,25 +9,24 @@
 
   /* Prevent cramped-looking tables */
   width: 100%;
-  }
+}
 
-  td,
+td,
-  th {
+th {
   /* Remove most spacing between table cells. */
   padding: 0;
 
   /* Align content to top of cells. */
   vertical-align: text-top;
-  }
+}
 
-  th {
+th {
   /* Align content to bottom of headers. */
   vertical-align: bottom;
-  }
+}
 
-  caption,
+caption,
-  th {
+th {
   /* Align all text the same. */
   text-align: start;
-  }
 }

assets/css/components/_anchor.css

@@ -1,7 +1,6 @@
 /* Anchor */
 
-@layer components {
+.anchor {
-  .anchor {
   --anchor-gap: .5rem;
   --anchor-opacity: .4;
 
@@ -28,9 +27,8 @@
       }
     }
   }
-  }
+}
 
-  p:has(+ .anchor) {
+p:has(+ .anchor) {
   margin-block-end: 0;
-  }
 }

assets/css/components/_box.css

@@ -1,7 +1,6 @@
 /* Box */
 
-@layer components {
+.box {
-  .box {
   /* Add vertical rhythm margins. */
   margin-block: var(--spacing-m);
   padding: var(--spacing-xs);
@@ -21,21 +20,21 @@
       margin-block-end: 0;
     }
   }
-  }
+}
 
-  .box--highlight {
+.box--highlight {
   border-color: var(--color-highlight);
-  }
+}
 
-  .box--fit {
+.box--fit {
   width: fit-content;
-  }
+}
 
-  .box--gutter {
+.box--gutter {
   padding-inline: var(--gutters);
-  }
+}
 
-  .box--inverted {
+.box--inverted {
   background: var(--color-border);
   color: var(--color-text-bg);
 
@@ -62,5 +61,4 @@
       color: var(--color-link-active-inverted);
     }
   }
-  }
 }

assets/css/components/_button.css

@@ -2,10 +2,9 @@
 
 /* Button */
 
-@layer components {
+.button,
-  .button,
+[type='button'],
-  [type='button'],
+[type='submit'] {
-  [type='submit'] {
   /* Some styles don't apply to <a> links since they are inline elements by default. */
   display: inline-block;
   font-family: var(--ff-headings);
@@ -35,14 +34,14 @@
   &:active {
     box-shadow: inset 2px 2px 5px var(--color-black-40);
   }
-  }
+}
 
-  .button--small {
+.button--small {
   font-size: var(--fs-xs);
   padding: .2rem .75rem;
-  }
+}
 
-  .button--alt {
+.button--alt {
   color: var(--color-button-text-hover);
   background: var(--color-button-hover);
 
@@ -52,26 +51,26 @@
     color: var(--color-button-text);
     background: var(--color-button);
   }
-  }
+}
 
-  .button--outline {
+.button--outline {
   color: var(--color-button);
   background: var(--color-button-text);
-  }
+}
 
-  .button--accept {
+.button--accept {
   border-color: var(--color-success);
-  }
+}
 
-  .button--decline {
+.button--decline {
   border-color: var(--color-warning);
-  }
+}
 
-  /* The disabled variation should always go last, so that it overrides any
+/* The disabled variation should always go last, so that it overrides any
-  other variations. */
+other variations. */
-  .button,
+.button,
-  [type='button'],
+[type='button'],
-  [type='submit'] {
+[type='submit'] {
   &:disabled {
     background-color: var(--color-grey-200);
     border: 1px solid var(--color-button-disabled);
@@ -88,22 +87,21 @@
       text-decoration: none;
     }
   }
-  }
+}
 
-  /* For forms with multiple fields show submit button below the form. */
+/* For forms with multiple fields show submit button below the form. */
-  input:not(:only-of-type),
+input:not(:only-of-type),
-  textarea {
+textarea {
   & + [type='submit'] {
     display: block;
   }
-  }
+}
 
-  /* 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) {
+@media (min-width: 666px) {
   input:only-of-type {
     &:has(+ [type='submit']) {
       margin-inline-end: .5rem;
     }
   }
-  }
 }

assets/css/components/_cards.css

@@ -2,8 +2,7 @@
 
 A simple cards style. */
 
-@layer components {
+.cards {
-  .cards {
   --grid-group-column-min: 200px;
   --grid-group-gap: 1.5rem;
 
@@ -14,9 +13,9 @@ A simple cards style. */
 
   /* Add vertical rhythm margins. */
   margin-block: var(--spacing-m);
-  }
+}
 
-  .card {
+.card {
   padding: var(--spacing-xs);
   border: 1px solid var(--color-border);
 
@@ -29,22 +28,22 @@ A simple cards style. */
       margin-block-end: 0;
     }
   }
-  }
+}
 
-  .card--highlight {
+.card--highlight {
   border-color: var(--color-highlight);
-  }
+}
 
-  .card--featured {
+.card--featured {
   grid-row: span 2;
   grid-column: span 2;
-  }
+}
 
-  .card--gutter {
+.card--gutter {
   padding-inline: var(--gutters);
-  }
+}
 
-  .card--inverted {
+.card--inverted {
   background: var(--color-border);
   color: var(--color-text-bg);
 
@@ -66,5 +65,4 @@ A simple cards style. */
       color: var(--color-link-active-inverted);
     }
   }
-  }
 }

assets/css/components/_center.css

@@ -1,14 +1,12 @@
-@layer components {
+.grid-center {
-  .grid-center {
   display: grid;
   place-content: center;
-  }
+}
 
-  .text-center {
+.text-center {
   text-align: center;
-  }
+}
 
-  .margin-center {
+.margin-center {
   margin-inline: auto;
-  }
 }

assets/css/components/_clearfix.css

@@ -3,8 +3,7 @@
 Allows the bottom of an element to extend to the bottom of all floated child
 elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */
 
-@layer components {
+.clearfix {
-  .clearfix {
   &::before {
     content: '';
     display: table;
@@ -15,5 +14,4 @@ elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */
     display: table;
     clear: both;
   }
-  }
 }

assets/css/components/_cookieconsent.css

@@ -1,7 +1,6 @@
 /* Cookieconsent */
 
-@layer components {
+.cookieconsent {
-  .cookieconsent {
   display: flex;
   flex-flow: wrap;
   justify-content: center;
@@ -26,9 +25,8 @@
   &[hidden] {
     display: none;
   }
-  }
+}
 
-  [data-cookieconsentopen] {
+[data-cookieconsentopen] {
   transform: translateY(0);
-  }
 }

assets/css/components/_disabled.css

@@ -1,5 +1,4 @@
-@layer components {
+.disabled {
-  .disabled {
   /* Re-set default cursor for disabled elements. */
   cursor: default;
   color: var(--color-button-disabled);
@@ -11,5 +10,4 @@
     color: var(--color-button-disabled);
     text-decoration: none;
   }
-  }
 }