Better aside navigation responsivity
This commit is contained in:
parent
639d1744b1
commit
6ab6193662
@ -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"
|
||||||
|
@ -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 }
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user