diff --git a/README.md b/README.md index 088b3d9..dc017a6 100644 Binary files a/README.md and b/README.md differ diff --git a/client/public/components/components.js b/client/public/components/components.js index 4a7164d..eb6eb05 100644 --- a/client/public/components/components.js +++ b/client/public/components/components.js @@ -31,6 +31,7 @@ async function loadComponents() { constructor() { super(); } + async connectedCallback() { const shadow = this.attachShadow({mode: 'open'}); diff --git a/client/public/components/navbar/navbar.css b/client/public/components/navbar/navbar.css index d0915e9..66879c0 100644 --- a/client/public/components/navbar/navbar.css +++ b/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 { diff --git a/client/public/components/navbar/navbar.html b/client/public/components/navbar/navbar.html index 2198817..61fc6d0 100644 --- a/client/public/components/navbar/navbar.html +++ b/client/public/components/navbar/navbar.html @@ -1,5 +1,5 @@ diff --git a/client/public/global.css b/client/public/global.css index a123607..35bd516 100644 --- a/client/public/global.css +++ b/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; } diff --git a/client/public/index.html b/client/public/index.html index a30df7f..f52db84 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -9,7 +9,10 @@
-