simplify navigation
This commit is contained in:
parent
857d0b4663
commit
dc05908114
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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");
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user