Use inline @layer for all styles

@layer allows removal of !important and inline allows concurrent loading

diff --git a/errors/404.html b/errors/404.html
index c22a559d315d2cda577321b658b5b5c9b6356caa..3f1c393d8e1e279b53fb214cb823c8e04b94627f 100644 (file)
--- a/errors/404.html
+++ b/errors/404.html
@@ -10,9 +10,12 @@
   <link rel="icon" href="/logo.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/logo_maskable.png">
   <link rel="manifest" href="/manifest.webmanifest">
-  <link rel="stylesheet" href="/style.css">
-  <link rel="stylesheet" href="/print.css" media="print">
   <style>
+    @layer base, print;
+
+    @import "/style.css" layer(base);
+    @import "/print.css" layer(print) print;
+
     main {
       display: flex;
       flex-direction: column;

diff --git a/index.html b/index.html
index 53b6647bcb73a91cdf05469a7aed38a67d8f57ff..be066a24fa69141d324efd75e298916aa9621b1e 100644 (file)
--- a/index.html
+++ b/index.html
@@ -17,9 +17,13 @@
   <link rel="icon" href="/logo.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/logo_maskable.png">
   <link rel="manifest" href="/manifest.webmanifest">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css">
-  <link rel="stylesheet" href="/style.css">
-  <link rel="stylesheet" href="/print.css" media="print">
+  <style>
+    @layer base, print, hljs;
+
+    @import "/style.css" layer(base);
+    @import "/print.css" layer(print) print;
+    @import "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css" layer(hljs);
+  </style>
   <link rel="canonical" href="https://ardislu.dev/">
   <title>ardislu.dev</title>
 </head>

diff --git a/print.css b/print.css
index 103f94a2c650c25e24b355ed42872759743fdf58..e510932b02b4aebdd8899e0170e758861c27ca5b 100644 (file)
--- a/print.css
+++ b/print.css
@@ -3,10 +3,10 @@
 }
 
 * {
-  background: transparent !important;
-  color: #000 !important;
-  box-shadow: none !important;
-  text-shadow: none !important;
+  background: transparent;
+  color: #000;
+  box-shadow: none;
+  text-shadow: none;
 }
 
 header {