bros

client/public/components/navbar/navbar.css

@@ -6,10 +6,9 @@
     align-items: center;
     flex-direction: row;
     flex-wrap: wrap;
-    font-size: 1.5em;
+    font-size: 2.3em;
     margin: auto;
-    padding-top: 3%;
-    /* padding-bottom: 20px; */
+    padding-top: 1em;
     color: #222;
 }
 
@@ -85,6 +84,8 @@
     transform: rotate(-45deg) translatey(50%);
 }
 
+/* nav menu */
+
 .nav-menu {
     font-family: 'Londrina Solid', cursive;
     display: flex;
@@ -121,6 +122,7 @@
     padding: 5px 5px;
     list-style: none;
     width: 230px;
+    z-index: 2;
 }
 
 @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
@@ -184,13 +186,14 @@
 
 .secondary-menu {
     display: flex;
-    width: 100%;
+    margin-top: 9px;
     flex-direction: row;
     justify-content: space-between;
     color: #222;
     align-items: center;
     align-content: center;
     flex-wrap: nowrap;
+    width: 100%;
 }
 
 .search-wrapper {
@@ -199,24 +202,47 @@
     position: relative;
     display: flex;
     min-width: 100px;
+    margin-left: 8px;
     z-index: 1;
 }
 
-.search-icon {
-    position: absolute;
-    top: 4px;
-    left: 8px;
-    width: 14px;
+/* Modified version of https://codepen.io/mihaeltomic/pen/vmwMdm */
+#search-bar {
+    width: 100%;
+    padding: 12px 14px;
+    background-color: transparent;
+    transition: transform 250ms ease-in-out;
+    font-family: 'Josefin Sans', sans-serif;
+    font-size: 0.5em;
+    color: #222;
+    background-color: transparent;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-size: 27px 27px;
+    background-position: 95% center;
+    border-radius: 10px;
+    border: 2px solid #222;
+    transition: all 250ms ease-in-out;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
 }
 
-#search-bar {
-    border: 1px solid grey;
-    border-radius: 5px;
-    height: 100%;
-    width: 100%;
-    outline: 0;
+.search__input::placeholder {
+    color: rgba(87, 87, 86, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
 }
 
+#search-bar:hover, #search-bar:focus {
+    padding: 12px 0;
+    outline: 0;
+    border: 2px solid transparent;
+    border-bottom: 2px solid #222;
+    border-radius: 0;
+    background-position: 100% center;
+}
+
+
 /* #search-bar:hover, #search-bar:focus {
     border: 1.5px solid #009688;
     background-color: white;

client/public/components/navbar/navbar.html

@@ -31,7 +31,6 @@
         <ul class="secondary-menu menu push-down">
             
             <span class="search-wrapper">
-                <img class="search-icon" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU2Ljk2NiA1Ni45NjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU2Ljk2NiA1Ni45NjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPHBhdGggZD0iTTU1LjE0Niw1MS44ODdMNDEuNTg4LDM3Ljc4NmMzLjQ4Ni00LjE0NCw1LjM5Ni05LjM1OCw1LjM5Ni0xNC43ODZjMC0xMi42ODItMTAuMzE4LTIzLTIzLTIzcy0yMywxMC4zMTgtMjMsMjMgIHMxMC4zMTgsMjMsMjMsMjNjNC43NjEsMCw5LjI5OC0xLjQzNiwxMy4xNzctNC4xNjJsMTMuNjYxLDE0LjIwOGMwLjU3MSwwLjU5MywxLjMzOSwwLjkyLDIuMTYyLDAuOTIgIGMwLjc3OSwwLDEuNTE4LTAuMjk3LDIuMDc5LTAuODM3QzU2LjI1NSw1NC45ODIsNTYuMjkzLDUzLjA4LDU1LjE0Niw1MS44ODd6IE0yMy45ODQsNmM5LjM3NCwwLDE3LDcuNjI2LDE3LDE3cy03LjYyNiwxNy0xNywxNyAgcy0xNy03LjYyNi0xNy0xN1MxNC42MSw2LDIzLjk4NCw2eiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
                 <input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
             </span>
 
@@ -44,5 +43,4 @@
         </ul>
     </div>
 
-
 </nav>

client/public/components/notification-bar/notification-bar.css

@@ -4,7 +4,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 1.7em;
+    height: 2em;
     background-color: #00B4F5;
     box-shadow: #222 0px 0px 5px;
     transition: all 0.3s ease-in;
@@ -18,7 +18,7 @@
     padding: 0px 1em;
     height: 100%;
     line-height: 35px;
-    font-size: 20px;
+    font-size: 1.3em;
     font-weight: bold;
     text-align: center;
 }
@@ -63,8 +63,8 @@
     border: none;
     cursor: pointer;
     outline: none;
-    height: 30px;
-    width: 30px;
+    height: 2em;
+    width: 2em;
     z-index: 100;
     transition: all 0.2s ease-in;
 }

client/public/global.css

@@ -1,6 +1,9 @@
 body {
     font-family: 'Josefin Sans', sans-serif;
-    font-size: 20px;
+    /* all EM in the document is based off this DONT TOUCH */
+    /* it's also kinda the default so you can touch it if you want */
+    /* BODY TEXT SHOULD BE 1EM */
+    font-size: 16px;
     color: #222;
     text-decoration: none;
     background-color: #D7C2FF;
@@ -44,5 +47,5 @@ content-margin {
 }
 
 #top-picks {
-
+    font-size: 1em;
 }