Redesign: red-digital theme, custom layout, drop linkita, docker dev setup

.forgejo/workflows/build.yml

@@ -1,13 +1,25 @@
 name: Build and Push Docker Image
+
 on:
   push:
     branches: [main]
+    paths:
+      - 'content/**'
+      - 'static/**'
+      - 'templates/**'
+      - 'themes/**'
+      - 'config.toml'
+      - 'docker/Dockerfile'
+      - 'docker/nginx.conf'
+      - '.forgejo/workflows/build.yml'
+    tags: ['v*']
 
 jobs:
   build:
     runs-on: docker
     container:
       image: catthehacker/ubuntu:act-latest
+
     steps:
       - uses: https://data.forgejo.org/actions/checkout@v4
         with:
@@ -26,11 +38,21 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.REGISTRY_TOKEN }}
 
+      - name: Determine tags
+        id: meta
+        run: |
+          if [[ "${{ github.ref }}" == refs/tags/v* ]]; then
+            TAG="${{ github.ref_name }}"
+            echo "tags=forge.lvl0.xyz/lvl0/lvl0-website:${TAG},forge.lvl0.xyz/lvl0/lvl0-website:latest" >> $GITHUB_OUTPUT
+          else
+            echo "tags=forge.lvl0.xyz/lvl0/lvl0-website:latest" >> $GITHUB_OUTPUT
+          fi
+
       - name: Build and push
         uses: https://data.forgejo.org/docker/build-push-action@v5
         with:
           context: .
-          file: .docker/Dockerfile
+          file: docker/Dockerfile
           platforms: linux/amd64,linux/arm64
           push: true
-          tags: forge.lvl0.xyz/lvl0/lvl0-website:latest
+          tags: ${{ steps.meta.outputs.tags }}

.forgejo/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+
+    steps:
+      - uses: https://data.forgejo.org/actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Install Zola
+        run: |
+          curl -sL https://github.com/getzola/zola/releases/download/v0.21.0/zola-v0.21.0-x86_64-unknown-linux-gnu.tar.gz \
+            | tar xz -C /usr/local/bin
+
+      - name: Build
+        run: zola build
+
+      - name: Check links
+        run: zola check --skip-external-links

README.md

@@ -2,9 +2,9 @@
 
 ## Production
 
-This is the docker-compose file needed to host this webiste:
+Pull and run the image with Docker Compose:
 
-```
+```yaml
 services:
   website:
     image: forge.lvl0.xyz/lvl0/lvl0-website:latest
@@ -12,13 +12,17 @@ services:
     ports:
       - 5002:80
     restart: unless-stopped
-networks: {}
 ```
 
+The image is built and pushed automatically on every push to `main`.
+
 ## Development
 
-Run zola:
+Enter the nix-shell, then start the dev server:
 
 ```sh
-zola serve
+nix-shell
+dev-up
 ```
+
+Site will be available at `http://localhost:1111` with live reload.

config.toml

@@ -1,24 +1,3 @@
-# The URL the site will be built for
 base_url = "https://lvl0.xyz"
 title = "lvl0"
-theme = "linkita"
-
-# Whether to automatically compile all Sass files in the sass directory
-compile_sass = true
-
-# Whether to build a search index to be used later on by a JavaScript library
 build_search_index = false
-
-[markdown]
-# Whether to do syntax highlighting
-# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
-highlight_code = false
-
-[extra]
-# Put all your custom variables here
-show_title_as_logo = true
-
-# Header menu
-menu = [
-  { name = "Announcements", url = "/announcements/" }
-]

content/_index.md

@@ -1,20 +1,4 @@
 +++
 title = "lvl0"
-template = "home.html"
+template = "index.html"
 +++
-
-**lvl0 is a starting point.**
-
-We build tiny, focused tools that support calm productivity, self-hosting, and long-term thinking.
-
-Our projects embrace minimalism and the pursuit of autonomy — in tech and life.
-
-## Current Projects
-
-**<a href="https://forge.lvl0.xyz/lvl0/fedi-feed-router" target="_blank">fedi-feed-router</a>** — A lightweight, self-hostable tool for routing and filtering fediverse feeds. Tame the firehose.
-
-**<a href="https://forge.lvl0.xyz/lvl0/buckets" target="_blank">buckets</a>** — Bucket-based budgeting. Income flows in, fills up, trickles down.
-
-## On the Horizon
-
-**convox** — A federated application platform. Early design.

