simplify navigation

This commit is contained in:
Hugo 2023-08-06 12:55:10 +02:00
parent 857d0b4663
commit dc05908114
10 changed files with 34 additions and 81 deletions

View File

@ -40,17 +40,12 @@
<img id="mesh" src="/img/mesh-light.svg">
</main>
<footer>
<div id="sections-menu">
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</div>
<button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
<span class="sections">
<nav>
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
</nav>
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>

View File

@ -29,17 +29,12 @@
<img id="mesh" src="/img/mesh-light.svg">
</main>
<footer>
<div id="sections-menu">
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</div>
<button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
<span class="sections">
<nav>
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
</nav>
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>

View File

@ -22,17 +22,12 @@
<img id="mesh" src="/img/mesh-light.svg">
</main>
<footer>
<div id="sections-menu">
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</div>
<button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
<span class="sections">
<nav>
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
</nav>
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>

View File

@ -27,17 +27,12 @@
<img id="mesh" src="/img/mesh-light.svg">
</main>
<footer>
<div id="sections-menu">
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</div>
<button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
<span class="sections">
<nav>
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
</nav>
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>

View File

@ -70,17 +70,12 @@
<img id="mesh" src="/img/mesh-light.svg">
</main>
<footer>
<div id="sections-menu">
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</div>
<button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
<span class="sections">
<nav>
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
</nav>
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>

View File

@ -22,17 +22,12 @@
<img id="mesh" src="/img/mesh-light.svg">
</main>
<footer>
<div id="sections-menu">
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</div>
<button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
<span class="sections">
<nav>
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
</nav>
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>

View File

@ -78,17 +78,12 @@
<img id="mesh" src="/img/mesh-light.svg">
</main>
<footer>
<div id="sections-menu">
<a href="/pages/events.html">Događaji</a>
<a href="/pages/projects.html">Projekti</a>
<a href="/pages/contact.html">Kontakt</a>
</div>
<button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
<span class="sections">
<nav>
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
</nav>
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>

View File

@ -23,17 +23,12 @@
</list>
</main>
<footer>
<div id="sections-menu">
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</div>
<button id="sections-button" opened="false"><img src="/img/strelica-closed-light.svg" alt="OpenMenu"></button>
<span class="sections">
<nav>
<a href="/pages/events.html">Događaji</a>
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
</nav>
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>

View File

@ -1,7 +1,7 @@
const theme_switcher = document.getElementById("theme-switcher");
const imgs = document.getElementsByTagName("img");
const sections_button = document.getElementById("sections-button");
const sections_menu = document.getElementById("sections-menu");
const sections_menu = document.getElementsByTagName("nav")[0];
const main = document.getElementsByTagName("main")[0];
let theme = window.localStorage.getItem("theme");

View File

@ -112,9 +112,7 @@ a:focus {
background: linear-gradient(90deg, var(--hightlight) 0%, var(--hightlight) 50%, var(--bg) 51%, var(--bg) 100%);
}
.account,
.sections,
#sections-menu {
.account {
font-size: 2rem;
}
@ -139,27 +137,12 @@ a:focus {
display: none;
}
#sections-menu a {
margin-bottom: 1rem;
}
#sections-menu {
border: 2px solid var(--border);
background-color: var(--bg);
position: absolute;
bottom: calc(4rem - 2px);
left: calc(0px - 2px);
align-items: center;
padding: 2rem 3rem;
display: none;
}
.sections, #sections-menu {
nav {
font-variant: small-caps;
}
.sections a {
margin: 0 1rem 0 0;
display: flex;
flex-direction: row;
gap: 2rem;
font-size: 2rem;
}
button {
@ -180,7 +163,17 @@ screen and (max-width: 1500px) {
}
@media screen and (max-width: 1160px) {
.sections {
nav {
flex-direction: column;
border: 2px solid var(--border);
border-bottom: 0;
border-left: 0;
background-color: var(--bg);
position: absolute;
bottom: calc(4rem);
left: 0;
align-items: center;
padding: 2rem 3rem;
display: none;
}