Redesign: red-digital theme, custom layout, drop linkita, docker dev setup
This commit is contained in:
parent
44023d8ad2
commit
9452190d0c
7 changed files with 414 additions and 49 deletions
21
config.toml
21
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/" }
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
+++
|
||||
title = "Announcements"
|
||||
template = "announcements.html"
|
||||
sort_by = "date"
|
||||
+++
|
||||
|
||||
Stay updated with the latest news and releases from lvl0.
|
||||
11
docker/dev/docker-compose.yml
Normal file
11
docker/dev/docker-compose.yml
Normal file
|
|
@ -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
|
||||
28
shell.nix
28
shell.nix
|
|
@ -1,17 +1,37 @@
|
|||
{ 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() {
|
||||
zola serve --interface 0.0.0.0 --port 1111 "$@"
|
||||
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() {
|
||||
|
|
@ -26,10 +46,10 @@ pkgs.mkShell {
|
|||
echo " lvl0-website Dev Environment "
|
||||
echo "================================================="
|
||||
echo ""
|
||||
echo " Zola: $(zola --version)"
|
||||
echo ""
|
||||
echo "Commands:"
|
||||
echo " dev-up Start zola serve (live reload)"
|
||||
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"
|
||||
|
|
|
|||
277
static/style.css
Normal file
277
static/style.css
Normal file
|
|
@ -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; }
|
||||
}
|
||||
101
templates/index.html
Normal file
101
templates/index.html
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue