simplify navigation
This commit is contained in:
parent
857d0b4663
commit
dc05908114
@ -40,17 +40,12 @@
|
|||||||
<img id="mesh" src="/img/mesh-light.svg">
|
<img id="mesh" src="/img/mesh-light.svg">
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<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>
|
<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/events.html">Događaji</a>
|
||||||
<a href="/pages/services.html">Servisi</a>
|
<a href="/pages/services.html">Servisi</a>
|
||||||
<a href="/pages/contact.html">Kontakt</a>
|
<a href="/pages/contact.html">Kontakt</a>
|
||||||
</span>
|
</nav>
|
||||||
<span class="links">
|
<span class="links">
|
||||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
||||||
alt="CreativeCommons"></a>
|
alt="CreativeCommons"></a>
|
||||||
|
@ -29,17 +29,12 @@
|
|||||||
<img id="mesh" src="/img/mesh-light.svg">
|
<img id="mesh" src="/img/mesh-light.svg">
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<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>
|
<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/events.html">Događaji</a>
|
||||||
<a href="/pages/services.html">Servisi</a>
|
<a href="/pages/services.html">Servisi</a>
|
||||||
<a href="/pages/contact.html">Kontakt</a>
|
<a href="/pages/contact.html">Kontakt</a>
|
||||||
</span>
|
</nav>
|
||||||
<span class="links">
|
<span class="links">
|
||||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
||||||
alt="CreativeCommons"></a>
|
alt="CreativeCommons"></a>
|
||||||
|
@ -22,17 +22,12 @@
|
|||||||
<img id="mesh" src="/img/mesh-light.svg">
|
<img id="mesh" src="/img/mesh-light.svg">
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<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>
|
<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/events.html">Događaji</a>
|
||||||
<a href="/pages/services.html">Servisi</a>
|
<a href="/pages/services.html">Servisi</a>
|
||||||
<a href="/pages/contact.html">Kontakt</a>
|
<a href="/pages/contact.html">Kontakt</a>
|
||||||
</span>
|
</nav>
|
||||||
<span class="links">
|
<span class="links">
|
||||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
||||||
alt="CreativeCommons"></a>
|
alt="CreativeCommons"></a>
|
||||||
|
@ -27,17 +27,12 @@
|
|||||||
<img id="mesh" src="/img/mesh-light.svg">
|
<img id="mesh" src="/img/mesh-light.svg">
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<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>
|
<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/events.html">Događaji</a>
|
||||||
<a href="/pages/services.html">Servisi</a>
|
<a href="/pages/services.html">Servisi</a>
|
||||||
<a href="/pages/contact.html">Kontakt</a>
|
<a href="/pages/contact.html">Kontakt</a>
|
||||||
</span>
|
</nav>
|
||||||
<span class="links">
|
<span class="links">
|
||||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
||||||
alt="CreativeCommons"></a>
|
alt="CreativeCommons"></a>
|
||||||
|
@ -70,17 +70,12 @@
|
|||||||
<img id="mesh" src="/img/mesh-light.svg">
|
<img id="mesh" src="/img/mesh-light.svg">
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<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>
|
<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/events.html">Događaji</a>
|
||||||
<a href="/pages/services.html">Servisi</a>
|
<a href="/pages/services.html">Servisi</a>
|
||||||
<a href="/pages/contact.html">Kontakt</a>
|
<a href="/pages/contact.html">Kontakt</a>
|
||||||
</span>
|
</nav>
|
||||||
<span class="links">
|
<span class="links">
|
||||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
||||||
alt="CreativeCommons"></a>
|
alt="CreativeCommons"></a>
|
||||||
|
@ -22,17 +22,12 @@
|
|||||||
<img id="mesh" src="/img/mesh-light.svg">
|
<img id="mesh" src="/img/mesh-light.svg">
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<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>
|
<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/events.html">Događaji</a>
|
||||||
<a href="/pages/services.html">Servisi</a>
|
<a href="/pages/services.html">Servisi</a>
|
||||||
<a href="/pages/contact.html">Kontakt</a>
|
<a href="/pages/contact.html">Kontakt</a>
|
||||||
</span>
|
</nav>
|
||||||
<span class="links">
|
<span class="links">
|
||||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
||||||
alt="CreativeCommons"></a>
|
alt="CreativeCommons"></a>
|
||||||
|
@ -78,17 +78,12 @@
|
|||||||
<img id="mesh" src="/img/mesh-light.svg">
|
<img id="mesh" src="/img/mesh-light.svg">
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<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>
|
<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/events.html">Događaji</a>
|
||||||
<a href="/pages/services.html">Servisi</a>
|
<a href="/pages/services.html">Servisi</a>
|
||||||
<a href="/pages/contact.html">Kontakt</a>
|
<a href="/pages/contact.html">Kontakt</a>
|
||||||
</span>
|
</nav>
|
||||||
<span class="links">
|
<span class="links">
|
||||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
||||||
alt="CreativeCommons"></a>
|
alt="CreativeCommons"></a>
|
||||||
|
@ -23,17 +23,12 @@
|
|||||||
</list>
|
</list>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<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>
|
<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/events.html">Događaji</a>
|
||||||
<a href="/pages/services.html">Servisi</a>
|
<a href="/pages/services.html">Servisi</a>
|
||||||
<a href="/pages/contact.html">Kontakt</a>
|
<a href="/pages/contact.html">Kontakt</a>
|
||||||
</span>
|
</nav>
|
||||||
<span class="links">
|
<span class="links">
|
||||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
|
||||||
alt="CreativeCommons"></a>
|
alt="CreativeCommons"></a>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
const theme_switcher = document.getElementById("theme-switcher");
|
const theme_switcher = document.getElementById("theme-switcher");
|
||||||
const imgs = document.getElementsByTagName("img");
|
const imgs = document.getElementsByTagName("img");
|
||||||
const sections_button = document.getElementById("sections-button");
|
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];
|
const main = document.getElementsByTagName("main")[0];
|
||||||
|
|
||||||
let theme = window.localStorage.getItem("theme");
|
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%);
|
background: linear-gradient(90deg, var(--hightlight) 0%, var(--hightlight) 50%, var(--bg) 51%, var(--bg) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.account,
|
.account {
|
||||||
.sections,
|
|
||||||
#sections-menu {
|
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -139,27 +137,12 @@ a:focus {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sections-menu a {
|
nav {
|
||||||
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 {
|
|
||||||
font-variant: small-caps;
|
font-variant: small-caps;
|
||||||
}
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
.sections a {
|
gap: 2rem;
|
||||||
margin: 0 1rem 0 0;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
@ -180,7 +163,17 @@ screen and (max-width: 1500px) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1160px) {
|
@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;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user