eline/decentrala-website-static-new
1
0
Fork 0
forked from Decentrala/website
Code Issues 2 Pull Requests 1 Activity

simplify navigation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -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>

9
pages/account.html
View File

@ -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>

9
pages/blog.html
View File

@ -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>

9
pages/contact.html
View File

@ -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>

9
pages/events.html
View File

@ -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>

9
pages/projects.html
View File

@ -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>

9
pages/services.html
View File

@ -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>

9
pages/webring.html
View File

@ -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>

2
scripts/main.js
View File

@ -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");

41
styles/style.css
View File

@ -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;
} }