nav-bar-design-updates: Updates to styles to match design, update ren…

…der order in nav-profile.

blocks/header/header.css

@@ -36,12 +36,8 @@ body.light-nav {
   display: contents;
 }
 
-.header.block nav span.icon {
-  display: block;
-}
-
 .header.block nav span.icon img {
-  display: inline-block;
+  display: flex;
   height: 100%;
   width: 100%;
 }
@@ -96,9 +92,9 @@ body.light-nav {
   color: var(--body-color);
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-normal);
-  font-size: var(--body-font-size-s);
-  letter-spacing: var(--letter-spacing-reg);
-  line-height: var(--body-font-size-s);
+  font-size: var(--body-font-size-xs);
+  letter-spacing: var(--letter-spacing-m);
+  line-height: normal;
   text-decoration: none;
   cursor: pointer;
   display: flex;
@@ -115,11 +111,15 @@ body.light-nav {
 }
 
 .header.block nav .nav-profile .login a {
-  padding: 10px;
-  margin: 20px 0 10px;
-  width: 100px;
+  background-color: var(--primary-color);
   border: 1px solid var(--body-color);
+  color: var(--tertiary-color);
+  font-size: var(--body-font-size-s);
+  font-weight: var(--font-weight-bold);
   justify-content: center;
+  margin: 20px 0 10px;
+  padding: 10px;
+  width: 100px;
 }
 
 .header.block nav .nav-profile .username,
@@ -171,7 +171,7 @@ body.light-nav {
 
 
 .header.block nav .nav-sections > ul > li {
-  border-bottom: 1px solid var(--black);
+  border-bottom: 1px solid var(--secondary-accent);
 }
 
 .header.block nav .nav-profile .level-2 li {
@@ -200,7 +200,8 @@ body.light-nav {
   padding: 15px 0;
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-normal);
-  font-size: var(--body-font-size-xl);
+  font-size: 26px;
+  letter-spacing: var(--letter-spacing-xxxs);
   line-height: var(--line-height-s);
   text-decoration: none;
   text-transform: uppercase;
@@ -219,9 +220,10 @@ body.light-nav {
   font-family: var(--font-family-primary);
   font-weight: var(--font-weight-normal);
   font-size: var(--body-font-size-m);
+  letter-spacing: var(--letter-spacing-xxxs);
   line-height: var(--line-height-l);
   text-decoration: none;
-  text-transform: capitalize;
+  text-transform: uppercase;
   color: var(--white);
 }
 
@@ -314,7 +316,7 @@ body.light-nav {
     display: flex;
     height: 100%;
     width: 100%;
-    max-width: var(--normal-page-width);
+    max-width: var(--wide-page-width);
     margin: 0 auto;
     align-items: center;
     justify-content: flex-end;
@@ -326,6 +328,7 @@ body.light-nav {
 
   .header.block nav .nav-profile ul > li,
   .header.block nav .nav-profile ul > li > a {
+    font-size: var(--body-font-size-xxs);
     height: 100%;
   }
 
@@ -336,11 +339,17 @@ body.light-nav {
     margin: unset;
     width: unset;
     padding: 0 10px;
-    font-size: var(--body-font-size-xs);
+    font-size: var(--body-font-size-xxs);
     letter-spacing: var(--letter-spacing-reg);
     line-height: unset;
   }
 
+  .header.block nav .nav-profile .login a {
+    background-color: transparent;
+    color: var(--body-color);
+    font-weight: var(--font-weight-normal);
+  }
+
   .header.block nav .nav-profile a span.icon {
     margin-right: 5px;
   }
@@ -392,9 +401,9 @@ body.light-nav {
     display: flex;
     height: 100%;
     padding: 10px 15px;
-    font-size: var(--body-font-size-m);
+    font-size: 15px;
     text-align: center;
-    letter-spacing: var(--letter-spacing-reg);
+    letter-spacing: var(--letter-spacing-xxs);
     line-height: var(--line-height-m);
     color: var(--nav-color);
     column-gap: 2px;
@@ -411,7 +420,7 @@ body.light-nav {
     background: none;
     font-family: var(--font-family-fontawesome);
     height: unset;
-    width: 20px;
+    width: 13px;
     color: var(--nav-color);
   }
 
@@ -457,9 +466,9 @@ body.light-nav {
 
   .header.block nav[aria-expanded="true"] .nav-sections > ul > li.nav-drop > ul > li > a {
     padding: 10px 15px;
-    font-size: var(--body-font-size-s);
+    font-size: var(--body-font-size-xs);
     line-height: var(--body-font-size-s);
-    text-transform: capitalize;
+    text-transform: uppercase;
   }
 
   .header.block nav[aria-expanded="true"] .nav-hamburger {

blocks/header/header.js

@@ -166,7 +166,7 @@ function addProfileLogin(nav) {
       </ul>
     </li>
   `;
-  profileList.append(...profileMenu.childNodes);
+  profileList.prepend(...profileMenu.childNodes);
   profileList.querySelector('.login a').addEventListener('click', openSignIn);
   profileList.querySelector('.username .logout a').addEventListener('click', doLogout);
   onProfileUpdate(showHideNavProfile);

styles/styles.css

@@ -16,6 +16,7 @@
   /* Colors */
   --primary-color: #670038;
   --secondary-color: #aa979c;
+  --secondary-accent: #c299af;
   --tertiary-color: #f5f1f2;
   --primary-color-lighten: rgba(98 98 121 / 12.5%);
   --primary-color-svg-filter: invert(18%) sepia(17%) saturate(1944%) hue-rotate(264deg) brightness(93%) contrast(95%);
@@ -86,7 +87,8 @@
   --line-height-xxl: 2.9em;
 
   /* Common spacing values */
-  --letter-spacing-xxs : 0.015em;
+  --letter-spacing-xxxs : 0.015em;
+  --letter-spacing-xxs : 0.03em;
   --letter-spacing-xs : 0.04em;
   --letter-spacing-s  : 0.06em;
   --letter-spacing-reg: 0.07em;