From a7b8b59327bea52d47d25a2c76ff5cd6208a22e7 Mon Sep 17 00:00:00 2001
From: Ben <36240171+benkyd@users.noreply.github.com>
Date: Fri, 28 Jan 2022 00:49:07 +0000
Subject: [PATCH] styling :art: ygm

---
 client/public/components/navbar/navbar.css    | 38 +++++++++++++------
 client/public/components/navbar/navbar.html   | 26 +++++++++----
 .../notification-bar/notification-bar.css     | 12 +++---
 client/public/global.css                      | 27 +++++++++++--
 client/public/index.html                      | 10 +++++
 5 files changed, 85 insertions(+), 28 deletions(-)

diff --git a/client/public/components/navbar/navbar.css b/client/public/components/navbar/navbar.css
index e79fb11..e1dffad 100644
--- a/client/public/components/navbar/navbar.css
+++ b/client/public/components/navbar/navbar.css
@@ -1,20 +1,30 @@
-.logo {
-    max-width: 200px;
-}
-
 .navbar {
-    align-items: flex-end;
     display: flex;
+    font-family: 'Josefin Sans', sans-serif;
+    justify-content: space-between;
+    align-items: baseline;
     flex-direction: row;
-    font-family: 'Londrina Solid', cursive;
+    flex-wrap: wrap;
     font-size: 1.5em;
     margin: auto;
-    padding: 20px 50px;
+    padding-bottom: 20px;
     color: #222;
 }
 
