cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
54d9fe35c7eab5caa7634b391d07eba76804fdc5
unsigned
author: Christian Cleberg <hello@cleberg.net> · 2025-11-22T22:49:30Z
theme/static/styles.css | 257 ++++++++++++++++++++++++++++++++++++++------- theme/templates/base.html | 14 +-- theme/templates/index.html | 18 ++-- theme/templates/post.html | 11 +- 4 files changed, 238 insertions(+), 62 deletions(-) @@ -3,7 +3,7 @@ --bg-light: #f0f0f0; --fg: #1b2229; --fg-light: #383a42; - --link: #014980; + --link: #0f62fe; --code: #8c2117; } @@ -11,83 +11,150 @@ body { background-color: var(--bg); color: var(--fg-light); font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace; - font-size: 0.9rem; - line-height: 1.5; + font-size: 0.85rem; + line-height: 1.4; margin: 0 auto; max-width: 45em; padding: 1.5rem; } -a { - padding: 0 0.15rem; +a, +a:active { + color: var(--link); +} + +a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"]) { + display: inline; +} + +a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::before { + background-color: var(--bg); + color: var(--fg); + content: "["; + display: inline-block; + padding-right: 0.15em; + pointer-events: none; + position: relative; text-decoration: none; + z-index: 1; } -a,a:active { - color: var(--link); +a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::after { + background-color: var(--bg); + color: var(--fg); + content: "]"; + display: inline-block; + padding-left: 0.15em; + pointer-events: none; + position: relative; + text-decoration: none; + z-index: 1; } -a:hover { - background-color: var(--link); - color: var(--bg); +h1, +h2, +h3, +h4, +h5, +h6, +nav, +time, +code, +pre, +.metadata-block { + font-family: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace; } -h1,h2,h3,h4,h5,h6 { +h1, +h2, +h3, +h4, +h5, +h6 { color: var(--fg); - font-size: 1rem; - text-transform: uppercase; + font-size: 0.85rem; + font-weight: bold; + margin-bottom: 1rem; + margin-top: 1rem; +} + +h1 { + font-size: 0.85rem; } .skip-link { - position: absolute; + height: 1px; left: -10000px; + overflow: hidden; + position: absolute; top: auto; width: 1px; - height: 1px; - overflow: hidden; } .skip-link:focus { + height: auto; position: static; width: auto; - height: auto; } nav { - align-items: center; - display: flex; - justify-content: space-around; - width: 100%; + align-items: center; + display: flex; + justify-content: space-around; + margin: 3rem 0; + width: 100%; } nav ul { - display: flex; - list-style-type: none; - margin: 0; - padding: 0; - width: 100%; + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; } nav ul li { height: 100%; margin-bottom: 0.5rem; - margin-right: 0.5rem; - text-align: center; + margin-right: 1rem; + text-align: center; } -blockquote, -.reply-link { +.context-box { + background-color: var(--bg-light); + color: var(--fg); + display: grid; + font-size: 0.85rem; + grid-template-columns: auto 1fr; + gap: 0.5rem 1rem; + margin-bottom: 3rem; + margin-top: 3rem; + padding: 1rem; +} + +.context-label { + color: var(--link); + font-weight: bold; + text-transform: uppercase; +} + +blockquote { background-color: var(--bg-light); border-left: 8px solid var(--link); margin: 1rem 0; padding: 0.5rem 1rem; } -blockquote p, -.reply-link p { +blockquote p { margin: 0; } +.reply-link { + border: 1px dotted var(--fg-light); + margin-top: 3rem; + padding: 0.5rem 1rem; +} + img { border-style: none; width: 100%; @@ -99,18 +166,20 @@ table { width: 100%; } -colgroup, thead, tbody { +colgroup, +thead, +tbody { border: 1px dotted var(--fg); } pre, pre>code, code { - font-size: 0.9rem; + font-size: 0.85rem; } pre { - border: 1px dotted var(--fg); + background-color: var(--bg-light); margin: 0.5rem 0; overflow-x: auto; padding: 0.5rem; @@ -132,11 +201,125 @@ time { .post time { flex-shrink: 0; + font-size: 0.85rem; margin-right: 1rem; } +article { + border-bottom: 1px dotted var(--fg-light); + margin-bottom: 3rem; + padding-bottom: 3rem; +} + +p { + margin-top: 0.5rem; + margin-bottom: 1rem; +} + footer { - margin: 1rem 0; + margin: 3rem 0; +} + +#table-of-contents { + border: 1px dotted var(--fg-light); + font-family: Menlo, Consolas, Monaco, "Liberation Mono", monospace; + font-size: 0.85rem; + margin-bottom: 3rem; + margin-top: 3rem; + max-width: 100%; + padding: 3rem; +} + +#table-of-contents h2 { + border: none; + font-family: inherit; + font-size: 0.85rem; + text-transform: none; + font-weight: normal; + margin-bottom: 1rem; + margin-top: 0; + padding: 0; +} + +#text-table-of-contents ul { + list-style: none; + padding-left: 0; + margin: 0; +} + +#text-table-of-contents ul ul { + padding-left: 2ch; +} + +#text-table-of-contents li a { + align-items: baseline; + display: flex; + padding: 0.2rem 0; +} + +#text-table-of-contents li a::after { + background-image: radial-gradient(circle, var(--fg-light) 1px, transparent 1px); + background-position: 0 bottom; + background-repeat: repeat-x; + background-size: 8px 100%; + border-bottom: none; + content: ""; + flex-grow: 1; + height: 4px; + margin-left: 1ch; + opacity: 0.6; + padding-left: 1ch; + text-align: right; +} + +#text-table-of-contents li a:hover { + background-color: transparent; + color: var(--link); +} + +#text-table-of-contents ul { + list-style: none; + margin: 0; + padding-left: 0; +} + +#text-table-of-contents ul ul { + margin-top: 0.2rem; + padding-left: 3ch; +} + +.outline-2 ul li { + list-style: none; +} + +.outline-2 ul li::before { + color: var(--fg-light); + content: "- "; +} + +.outline-2 { + + p, + ul, + ol, + blockquote, + pre { + margin-left: 3ch; + } + + blockquote p { + margin-left: 0; + } +} + +.recent-posts { + h2 { + margin-bottom: 1.5rem; + } + + p { + margin-top: 1.5rem; + } } @media (prefers-color-scheme: dark) { @@ -148,4 +331,4 @@ footer { --link: #67C0FF; --code: #FF6C6B; } -} +} \ No newline at end of file @@ -22,17 +22,17 @@ </div> <nav aria-label="Site Navigation"> <ul> - <li><a href="/">/home</a></li> - <li><a href="/about/">/about</a></li> - <li><a href="/blog/">/blog</a></li> - <li><a href="/services/">/services</a></li> + <li><a href="/">Home</a></li> + <li><a href="/about/">About</a></li> + <li><a href="/blog/">Blog</a></li> + <li><a href="/services/">Services</a></li> </ul> </nav> <main id="main">{% block main %}{% endblock %}</main> <footer> - <a href="https://stats.uptimerobot.com/OwOWs7HU0z">status</a> · - <a href="https://git.cleberg.net/cleberg.net.git">source</a> · - <a href="/feed.xml">rss</a> + <a href="https://stats.uptimerobot.com/OwOWs7HU0z">Status</a> · + <a href="https://git.cleberg.net/cleberg.net.git">Source</a> · + <a href="/feed.xml">RSS</a> </footer> </body> </html> @@ -1,17 +1,13 @@ {% extends "base.html" %} {% block main %} -<section> - <h1>christian cleberg</h1> - <blockquote> - <b>shouganai</b> - <br>[sho-ga-n-eye] | しょうがない - <br><br> - <i>it is what it is</i> - </blockquote> +<section class="context-box"> + <span class="context-label">User:</span> <span>Christian Cleberg <hello@cleberg.net></span> + <span class="context-label">Context:</span> <span>Technology Assurance Manager</span> + <span class="context-label">Status:</span> <span>Active</span> </section> -<section> +<section class="recent-posts"> <h2>Recent Posts</h2> <!-- BEGIN_POSTS --> <!-- END_POSTS --> - <p><a href="/blog/">all posts →</a></p> + <p><a href="/blog/">All Posts →</a></p> </section> -{% endblock %} +{% endblock %} \ No newline at end of file @@ -8,13 +8,10 @@ <meta property="og:description" content="{{ project_description }}" /> {% endif %} {% endblock %} {% block main %} <article> - <section class="post-metadata"> - <h1>{{ post.title }}</h1> - {% if post.date is defined %} - <time datetime='{{ post.date|strftime("%Y-%m-%d") }}' - >{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time - > - {% endif %} + <section class="context-box"> + <span class="context-label">Title:</span> <span>{{ post.title }}</span> + <span class="context-label">Date:</span> <span><time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time></span> + <span class="context-label">Description:</span> <span>{{ post.description }}</span> </section> <section>{{ post.html | safe }}</section> <div class="reply-link"><a href="mailto:hello@cleberg.net">Reply via email →</a></div>