diff --git a/index.html b/index.html index 89eb40c..8d3370b 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,7 @@ + @@ -57,10 +58,18 @@ - Vis-klient - GitHub-prosjekt - Apollo Sandbox - Personvern +
+
+ ☰ +
+
+
+ Vis-klient + GitHub + Apollo Sandbox + Blogg + Personvern +
@@ -78,6 +87,7 @@

Ordbok API

> Vis-klient GitHub + Blogg
diff --git a/nav-menu.js b/nav-menu.js new file mode 100644 index 0000000..0379a92 --- /dev/null +++ b/nav-menu.js @@ -0,0 +1,17 @@ +document.addEventListener('DOMContentLoaded', () => { + const hamburger = document.querySelector('.hamburger'); + const navLinks = document.querySelector('.navbar-links'); + const container = document.querySelector('#navbar .container'); + + hamburger.addEventListener('click', () => { + if (navLinks.dataset.shown === 'false') { + navLinks.dataset.shown = 'true'; + + container.style.maxHeight = '100vh'; + } else { + navLinks.dataset.shown = 'false'; + + container.style.maxHeight = '84px'; + } + }); +}); diff --git a/personvern.html b/personvern.html index 42720d2..51b5146 100644 --- a/personvern.html +++ b/personvern.html @@ -46,6 +46,7 @@ + @@ -54,10 +55,18 @@ - Vis-klient - GitHub-prosjekt - Apollo Sandbox - Personvern +
+
+ ☰ +
+
+
+ Vis-klient + GitHub + Apollo Sandbox + Blogg + Personvern +
diff --git a/style.css b/style.css index 50e3f4d..3802ba5 100644 --- a/style.css +++ b/style.css @@ -54,8 +54,8 @@ h6 { max-width: 1200px; margin: auto; display: flex; - justify-content: space-around; align-items: center; + transition: max-height 0.3s ease-in-out; } .navbar-logo img { @@ -293,6 +293,10 @@ footer { text-align: center; } +.buttons { + line-height: 2; +} + a { color: var(--link-color); text-decoration: none; @@ -344,6 +348,94 @@ strong { color: var(--main-text-emphasis-color); } +.navbar-links { + flex: 1; + display: flex; + gap: 20px; +} + +.hamburger { + display: none; + cursor: pointer; + font-size: 2rem; + user-select: none; +} + +.hamburger-container { + position: relative; + overflow: hidden; +} + +.navbar-spacer { + flex-grow: 1; + flex-shrink: 0; +} + +.navbar-break { + flex-basis: 100%; + height: 0; +} + +.hamburger:hover { + color: var(--link-hover-color); +} + +.hamburger:active { + color: var(--link-color); +} + +.hamburger:active::before { + content: ''; + border-radius: 50%; + background-color: rgba(0, 0, 0, 0.1); + position: absolute; + top: -5px; + right: -5px; + bottom: -5px; + left: -5px; +} + +@media (min-width: 768px) { + .hamburger, + .navbar-spacer, + .navbar-break { + display: none; + } + + .navbar-links { + display: flex; + justify-content: flex-start; + margin-left: 2em; + } +} + +@media (max-width: 767px) { + #navbar .container { + flex-wrap: wrap; + max-height: 84px; + overflow-y: hidden; + } + + .hamburger { + display: flex; + } + + .navbar-spacer, + .navbar-break { + display: block; + } + + .navbar-links { + flex-direction: column; + order: 1; + width: 100vw; + } + + .navbar-links a:last-child { + margin-bottom: 2em; + } +} + @media (max-width: 1199px) { #welcome .text-content { max-width: 50%;