near/arnes.space
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add metadata layout section

Browse source
This commit is contained in:
arne 2022-03-03 20:01:48 +01:00
commit 6d60b910e1
4 changed files with 38 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/_data/page.js
View file

@ -1,6 +1,7 @@
module.exports = config => {
return {
"title": "arnes.space",
"baseUrl": "https://arnes.space"
"baseUrl": "https://arnes.space",
"repo": "https://git.arnes.space/arne/arnes.space"
}
}

18
src/_includes/posts.njk
View file

@ -1,14 +1,14 @@
{% extends "root.njk" %}
{% block sidebar %}
<dl>
<dt>Published on</dt>
<dd><time datetime="{{page.date}}">{{page.date | toISODate}}</time></dd>
{% if commit.date and ((commit.date | toISODate) !== (page.date | toISODate)) %}
<dt>Last updated on</dt>
<dd><a href="https://git.arnes.space/arne/arnes.space/commit/{{commit.hash}}"><time datetime="{{commit.date}}">{{commit.date | toISODate}}</time></a></dd>
{% endif %}
</dl>
{% block metadata %}
<ul>
<li>Published on <time datetime="{{page.date}}">{{page.date | toISODate}}</time></li>
{%- if commit.date and ((commit.date | toISODate) !== (page.date | toISODate)) -%}
<li>Last updated on <a href="{{page.repo}}/commit/{{commit.hash}}"><time datetime="{{commit.date}}">{{commit.date | toISODate}}</time></a></li>
{%- endif -%}
</ul>
{% endblock %}
{% block sidebar %}
<a href="{{ "/" | url }}">← Home</a>
{% endblock %}

6
src/_includes/root.njk
View file

@ -10,7 +10,11 @@
<body>
<main class="{{ page.url | pageClasses }}">
<header><a href="{{ '/' | url }}" title="Back to the homepage">{{ content | header | safe }}</a></header>
<aside>
<aside class="metadata" role="contentinfo">
{% block metadata %}
{% endblock %}
</aside>
<aside class="navigation" role="navigation">
<h1>{{ page.title }}</h1>
{% block sidebar %}
{% endblock %}

42
src/assets/style.scss
View file

@ -88,11 +88,12 @@ main {
width: 100%;
max-width: 960px;
padding: 48px;
grid-gap: 32px;
row-gap: 48px;
column-gap: 32px;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: auto minmax(0, 1fr) auto; // grow the content area, shrink the other ones
grid-template-areas:
"header empty empty empty"
"header metadata metadata metadata"
"aside content content content"
"footer footer footer footer";
grid-auto-flow: dense;
@ -107,13 +108,28 @@ header {
a {
border: none;
display: block;
&:hover {
background: none;
}
}
}
aside {
aside.metadata {
grid-area: metadata;
display: flex;
justify-content: flex-start;
align-items: flex-end;
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
}
aside.navigation {
grid-area: aside;
ul {
@ -162,7 +178,6 @@ footer {
border-top: 1px dotted #aaa;
}
@media screen and (max-width: 768px) {
body {
font-size: 14px;
@ -181,10 +196,12 @@ footer {
main {
max-width: unset;
padding: 32px;
row-gap: 32px;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"header"
"aside"
"metadata"
"content"
"footer";
}
@ -209,34 +226,19 @@ footer {
}
}
// special page styling
.home {
grid-template-areas:
"header empty empty empty"
"header metadata metadata metadata"
"aside aside aside aside"
"footer footer footer footer";
aside {
nav {
padding-bottom: 16px;
}
a {
padding-left: .3em;
padding-right: .3em;
}
ul {
list-style: inside;
padding: 0 0 0 16px;
margin: 0 0 32px;
&:last-of-type {
margin-bottom: 0;
}
}
}
article { display: none; }