]> git.ardis.lu - ardislu.dev/commitdiff
Add gradient border on header
authorArdis Lu <ardisglu@gmail.com>
Wed, 2 Nov 2022 03:17:15 +0000 (20:17 -0700)
committerArdis Lu <ardisglu@gmail.com>
Wed, 2 Nov 2022 03:17:15 +0000 (20:17 -0700)
style.css

index 67752bedf793916353ae23d7a971ce9ad013c0c4..ef77766c8141881d19ea558fbaaacda2f37a7534 100644 (file)
--- a/style.css
+++ b/style.css
@@ -17,7 +17,27 @@ header {
   padding-block: 1rem;
   margin-inline: auto;
   margin-block-end: 1rem;
-  border-block-end: 1px hsl(216deg 100% 80%) solid;
+  position: relative;
+}
+
+header::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  left: 5%;
+  inline-size: 90%;
+  block-size: 2px;
+  --shade: 50% 70%;
+  background: linear-gradient(90deg,
+      hsl(360deg var(--shade)),
+      hsl(315deg var(--shade)),
+      hsl(270deg var(--shade)),
+      hsl(225deg var(--shade)),
+      hsl(180deg var(--shade)),
+      hsl(135deg var(--shade)),
+      hsl(90deg var(--shade)),
+      hsl(45deg var(--shade)),
+      hsl(0deg var(--shade)));
 }
 
 header * {
This page took 0.04056 seconds and 4 git commands to generate.