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,7 +2,6 @@
 
 /* Override css variables in "assets/css/_custom.css" */
 
-@layer vars {
 :root {
   /* Base colours. */
   --color-black:                  oklch(1% 0.01 0);
@@ -96,4 +95,3 @@
   --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,4 +1,3 @@
-@layer vars {
 :root {
   /* Set theme css variables.
   Override css variables in "assets/css/_custom.css" */
@@ -122,4 +121,3 @@
   /* The pt font-size to be used for printing. */
   --print-font-size: 12pt;
 }
-}

assets/css/_zen.css

@@ -1,6 +1,5 @@
 /* Zen custom styles */
 
-@layer zen {
 /* Page */
 
 body {
@@ -204,4 +203,3 @@
     background-color: var(--color-warning-bg);
   }
 }
-}

assets/css/base/_document.css

@@ -1,6 +1,5 @@
 /* Document */
 
-@layer base {
 html {
   /* Change the default font family in all browsers. */
   font-family: var(--ff-body);
@@ -19,4 +18,4 @@
   /* Accent colour for forms. */
   accent-color: var(--color-accent);
 }
-}
+

assets/css/base/_forms.css

@@ -1,6 +1,5 @@
 /* Form defaults. */
 
-@layer base {
 form {
   /* Add vertical rhythm margins. */
   margin-block: 0 var(--spacing-m);
@@ -86,4 +85,3 @@
 textarea:not([rows]) {
   min-height: 7lh;
 }
-}

assets/css/base/_grouping.css

@@ -1,6 +1,5 @@
 /* Grouping content */
 
-@layer base {
 /* Block quotes */
 
 blockquote {
@@ -104,4 +103,3 @@
 samp {
   color: var(--color-code);
 }
-}

assets/css/base/_headings.css

@@ -2,7 +2,6 @@
 
 All HTML headings, `<h1>` through `<h6>`, are available. */
 
-@layer base {
 h1,
 h2,
 h3,
@@ -56,4 +55,3 @@ All HTML headings, `<h1>` through `<h6>`, are available. */
 h6 {
   font-size: var(--fs-xs);
 }
-}

assets/css/base/_images.css

@@ -1,6 +1,5 @@
 /* Figure and image. */
 
-@layer base {
 figure,
 img {
   &.image {
@@ -86,4 +85,3 @@
     margin-block: 0 var(--spacing-m);
   }
 }
-}

assets/css/base/_links.css

@@ -11,7 +11,6 @@ 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 {
   color: var(--color-link);
 }
@@ -78,4 +77,3 @@ http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
     }
   }
 }
-}

assets/css/base/_tables.css

@@ -1,6 +1,5 @@
 /* Tables */
 
-@layer base {
 table {
   /* Add vertical rhythm margins. */
   margin-block: 0 var(--spacing-m);
@@ -31,4 +30,3 @@
   /* Align all text the same. */
   text-align: start;
 }
-}

assets/css/components/_anchor.css

@@ -1,6 +1,5 @@
 /* Anchor */
 
-@layer components {
 .anchor {
   --anchor-gap: .5rem;
   --anchor-opacity: .4;
@@ -33,4 +32,3 @@
 p:has(+ .anchor) {
   margin-block-end: 0;
 }
-}

assets/css/components/_box.css

@@ -1,6 +1,5 @@
 /* Box */
 
-@layer components {
 .box {
   /* Add vertical rhythm margins. */
   margin-block: var(--spacing-m);
@@ -63,4 +62,3 @@
     }
   }
 }
-}

assets/css/components/_button.css

@@ -2,7 +2,6 @@
 
 /* Button */
 
-@layer components {
 .button,
 [type='button'],
 [type='submit'] {
@@ -106,4 +105,3 @@
     }
   }
 }
-}

assets/css/components/_cards.css

@@ -2,7 +2,6 @@
 
 A simple cards style. */
 
-@layer components {
 .cards {
   --grid-group-column-min: 200px;
   --grid-group-gap: 1.5rem;
@@ -67,4 +66,3 @@ A simple cards style. */
     }
   }
 }
-}

assets/css/components/_center.css

@@ -1,4 +1,3 @@
-@layer components {
 .grid-center {
   display: grid;
   place-content: center;
@@ -11,4 +10,3 @@
 .margin-center {
   margin-inline: auto;
 }
-}

assets/css/components/_clearfix.css

@@ -3,7 +3,6 @@
 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 {
   &::before {
     content: '';
@@ -16,4 +15,3 @@ elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */
     clear: both;
   }
 }
-}

assets/css/components/_cookieconsent.css

@@ -1,6 +1,5 @@
 /* Cookieconsent */
 
-@layer components {
 .cookieconsent {
   display: flex;
   flex-flow: wrap;
@@ -31,4 +30,3 @@
 [data-cookieconsentopen] {
   transform: translateY(0);
 }
-}

assets/css/components/_disabled.css

@@ -1,4 +1,3 @@
-@layer components {
 .disabled {
   /* Re-set default cursor for disabled elements. */
   cursor: default;
@@ -12,4 +11,3 @@
     text-decoration: none;
   }
 }
-}