From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 2 Nov 2022 03:17:15 +0000 (-0700)
Subject: Add gradient border on header
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=1ac7db249bd72d18befb91f3ce4f75a06d209340;p=ardislu.dev

Add gradient border on header
---

diff --git a/style.css b/style.css
index 67752be..ef77766 100644
--- 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 * {