Add knight mode styling to home page

bobbysebolao · Nov 27, 2021 · 0b5846e · 0b5846e
1 parent 7ce42f8
commit 0b5846e
Show file tree

Hide file tree

Showing 7 changed files with 817 additions and 271 deletions.
diff --git a/src/app.css b/src/app.css
@@ -31,6 +31,9 @@
   /* Night theme hover states */
   --night-hover-light: #707993;
   --night-hover-dark: #10161d;
+
+  /* Knight theme */
+  --knight-off-white: #f8e098;
 }
 
 body {
@@ -43,6 +46,7 @@ body {
   background-attachment: fixed;
   background-position: center center;
   padding: 20px;
+  box-sizing: border-box;
 }
 
 p {

diff --git a/src/lib/footer/Footer.svelte b/src/lib/footer/Footer.svelte
@@ -36,6 +36,21 @@
       background: var(--night-light);
       color: var(--neutral-white);
     }
+    &.knight {
+      background: var(--knight-off-white);
+      box-shadow: none;
+      &::before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        top: 100%;
+        left: 0px;
+        width: 100%;
+        height: 20px;
+        background-image: url(/static/parchment-edge.svg);
+        transform: rotate(180deg);
+      }
+    }
 
     .social-icons {
       width: 300px;