commit b18f0196a13f99cb9a362ee4586a7eb60f89fb01
author pineafan <pineapplefanyt@gmail.com> Thu Oct 27 22:08:36 2022 +0100
committer pineafan <pineapplefanyt@gmail.com> Thu Oct 27 22:08:36 2022 +0100
tree 974463ec2fcf3eb6454fa9f580e2c31d949c143d
parent 7bd0ad68572bcd9e6de2cef19179daa57ce43094

Fancy animations on navbar :)

styles/Components/header.module.css

diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index 6d6b338..b16974a 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -138,3 +138,10 @@
     margin-inline: 5px;
     padding: 0;
 }
+
+.leftArrow {
+    transform: rotate(90deg);
+}
+.rightArrow {
+    transform: rotate(270deg);
+}

styles/Components/navbar.module.css

diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 7ca3c5f..121d382 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -32,7 +32,8 @@
     height: 100%;
     width: 3px;
     border-radius: 100vh;
-    background-color: #424242;
+    background-color: var(--theme-ui-colors-borderHint);
+    transition: 0.3s ease-in-out;
 }
 
 .skipNav {
@@ -69,6 +70,6 @@
 .message {
     font-size: 1.2rem;
     padding-left: 10px;
-    color: white;
+    color: var(--theme-ui-colors-text);
     transition: color 0.3s ease-in-out;
-}
\ No newline at end of file
+}

styles/globals.module.css

diff --git a/styles/globals.module.css b/styles/globals.module.css
index 1761aeb..944f797 100644
--- a/styles/globals.module.css
+++ b/styles/globals.module.css
@@ -5,7 +5,8 @@
     height: calc(100vh - 42px);
     width: 100%;
     border-radius: 25px;
-    box-shadow: 0 0 0 100px black;
+    box-shadow: 0 0 0 100px var(--theme-ui-colors-borders);
+    transition: 0.3s ease-in-out;
     pointer-events: none;
     background: transparent;
 }