🎨

client/public/components/components.js

@@ -31,6 +31,7 @@ async function loadComponents() {
             constructor() {
                 super();
             }
+            
             async connectedCallback() {
                 const shadow = this.attachShadow({mode: 'open'});
 

client/public/components/navbar/navbar.css

@@ -7,10 +7,10 @@
     display: flex;
     flex-direction: row;
     font-family: 'Londrina Solid', cursive;
-    font-size: 20px;
+    font-size: 1.5em;
     margin: auto;
     padding: 20px 50px;
-    color: #111;
+    color: #222;
 }
 
 .push-left {
@@ -24,21 +24,15 @@
     cursor: pointer;
     display: none;
     outline: none;
-    height: 30px;
     position: relative;
-    width: 30px;
-    z-index: 1000;
-}
-
-@media screen and (max-width: 768px) {
-    .hamburger {
-        display: inline-block;
-   }
+    height: 60px;
+    width: 60px;
+    z-index: 4;
 }
 
 .hamburger-line {
-    background: #272727;
-    height: 3px;
+    background: #222;
+    height: 6px;
     position: absolute;
     left: 0;
     transition: all 0.2s ease-out;
@@ -46,7 +40,7 @@
 }
 
 .hamburger:hover .hamburger-line {
-    background: #777;
+    background: #555;
 }
 
 .hamburger-line-top {
@@ -86,7 +80,39 @@
     transition: all 0.25s ease-in;
 }
 
-@media screen and (max-width: 768px) {
+
+.nav-menu .menu-item a {
+    color: #222;
+    display: block;
+    line-height: 30px;
+    margin: 0px 10px;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+.nav-menu .menu-item a:hover {
+    color: #777;
+    text-decoration: underline;
+}
+
+
+.sub-nav {
+    border: 1px solid #ccc;
+    display: none;
+    position: absolute;
+    background-color: #E4D6FF;
+    padding: 5px 5px;
+    list-style: none;
+    width: 230px;
+}
+
+@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
+    .hamburger {
+        display: inline-block;
+   }
+}
+
+@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
     .nav-menu {
         background: #E4D6FF;
         flex-direction: column;
@@ -106,45 +132,21 @@
    }
 }
 
-.nav-menu .menu-item a {
-    color: #444;
-    display: block;
-    line-height: 30px;
-    margin: 0px 10px;
-    text-decoration: none;
-    text-transform: uppercase;
-}
-
-.nav-menu .menu-item a:hover {
-    color: #777;
-    text-decoration: underline;
-}
-
-@media screen and (max-width: 768px) {
+@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
     .nav-menu .menu-item a {
-        font-size: 20px;
+        font-size: 1.5em;
         margin: 8px;
-   }
+    }
 }
 
-.sub-nav {
-    border: 1px solid #ccc;
-    display: none;
-    position: absolute;
-    background-color: #E4D6FF;
-    padding: 5px 5px;
-    list-style: none;
-    width: 230px;
-}
-
-@media screen and (max-width: 768px) {
+@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
     .sub-nav {
         position: relative;
         width: 100%;
         display: none;
         background-color: rgba(0, 0, 0, 0.20);
         box-sizing: border-box;
-   }
+    }
 }
 
 .nav-link:hover + .sub-nav {

client/public/components/navbar/navbar.html

@@ -1,5 +1,5 @@
 <nav class="navbar">
-    <div class="logo"><img src="res/logo.svg" height="50" alt="logo"></div>
+    <div class="logo"><img src="res/logo.svg" height="80em" alt="logo"></div>
     
     <div class="push-left">
         <!-- https://jonsuh.com/hamburgers/ -->
@@ -7,7 +7,7 @@
             <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>
@@ -26,9 +26,7 @@
                     <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>
         </ul>
     </div>
 </nav>

client/public/global.css

@@ -1,20 +1,19 @@
 body {
     font-family: 'Open Sans', sans-serif;
-    font-size: 14px;
-    line-height: 1.42857143;
-    color: #333;
+    font-size: 20px;
+    color: #222;
     text-decoration: none;
-    /* background-color: rgb(241, 241, 241); */
     background-color: #D7C2FF;
-    width: 70%;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 
-.text {
-    font-family: 'Open Sans', sans-serif;
-    font-size: 14px;
-    color: #333;
-    line-height: 1.5;
+limited-margin {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 900px;
+    width: 70%;
+    max-width: 1200px;
 }

client/public/index.html

@@ -9,7 +9,10 @@
 	<script src="components/components.js"></script>
 </head>
 <body>
-	<navbar-component></navbar-component>
+	<limited-margin>
 
-
-</body>
+		<navbar-component></navbar-component>
+		
+		
+	</limited-margin>
+</body>