Dylan Nav Bar Changes (#642)

* add: css styles for home page buttons and navbar links

* add: hr below featuring on the home page - nice touch

* change: navlink transitions and home page transitions. remove: <hr> && comments

* remove: transition animations for nav links

* add: mobile query for nav link underline - += color contrast

* add: gap to cards for better width breaking. Updated hero text padding&& nav link color

Author: DylanAustin-TheDreamer

_sass/nimitta.scss

@@ -40,12 +40,37 @@ header.site-header {
         }
         a.page-link {
             color: white;
+            position: relative;
+            display: inline-block;
+            text-decoration: none;
             &:not(:last-child) {
                 margin-right: 13px;
             }
         }
-        a.highlighted-nav-link {
-            border-bottom: 1px solid white;
+
+        a.page-link::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            top: 45px;
+            width: 0;
+            height: 2px;
+            background: #D5D5D5;
+            @include media-query(764px) {
+                top: 38px !important;
+            }
+        }
+        a.page-link:hover::after,
+        a.page-link.underline-page::after,
+        a.page-link.highlighted-nav-link::after {
+            width: 100%;
+        }
+        a.page-link.underline-page {
+            color: white !important;
+        }
+        a.page-link.highlighted-nav-link::after{
+            background: white;
         }
     }
     .site-title {

assets/css/frontpage.scss

@@ -10,6 +10,7 @@
     margin-right: auto;
     margin-left: auto;
     text-align: center;
+    gap: 0.1px;
 }
 
 .learning_styles li {
@@ -22,6 +23,17 @@
     margin: auto;
     margin-bottom: 7px;
     z-index: 5;
+    cursor: pointer;
+    transition: box-shadow linear 0.1s;
+}
+.learning_styles li a {
+    text-decoration: none !important;
+}
+.learning_styles li:hover{
+    box-shadow: 0 0 16px -5px gray;
+}
+.learning_styles{
+    margin-top: 35px;
 }
 
 .learning_styles .ls_name {
@@ -64,7 +76,6 @@ div.herotext {
     max-width: 30em;
     margin-left: auto;
     margin-right: auto;
-    padding: 20px;
     padding-top: 80px;
     margin-bottom: -100px;
     color: $banner-color;