From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 9 Aug 2022 06:19:27 +0000 (-0700)
Subject: Use inline @layer for all styles
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=c76b637e066e1c7fc7fcc13ffb659a52d02cb89f;p=ardislu.dev

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 c22a559..3f1c393 100644
--- 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 53b6647..be066a2 100644
--- 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 103f94a..e510932 100644
--- 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 {