chore(nav): change nav links styles

1 files changed, 31 insertions, 36 deletions

diff --git a/htdocs/src/scss/layout/_nav.scss b/htdocs/src/scss/layout/_nav.scss
index f4508d0..9f80a65 100644
--- a/htdocs/src/scss/layout/_nav.scss
+++ b/htdocs/src/scss/layout/_nav.scss
@@ -16,45 +16,40 @@
     }
   }
 
-  &__link {
-    &--back {
-      display: inline-block;
-      margin: fun.get-var(spacing-sm) 0;
-
-      &::before {
-        content: "\1F810";
-        display: inline-block;
-        text-decoration: none;
-      }
-    }
-
-    &--app {
-      background: fun.get-var(color-bg);
-      border: fun.convert-px(1) solid fun.get-var(color-border);
-      display: block;
-      padding: fun.get-var(spacing-2xs);
-      position: relative;
-      text-decoration: none;
-      transition: all 0.3s ease-in-out 0s;
-      width: 100%;
-
-      &:hover,
-      &:focus {
-        background: fun.get-var(color-primary);
-        color: fun.get-var(color-fg-inverted);
-      }
+  &__item {
+    margin: fun.get-var(spacing-2xs) 0;
+  }
 
-      &:active {
-        background: fun.get-var(color-bg);
-        color: fun.get-var(color-primary-dark);
-        text-decoration: fun.convert-px(1) solid underline;
-      }
+  &__link {
+    background-image: linear-gradient(
+      to left,
+      #{fun.get-var(color-bg)} 0,
+      #{fun.get-var(color-bg)} 50%,
+      #{fun.get-var(color-primary)} 50%
+    );
+    background-position: 100% 0;
+    background-size: 200% 100%;
+    border: fun.convert-px(3) solid fun.get-var(color-border);
+    border-radius: fun.convert-px(50);
+    display: block;
+    font-weight: 600;
+    margin: auto;
+    padding: fun.get-var(spacing-3xs);
+    position: relative;
+    text-decoration: none;
+    transition: all 0.4s ease-in-out 0s;
+    width: 75%;
+
+    &:hover,
+    &:focus {
+      background-position: 0 0;
+      color: fun.get-var(color-fg-inverted);
     }
-  }
 
-  &__item:not(:first-child) & {
-    &__link {
-      border-top: 0;
+    &:active {
+      background-position: 100% 0;
+      color: fun.get-var(color-primary-dark);
+      text-decoration: fun.convert-px(1) solid underline;
     }
   }