fnordig/blog
1
Fork 0
Code Activity

Compare commits

...

13 commits
1099dbdd8b ... 71d551c305

Author SHA1 Message Date
Jan-Erik Rediger
71d551c305 Updated posts list for posts by tag 2025-03-30 12:24:13 +02:00
Jan-Erik Rediger
261ddc6f6a ensure there's less newlines 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
804953cbd1 small border in between 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
42961957c5 add correct datetime 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
1454973f77 better coloring for the bars 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
a963c3896b Post lists with date below 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
2537faf77c maybe better with sans-serif now? 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
1b3ea99b50 global font spec 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
533c506eea set link color for these links 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
8939e7e02a link id 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
a3f5ecc475 Revert "add an arrow to jump to the top" 
This reverts commit 6c4504e766b5bed6e9c12c7f20e3a3adf9b19346.
 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
7f2b61fb1f add an arrow to jump to the top 2025-03-30 12:15:57 +02:00
Jan-Erik Rediger
23657a4629 Add an archive chart 
based on https://blog.jim-nielsen.com/archive/
 2025-03-30 12:15:57 +02:00
6 changed files with 165 additions and 39 deletions

2
_layouts/post.liquid
View file

@ -6,7 +6,7 @@
<body> <body>
{% include "_menu.liquid" %} {% include "_menu.liquid" %}
<main> <main id="top">
<article> <article>
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
{% assign reading_wpm = 200 %} {% assign reading_wpm = 200 %}

71
posts.liquid
View file

@ -8,23 +8,60 @@ data:
<a href="/tagged/">Post by tag</a> <a href="/tagged/">Post by tag</a>
{% assign years = "2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011" | split: ", " %} {% assign years = "2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011" | split: ", " -%}
<table> {% assign maxcount = 0 -%}
{% for year in years -%} {% for year in years -%}
<tr> {% assign count = 0 -%}
<td>&nbsp;</td> {%- for post in collections.posts.pages -%}
<td><h2>{{year}}</h2></td> {%- assign postyear = post.published_date | date: "%Y" -%}
</tr> {%- if postyear == year -%}
{% assign count = count | plus: 1 -%}
{% endif -%}
{% endfor -%}
{% if count > maxcount -%}
{% assign maxcount = count -%}
{% endif -%}
{% endfor -%}
{%- for post in collections.posts.pages %} <p>A count of all posts by year — {{ years|size }} years running!</p>
{%- assign postyear = post.published_date | date: "%Y" %}
{%- if postyear == year %}
<tr>
<td>{{ post.published_date | date: "%d. %b"}}</td>
<td><a href="/{{post.permalink }}">{{post.title}}</a></td>
</tr>
{%- endif %}
{%- endfor %}
{%- endfor %} <ol class="archive-chart">
</table> {% for year in years -%}
{% assign count = 0 -%}
{%- for post in collections.posts.pages -%}
{%- assign postyear = post.published_date | date: "%Y" -%}
{%- if postyear == year -%}
{% assign count = count | plus: 1 -%}
{% endif -%}
{% endfor -%}
<li>
<a href="#{{year}}">
<span>{{year}}</span>
<span>{{count}}</span>
</a>
{% assign u = count | times: 100 -%}
{% assign w = u | divided_by: maxcount -%}
<span class="archive-chart-bar" style="width:{{w}}%"></span>
</li>
{% endfor -%}
</ol>
{% for year in years -%}
<h2 id="{{year}}">{{year}}</h2>
<ul class="posts-list">
{%- for post in collections.posts.pages -%}
{% assign postyear = post.published_date | date: "%Y" -%}
{% if postyear == year %}
<li>
<a href="/{{post.permalink }}">
<span>{{post.title}}</span>
<span>
<time datetime="{{ post.published_date | date: "%FT%T%z" }}">{{ post.published_date | date: "%Y-%m-%d"}}</time>
</span>
</a>
</li>
{% endif -%}
{% endfor -%}
</ul>
{% endfor -%}

83
style.css
View file

