cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
d6fa2485fa7fa9c74f8882f1f66ddd7584645d40
unsigned
author: Christian Cleberg <hello@cleberg.net> · 2025-10-15T04:20:22Z
build.py | 5 +- content/about/index.org | 2 +- theme/static/styles.css | 115 ++++++++++++++++++++++++++++++++++++--------- theme/templates/base.html | 14 +++--- theme/templates/blog.html | 5 +- theme/templates/index.html | 3 +- theme/templates/post.html | 2 +- 7 files changed, 108 insertions(+), 38 deletions(-) @@ -162,7 +162,7 @@ def get_recent_posts_html(content_dir="./content/blog", num_posts=3): if title and date_str and slug: try: date_obj = datetime.strptime(date_str, "%Y-%m-%d") - date_full = date_obj.strftime("%B %d, %Y") + date_full = date_obj.strftime("%Y-%m-%d") except ValueError: # Skip files with invalid date format continue @@ -186,7 +186,7 @@ def get_recent_posts_html(content_dir="./content/blog", num_posts=3): # Build HTML lines lines = [] for post in recent: - lines.append('\t<div>') + lines.append('\t<div class="post">') lines.append( f'\t\t<time datetime="{post["date_str"]}">{post["date_full"]}</time>' ) @@ -194,7 +194,6 @@ def get_recent_posts_html(content_dir="./content/blog", num_posts=3): f'\t\t\t<a href="/blog/{post["slug"]}.html">{post["title"]}</a>' ) lines.append("\t</div>") - lines.append("\t<br>") return "\n".join(lines) @@ -1,7 +1,7 @@ #+title: About #+slug: index -Hey, I'm */~cmc/*. +Hey, I'm Christian. I'm a technology audit manager, working on financial statement audits (SOX/MAR), SOC 1-3 reports, and other attestations for KPMG. @@ -1,16 +1,73 @@ +:root { + --bg: #fafafa; + --bg-light: #f0f0f0; + --fg: #1b2229; + --fg-light: #383a42; + --link: #014980; + --code: #e45649; +} + body { - max-width: 50em; - margin: 1.5rem; + 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.4rem; + margin: 1.5rem; + max-width: 45em; +} + +a { + padding: 0 0.15rem; + text-decoration: none; +} + +a,a:active { + color: var(--link); +} + +a:hover { + background-color: var(--link); + color: var(--bg); +} + +h1,h2,h3,h4,h5,h6 { + color: var(--fg); + font-size: 1rem; + text-transform: uppercase; +} + +nav { + align-items: center; + display: flex; + justify-content: space-around; + width: 100%; } nav ul { - list-style-type: none; - display: flex; - padding: 0; + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; } nav ul li { - margin-right: 0.5rem; + height: 100%; + margin-bottom: 0.5rem; + margin-right: 0.5rem; + text-align: center; +} + +blockquote { + background-color: var(--bg-light); + border-left: 8px solid var(--link); + margin: 1rem 0; + padding: 0.5rem 1rem; +} + +blockquote p { + margin: 0; } img { @@ -19,11 +76,15 @@ img { } table { - border: 1px solid #111; + border: 1px dotted var(--fg); border-collapse: collapse; width: 100%; } +colgroup, thead, tbody { + border: 1px dotted var(--fg); +} + pre, pre>code, code { @@ -31,31 +92,41 @@ code { } pre { - border: 1px solid #111; + border: 1px dotted var(--fg); margin: 0.5rem 0; - padding: 0.5rem; overflow-x: auto; + padding: 0.5rem; } time { - display: block; + margin-right: 0.5rem; } :not(pre)>code { - color: #f00; + color: var(--code); } -@media (prefers-color-scheme: dark) { - body { - background-color: #222; - color: #eee; - } - - a { - color: #add8e6; - } +.post { + align-items: flex-start; + display: flex; + margin: 0.5rem 0; +} + +.post time { + margin-right: 1rem; +} + +footer { + margin: 1rem 0; +} - pre { - border-color: #eee; +@media (prefers-color-scheme: dark) { + :root { + --bg: #000000; + --bg-light: #1B2229; + --fg: #DFDFDF; + --fg-light: #BBC2CF; + --link: #047ACE; + --code: #FF6C6B; } } \ No newline at end of file @@ -19,18 +19,18 @@ <body> <nav aria-label="site-nav" role="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>{% block main %}{% endblock %}</main> <footer> - <a href="https://stats.uptimerobot.com/OwOWs7HU0z">Status</a> · + <a href="https://stats.uptimerobot.com/OwOWs7HU0z">status</a> · <a href="https://git.cleberg.net/cleberg.net.git" target="_blank" - rel="noopener">Source</a> · - <a href="/feed.xml">RSS</a> + rel="noopener">source</a> · + <a href="/feed.xml">rss</a> </footer> </body> </html> @@ -10,11 +10,10 @@ main %} </p> <br> {% for post in posts %} -<div> +<div class="post"> <time datetime='{{ post.date | strftime("%Y-%m-%d") }}' - >{{ post.date|strftime("%B %d, %Y") }}</time + >{{ post.date|strftime("%Y-%m-%d") }}</time > <a href='{{ url_for("blog", slug=post.slug) }}'>{{ post.title }}</a> </div> -<br> {% endfor %} {% endblock %} @@ -1,6 +1,6 @@ {% extends "base.html" %} {% block main %} <section> - <h1><i>Hi, I'm Christian.</i></h1> + <h1><i>christian cleberg</i></h1> <blockquote> <b>shouganai</b> <br>[sho-ga-n-eye] | しょうがない @@ -12,5 +12,6 @@ <h2>Recent Posts</h2> <!-- BEGIN_POSTS --> <!-- END_POSTS --> + <p><a href="/blog/">All Posts →</a></p> </section> {% endblock %} @@ -12,7 +12,7 @@ <h1>{{ post.title }}</h1> {% if post.date is defined %} <time datetime='{{ post.date|strftime("%Y-%m-%d") }}' - >{{ post.date|strftime("%A, %B %d, %Y %H:%M:%S") }}</time + >{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time > {% endif %} </section>