tidy up notes index page
This commit is contained in:
@@ -201,11 +201,11 @@ figcaption {
|
|||||||
|
|
||||||
/** Navigation bar */
|
/** Navigation bar */
|
||||||
|
|
||||||
nav {
|
.navbar {
|
||||||
margin-block: var(--spacing-block-sm);
|
margin-block: var(--spacing-block-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
.navbar ul {
|
||||||
grid-column: media-start / content-end;
|
grid-column: media-start / content-end;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -215,12 +215,12 @@ nav ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 36rem) {
|
@media (min-width: 36rem) {
|
||||||
nav {
|
.navbar {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: subgrid;
|
grid-template-columns: subgrid;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
.navbar ul {
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -296,3 +296,21 @@ pre code {
|
|||||||
padding-inline: var(--spacing-inline-xs);
|
padding-inline: var(--spacing-inline-xs);
|
||||||
background-color: var(--color-primary-fg-accent);
|
background-color: var(--color-primary-fg-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.visually-hidden {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
clip-path: inset(100%);
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
outline-offset: 0;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,16 +1,23 @@
|
|||||||
/* Assumes there is at most one level of subheading for sub-dividing entries */
|
.skip-to {
|
||||||
.h-feed :is(h2, h3, h4, h5, h6) {
|
display: inline-block;
|
||||||
margin-block-start: var(--spacing-block-md);
|
margin-block-start: var(--spacing-block-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-feed .h-entry {
|
.skip-to ul {
|
||||||
margin-block-start: var(--spacing-block-xs);
|
margin-block-start: var(--spacing-block-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-feed .full-feed-link {
|
.skip-to :is(ul, li) {
|
||||||
text-align: end;
|
display: inline-block;
|
||||||
|
list-style-type: disc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-feed :is(a.full-feed-link, .full-feed-link a)::after {
|
.skip-to li:last-of-type {
|
||||||
content: ' >'
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-entry {
|
||||||
|
outline: 0.125rem solid var(--colour-primary-fg);
|
||||||
|
outline-offset: 1rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
<nav>
|
<nav class="navbar">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="/">Home</a>
|
<a href="/">Home</a>
|
||||||
|
|||||||
@@ -1,41 +1,60 @@
|
|||||||
{% extends 'base.html.twig' %}
|
{% extends 'base.html.twig' %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section>
|
<section class="h-feed">
|
||||||
<h1>Notes</h1>
|
<h1 class="p-name">Joe Carstairs' notes</h1>
|
||||||
<p>
|
|
||||||
|
<p hidden>
|
||||||
|
These links are collected by
|
||||||
|
<a class="p-author h-card" href="{{ path('index') }}">
|
||||||
|
Joe Carstairs
|
||||||
|
</a>.
|
||||||
|
</p>
|
||||||
|
<p hidden>
|
||||||
|
<a class="u-url" href="{{ path('notes') }}">Permalink</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<nav class="skip-to">
|
||||||
Skip to:
|
Skip to:
|
||||||
<ul>
|
<ul>
|
||||||
{% for year in years %}
|
{% for year in years %}
|
||||||
<li><a href="#{{ year }}">{{ year }}</a></li>
|
<li><a href="#{{ year }}">{{ year }}</a></li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</nav>
|
||||||
|
|
||||||
{% for year in years %}
|
{% for year in years %}
|
||||||
<h2 id="{{ year }}">{{ year }}</h2>
|
<h2 id="{{ year }}">{{ year }}</h2>
|
||||||
|
|
||||||
<p>
|
<nav class="skip-to">
|
||||||
Skip to:
|
Skip to:
|
||||||
<ul>
|
<ul>
|
||||||
{% for month in months[year] %}
|
{% for month in months[year] %}
|
||||||
<li><a href="#{{ year }}-{{ month }}">{{ monthNames[month] }} {{ year }}</a></li>
|
<li><a href="#{{ year }}-{{ month }}">
|
||||||
|
{{ monthNames[month] }} <span class="visually-hidden">{{ year }}</span>
|
||||||
|
</a></li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
{% for month in months[year] %}
|
{% for month in months[year] %}
|
||||||
<h3 id="{{ year }}-{{ month }}">{{ monthNames[month] }}</h3>
|
<h3 id="{{ year }}-{{ month }}">{{ monthNames[month] }}</h3>
|
||||||
|
|
||||||
{% for note in notes[year][month] %}
|
{% for note in notes[year][month] %}
|
||||||
<h4><a href="/notes/{{ note.slug }}">Note {{ note.slug }}</a></h4>
|
<section class="h-entry">
|
||||||
<time datetime="{{ note.publishedDate.format('c') }}">
|
<h4><a class="p-name u-url" href="/notes/{{ note.slug }}">
|
||||||
{{ note.publishedDate.format('j F Y') }}
|
Note {{ note.slug }}
|
||||||
</time>
|
</a></h4>
|
||||||
{% apply markdown_to_html %}
|
<time class="dt-published" datetime="{{ note.publishedDate.format('c') }}">
|
||||||
{{ note.content }}
|
{{ note.publishedDate.format('j F Y') }}
|
||||||
{% endapply %}
|
</time>
|
||||||
|
|
||||||
|
<section class="e-content">
|
||||||
|
{% apply markdown_to_html %}
|
||||||
|
{{ note.content }}
|
||||||
|
{% endapply %}
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|||||||
Reference in New Issue
Block a user