cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
6a2d437c056d7e5e5b0fb8cd73fc10bf7b37b73c
unsigned
author: Christian Cleberg <hello@cleberg.net> · 2026-01-17T23:53:07Z
theme/static/styles.css | 329 ++++++---------------------------------------- theme/templates/post.html | 21 +-- 2 files changed, 42 insertions(+), 308 deletions(-) @@ -1,334 +1,81 @@ body { - border: 3px solid black; - display: flex; - flex-direction: column; - font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif; + font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace; + font-size: 0.85rem; line-height: 1.5; margin: 0 auto; - height: 100%; max-width: 50em; - min-height: 100vh; -} - -main { - flex: 1 0 auto; - margin-left: 1rem; - margin-right: 1rem; } -footer { +body { padding: 1rem; } -img { - max-width: 100%; -} - -.skip-link { - height: 1px; - left: -10000px; - overflow: hidden; - position: absolute; - top: auto; - width: 1px; -} - -.skip-link:focus { - height: auto; - position: static; - width: auto; -} - footer { - background-color: black; - border-top: 3px solid black; - color: white; -} - -footer a { - color: white; + margin: 1rem 0; } nav { - width: 100vw; - border-bottom: 3px solid black; + align-items: center; display: flex; - justify-content: center; - background-color: #0066ff; + justify-content: space-around; + margin: 1rem 0; } nav ul { - list-style: none; + display: flex; + list-style-type: none; margin: 0; padding: 0; - display: flex; width: 100%; } nav ul li { - flex: 1; -} - -nav a { - display: block; - width: 100%; - padding: 0.75rem 0; - text-align: center; - font-size: 1rem; - font-weight: 600; - color: #fff; - background-color: inherit; - text-decoration: none; - cursor: pointer; - border: none; - border-radius: 0; - transition: background 0.2s ease, - color 0.2s ease, - transform 0.1s ease; -} - -nav a:hover, -nav a:focus { - background-color: #004fcc; - outline: none; -} - -nav a:focus-visible { - box-shadow: 0 0 0 3px rgba(0,102,255,.4); -} - -nav a:active { - transform: translateY(1px); -} - -nav ul li:hover a { - background-color: #fff; - color: #0066ff; -} - -@media (max-width: 480px) { - nav a { - padding: 0.75rem 0; - } - - nav ul { - flex-direction: row !important; - flex-wrap: nowrap; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } -} - -table, -th, -td { - border: 1px solid black; -} - -thead { - background-color: blue; - color: white; - font-weight: bold; -} - -blockquote { - border: 3px solid black; - margin: 0; - margin-bottom: 1rem; - padding: 1rem; - background-color: blue; - color: white; -} - -blockquote p { - margin: 0; - padding: 0; -} - -time { - font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace; - font-size: 0.85rem; -} - -section { - border-bottom: 3px solid black; -} - -.post time { - margin-right: 0.5rem; -} - -pre { - border: 3px solid black; - background-color: lightgrey; - padding: 1rem; - max-width: 100%; - box-sizing: border-box; - overflow-x: auto; - white-space: pre; -} - -main { height: 100%; + margin-bottom: 0.5rem; + margin-right: 1rem; + text-align: center; } -section { - margin: 0 -1rem; - padding: 2rem; -} - -.post:last-of-type { - margin-bottom: 2rem; -} - -.reply-link { - padding: 2rem 0; -} - -.reply-link a { - display: inline-block; - padding: 0.75rem 1.25rem; - font-size: 1rem; - font-weight: 600; - color: #fff; - background-color: #0066ff; - border: none; - text-decoration: none; - cursor: pointer; - transition: background 0.2s ease, - transform 0.1s ease; -} - -reply-link a:hover, -reply-link a:focus { - background-color: #004fcc; - outline: none; -} - -reply-link a:focus-visible { - box-shadow: 0 0 0 3px rgba(0,102,255,.4); -} - -reply-link a:active { - transform: translateY(1px); -} - -.post-metadata { - margin: 0 auto; - padding: 1rem; - margin: 0 -1rem; -} - -.meta-row { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: baseline; - padding: 0.4rem 0; - border-bottom: 1px solid black; -} - -.meta-row:last-of-type { - border-bottom: none; -} - -.meta-label { - flex: 0 0 120px; - font-weight: bold; - color: #333; -} - -.meta-value { - flex: 1 1 auto; - color: #555; -} - -@media (max-width: 500px) { - .meta-label { - flex-basis: 100%; - margin-bottom: 0.2rem; - } - - .meta-value { - flex-basis: 100%; - } -} - -table { - width: 100%; +img { max-width: 100%; - border-collapse: collapse; - table-layout: auto; } -th, -td { - word-break: break-word; - overflow-wrap: anywhere; +pre { + border: 1px solid black; + overflow: scroll; padding: 0.5rem; } -thead { - background-color: blue; - color: white; - font-weight: bold; -} - -th, -td { - min-width: 60px; -} - -.table-fixed { - table-layout: fixed; +:not(pre) > code { + color: red; } -html, -body { - box-sizing: border-box; -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -nav { - width: 100%; - max-width: 100%; -} - -section > .inner { - margin: 0 -1rem; - padding: 2rem; +.skip-link { + height: 1px; + left: -10000px; + overflow: hidden; + position: absolute; + top: auto; + width: 1px; } -body { - overflow-x: hidden; +.skip-link:focus { + height: auto; + position: static; + width: auto; } -@media (max-width: 480px) { - nav ul { - flex-direction: row !important; - flex-wrap: nowrap; - overflow-x: auto; - -webkit-overflow-scrolling: touch; +@media (prefers-color-scheme: dark) { + body { + background-color: #000000; + color: #dfdfdf; } - nav a { - padding-left: 0.5rem; - padding-right: 0.5rem; + a { + color: #67c0ff; } -} -.post { - align-items: center; - display: flex; - margin: 0.5rem 0; -} - -.post time { - flex-shrink: 0; - margin-right: 1rem; + pre { + border-color: white; + } } @@ -8,23 +8,10 @@ <meta property="og:description" content="{{ project_description }}" /> {% endif %} {% endblock %} {% block main %} <article> - <section class="post-metadata"> - <div class="meta-row"> - <span class="meta-label">Title:</span> - <span class="meta-value">{{ post.title }}</span> - </div> - - <div class="meta-row"> - <span class="meta-label">Date:</span> - <time class="meta-value" datetime='{{ post.date | strftime("%Y-%m-%d") }}''> - {{ post.date | strftime("%Y-%m-%d %H:%M:%S") }} - </time> - </div> - - <div class="meta-row"> - <span class="meta-label">Description:</span> - <span class="meta-value">{{ post.description }}</span> - </div> + <section> + <b>Title</b>: {{ post.title }} + <br><b>Date</b>: <time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time> + <br><b>Description</b>: {{ post.description }} </section> <section>{{ post.html | safe }}</section> <div class="reply-link"><a href="mailto:hello@cleberg.net">Reply via email →</a></div>