@ -24,8 +24,12 @@
font-weight: bold; font-weight: bold;
} }
:root {
--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
html{ html{
font-family:Crimson,Palatino,Georgia,Lucida Bright,Book Antiqua,serif; font-family: var(--font);
font-size:16px; font-size:16px;
line-height:1.5rem line-height:1.5rem
} }
@ -37,6 +41,7 @@ html[data-theme='light'] {
--alt-text-color: black; --alt-text-color: black;
--code-bg: rgba(0,0,0,.05);; --code-bg: rgba(0,0,0,.05);;
--border-color: rgba(0,0,0,.05); --border-color: rgba(0,0,0,.05);
--bar-color: rgba(0,0,0,.05);
--link-color: #00e; --link-color: #00e;
--link-color-visited: #60b; --link-color-visited: #60b;
--inline-code: #111; --inline-code: #111;
@ -48,6 +53,7 @@ html[data-theme='dark'] {
--alt-text-color: #999999; --alt-text-color: #999999;
--code-bg: #ccc; --code-bg: #ccc;
--border-color: #414141; --border-color: #414141;
--bar-color: #232b34;
--link-color: #478be6; --link-color: #478be6;
--link-color-visited: #c988ff; --link-color-visited: #c988ff;
--inline-code: #323232; --inline-code: #323232;
@ -285,11 +291,11 @@ blockquote p {
} }
h2 { h2 {
font: 600 30px "Crimson", Georgia, serif; font: 600 30px var(--font);
} }
h3 { h3 {
font: 600 20px "Crimson", Georgia, serif; font: 600 20px var(--font);
} }
.clearfix:after { .clearfix:after {
@ -326,3 +332,74 @@ h3 {
table { margin: 0; } table { margin: 0; }
table, tr, td { border: none; } table, tr, td { border: none; }
.archive-chart {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
gap: calc(2rem / 18);
}
.archive-chart li {
list-style: none;
}
.archive-chart li {
position: relative;
}
.archive-chart li a {
display: flex;
justify-content: space-between;
align-items: center;
padding: calc(6rem / 18);
position: relative;
z-index: 2;
text-decoration: none;
color: var(--link-color);
}
.archive-chart li a:hover span:first-child {
text-decoration: underline;
}
.archive-chart li a span:last-child {
color: var(--text-color);
font-size: .8rem;
}
.archive-chart-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: var(--bar-color);
pointer-events: none;
z-index: 1;
}
ol.archive-chart,
ul.posts-list {
padding-left: 0;
}
.posts-list li {
list-style: none;
}
.posts-list li:not(:last-child) {
border-bottom: 1px solid var(--border-color);
}
.posts-list li a {
display: flex;
flex-direction: column;
text-decoration: none;
padding: calc(12rem / 18) 0px;
}
.posts-list li a:hover span:first-child {
text-decoration: underline;
}
.posts-list span:first-child {
font-size: 1.1rem;
}
.posts-list span:last-child {
font-size: 0.8rem;
}

16
tagged/mozilla.liquid
View file

@ -8,14 +8,18 @@ data:
<a href="/tagged/mozilla.xml">RSS Feed</a> <a href="/tagged/mozilla.xml">RSS Feed</a>
<table> <ul class="posts-list">
{%- for post in collections.posts.pages %} {%- for post in collections.posts.pages %}
{%- assign postyear = post.published_date | date: "%Y" %} {%- assign postyear = post.published_date | date: "%Y" %}
{%- if post.tags and post.tags contains "mozilla" -%} {%- if post.tags and post.tags contains "mozilla" -%}
<tr> <li>
<td>{{ post.published_date | date: "%d. %b %Y"}}</td> <a href="/{{post.permalink }}">
<td><a href="/{{post.permalink }}">{{post.title}}</a></td> <span>{{post.title}}</span>
</tr> <span>
<time datetime="{{ post.published_date | date: "%FT%T%z" }}">{{ post.published_date | date: "%Y-%m-%d"}}</time>
</span>
</a>
</li>
{%- endif %} {%- endif %}
{%- endfor %} {%- endfor %}
</table> </ul>

16
tagged/nix.liquid
View file

@ -8,14 +8,18 @@ data:
<a href="/tagged/nix.xml">RSS Feed</a> <a href="/tagged/nix.xml">RSS Feed</a>
<table> <ul class="posts-list">
{%- for post in collections.posts.pages %} {%- for post in collections.posts.pages %}
{%- assign postyear = post.published_date | date: "%Y" %} {%- assign postyear = post.published_date | date: "%Y" %}
{%- if post.tags and post.tags contains "nix" -%} {%- if post.tags and post.tags contains "nix" -%}
<tr> <li>
<td>{{ post.published_date | date: "%d. %b %Y"}}</td> <a href="/{{post.permalink }}">
<td><a href="/{{post.permalink }}">{{post.title}}</a></td> <span>{{post.title}}</span>
</tr> <span>
<time datetime="{{ post.published_date | date: "%FT%T%z" }}">{{ post.published_date | date: "%Y-%m-%d"}}</time>
</span>
</a>
</li>
{%- endif %} {%- endif %}
{%- endfor %} {%- endfor %}
</table> </ul>

16
tagged/rust.liquid
View file

@ -8,14 +8,18 @@ data:
<a href="/tagged/rust.xml">RSS Feed</a> <a href="/tagged/rust.xml">RSS Feed</a>
<table> <ul class="posts-list">
{%- for post in collections.posts.pages %} {%- for post in collections.posts.pages %}
{%- assign postyear = post.published_date | date: "%Y" %} {%- assign postyear = post.published_date | date: "%Y" %}
{%- if post.tags and post.tags contains "rust" -%} {%- if post.tags and post.tags contains "rust" -%}
<tr> <li>
<td>{{ post.published_date | date: "%d. %b %Y"}}</td> <a href="/{{post.permalink }}">
<td><a href="/{{post.permalink }}">{{post.title}}</a></td> <span>{{post.title}}</span>
</tr> <span>
<time datetime="{{ post.published_date | date: "%FT%T%z" }}">{{ post.published_date | date: "%Y-%m-%d"}}</time>
</span>
</a>
</li>
{%- endif %} {%- endif %}
{%- endfor %} {%- endfor %}
</table> </ul>