roundabout,
created on Sunday, 4 May 2025, 12:06:52 (1746360412),
received on Sunday, 4 May 2025, 12:07:24 (1746360444)
Author identity: vlad <vlad.muntoiu@gmail.com>
ba2300075f8061c25d494e681e6e6b45add504c2
static/style.css
@@ -67,11 +67,12 @@ body {
font-weight: 550;
}
a:hover:not(nav a) {
a:is(:hover, :focus):not(nav a) {
background: #B2DFDB;
color: #00796B;
border-radius: 0.25rem;
text-decoration: none;
outline: none;
}
header {
@@ -82,6 +83,7 @@ header {
background: #eceff1;
display: flex;
justify-content: center;
z-index: 2;
}
nav {
@@ -140,8 +142,38 @@ nav > ul > li > a {
text-shadow: none !important;
}
nav > ul > li > a:hover {
nav > ul > li > a:is(:hover, :focus) {
text-decoration: underline;
outline: none;
}
#skip-link {
font-size: 1.75rem;
line-height: 2rem;
text-transform: uppercase;
font-family: "Romanian League Gothic", sans-serif;
font-weight: normal;
text-decoration: none;
text-shadow: none !important;
text-decoration-thickness: 0.125em;
position: absolute;
transform: scaleY(0);
transform-origin: top;
background: #009688;
color: #ffffff;
padding: 0.5rem;
border-radius: 0;
}
@media (prefers-reduced-motion: no-preference) {
#skip-link {
transition: transform 200ms;
}
}
#skip-link:focus {
transform: scaleY(1);
z-index: 3;
}
footer {
@@ -395,6 +427,7 @@ img:not(.article-image) {
aspect-ratio: 64/27;
object-fit: cover;
position: relative;
z-index: 0;
top: -1rem;
left: -1rem;
}
@@ -414,3 +447,49 @@ img:not(.article-image) {
.tag {
text-decoration: none;
}
p {
margin: 1lh 0;
}
.content-area p:first-child {
margin-top: 0;
}
.content-area p:last-child {
margin-bottom: 0;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
body, header {
background: #37474F;
color: #ffffff;
}
.content-area {
background: #455A64;
color: #ffffff;
}
nav > ul > li > a {
color: #f5f5f5;
}
:is(a:link, a:visited):not(nav a), #mail-link {
color: #80CBC4;
}
a:is(:hover, :focus):not(nav a) {
background: #607D8B;
color: #B2DFDB;
}
h1 {
border-bottom: 0.5px solid #ffffff;
}
.article-title, .article-title a:link, .article-title a:visited {
color: #4DB6AC;
}
blockquote {
border-top: 0.5px solid #80CBC4;
border-bottom: 0.5px solid #80CBC4;
}
}
templates/default.html
@@ -8,6 +8,7 @@
</head>
<body>
<header>
<a href="#main" id="skip-link">Skip navigation</a>
<nav>
<ul>
<li><a href="/">Home</a></li>
@@ -21,7 +22,7 @@
</ul>
</nav>
</header>
<main>
<main id="main">
{% block content %}<article class="content-area">{{ document.content }}</article>{% endblock %}
</main>
<footer>