content/announcements/_index.md

@@ -1,7 +0,0 @@
-+++
-title = "Announcements"
-template = "announcements.html"
-sort_by = "date"
-+++
-
-Stay updated with the latest news and releases from lvl0.

docker/Dockerfile

@@ -0,0 +1,16 @@
+FROM catthehacker/ubuntu:act-latest AS builder
+ARG TARGETARCH
+WORKDIR /site
+RUN case "$TARGETARCH" in \
+      amd64) ARCH="x86_64-unknown-linux-gnu" ;; \
+      arm64) ARCH="aarch64-unknown-linux-gnu" ;; \
+      *) echo "Unsupported architecture: $TARGETARCH" && exit 1 ;; \
+    esac && \
+    curl -sL "https://github.com/getzola/zola/releases/download/v0.21.0/zola-v0.21.0-${ARCH}.tar.gz" \
+    | tar xz -C /usr/local/bin
+COPY . .
+RUN zola build
+
+FROM nginx:alpine
+COPY --from=builder /site/public /usr/share/nginx/html
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf

docker/dev/docker-compose.yml

@@ -0,0 +1,11 @@
+services:
+  zola:
+    image: ghcr.io/getzola/zola:v0.21.0
+    container_name: lvl0-website-dev-zola
+    command: serve --interface 0.0.0.0 --port 1111 --base-url http://localhost --drafts
+    volumes:
+      - ../..:/site:Z
+    ports:
+      - "1111:1111"
+      - "1024:1024"
+    working_dir: /site

docker/nginx.conf

@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    server_name lvl0.xyz;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ =404;
+    }
+
+    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}

shell.nix

@@ -0,0 +1,58 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+let
+  repoRoot = builtins.toString ./.;
+  composeFile = "${repoRoot}/docker/dev/docker-compose.yml";
+in
+
+pkgs.mkShell {
+  buildInputs = with pkgs; [
+    zola
+    docker-compose
+    git
+  ];
+
+  shellHook = ''
+    COMPOSE_FILE="${composeFile}"
+
+    # ===================
+    # DEV COMMANDS
+    # ===================
+    dev-up() {
+      echo "Starting lvl0-website dev server..."
+      docker compose -f $COMPOSE_FILE up -d "$@"
+      echo ""
+      echo "Site available at: http://localhost:1111"
+    }
+
+    dev-down() {
+      echo "Stopping lvl0-website dev server..."
+      docker compose -f $COMPOSE_FILE down
+    }
+
+    dev-logs() {
+      docker compose -f $COMPOSE_FILE logs -f zola "$@"
+    }
+
+    dev-build() {
+      zola build
+    }
+
+    # ===================
+    # WELCOME MESSAGE
+    # ===================
+    echo ""
+    echo "================================================="
+    echo "           lvl0-website Dev Environment          "
+    echo "================================================="
+    echo ""
+    echo "Commands:"
+    echo "  dev-up       Start zola dev server (background)"
+    echo "  dev-down     Stop dev server"
+    echo "  dev-logs     Tail zola output"
+    echo "  dev-build    Build static site to /public"
+    echo ""
+    echo "Site: http://localhost:1111"
+    echo ""
+  '';
+}

static/style.css

@@ -0,0 +1,277 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap');
+
+/* ============================================================
+   Design tokens
+   ============================================================ */
+:root {
+    --background:          oklch(0.1 0 0);
+    --foreground:          oklch(0.62 0.18 30);
+    --muted:               oklch(0.5 0.1 25);
+    --subtle:              oklch(0.85 0.05 25);
+    --border:              oklch(0.62 0.18 30 / 0.3);
+    --card:                oklch(0.12 0 0);
+    --terminal-glow:       0 0 20px oklch(0.62 0.18 30 / 0.4);
+    --terminal-glow-hover: 0 0 25px oklch(0.62 0.18 30 / 0.6);
+
+    --font-mono:    'Courier New', Courier, monospace;
+    --font-display: 'Orbitron', monospace;
+
+    --container-width: 1100px;
+    --section-padding: 5rem 1.5rem;
+}
+
+/* ============================================================
+   Reset
+   ============================================================ */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+/* ============================================================
+   Base
+   ============================================================ */
+html { font-size: 16px; scroll-behavior: smooth; }
+
+body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-mono);
+    line-height: 1.7;
+    min-height: 100vh;
+}
+
+a {
+    color: var(--foreground);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+a:hover { opacity: 0.75; }
+
+h1, h2, h3 { line-height: 1.2; font-weight: bold; }
+
+/* ============================================================
+   Layout
+   ============================================================ */
+.container {
+    max-width: var(--container-width);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+}
+
+.section { padding: var(--section-padding); }
+.section--alt { background-color: var(--card); }
+
+/* ============================================================
+   Header
+   ============================================================ */
+.site-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    padding: 1rem 0;
+}
+
+.site-header .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.site-logo {
+    font-family: var(--font-display);
+    font-size: 1.5rem;
+    line-height: 1;
+    letter-spacing: 0.05em;
+    text-decoration: none;
+    text-shadow:
+        0 0 8px oklch(0.62 0.18 30 / 0.8),
+        0 0 20px oklch(0.62 0.18 30 / 0.4);
+}
+
+.site-header nav { display: flex; gap: 2rem; }
+
+.site-header nav a {
+    text-decoration: none;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+/* ============================================================
+   Hero
+   ============================================================ */
+.hero {
+    padding-block: 8rem;
+    text-align: center;
+    border-bottom: 1px solid var(--border);
+}
+
+.hero__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.hero__logo {
+    font-family: var(--font-display);
+    font-size: clamp(5rem, 15vw, 10rem);
+    line-height: 1;
+    letter-spacing: 0.05em;
+    text-shadow:
+        0 0 10px oklch(0.62 0.18 30 / 0.9),
+        0 0 30px oklch(0.62 0.18 30 / 0.6),
+        0 0 60px oklch(0.62 0.18 30 / 0.35),
+        0 0 100px oklch(0.62 0.18 30 / 0.15);
+}
+
+.hero__tagline {
+    font-family: var(--font-display);
+    font-size: 1.25rem;
+    letter-spacing: 0.1em;
+    color: var(--subtle);
+}
+
+.hero__sub {
+    font-size: 1rem;
+    color: var(--muted);
+    max-width: 48ch;
+}
+
+/* ============================================================
+   Section title
+   ============================================================ */
+.section-title {
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--muted);
+    margin-bottom: 2.5rem;
+}
+
+/* ============================================================
+   Projects
+   ============================================================ */
+.projects {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
+}
+
+.project-card {
+    border: 1px solid var(--border);
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    transition: box-shadow 200ms ease, border-color 200ms ease;
+}
+
+.project-card:hover {
+    box-shadow: var(--terminal-glow);
+    border-color: oklch(0.62 0.18 30 / 0.6);
+}
+
+.project-card--wip {
+    opacity: 0.6;
+}
+
+.project-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.project-card__name {
+    font-family: var(--font-display);
+    font-size: 1.1rem;
+    letter-spacing: 0.05em;
+}
+
+.project-card__desc {
+    color: var(--muted);
+    font-size: 0.9rem;
+    flex: 1;
+}
+
+.project-card__link {
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    text-decoration: none;
+    opacity: 0.7;
+    transition: opacity 150ms ease;
+}
+
+.project-card__link:hover { opacity: 1; }
+
+/* ============================================================
+   Badges
+   ============================================================ */
+.badge {
+    font-size: 0.6875rem;
+    font-family: var(--font-mono);
+    letter-spacing: 0.1em;
+    padding: 0.2em 0.6em;
+    border: 1px solid currentColor;
+    white-space: nowrap;
+}
+
+.badge--live {
+    color: oklch(0.62 0.18 30);
+    border-color: oklch(0.62 0.18 30 / 0.5);
+}
+
+.badge--wip {
+    color: var(--muted);
+    border-color: var(--muted);
+}
+
+/* ============================================================
+   About
+   ============================================================ */
+.about__body {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    max-width: 64ch;
+    color: var(--muted);
+    font-size: 0.9375rem;
+}
+
+.about__body a { color: var(--foreground); }
+
+/* ============================================================
+   Footer
+   ============================================================ */
+.site-footer {
+    border-top: 1px solid var(--border);
+    padding: 2rem 0;
+    font-size: 0.875rem;
+}
+
+.footer__inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* ============================================================
+   Utilities
+   ============================================================ */
+.muted  { color: var(--muted); }
+.subtle { color: var(--subtle); }
+
+/* ============================================================
+   Responsive
+   ============================================================ */
+@media (max-width: 640px) {
+    .site-header nav { gap: 1.25rem; }
+    .hero { padding-block: 5rem; }
+    .footer__inner { flex-direction: column; gap: 0.5rem; text-align: center; }
+}

templates/index.html

@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>lvl0</title>
+  <link rel="stylesheet" href="{{ get_url(path='style.css') }}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap" rel="stylesheet">
+</head>
+<body>
+
+  <!-- HEADER -->
+  <header class="site-header">
+    <div class="container">
+      <a href="/" class="site-logo">LVL0</a>
+      <nav>
+        <a href="#projects">Projects</a>
+        <a href="#about">About</a>
+        <a href="https://forge.lvl0.xyz/lvl0" target="_blank">Forge</a>
+      </nav>
+    </div>
+  </header>
+
+  <!-- HERO -->
+  <section class="hero">
+    <div class="container hero__inner">
+      <div class="hero__logo">LVL0</div>
+      <p class="hero__tagline">Tools without ceilings.</p>
+      <p class="hero__sub">Open source, self-hosted software. No accounts, no platforms, no gatekeepers — your server, your data, your rules.</p>
+    </div>
+  </section>
+
+  <!-- PROJECTS -->
+  <section class="section section--alt" id="projects">
+    <div class="container">
+      <h2 class="section-title">// projects</h2>
+      <div class="projects">
+
+        <div class="project-card">
+          <div class="project-card__header">
+            <span class="project-card__name">incr</span>
+            <span class="badge badge--live">LIVE</span>
+          </div>
+          <p class="project-card__desc">Track what you accumulate. Quantity milestones, unit tracking, no financial noise.</p>
+          <a href="https://incr.lvl0.xyz" class="project-card__link" target="_blank">incr.lvl0.xyz →</a>
+        </div>
+
+        <div class="project-card">
+          <div class="project-card__header">
+            <span class="project-card__name">buckets</span>
+            <span class="badge badge--live">LIVE</span>
+          </div>
+          <p class="project-card__desc">Bucket-based budgeting. Income flows in, fills up, trickles down.</p>
+          <a href="https://forge.lvl0.xyz/lvl0/buckets-budget" class="project-card__link" target="_blank">forge →</a>
+        </div>
+
+        <div class="project-card">
+          <div class="project-card__header">
+            <span class="project-card__name">fedi-feed-router</span>
+            <span class="badge badge--live">LIVE</span>
+          </div>
+          <p class="project-card__desc">Route and filter fediverse feeds. Tame the firehose.</p>
+          <a href="https://forge.lvl0.xyz/lvl0/fedi-feed-router" class="project-card__link" target="_blank">forge →</a>
+        </div>
+
+        <div class="project-card project-card--wip">
+          <div class="project-card__header">
+            <span class="project-card__name">convox</span>
+            <span class="badge badge--wip">WIP</span>
+          </div>
+          <p class="project-card__desc">A federated application platform. Early design.</p>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ABOUT -->
+  <section class="section" id="about">
+    <div class="container about">
+      <h2 class="section-title">// about</h2>
+      <div class="about__body">
+        <p>lvl0 is an independent studio building small, self-hostable software. We believe your tools should be yours — to run, to inspect, to modify.</p>
+        <p>We favour focus over features, longevity over growth, and ownership over convenience. Every project starts at level zero and earns its complexity.</p>
+        <p>All code is open source and lives on our <a href="https://forge.lvl0.xyz/lvl0" target="_blank">Forge</a>.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- FOOTER -->
+  <footer class="site-footer">
+    <div class="container footer__inner">
+      <span class="muted">lvl0 — all code open source</span>
+      <a href="https://forge.lvl0.xyz/lvl0" target="_blank">forge.lvl0.xyz</a>
+    </div>
+  </footer>
+
+</body>
+</html>