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

Add footer

Browse source
This commit is contained in:
arne 2022-02-25 10:44:42 +01:00
commit e9f425cd5e
2 changed files with 49 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/_includes/root.njk
View file

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<main class="{{ page.url | pageClasses }}"> <main class="{{ page.url | pageClasses }}">
<header><a href="/" 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>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
{% block sidebar %} {% block sidebar %}
@ -18,6 +18,11 @@
<article> <article>
{{ content | safe }} {{ content | safe }}
</article> </article>
<footer>
None of your personal data is transferred to third party servers while using these websites. Your IP address is <a href="https://manual.uberspace.de/web-logs/#privacy">anonymized, logged, and stored for 7 days</a>. This allows me to get an impression of the popularity of individual pages.
Contents are <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA</a> unless noted otherwise.
</footer>
</main> </main>
</body> </body>
</html> </html>

49
src/assets/style.scss
View file

@ -26,6 +26,8 @@ body {
font-family: monospace; font-family: monospace;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
display: flex;
min-height: 100vh;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -84,14 +86,14 @@ main {
max-width: 960px; max-width: 960px;
margin: 48px; margin: 48px;
grid-gap: 32px; grid-gap: 32px;
// grid-auto-rows: 1fr;
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-areas: grid-template-areas:
"header header header header" "header header header header"
"aside content content content"; "aside content content content"
"footer footer footer footer";
grid-auto-flow: dense; grid-auto-flow: dense;
p { p {
text-align: justify text-align: justify
} }
@ -115,11 +117,12 @@ main {
main { main {
max-width: unset; max-width: unset;
margin: 32px; margin: 32px;
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: minmax(0, 1fr);
grid-template-areas: grid-template-areas:
"header" "header"
"aside" "aside"
"content"; "content"
"footer";
} }
} }
@ -168,18 +171,52 @@ article {
} }
} }
footer {
grid-area: footer;
color: #aaa;
padding-top: 48px;
border-top: 1px dotted #aaa;
a {
color: #888;
background: #88888822;
box-shadow: .3em 0 0 #88888822,
-.3em 0 0 #88888822;
&:hover {
background: #88888844;
box-shadow: .3em 0 0 #88888844,
-.3em 0 0 #88888844;
}
}
}
// special page styling // special page styling
.home { .home {
grid-template-areas: grid-template-areas:
"header header header header" "header header header header"
"aside aside aside aside"; "aside aside aside aside"
"footer footer footer footer";
aside { aside {
nav {
padding-bottom: 16px;
}
a {
// let post titles break
display: inline;
}
ul { ul {
list-style: inside; list-style: inside;
padding: 0 0 0 16px; padding: 0 0 0 16px;
margin: 0 0 32px; margin: 0 0 32px;
&:last-of-type {
margin-bottom: 0;
}
} }
} }