nav styling tweaks

opentech/static_src/src/sass/components/_nav.scss

@@ -11,6 +11,8 @@
     }
 
     &--primary {
+        text-transform: uppercase;
+
         @include media-query(tablet-portrait) {
             flex-direction: row;
             justify-content: flex-end;
@@ -54,12 +56,9 @@
     }
 
     &__item {
-        width: 60%;
-        padding-bottom: 10px;
         margin-bottom: 10px;
         font-weight: $weight--bold;
         text-align: center;
-        border-bottom: 1px solid rgba($color--black, 0.2);
 
         .nav--tertiary & {
             width: 100%;
@@ -84,8 +83,15 @@
             border-bottom: 0;
         }
 
-        &--secondary {
-            font-weight: $weight--light;
+        &--primary {
+            @include font-size(epsilon);
+            margin: 0;
+            letter-spacing: 1px;
+
+            @include media-query(tablet-landscape) {
+                @include font-size(zeta);
+                margin: 0 18px;
+            }
         }
 
         &--footer {
@@ -137,6 +143,8 @@
     }
 
     &__link {
+        display: inline-block;
+        padding: 20px;
         color: $color--white;
         border-bottom: 1px solid transparent;
         transition: color, border $transition;
@@ -146,16 +154,15 @@
         }
 
         @include media-query(tablet-landscape) {
+            display: initial;
+            padding: 0;
+
             &:hover {
                 color: lighten($color--secondary, 20%);
                 border-bottom: 1px solid $color--secondary;
             }
         }
 
-        @include media-query(tablet-portrait) {
-            margin: 0 10px;
-        }
-
         &--breadcrumb {
             color: $color--primary;