tommi
/
quitsocialmedia.club
mirror of https://github.com/xplosionmind/quitsocialmedia.club.git
1
1
Fork 0
Code Issues Releases Activity

nav fix

This commit is contained in:
Tommi 2022-09-18 10:24:33 +02:00
parent e16904e13a
commit c2d4aeb00a
2 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
includes/nav.html
View File

@ -1,9 +1,11 @@
<header class='nav'> <header class='nav'>
<a id='home' href='{% case lang %}{% when 'it' %}/it/home{% when 'fr' %}/fr/home{% else %}/home{% endcase %}' title='home'>{{ site.title }}</a> <div id='home'>
<a href='{% case lang %}{% when 'it' %}/it/home{% when 'fr' %}/fr/home{% else %}/home{% endcase %}' title='home'>{{ site.title }}</a>
</div>
<nav id='nav'> <nav id='nav'>
<input aria-hidden='true' type='checkbox' id='menutoggle'> <input aria-hidden='true' type='checkbox' id='menutoggle'>
<label class='nav-mobile' for='menutoggle'><span></span></label> <label class='nav-mobile' for='menutoggle'><span></span></label>
<ul class='nav-list'> <menu>
<li><a href='/{{ lang }}/about' title=' <li><a href='/{{ lang }}/about' title='
{% case lang %} {% case lang %}
{% when 'it' %}Info'>Info {% when 'it' %}Info'>Info
@ -34,9 +36,9 @@
</a></li> </a></li>
<li><a href='/{{ lang }}/sol' title=' <li><a href='/{{ lang }}/sol' title='
{% case lang %} {% case lang %}
{% when 'it' %}Soluzioni e alternative'>Soluzioni e alternative {% when 'it' %}Soluzioni e alternative'>Alternative
{% when 'fr' %}Solutions et alternatives'>Solutions {% when 'fr' %}Solutions et alternatives'>Alternatives
{% else %}Solutions and alternatives'>Solutions and alternatives {% else %}Solutions and alternatives'>Alternatives
{% endcase %} {% endcase %}
</a></li> </a></li>
<li><a href='/{{ lang }}/faq' title='FAQ'>FAQ</a></li> <li><a href='/{{ lang }}/faq' title='FAQ'>FAQ</a></li>
@ -51,6 +53,6 @@
</ul> </ul>
</li> </li>
{% endif %} {% endif %}
</ul> </menu>
</nav> </nav>
</header> </header>

70
styles/parts/_nav.scss
View File

@ -30,37 +30,38 @@ header {
position: fixed; position: fixed;
top: 1.5vw; top: 1.5vw;
left: 5vw; left: 5vw;
padding: 0 $regular-less; a {
line-height: $height; display: inline-block;
font-size: $bigger; padding: 0 $regular-less;
color: var(--background); line-height: $height;
background: var(--primary); font-size: 1.8rem;
box-shadow: var(--shadow); color: var(--background);
border: 2px solid var(--blue); background: var(--primary);
&:hover, box-shadow: var(--shadow);
&:focus { margin: auto;
color: var(--white-ish) !important; &:hover,
background: var(--red) !important; &:focus {
border-color: var(--white-ish) !important; box-shadow: none !important;
} }
&:target { &:active {
color: var(--primary); box-shadow: var(--inner-shadow);
}
} }
} }
#nav { #nav {
position: fixed; position: fixed;
height: $height;
top: 1.5vw; top: 1.5vw;
right: 6vw; right: 6vw;
text-align: right; text-align: right;
padding: 0 $small; padding: 0 .8rem;
box-shadow: var(--shadow); box-shadow: var(--shadow);
background: var(--background); background: var(--background);
* { * {
margin: 0 !important; margin: 0 !important;
} }
ul { ul,
menu {
padding: 0; padding: 0;
li { li {
float: left; float: left;
@ -70,7 +71,7 @@ header {
color: var(--text) !important; color: var(--text) !important;
line-height: $height; line-height: $height;
height: $height; height: $height;
padding: 0 $small; padding: 0 .8rem;
font-size: $regular-more; font-size: $regular-more;
font-weight: 700; font-weight: 700;
&::after { &::after {
@ -94,15 +95,13 @@ header {
} }
.lang-list { .lang-list {
opacity: 0;
top: 3.7rem; top: 3.7rem;
display: none;
position: absolute; position: absolute;
background: var(--background); background: var(--background);
z-index: -1;
#langtoggle:checked + & { #langtoggle:checked + & {
opacity: 1;
box-shadow: var(--shadow); box-shadow: var(--shadow);
z-index: 9; display: block;
} }
} }
@ -141,10 +140,14 @@ header {
} }
} }
.dropdown {
height: $height;
}
@media only screen and (max-width: 950px) { @media only screen and (max-width: 950px) {
#home { #home {
left: 50%; right: 0;
margin-left: -7.5rem; left: 0;
top: 2vh; top: 2vh;
text-align: center; text-align: center;
} }
@ -154,26 +157,27 @@ header {
.nav-mobile { .nav-mobile {
display: block; display: block;
} }
.nav-list { #nav menu {
position: fixed; position: fixed;
width: 13rem; width: 11rem;
bottom: calc(3vh + 4.5rem); bottom: calc(3vh + 4.5rem);
right: -14rem; right: -14rem;
background: var(--background); background: var(--background);
box-shadow: var(--shadow); box-shadow: var(--shadow);
z-index: 9; z-index: 9;
overflow: hidden; overflow: hidden;
} li {
#nav ul li { clear: both;
a, a {
label { line-height: 2.5rem;
padding: 0 $regular-more; height: 2.5rem;
}
} }
} }
} }
#menutoggle:checked { #menutoggle:checked {
& ~ .nav-list { & ~ menu {
right: calc(4vw + .3rem); right: calc(4vw + .3rem);
} }
& ~ .nav-mobile { & ~ .nav-mobile {