More HTML5-compliant semantic layout
This commit is contained in:
parent
d2d59b6491
commit
6a0b7f5afd
@ -41,7 +41,7 @@
|
|||||||
/* Do not let wide blocks, such as pre, expand the column and overflow */
|
/* Do not let wide blocks, such as pre, expand the column and overflow */
|
||||||
&>*{ min-width: 0 }
|
&>*{ min-width: 0 }
|
||||||
|
|
||||||
& aside>*:first-child,
|
& nav>*:first-child,
|
||||||
& main>*:first-child,
|
& main>*:first-child,
|
||||||
& main>article:first-child h2
|
& main>article:first-child h2
|
||||||
{ padding-top: 0; margin-top: 0; }
|
{ padding-top: 0; margin-top: 0; }
|
||||||
@ -73,10 +73,10 @@ header {
|
|||||||
.title { font-size: 1.5em; }
|
.title { font-size: 1.5em; }
|
||||||
.title:hover { text-decoration: none }
|
.title:hover { text-decoration: none }
|
||||||
|
|
||||||
nav { font-size: 1rem }
|
.links { font-size: 1rem }
|
||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
nav {
|
||||||
margin-bottom: 4rem;
|
margin-bottom: 4rem;
|
||||||
|
|
||||||
span.title {
|
span.title {
|
||||||
@ -200,9 +200,9 @@ a {
|
|||||||
|
|
||||||
.grid { grid-template-columns: auto }
|
.grid { grid-template-columns: auto }
|
||||||
|
|
||||||
aside {
|
nav {
|
||||||
ul { display: none }
|
ul { display: none }
|
||||||
ul.nav {
|
ul.main {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@ -211,7 +211,7 @@ a {
|
|||||||
span.title { display: none }
|
span.title { display: none }
|
||||||
}
|
}
|
||||||
|
|
||||||
header, aside { margin-bottom: 3rem }
|
header, nav { margin-bottom: 3rem }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
@ -225,7 +225,7 @@ a {
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
aside ul li a {
|
nav ul li a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -12,18 +12,18 @@
|
|||||||
<header>
|
<header>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<a href="{{ config.base_url }}" class="title">{{ config.title }}</a>
|
<a href="{{ config.base_url }}" class="title">{{ config.title }}</a>
|
||||||
<nav>
|
<div class="links">
|
||||||
{% if config.extra.repository_url %}
|
{% if config.extra.repository_url %}
|
||||||
<a href="{{ config.extra.repository_url }}">Source</a>,
|
<a href="{{ config.extra.repository_url }}">Source</a>,
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="{{ get_url(path="/posts/atom.xml", trailing_slash=false) }}">RSS/Atom</a>
|
<a href="{{ get_url(path="/posts/atom.xml", trailing_slash=false) }}">RSS/Atom</a>
|
||||||
</nav>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<div class="wrap grid">
|
<div class="wrap grid">
|
||||||
<aside>
|
<nav>
|
||||||
<span class="title">Navigation</span>
|
<span class="title">Navigation</span>
|
||||||
<ul class="nav">
|
<ul class="main">
|
||||||
{% for item in config.extra.nav %}
|
{% for item in config.extra.nav %}
|
||||||
<li
|
<li
|
||||||
{% if item.mobile_only %}
|
{% if item.mobile_only %}
|
||||||
@ -34,7 +34,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<span class="title">Categories</span>
|
<span class="title">Categories</span>
|
||||||
{{ macros::list_taxonomy(kind="categories") }}
|
{{ macros::list_taxonomy(kind="categories") }}
|
||||||
</aside>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }}
|
{{ macros::list_posts(section="posts", count=config.extra.latest_posts_count) }}
|
||||||
|
Loading…
Reference in New Issue
Block a user