Minor improvements

components/01_Atoms/link/_link.scss

@@ -1,13 +1,13 @@
 .LP-Link {
     color: $-grey;
     text-decoration: none;
-    font-family: $-primary-sans-serif-accent-font;
+    font-family: $-primary-sans-serif-font;
     &:hover {
         color: $-light-brown;
     }
 
-    .LP-Text{
+    .LP-Paragraph{
-        font-family: $-primary-sans-serif-accent-font;
+        font-family: $-primary-sans-serif-font;
         &:hover{
             color: $-light-brown;
         }

components/02_Molecules/navigation/_navigation.scss

@@ -1,9 +1,10 @@
 .LP-Menu{
+    border-left: 1px solid $-light-brown;
     .LP-Menu__List {
         list-style-type: none;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
+        justify-content: space-around;
         padding: 0;
         margin: 0;
     }
@@ -11,7 +12,6 @@
     .LP-Menu__Item {
         padding: 15px 0;
         margin: 0;
-        width: 100px;
         text-align: center;
         background-color: transparent;
     }
@@ -24,6 +24,24 @@
             color: $-wine-red;
         }
     }
+
+    &--sidebar{
+        border: none;
+        min-width: 80px;
+        .LP-Menu__List{
+            flex-direction: column;
+
+            .LP-Menu__Item{
+                text-align: left;
+                border-left: 1px solid $-light-brown;
+                margin-bottom: 10px;
+
+                &:last-child{
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
 }
 
 @media(max-width: $-viewport-medium){
@@ -32,7 +50,11 @@
         .LP-Menu__List{
             display: flex;
             flex-direction: row;
-            justify-content: flex-start
+            justify-content: flex-start;
+
+            .LP-Menu__Item{
+                flex: 1 1 auto;
+            }
         }
     }
 }

components/02_Molecules/navigation/navigation.config.json

@@ -1,3 +1,11 @@
 {
-    
+    "title": "Navigation",
+    "variants": [
+        {
+            "name": "Sidebar",
+            "context":{
+                "modifier": "--sidebar"
+            }
+        }
+    ]
 }

components/02_Molecules/navigation/navigation.hbs

@@ -1,4 +1,4 @@
-<nav class="LP-Menu">
+<nav class="LP-Menu LP-Menu{{modifier}}">
     <ul class="LP-Menu__List">
         <li class="LP-Menu__Item">{{> @link text='Home'}}</li>
         <li class="LP-Menu__Item">{{> @link text='About'}}</li>

components/03_Organisms/header/_header.scss

@@ -4,6 +4,10 @@
     justify-content: space-between;
     margin-bottom: 70px;
     height: 60px;
+
+    &__Navigation{
+        flex-grow: 2;
+    }
     
     &__Logo {
         height: 60px;
@@ -11,6 +15,7 @@
         object-fit:cover;
         max-height: 100%;
         overflow: hidden;
+        flex-shrink: 0;
 
         .LP-Image{
             height: 60px;
@@ -18,6 +23,19 @@
     }
 }
 
+.LP-Header__UserInformation{
+    margin-right: 3%;
+    .LP-Paragraph{
+        font-family: $-primary-sans-serif-font;
+        white-space: nowrap;
+    }
+
+    .LP-Link{
+        margin: 0 3px;
+        padding: 4px 4px;
+    }
+}
+
 @media(max-width: $-viewport-medium){
     .LP-Header__Logo{
         width: 60px;

components/03_Organisms/header/header.hbs

@@ -2,6 +2,11 @@
     <div class="LP-Header__Logo">
         {{> @image source='/images/logo.png'}}
     </div>
+    <div class="LP-Header__UserInformation">
+        <span class="LP-Paragraph">
+            Hi there!{{> @link url="#" text="Login"}} or {{> @link url="#" text="Sign up"}}
+            </span>
+    </div>
     <div class="LP-Header__Navigation">
         {{> @navigation}}
     </div>

public/components.css

@@ -9,12 +9,12 @@
 .LP-Link {
   color: #565656;
   text-decoration: none;
-  font-family: Roboto, Arial, sans-serif; }
+  font-family: Montserrat, Helvetica, sans-serif; }
   .LP-Link:hover {
     color: #C09F80; }
-  .LP-Link .LP-Text {
+  .LP-Link .LP-Paragraph {
-    font-family: Roboto, Arial, sans-serif; }
+    font-family: Montserrat, Helvetica, sans-serif; }
-    .LP-Link .LP-Text:hover {
+    .LP-Link .LP-Paragraph:hover {
       color: #C09F80; }
 
 .LP-Link__IconWrapper {
@@ -229,33 +229,45 @@
   .LP-TagList .LP-TagList__List .LP-TagList__Item {
     margin: 6px; }
 
-.LP-Menu .LP-Menu__List {
+.LP-Menu {
-  list-style-type: none;
+  border-left: 1px solid #C09F80; }
-  display: flex;
+  .LP-Menu .LP-Menu__List {
-  flex-direction: row;
+    list-style-type: none;
-  justify-content: space-between;
+    display: flex;
-  padding: 0;
+    flex-direction: row;
-  margin: 0; }
+    justify-content: space-around;
-
+    padding: 0;
-.LP-Menu .LP-Menu__Item {
+    margin: 0; }
-  padding: 15px 0;
+  .LP-Menu .LP-Menu__Item {
-  margin: 0;
+    padding: 15px 0;
-  width: 100px;
+    margin: 0;
-  text-align: center;
+    text-align: center;
-  background-color: transparent; }
+    background-color: transparent; }
-
+  .LP-Menu .LP-Link__Text {
-.LP-Menu .LP-Link__Text {
+    color: #565656;
-  color: #565656;
+    font-weight: bold;
-  font-weight: bold;
+    text-shadow: 0px 0px 20px white; }
-  text-shadow: 0px 0px 20px white; }
+    .LP-Menu .LP-Link__Text:hover {
-  .LP-Menu .LP-Link__Text:hover {
+      color: #76323F; }
-    color: #76323F; }
+  .LP-Menu--sidebar {
+    border: none;
+    min-width: 80px; }
+    .LP-Menu--sidebar .LP-Menu__List {
+      flex-direction: column; }
+      .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item {
+        text-align: left;
+        border-left: 1px solid #C09F80;
+        margin-bottom: 10px; }
+        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child {
+          margin-bottom: 0; }
 
 @media (max-width: 750px) {
   .LP-Menu .LP-Menu__List {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start; } }
+    justify-content: flex-start; }
+    .LP-Menu .LP-Menu__List .LP-Menu__Item {
+      flex: 1 1 auto; } }
 
 @media (max-width: 450px) {
   .LP-Menu .LP-Menu__List {
@@ -267,15 +279,27 @@
   justify-content: space-between;
   margin-bottom: 70px;
   height: 60px; }
+  .LP-Header__Navigation {
+    flex-grow: 2; }
   .LP-Header__Logo {
     height: 60px;
     margin: 25px;
     object-fit: cover;
     max-height: 100%;
-    overflow: hidden; }
+    overflow: hidden;
+    flex-shrink: 0; }
     .LP-Header__Logo .LP-Image {
       height: 60px; }
 
+.LP-Header__UserInformation {
+  margin-right: 3%; }
+  .LP-Header__UserInformation .LP-Paragraph {
+    font-family: Montserrat, Helvetica, sans-serif;
+    white-space: nowrap; }
+  .LP-Header__UserInformation .LP-Link {
+    margin: 0 3px;
+    padding: 4px 4px; }
+
 @media (max-width: 750px) {
   .LP-Header__Logo {
     width: 60px; }