-.push-left {
+.push-right {
     margin-left: auto;
+    text-align: right;
+}
+
+.push-down {
+    align-self: flex-end;
+    flex-basis: 100%;
+    margin-top: auto;
+}
+
+.logo {
+    flex-grow: 2;
+    transform: translatey(30%);
 }
 
 .hamburger {
@@ -26,7 +36,7 @@
     position: relative;
     height: 60px;
     width: 60px;
-    z-index: 100;
+    z-index: 200;
 }
 
 .hamburger-line {
@@ -72,6 +82,7 @@
 }
 
 .nav-menu {
+    font-family: 'Londrina Solid', cursive;
     display: flex;
     list-style: none;
     margin: 0;
@@ -112,9 +123,9 @@
 }
 
 /* Make sure the thing doesnt move */
-.nav-menu {
+/* .nav-menu {
     transform: translatey(-100%);
-}
+} */
 
 @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
     .nav-menu {
@@ -129,6 +140,7 @@
         left: 0;
         transform: translatey(-100%);
         text-align: center;
+        z-index: 100;
    }
     .menu-active .nav-menu {
         transform: translatey(0%);
@@ -160,3 +172,7 @@
 .sub-nav:hover {
     display: block;
 }
+
+/* search bar */
+
+
diff --git a/client/public/components/navbar/navbar.html b/client/public/components/navbar/navbar.html
index 4e854d4..dca4176 100644
--- a/client/public/components/navbar/navbar.html
+++ b/client/public/components/navbar/navbar.html
@@ -1,22 +1,22 @@
 <nav class="navbar">
     <div class="logo"><img src="res/logo.svg" height="80em" alt="logo"></div>
     
-    <div class="push-left">
+    <div class="push-right">
         <!-- https://jonsuh.com/hamburgers/ -->
         <button id="menu-toggler" class="hamburger">
             <span class="hamburger-line hamburger-line-top"></span>
             <span class="hamburger-line hamburger-line-middle"></span>
             <span class="hamburger-line hamburger-line-bottom"></span>
-        </button>   
+        </button>
     
         <ul id="primary-menu" class="menu nav-menu">
-            <li class="menu-item current-menu-item"><a class="nav-link"  href="#">New</a></li>
-            <li class="menu-item dropdown"><a class="nav-link"  href="#">Sets▾</a>
+            <li class="menu-item current-menu-item"><a class="nav-link" href="#">New</a></li>
+            <li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
                 <!-- TODO: Going to need to dynamically generate this -->
                 <ul class = "sub-nav">
-                    <li><a class="sub-nav-link"  href="#">1</a></li>
-                    <li><a class="sub-nav-link"  href="#">2</a></li>
-                    <li><a class="sub-nav-link"  href="#">3</a></li>
+                    <li><a class="sub-nav-link" href="#">1</a></li>
+                    <li><a class="sub-nav-link" href="#">2</a></li>
+                    <li><a class="sub-nav-link" href="#">3</a></li>
                 </ul>
             </li>
             <li class="menu-item dropdown"><a class="nav-link"  href="#">Bricks▾</a>
@@ -26,7 +26,17 @@
                     <li><a class="sub-nav-link" href="#">3</a></li>
                 </ul>
             </li>
-            <li class="menu-item "><a class="nav-link"  href="#">My Account</a>
+            <li class="menu-item"><a class="nav-link" href="#">My Account</a>
         </ul>
+        <div class="push-down">
+            <span class="push-right">
+                <input id="search-bar" type="text" placeholder="search..."/>
+            </span>
+            <img src="https://www.svgrepo.com/show/13666/heart.svg" width="30px" alt="">
+            <img src="https://www.svgrepo.com/show/80543/shopping-cart-outline.svg" width="30px" alt="">
+            <span id="cart-number">5</span>
+        </div>
     </div>
+
+
 </nav>
diff --git a/client/public/components/notification-bar/notification-bar.css b/client/public/components/notification-bar/notification-bar.css
index 358c93c..7cd25f5 100644
--- a/client/public/components/notification-bar/notification-bar.css
+++ b/client/public/components/notification-bar/notification-bar.css
@@ -4,18 +4,18 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 35px;
+    height: 1.7em;
     background-color: #00B4F5;
     box-shadow: #222 0px 0px 5px;
     transition: all 0.3s ease-in;
 }
 
 .notification-bar-text {
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Josefin Sans', sans-serif;
     text-transform: uppercase;
     text-align: center;
     color: #fff;
-    padding: 0px 15px;
+    padding: 0px 1em;
     height: 100%;
     line-height: 35px;
     font-size: 20px;
@@ -25,11 +25,11 @@
 
 .notification-bar-close {
     display: inline-block;
-    padding: 0px 15px;
+    padding: 0px 1em;
     height: 100%;
-    line-height: 35px;
+    line-height: 2em;
     color: #fff;
-    font-size: 20px;
+    font-size: 1.5em;
     font-weight: bold;
     text-align: center;
     font-family: 'Open Sans', sans-serif;
diff --git a/client/public/global.css b/client/public/global.css
index 24efd87..39effdf 100644
--- a/client/public/global.css
+++ b/client/public/global.css
@@ -1,5 +1,5 @@
 body {
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Josefin Sans', sans-serif;
     font-size: 20px;
     color: #222;
     text-decoration: none;
@@ -15,13 +15,34 @@ limited-margin {
     margin-left: auto;
     margin-right: auto;
     width: 85%;
-    max-width: 1200px;
+    max-width: 1400px;
 }
 
+content-margin {
+    position: relative;
+    display: inherit;
+    margin-left: auto;
+    margin-right: auto;
+    width: 80%;
+    max-width: 1300px;
+}
+
+
 /* responsive sidebar stop scrolling */
 /* also making sure this is applied any time it's on a mobile device */
 @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
     limited-margin {
-        width: 100%;
+        width: 90%;
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+    content-margin {
+        width: 90%;
+        padding-left: 2em;
+        padding-right: 2em;
     }
 }
+
+#top-picks {
+
+}
diff --git a/client/public/index.html b/client/public/index.html
index f2944e7..1f79e7c 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -6,6 +6,7 @@
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
 	<script src="components/components.js"></script>
 </head>
 <body>
@@ -15,5 +16,14 @@
 
 	<limited-margin>
 		<navbar-component></navbar-component>
+		
+		<content-margin>
+			
+			<div id="top-picks">
+				Today's Top Picks
+			</div>
+
+		</content-margin>
+
 	</limited-margin>
 </body>