Compleet
99 lines
2.0 KiB
Plaintext
99 lines
2.0 KiB
Plaintext
---
|
|
import { site } from '../site.config';
|
|
---
|
|
|
|
<footer>
|
|
<div class="shell footer-grid">
|
|
<div>
|
|
<p class="footer-title">{site.title}</p>
|
|
<p>{site.description}</p>
|
|
</div>
|
|
<div>
|
|
<p class="footer-label">Read independently</p>
|
|
<a href="/rss.xml">RSS feed</a><br />
|
|
<a href={site.repositoryUrl}>Public repository</a>
|
|
</div>
|
|
<div>
|
|
<p class="footer-label">Editorial record</p>
|
|
<a href={`${site.repositoryUrl}/src/branch/main/EDITORIAL.md`}>Commitments</a><br />
|
|
<a href={`${site.repositoryUrl}/commits/branch/main`}>Revision history</a>
|
|
</div>
|
|
</div>
|
|
<div class="shell colophon">
|
|
<span>© {new Date().getFullYear()} Ana</span>
|
|
<span>Static HTML · no accounts · no tracking scripts</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<style>
|
|
footer {
|
|
margin-top: 7rem;
|
|
padding: 3.5rem 0 1.5rem;
|
|
border-top: 1px solid var(--ink);
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr;
|
|
gap: 3rem;
|
|
}
|
|
|
|
p {
|
|
max-width: 38rem;
|
|
margin: 0.25rem 0;
|
|
color: #bcb8af;
|
|
}
|
|
|
|
.footer-title {
|
|
color: var(--paper);
|
|
font-family: 'Newsreader', Georgia, serif;
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.footer-label {
|
|
margin-bottom: 0.75rem;
|
|
color: #8e8a82;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
a {
|
|
color: var(--paper);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
a:hover {
|
|
color: #9fb8d4;
|
|
}
|
|
|
|
.colophon {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-top: 3rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #393937;
|
|
color: #8e8a82;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.66rem;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.footer-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.colophon {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|