diff options
| -rw-r--r-- | css/style.css | 28 | ||||
| -rw-r--r-- | index.html | 26 | ||||
| -rw-r--r-- | js/main.js | 12 |
3 files changed, 62 insertions, 4 deletions
diff --git a/css/style.css b/css/style.css index bfcc57d..a50595f 100644 --- a/css/style.css +++ b/css/style.css @@ -65,6 +65,8 @@ hr { margin-bottom: 0.25rem; } + + /* Cool Button */ /* CSS Button - https://getcssscan.com/css-buttons-examples UIForms #74 */ @@ -169,11 +171,37 @@ hr { /* Media Queries */ @media screen and (max-width: 1000px) { + .hide-mobile { + display: none; + } + body { flex-direction: column; } #nav { width: 100%; + background: #a6b198; + height: 1.9rem; + overflow: hidden; + padding: 0rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + position: absolute; + } + + #logo { + width: 2rem; + } + + #logo-wrapper { + display: flex; + align-items: center; + } +} + +@media screen and (min-width: 1000px) { + .hide-desktop { + display: none; } } @@ -9,13 +9,33 @@ <link rel="stylesheet" href="https://use.typekit.net/hta7xia.css" /> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <link rel="icon" href="./images/favicon.png" /> + <script src="./js/main.js"></script> <meta name="theme-color" content="" /> <meta property="og:title" content="" /> <meta property="og:description" content="" /> </head> <body> <div id="nav"> - <div><a href="#welcome"><img src="./images/favicon.png" id="logo" /></a></div> + <div> + <div id="logo-wrapper"> + <div class="hide-desktop" style="width: 0.5rem;"></div> + <a href="#welcome"><img src="./images/favicon.png" id="logo" /></a + ><a + class="hide-desktop" + style=" + text-decoration: none; + font-weight: 700; + color: #000; + margin-left: 0.25rem; + font-family: classico-urw, sans-serif; + " + href="#welcome" + ><span>CSCI 1300</span></a + > + <div class="hide-desktop" style="flex: 1"></div> + <button class="hide-desktop" style="flex: none; margin-right: 1rem;" onclick="toggleNav(!isNavOpen);">Toggle Nav</button> + </div> + </div> <hr /> <div id="business-hours"> <h3>Business Hours</h3> @@ -39,9 +59,7 @@ <p style="font-size: 2rem">User Interfaces and User Experience</p> </div> </div> - <div id="xxx" style="height: 100vh;"> - content here - </div> + <div id="xxx" style="height: 100vh">content here</div> </div> </body> </html> diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..0e7eac1 --- /dev/null +++ b/js/main.js @@ -0,0 +1,12 @@ +isNavOpen = false; + +function toggleNav(on) { + var nav = document.getElementById("nav"); + if (on) { + nav.style.height = "100%"; + isNavOpen = true; + } else { + nav.style.height = "1.9rem"; + isNavOpen = false; + } +}
\ No newline at end of file |