From d7752ce561c368c286f965660feb797d2c1c464e Mon Sep 17 00:00:00 2001
From: LimePot <nelle@limepot.xyz>
Date: Mon, 19 Dec 2022 14:49:25 -0700
Subject: [PATCH] more styling

---
 index.html |  6 ++++++
 style.css  | 48 +++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3a0d125..bdeaa5f 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,12 @@
                 <span class="text">Videography</span>
             </a>
         </li>
+        <li class="list" style="--clr:rgb(0, 196, 157);">
+            <a href="#">
+                <span class="icon"><ion-icon name="archive"></ion-icon></span>
+                <span class="text">Old Site</span>
+            </a>
+        </li>
         </ul>
     </div>
 
diff --git a/style.css b/style.css
index 18c8455..8a597db 100644
--- a/style.css
+++ b/style.css
@@ -14,7 +14,7 @@ body
 {
     position: fixed;
     inset: 20px 0 20px 20px;
-    width: 140px;
+    width: 80px;
     background: #2b272b;
     transition: 0.5s;
     display: flex;
@@ -83,7 +83,11 @@ body
     width: 100%;
     height: 60px;
     padding: 0 10px;
-    transition: 0.5;
+    transition: 0.5s;
+}
+.navigation ul li.active
+{
+    transform: translateX(30px)
 }
 .navigation ul li a
 {
@@ -110,4 +114,42 @@ body
 {
     color: #fff;
     background: var(--clr);
-}
\ No newline at end of file
+}
+.navigation ul li a .icon::before
+{
+    content: '';
+    position: absolute;
+    top: 10px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--clr);
+    filter: blur(8px);
+    opacity: 0;
+    transition: 0.5s;
+}
+.navigation ul li.active a .icon::before
+{
+    opacity: 0.5;
+}
+.navigation ul li a .text
+{
+    position: relative;
+    padding: 0 15px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    color: rgb(173, 173, 173);
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.5s;
+}
+.navigation.open ul li a .text
+{
+    opacity: 1;
+    visibility: visible;
+}
+.navigation ul li.active a .text
+{
+    color: var(--clr);
+}