1
0

Better aside navigation responsivity

This commit is contained in:
Emil Miler 2022-06-06 23:19:09 +02:00
parent 639d1744b1
commit 6ab6193662
3 changed files with 24 additions and 3 deletions

View File

@ -19,7 +19,8 @@ smart_punctuation = true
nav = [ nav = [
{title = "Index", path = "/"}, {title = "Index", path = "/"},
{title = "About", path = "/about/"}, {title = "About", path = "/about/"},
{title = "All posts", path = "/posts/"} {title = "Posts", path = "/posts/"},
{title = "Categories", path = "/categories/", mobile_only = true}
] ]
latest_posts_count = 3 latest_posts_count = 3
repository_url = "https://git.microlab.space/em/em.0x45.cz" repository_url = "https://git.microlab.space/em/em.0x45.cz"

View File

@ -99,6 +99,7 @@ aside {
text-decoration: none; text-decoration: none;
} }
} }
li.mobile-only { display: none }
} }
} }
@ -195,5 +196,19 @@ a {
} }
@media screen and (max-width: 50rem) { @media screen and (max-width: 50rem) {
.grid { grid-template-columns: auto } .grid { grid-template-columns: auto }
aside {
ul { display: none }
ul.nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
ul li.mobile-only { display: list-item }
span.title { display: none }
}
header, aside { margin-bottom: 3rem }
} }

View File

@ -22,9 +22,14 @@
</header> </header>
<div class="wrap grid"> <div class="wrap grid">
<aside> <aside>
<ul> <span class="title">Navigation</span>
<ul class="nav">
{% for item in config.extra.nav %} {% for item in config.extra.nav %}
<li><a href="{{ get_url(path=item.path, trailing_slash=true) }}">{{ item.title }}</a></li> <li
{% if item.mobile_only %}
class="mobile-only"
{% endif %}
><a href="{{ get_url(path=item.path, trailing_slash=true) }}">{{ item.title }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
<span class="title">Categories</span> <span class="title">Categories</span>