1
0

More HTML5-compliant semantic layout

This commit is contained in:
Emil Miler 2022-11-28 15:11:08 +01:00
parent d2d59b6491
commit 6a0b7f5afd
2 changed files with 12 additions and 12 deletions

View File

@ -41,7 +41,7 @@
/* Do not let wide blocks, such as pre, expand the column and overflow */
&>*{ min-width: 0 }
& aside>*:first-child,
& nav>*:first-child,
& main>*:first-child,
& main>article:first-child h2
{ padding-top: 0; margin-top: 0; }
@ -73,10 +73,10 @@ header {
.title { font-size: 1.5em; }
.title:hover { text-decoration: none }
nav { font-size: 1rem }
.links { font-size: 1rem }
}
aside {
nav {
margin-bottom: 4rem;
span.title {
@ -200,9 +200,9 @@ a {
.grid { grid-template-columns: auto }
aside {
nav {
ul { display: none }
ul.nav {
ul.main {
display: flex;
justify-content: center;
flex-wrap: wrap;
@ -211,7 +211,7 @@ a {
span.title { display: none }
}
header, aside { margin-bottom: 3rem }
header, nav { margin-bottom: 3rem }
}
@media (prefers-color-scheme: dark) {
@ -225,7 +225,7 @@ a {
color: inherit;
}
aside ul li a {
nav ul li a {
color: inherit;
&:hover {

View File

@ -12,18 +12,18 @@
<header>
<div class="wrap">
<a href="{{ config.base_url }}" class="title">{{ config.title }}</a>
<nav>
<div class="links">
{% if config.extra.repository_url %}
<a href="{{ config.extra.repository_url }}">Source</a>,
{% endif %}
<a href="{{ get_url(path="/posts/atom.xml", trailing_slash=false) }}">RSS/Atom</a>
</nav>
</div>
</div>
</header>
<div class="wrap grid">
<aside>
<nav>
<span class="title">Navigation</span>
<ul class="nav">
<ul class="main">
{% for item in config.extra.nav %}
<li
{% if item.mobile_only %}
@ -34,7 +34,7 @@
</ul>
<span class="title">Categories</span>
{{ macros::list_taxonomy(kind="categories") }}
</aside>
</nav>
<main>
{% block content %}
{{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }}