fit.zkbro progress

2026-02-07 08:24

I've been making some progress on my activity site:

After a false start using a Zola template that was bloated with too many functions I didn't need, I decided to start again from scratch without any template, just doing a zola init and building from there. I figured it'd be good to reacquaint myself with HTML and CSS basics again. I am so glad I made that decision.

I'm learning a lot about flexboxes again. I'd really be buggered without them. As well as the one just linked, this interactive guide has helped me visualise all the functions. I've played around with box-shadows too.

Regarding colours, I originally wanted to keep it warm and light with a pastel theme, but as I added them in I wasn't satisfied. Instead I've angled more towards a neon theme for the main content backgrounds. I'm no designer so it's probably disgusting to some, but I'm happy with it. I am not completely sold on the white text in front of the "red" background.

Same with font. I have no idea about font. I seem to be never happy with any of them. The subtleties and endless options are too much for me. I ended up just copying a font-stack off one of the Zola templates. I'll probably circle back to that at a later stage.

Back to the colours. A key thing I wanted was to differentiate between activity types on the main page using different background colours for the cards, and each activity styled in a way that suits that activity type. For example, any activity with location data associated (runs, hikes, rides etc) will display a map, while a workout will just show some core details. I also want to add notes from occasion. This solution on the Zola forum helped stear me in the right direction. It utilises sections as a means to differentiate between activity types/posts. This is the code I ended up with so far:

{% set section1 = get_section(path="section1/_index.md") %}
{% set section2 = get_section(path="section2/_index.md") %}
{% set section3 = get_section(path="section3/_index.md") %}
  {% set feed = section1.pages | concat(with=section2.pages) | concat(with=section3.pages) %}
  {% for page in feed | sort(attribute="date") | reverse %}
    {% set section = page.components | first %}
    {% if section == "section1" %}
      <article class="section1">
        <div class="section1-header">
          <h2><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h2>
          <p>{% include "partials/article_extra_meta.html" %}</p>
        </div>
        <div class="section1-sub">
          <p>{% include "partials/article_meta.html" %}</p>
        </div>
        <div class="section1-sub">
          <iframe width="100%" height="200" src={{ page.extra.map }}></iframe>
        </div>
      </article>
    {% endif %}
    {% if section == "section2" %}
      <article class="section2">
        <h2><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h2>
        <p>{% include "partials/article_meta.html" %}</p>
      </article>
    {% endif %}
    {% if section == "section3" %}
      <article class="section3">
        <h2><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h2>
        <div class="section3-sub">
          <p>{% include "partials/article_meta.html" %}</p>
        </div>
        <p>{{ page.content | safe }}</p>
      </article>
    {% endif %}
  {% endfor %}

Note the different layouts under each "section". I have a few ideas to utilise this layout for other websites so will circle back and save a template for future use. One idea is a stream of my own sites. Since I'm splitting these activity posts into a whole new site, they will no longer be part of the same website, so using this format, I could probably pull in RSS feeds from different sources and categorise them into these "sections", format appropriately, and have a single stream of everything. Anyway, future project.

That's it, progress is going well. Still a fair bit to go in. I haven't integrated the duckdb database yet, but that shouldn't be too hard. I'll just have to modify some scripts that create the activity pages, then run it on all 3000+ activities! The "Stats" page is a blank slate though, which is where more fun will happen. The database I have set up will make retrieving that info quite easy.