more prominent navbar icons

templates/widgets/navbar/navbar.lucius

@@ -58,11 +58,10 @@
 
 /* links */
 .navbar__link-wrapper {
-  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  align-items: flex-start;
+  align-items: center;
   height: 80px;
   min-width: 90px;
   color: var(--color-lightwhite);
@@ -71,14 +70,17 @@
 
   &:hover {
     color: var(--color-lightwhite);
+
+    .navbar__link-icon {
+      opacity: 1;
+    }
   }
 }
 
 .navbar__link-icon {
-  position: absolute;
-  right: 4px;
-  top: 4px;
-  opacity: 0.3;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+  margin-bottom: 7px;
 }
 
 .navbar__link-label {
@@ -90,7 +92,7 @@
 @media (min-width: 769px) {
 
   .navbar__link-wrapper {
-    border: 1px solid var(--color-lmu-box-border);
+    border: 1px solid rgba(255, 255, 255, 0.7);
   }
 }
 
@@ -106,6 +108,11 @@
   .navbar__link-label {
     padding: 0 7px;
   }
+
+  .navbar__link-icon {
+    transform: scale(0.65);
+    margin-bottom: 0;
+  }
 }
 
 /* navbar list */
@@ -142,21 +149,6 @@
   &:not(.navbar__list-item--favorite) + .navbar__list-item {
     margin-left: 12px;
   }
-
-  .fas {
-    height: 20px;
-    margin-left: 8px;
-  }
-}
-
-@media (max-width: 768px) {
-
-  .navbar__list-item {
-
-    .fas {
-      margin-left: 0;
-    }
-  }
 }
 
 @media (max-width: 500px) {