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 => { module.exports = config => {
return { return {
"title": "arnes.space", "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" %} {% extends "root.njk" %}
{% block sidebar %} {% block metadata %}
<dl> <ul>
<dt>Published on</dt> <li>Published on <time datetime="{{page.date}}">{{page.date | toISODate}}</time></li>
<dd><time datetime="{{page.date}}">{{page.date | toISODate}}</time></dd> {%- if commit.date and ((commit.date | toISODate) !== (page.date | toISODate)) -%}
{% 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>
<dt>Last updated on</dt> {%- endif -%}
<dd><a href="https://git.arnes.space/arne/arnes.space/commit/{{commit.hash}}"><time datetime="{{commit.date}}">{{commit.date | toISODate}}</time></a></dd> </ul>
{% endif %} {% endblock %}
</dl>
{% block sidebar %}
<a href="{{ "/" | url }}">← Home</a> <a href="{{ "/" | url }}">← Home</a>
{% endblock %} {% endblock %}

6
src/_includes/root.njk
View file

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

42
src/assets/style.scss
View file

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