Cleaner navigation and playing around with fonts

KristofVDB1 · Nov 29, 2023 · ea80863 · ea80863
1 parent 193757c
commit ea80863
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
@@ -30,6 +30,7 @@ h1{
 
 h2{
 	@extend %h2;
+	padding-bottom: 1rem
 }
 
 h3{

diff --git a/assets/styles/utilities.scss b/assets/styles/utilities.scss
@@ -224,7 +224,7 @@
 %h1{
     color: $color-blue;
 
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-medium;
     font-family: $font-family-title;
 
     font-size: $font-size-title-lg;
@@ -240,7 +240,7 @@
 %h2{
     color: $color-blue;
 
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-medium;
     font-family: $font-family-title;
 
     font-size: $font-size-title-md;
@@ -256,7 +256,7 @@
 %h3{
     color: $color-blue;
 
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-medium;
     font-family: $font-family-title;
 
     font-size: $font-size-title-sm;
@@ -272,7 +272,7 @@
 %h4{
     color: $color-blue;
 
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-medium;
     font-family: $font-family-title;
 
     font-size: $font-size-text-xlg;
@@ -289,7 +289,7 @@
 %h5{
     color: $color-blue;
 
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-medium;
     font-family: $font-family-title;
 
     font-size: $font-size-text-lg;
@@ -306,7 +306,7 @@
 %h6{
     color: $color-blue;
 
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-medium;
     font-family: $font-family-title;
 
     font-size: $font-size-text-sm;

diff --git a/assets/styles/vars.scss b/assets/styles/vars.scss
@@ -1,4 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Dosis:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Changa+One&display=swap');
 
 $break-s: 480px;
@@ -109,6 +111,7 @@ $gradient-white-red: linear-gradient(358.43deg, #B51C36 18.92%, rgba(255, 255, 2
 
 $font-family-title: 'Changa One', sans-serif;
 $font-family-text: 'Rubik', sans-serif;
+$font-family-logo: 'Dosis', sans-serif;
 
 $font-weight-thin: 100;
 $font-weight-extra-light: 200;

diff --git a/components/navigation/navigation.vue b/components/navigation/navigation.vue
@@ -3,7 +3,6 @@
     <div class="navigation__logo">
       <a
         href="/"
-        class="vlw__primary-bar__brand__host"
       >
         DPEDS
       </a>

diff --git a/components/navigation/style.scss b/components/navigation/style.scss
@@ -15,11 +15,21 @@
 }
 
 .navigation__logo {
+    @extend %h4;
     display: flex;
+    color: white;
+    text-decoration: none;
+    z-index: 1;
     flex: 1;
+    margin-left: calc(#{$spacing-base} * 2.5);
     align-items: center;
+    font-family: $font-family-logo;
 
     height: 100%;
+
+    & a:visited {
+        color: white;
+    }
 }
 
 .navigation__links {
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ h1{ @@
     h2{
     	@extend %h2;
+    	padding-bottom: 1rem
     }
     h3{
@@ Expand Down @@