fix: layout on small screens

This commit is contained in:
Hugo 2023-08-05 16:11:21 +02:00
parent 1e87f2be84
commit 571237f535
9 changed files with 29 additions and 26 deletions

View File

@ -51,15 +51,13 @@
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
<span class="copyleft">
<span class="links">
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>
<a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>
<a href="https://gitea.dmz.rs/Decentrala/website"><img src="/img/git-light.svg"
alt="SourceCode"></a>
<a href="https://balkan.fedive.rs/@decentrala"><img src="/img/mastodon-light.svg" alt="Mastodon"></a>
</span>
</span>
</footer>
</body>

View File

@ -40,7 +40,7 @@
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
<span class="copyleft">
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>
<a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

View File

@ -33,7 +33,7 @@
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
<span class="copyleft">
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>
<a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

View File

@ -38,7 +38,7 @@
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
<span class="copyleft">
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>
<a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

View File

@ -81,7 +81,7 @@
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
<span class="copyleft">
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>
<a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

View File

@ -33,7 +33,7 @@
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
<span class="copyleft">
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>
<a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

View File

@ -89,7 +89,7 @@
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
<span class="copyleft">
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>
<a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

View File

@ -34,7 +34,7 @@
<a href="/pages/services.html">Servisi</a>
<a href="/pages/contact.html">Kontakt</a>
</span>
<span class="copyleft">
<span class="links">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="/img/cc-light.svg"
alt="CreativeCommons"></a>
<a href="/pages/webring.html"><img src="/img/w-light.svg" alt="Webring"></a>

View File

@ -33,9 +33,9 @@ body {
body {
display: grid;
grid-template:
"header" 10vh
"header" 4rem
"main" 1fr
"footer" 10vh
"footer" 4rem
/ 1fr;
gap: 0;
font-family: 'Iosevka';
@ -121,6 +121,11 @@ a:focus {
.links {
display: flex;
gap: 2rem;
}
.links > a:hover{
background-color: var(--bg);
}
#sections-button {
@ -135,29 +140,21 @@ a:focus {
border: 2px solid var(--border);
background-color: var(--bg);
position: absolute;
bottom: calc(10vh - 2px);
bottom: calc(4rem - 2px);
left: calc(0px - 2px);
align-items: center;
padding: 2rem 3rem;
display: none;
}
.copyleft a,
.sections, #sections-menu {
font-variant: small-caps;
}
.sections a {
margin: 0 1rem 0 0;
}
.copyleft a:hover,
.copyleft a:focus {
background-color: var(--bg);
}
.copyleft {
display: flex;
flex-direction: row;
align-items: center;
}
button {
font-style: italic;
font-weight: lighter;
@ -195,7 +192,11 @@ screen and (max-width: 1500px) {
}
.links {
display: none;
gap: 1.2rem;
}
.links a {
width: 1.5rem;
}
header,
@ -206,4 +207,8 @@ screen and (max-width: 1500px) {
#theme-switcher {
margin-right: 1rem;
}
.account {
font-size: 1rem;
}
}