Visual updates and tidying up

thorstensson · Jan 29, 2025 · e993d98 · e993d98
1 parent 5e3b6f6
commit e993d98
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 # NavBar - Vue - JS - BEM
 
-A simple and responsive navigation bar with full modal on smaller devices. Hides on scroll down. Needed to code this up to refresh my mind on how to, instead of using a component library. And I love doing UI stuff. BEM makes it easier; still a semantic fan.
+A simple and responsive navigation bar. Hides on scroll down. Needed to code this up to refresh my mind on how to, instead of using a component library. And I love doing UI stuff. BEM makes it easier; still a semantic fan.
 
 ## Demo
 
@@ -40,10 +40,10 @@ Start the server
 
 - [X] Add hide animation on scroll down.
 
-- [X] Changed fonts to my pet fonts for 2025, or two of them, for consistency across repos.
+- [X] Added colors: primary, secondary and accent.
+
+- [X] Updated fonts.
 
-- [X] Revamped colors to follow primary, secondary and accent, following my Colorpace theme which will reoccur
-across most repos.
 ## Contributing
 
 Fork and improve, I write too much CSS!

diff --git a/index.html b/index.html
@@ -4,9 +4,7 @@
 <head>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap"
-    rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
   <meta charset="UTF-8">
   <link rel="icon" href="/favicon.ico">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
@@ -5,13 +5,8 @@
 
 .sans-ui {
     font-family: variables.$sans-ui;
-    font-optical-sizing: variables.$sans-ui-opt;
     font-weight: variables.$sans-ui-wgt;
     font-style: variables.$sans-ui-stl;
-    font-variation-settings:
-        "slnt" 0,
-        "FLAR" 0,
-        "VOLM" 0;
 }
 
 .sans-text {

diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
@@ -4,12 +4,12 @@ $secondary: #FAF8FF; // font
 $accent:#65fbd2;
 
 // Fonts
-$sans-ui: "Commissioner", sans-serif;
+$sans-ui: "Space Mono", sans-serif;
 $sans-ui-opt: auto;
 $sans-ui-wgt: 600;
 $sans-ui-stl: normal;
 
-$sans-text: "Rethink Sans", sans-serif;
+$sans-text: "Space Grotesk", sans-serif;
 $sans-text-opt: auto;
 $sans-text-wgt: 500;
 $sans-text-stl: normal;

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -172,8 +172,8 @@ a:visited {
     font-weight: isColorDark($primary);
 
     &--alt-color {
-        color: $primary;
-        font-weight: isColorDark($secondary);
+        color: $secondary;
+
     }
 }
 
@@ -186,7 +186,7 @@ a:visited {
 
     :deep(.contact),
     :deep(.social) {
-        font-weight: isColorDark($secondary);
+        font-weight: isColorDark($primary);
     }
 }
 
@@ -196,9 +196,8 @@ a:visited {
     right: 0;
     width: 100%;
     height: 100vh;
-    // In moddal view font and background colors are inverted.
-    color: $primary;
-    background-color: $secondary;
+    color: $secondary;
+    background-color: $primary;
     transition: left .4s cubic-bezier(.075, .82, .165, 1);
 
     &--open {
@@ -224,6 +223,12 @@ a:visited {
         list-style: none;
         width: fit-content;
         text-align: center;
+        font-family:$sans-text;
+
+            // Bubbles
+    @include this-and-above('lg') {
+        font-family:$sans-ui;
+    }
     }
 
     &__item {
@@ -317,7 +322,7 @@ a:visited {
     }
 
     &--anim svg {
-        stroke: $primary;
+        stroke: $secondary;
 
         g {
             &:first-child {

diff --git a/src/components/NavMobileFooter.vue b/src/components/NavMobileFooter.vue
@@ -17,7 +17,7 @@
 .social {
     display: inline;
     z-index: 100;
-    color: $primary;
+    color: $secondary;
     font-size: 15px;
     line-height: 1.2;
     text-decoration: none;
@@ -34,7 +34,7 @@
     right: 0;
     border: none;
     height: 2px;
-    color: black;
-    background-color: black;
+    color: $secondary;
+    background-color: $secondary;
 }
 </style>