diff options
| author | Adam T. Carpenter <atc@53hor.net> | 2025-03-24 23:22:09 -0400 |
|---|---|---|
| committer | Adam T. Carpenter <atc@53hor.net> | 2025-03-24 23:22:09 -0400 |
| commit | 576fd3912c6a38ffc156c666874431a78faf9476 (patch) | |
| tree | 104cd2165e98e6d2cda7bbe245a7cc9dc8eae5b3 | |
| parent | 7d9343546c68fc48f18de153374cd326fb0de682 (diff) | |
| download | carpentertutoring-master.tar.xz carpentertutoring-master.zip | |
| -rw-r--r-- | static/desktop.css | 8 | ||||
| -rw-r--r-- | templates/base.html | 31 | ||||
| -rw-r--r-- | templates/styles.css | 21 |
3 files changed, 49 insertions, 11 deletions
diff --git a/static/desktop.css b/static/desktop.css index 1b0eb43..88d04d5 100644 --- a/static/desktop.css +++ b/static/desktop.css @@ -12,6 +12,14 @@ width: 100%; } + nav div { + height: auto; + } + + a#menu-toggle { + display: none; + } + div.buttons { flex-direction: row-reverse; } diff --git a/templates/base.html b/templates/base.html index a3ae28f..2c6b9aa 100644 --- a/templates/base.html +++ b/templates/base.html @@ -40,15 +40,19 @@ <body> <nav> - <a href="/#contact">Contact</a> - <a href="/#reviews">Reviews</a> - <a href="/about">Team</a> - <a href="/policies">Policies</a> - <a href="/posts">Posts</a> - <a href="/#help">Helpful Links</a> - <a href="/brochure">Brochure</a> - <a href="/#offerings">Services</a> - <a href="/#"><img alt="logo" src="/assets/logo-simple.png" /></a> + <a id="menu-toggle">More</a> + + <div id="menu"> + <a href="/#"><img alt="logo" src="/assets/logo-simple.png" /></a> + <a href="/#offerings">Services</a> + <a href="/brochure">Brochure</a> + <a href="/posts">Posts</a> + <a href="/#help">Helpful Links</a> + <a href="/policies">Policies</a> + <a href="/about">Team</a> + <a href="/#reviews">Reviews</a> + <a href="/#contact">Contact</a> + </div> </nav> <main> @@ -81,6 +85,15 @@ </a> </p> </footer> + + <script> + const menuToggle = document.querySelector('#menu-toggle'); + const menu = document.querySelector('#menu'); + + menuToggle.onclick = () => { + menu.classList.toggle('menu-open'); + }; + </script> </body> </html> diff --git a/templates/styles.css b/templates/styles.css index 2a83280..63cef43 100644 --- a/templates/styles.css +++ b/templates/styles.css @@ -34,8 +34,16 @@ body { nav { display: flex; + flex-direction: row-reverse; background-color: white; - flex-direction: column-reverse; +} + +nav div { + display: flex; + flex-direction: row; + overflow: hidden; + flex-wrap: wrap; + height: 3em; } nav img { @@ -53,7 +61,16 @@ nav a { nav a:hover { color: var(--darkteal); - background-color: lightgray; +} + +a#menu-toggle { + cursor: pointer; +} + +nav div.menu-open { + height: auto; + flex-wrap: off; + flex-direction: column; } div.buttons { |