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

70
styles/parts/_nav.scss
View File

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