AI overhaul

This commit is contained in:
2026-10-22 16:08:08 -04:00
parent 03bd5e1e63
commit 9587ac8cb2
7 changed files with 1002 additions and 127 deletions
+10 -8
View File
@@ -1,11 +1,13 @@
<footer>
<div class="footer l-box is-center">
<div class="pure-g">
<div class="pure-u-1-2">
© Eric O'Neill Meehan 2026
</div>
<div class="pure-u-1-2">
Made with <a href="https://pure-css.github.io/">Pure.css</a> and <a href="https://catppuccin.com/">Catppuccin</a>.
</div>
<div class="footer">
<a class="footer-brand" href="/">eom.dev</a>
<p>Independent projects, shared openly.</p>
<nav class="footer-links" aria-label="Footer navigation">
<a href="https://gitea.eom.dev/explore/repos">Source code</a>
<a href="https://peertube.eom.dev/videos/browse">Videos</a>
<a href="https://discourse.eom.dev/latest">Community</a>
<a href="mailto:eric@eom.dev">Contact</a>
</nav>
<p class="footer-credits">© Eric O'Neill Meehan 2026 · Made with <a href="https://pure-css.github.io/">Pure.css</a> and <a href="https://catppuccin.com/">Catppuccin</a>.</p>
</div>
</footer>
+34 -3
View File
@@ -1,8 +1,39 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Practical self-hosting, creative coding, and community experiments from Eric Meehan's home lab in Raleigh, North Carolina. Learn from the work, try the projects, and explore the source.">
<meta name="theme-color" content="#1e1e2e">
<meta property="og:type" content="website">
<meta property="og:site_name" content="eom.dev">
<meta property="og:title" content="eom.dev — Build your own corner of the internet">
<meta property="og:description" content="Practical self-hosting, creative coding, and community experiments from Eric Meehan's home lab.">
<meta property="og:url" content="https://www.eom.dev/">
<meta property="og:image" content="https://www.eom.dev/static/profile_2026.jpg">
<meta property="og:image:alt" content="Eric Meehan, software engineer and musician">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="eom.dev — Build your own corner of the internet">
<meta name="twitter:description" content="Practical self-hosting, creative coding, and community experiments from Eric Meehan's home lab.">
<link rel="canonical" href="https://www.eom.dev/">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="stylesheet" href="/static/pure.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">
<link rel="stylesheet" href="/static/home.css">
<title>eom.dev — Build your own corner of the internet</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Eric O'Neill Meehan",
"url": "https://www.eom.dev/",
"image": "https://www.eom.dev/static/profile_2026.jpg",
"jobTitle": "Software engineer and musician",
"homeLocation": {
"@type": "Place",
"name": "Raleigh, North Carolina"
},
"sameAs": [
"https://mastodon.eom.dev/@eric/",
"https://youtube.com/c/EricOMeehan"
]
}
</script>
</head>
+12 -3
View File
@@ -1,6 +1,15 @@
<div class="header">
<header class="header">
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
<a class="pure-menu-heading" href="">eom.dev</a>
<a class="skip-link" href="#main-content">Skip to content</a>
<a class="pure-menu-heading" href="/" aria-label="eom.dev home">eom<span class="brand-dot">.</span>dev</a>
<nav aria-label="Main navigation">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a class="pure-menu-link" href="#start-here">Explore</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="#projects">Projects</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="https://discourse.eom.dev/latest">Community</a></li>
<li class="pure-menu-item"><a class="pure-menu-link nav-support" href="#support">Support</a></li>
</ul>
</nav>
</div>
</div>
</header>
+131 -113
View File
@@ -2,127 +2,145 @@
<html lang="en">
<!--#include virtual="/common/header.html" -->
<body>
<title>eom.dev - Home</title>
<!--#include virtual="/common/topnav.html" -->
<div class="splash-container">
<div class="splash">
<h1 class="splash-head">Eric O'Neill Meehan</h1>
<p class="splash-subhead">
Welcome to Eric's homepage.
</p>
</div>
</div>
<div class="content-wrapper">
<div class="content">
<h2 class="content-head is-center">Links</h2>
<div class="pure-g">
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<h3 class="content-subhead">
<i class="fa fa-film"></i>
<a href="https://owncast.eom.dev/">Content</a>
</h3>
<p>
Browse videos on <a href="https://peertube.eom.dev/">PeerTube</a> and <a href="https://youtube.com/c/EricOMeehan">YouTube</a>, or watch live on <a href="https://owncast.eom.dev/">Owncast</a>.
</p>
<main id="main-content">
<section class="hero" aria-labelledby="hero-title">
<div class="hero-inner">
<p class="eyebrow">A practical, independent corner of the internet</p>
<h1 id="hero-title">Build your own corner of the internet.</h1>
<p class="hero-copy">Practical self-hosting, creative coding, and community experiments from Eric Meehan's home lab. Learn from the work, try the projects, and see how they are made.</p>
<div class="hero-actions">
<a class="button button-primary" href="#start-here">Explore the projects</a>
<a class="button button-secondary" href="https://discourse.eom.dev/latest">Join the conversation</a>
</div>
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<p class="hero-note">Independent software, open-source projects, music, and games—made in Raleigh, North Carolina.</p>
</div>
<div class="hero-art" aria-hidden="true">
<span class="orbit orbit-one"></span>
<span class="orbit orbit-two"></span>
<span class="orbit orbit-three"></span>
<span class="orbit-core">eom<br>.dev</span>
</div>
</section>
<h3 class="content-subhead">
<i class="fa fa-rocket"></i>
<a href="https://gitea.eom.dev/">Repositories</a>
</h3>
<p>
Open-source engineering projects hosted on <a href="https://gitea.eom.dev/explore/">Gitea</a>.
</p>
<section class="section intro-section" id="start-here" aria-labelledby="start-title">
<div class="section-heading">
<p class="eyebrow">Find your starting point</p>
<h2 id="start-title">Three ways into the lab</h2>
<p>Pick a path. Each one leads to real projects, recordings, and source code—not just a list of services.</p>
</div>
<div class="path-grid">
<article class="path-card path-build">
<span class="card-kicker">01 / Build</span>
<h3>Make the infrastructure yours</h3>
<p>Explore self-hosted services, automation, local AI, and the recipes that run this network.</p>
<a class="text-link" href="https://gitea.eom.dev/DevOps/software-infrastructure">Explore the infrastructure <span aria-hidden="true">→</span></a>
</article>
<article class="path-card path-play">
<span class="card-kicker">02 / Play</span>
<h3>Join a world or try a game</h3>
<p>Meet the community in Luanti or see how a small AI-assisted idea became a playable game.</p>
<a class="text-link" href="https://discourse.eom.dev/c/gaming/23">Find a game to join <span aria-hidden="true">→</span></a>
</article>
<article class="path-card path-create">
<span class="card-kicker">03 / Create</span>
<h3>Listen, watch, and experiment</h3>
<p>Browse original music, live performances, creative coding, and field recordings.</p>
<a class="text-link" href="https://peertube.eom.dev/videos/browse">Browse the video library <span aria-hidden="true">→</span></a>
</article>
</div>
</section>
<section class="section featured-section" id="projects" aria-labelledby="projects-title">
<div class="section-heading section-heading-row">
<div>
<p class="eyebrow">Made here, shared openly</p>
<h2 id="projects-title">A few things to explore</h2>
</div>
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<h3 class="content-subhead">
<i class="fa fa-check-square-o"></i>
<a href="https://discourse.eom.dev">Forums</a>
</h3>
<p>
Browse <a href="https://discourse.eom.dev/">Discourse</a> to read about and discuss Eric's projects.
</p>
</div>
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<h3 class="content-subhead">
<i class="fa fa-mobile"></i>
<a href="mailto:eric@eom.dev">Contact</a>
</h3>
<p>
Get in touch by <a href="mailto:eric@eom.dev">email</a>, <a href="https://mastodon.eom.dev/@eric/">Mastodon</a>, or <a href="https://matrix.to/#general:eom.dev">Matrix</a>.
</p>
<a class="text-link" href="https://gitea.eom.dev/explore/repos">Browse all repositories <span aria-hidden="true">→</span></a>
</div>
<div class="project-grid">
<article class="project-card">
<div class="project-mark mark-red" aria-hidden="true">●</div>
<p class="card-kicker">A social experiment</p>
<h3>The Button</h3>
<p>One shared countdown, six risk zones, and a season of nerve. Play, follow the standings, or inspect the code.</p>
<div class="project-links">
<a class="text-link" href="https://button.eom.dev/">Play the game <span aria-hidden="true">→</span></a>
<a class="text-link" href="https://gitea.eom.dev/Gaming/the-button">View the source</a>
</div>
</article>
<article class="project-card">
<div class="project-mark mark-blue" aria-hidden="true">⌘</div>
<p class="card-kicker">Self-hosted creator tools</p>
<h3>Broadcast from your own stack</h3>
<p>See how the network's streaming and video services fit together, then explore the deployment automation behind them.</p>
<div class="project-links">
<a class="text-link" href="https://owncast.eom.dev/">Visit the live channel <span aria-hidden="true">→</span></a>
<a class="text-link" href="https://gitea.eom.dev/DevOps/ansible-role-peertube">Explore the PeerTube role</a>
</div>
</article>
<article class="project-card">
<div class="project-mark mark-green" aria-hidden="true">♫</div>
<p class="card-kicker">Music and code</p>
<h3>Make patterns, make sound</h3>
<p>Listen to electronic compositions made with Tidal Cycles and Strudel, and explore the source behind the music.</p>
<div class="project-links">
<a class="text-link" href="https://peertube.eom.dev/c/eric_music">Listen on PeerTube <span aria-hidden="true">→</span></a>
<a class="text-link" href="https://gitea.eom.dev/Music/tidal-cycles-and-strudel-singles">Explore the collection</a>
</div>
</article>
</div>
</section>
<section class="community-band" aria-labelledby="community-title">
<div>
<p class="eyebrow">Built in public</p>
<h2 id="community-title">Follow the work. Add your voice.</h2>
<p>Project notes, questions, and community plans live on the forum. Watch live when a stream is on; catch up with the recordings any time.</p>
</div>
<div class="community-actions">
<a class="button button-primary" href="https://discourse.eom.dev/latest">Visit the forum</a>
<a class="button button-secondary" href="https://peertube.eom.dev/videos/browse">Watch recent videos</a>
<a class="quiet-link" href="https://owncast.eom.dev/">Check the live channel</a>
</div>
</section>
<section class="about-section section" id="about" aria-labelledby="about-title">
<div class="about-photo">
<img src="/static/profile_2026.jpg" width="300" height="300" loading="lazy" alt="Eric Meehan">
</div>
<div class="about-copy">
<p class="eyebrow">The person behind the projects</p>
<h2 id="about-title">Hi, I'm Eric.</h2>
<p>I'm a software engineer and musician in Raleigh, North Carolina. I use this independently run network to build and share engineering and creative projects—and to document what works, what doesn't, and how you can try it yourself.</p>
<div class="about-links">
<a class="text-link" href="https://mastodon.eom.dev/@eric/">Follow on Mastodon <span aria-hidden="true">→</span></a>
<a class="text-link" href="mailto:eric@eom.dev">Get in touch</a>
<a class="text-link" href="/eric@eom.dev.pub">View my GPG key</a>
</div>
</div>
</div>
</section>
<div class="ribbon l-box-lrg pure-g">
<div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
<img width="300" alt="File Icons" class="pure-img-responsive" src="/static/profile_2026.jpg">
<section class="support-section" id="support" aria-labelledby="support-title">
<div class="support-copy">
<p class="eyebrow">Keep the lights on</p>
<h2 id="support-title">Support the independent work.</h2>
<p>Contributions help cover the servers, storage, and time behind these projects. If you need hands-on help, you can also book a consultation.</p>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
<h2 class="content-head content-head-ribbon">About</h2>
<p>
Eric Meehan is a 31-year-old software engineer and musician living in Raleigh, North Carolina.
This website is the homepage for Eric's private computer network, eom.dev. Eric uses this network
to self-host and self-publish his engineering and artistic projects. This content is often documenting
further developments of the network itself, and is usually delivered in an educational tone. There is not
a set schedule for projects, events, or live streams, and Eric tends to pick up many projects. The best
way to stay up-to-date is to join the <a href="https://discourse.eom.dev/">forum</a>, and the best
way to reach Eric directly is by <a href="mailto:eric@eom.dev">email</a>.
</p>
<a href="/eric@eom.dev.pub">Eric's GPG Key</a>
<div class="support-actions">
<a class="button button-primary" href="https://discourse.eom.dev/s/prod_Sc9N5J0vNAdLCn">Become a monthly supporter</a>
<a class="button button-secondary" href="https://nextcloud.eom.dev/apps/appointments/pub/McQqQYl49cD5ZzZ9/form">Book a free introductory call</a>
<a class="quiet-link" href="https://donate.stripe.com/dRm28qczOcDx05Nfd9cQU00">Make a one-time contribution</a>
<details class="crypto-support">
<summary>Other ways to support</summary>
<p>Monero contributions can be sent to this public address:</p>
<code class="wallet-address">48mFvxYDSCzMy5a3Zaj7ewApbX4GwXVXX9T1JC8mqBC19s9UcrNq8eaKkQ6GKdhHGQGmhdpvMd3mcbjf4eQbP8Yv7KdAREw</code>
<p>For P2Pool, <a href="/xmrig.json">view the XMRig configuration</a> and replace the example wallet with your own.</p>
</details>
</div>
</div>
<div class="pure-g">
<div class="pure-u-2-3"><iframe src="https://owncast.eom.dev/embed/video" title="Owncast" height="350px" width="100%" referrerpolicy="origin" allowfullscreen></iframe></div>
<div class="pure-u-1-3"><iframe src="https://owncast.eom.dev/embed/chat/readwrite" title="Owncast" height="350px" width="100%" referrerpolicy="origin" allowfullscreen></iframe></div>
</div>
<iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" style="max-width:100vw;max-height:100vh;" width="100%" height="800" src="https://mastofeed.com/apiv2/feed?userurl=https%3A%2F%2Fmastodon.eom.dev%2Fusers%2Feric&theme=dark&size=100&header=true&replies=false&boosts=false"></iframe>
<div class="content">
<h2 class="content-head is-center">Donate</h2>
<center>
<p>
Make a donation to support Eric's online services, engineering projects, and educational content.
</p>
</center>
<div class="pure-g">
<div class="l-box-lrg pure-u-1 pure-u-md-1-2">
<h4>USD</h4>
<p>
Donate USD through Stripe.
</p>
<script async
src="https://js.stripe.com/v3/buy-button.js">
</script>
<stripe-buy-button
buy-button-id="buy_btn_1T2GbAC5KPXqTvVLpcz9TMQU"
publishable-key="pk_live_51RXqTsC5KPXqTvVLWl5bzCxoaZivWceeLGMNURUmxzQMwaM5pUUl4VabywrjCQvgKopGFvUBqPLxRMF3eALsiDst00tR59vRhN"
>
</stripe-buy-button>
</div>
<div class="l-box-lrg pure-u-1 pure-u-md-1-2">
<h4>XMR</h4>
<p>Monero donations can be sent to </p>
<code style="word-wrap: break-word">48mFvxYDSCzMy5a3Zaj7ewApbX4GwXVXX9T1JC8mqBC19s9UcrNq8eaKkQ6GKdhHGQGmhdpvMd3mcbjf4eQbP8Yv7KdAREw</code>
<h5>P2Pool</h5>
<p>
Contribute compute power to the eom.dev mining pool with <a href="https://xmrig.com/">XMRig</a>.
Update the <i>user</i> field in the <a href="/xmrig.json">~/.xmrig.json</a> configuration below to your wallet address.
You may use the Monero donation address above if you would like to donate your payouts to eom.dev.
</div>
</div>
</div>
<!--#include virtual="/common/footer.html" -->
</div>
</section>
</main>
<!--#include virtual="/common/footer.html" -->
</body>
</html>
+4
View File
@@ -0,0 +1,4 @@
User-agent: *
Allow: /
Sitemap: https://www.eom.dev/sitemap.xml
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.eom.dev/</loc>
</url>
</urlset>
+805
View File
@@ -0,0 +1,805 @@
:root {
color-scheme: dark;
--page: #1e1e2e;
--page-deep: #181825;
--surface: #242438;
--surface-raised: #292940;
--border: #3c3d56;
--text: #cdd6f4;
--muted: #a6adc8;
--subtle: #7f849c;
--accent: #cba6f7;
--accent-strong: #b4befe;
--blue: #89b4fa;
--green: #a6e3a1;
--red: #f38ba8;
--peach: #fab387;
--header-height: 4.5rem;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
--page: #eff1f5;
--page-deep: #e6e9ef;
--surface: #ffffff;
--surface-raised: #f7f7fb;
--border: #ccd0da;
--text: #4c4f69;
--muted: #5c5f77;
--subtle: #6c6f85;
--accent: #8839ef;
--accent-strong: #7287fd;
--blue: #1e66f5;
--green: #40a02b;
--red: #d20f39;
--peach: #fe640b;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 1rem);
}
body {
margin: 0;
background: var(--page);
color: var(--text);
font-size: 16px;
line-height: 1.7;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body,
button,
a {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a {
color: var(--accent-strong);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover {
color: var(--text);
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid var(--peach);
outline-offset: 4px;
border-radius: 4px;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
color: var(--text);
line-height: 1.15;
letter-spacing: -0.035em;
}
h1 {
font-size: clamp(2.8rem, 6.7vw, 5.6rem);
}
h2 {
font-size: clamp(2rem, 4vw, 3.2rem);
}
h3 {
font-size: clamp(1.25rem, 2vw, 1.6rem);
}
p {
color: var(--muted);
}
.header .home-menu {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10;
min-height: var(--header-height);
padding: 0 clamp(1.25rem, 5vw, 5rem);
display: flex;
align-items: center;
justify-content: space-between;
background: color-mix(in srgb, var(--page) 88%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.home-menu .pure-menu-heading {
padding: 0;
color: var(--text);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.06em;
text-transform: none;
}
.brand-dot {
color: var(--accent);
}
.home-menu nav {
margin-left: auto;
}
.home-menu .pure-menu-list {
display: flex;
align-items: center;
gap: clamp(0.1rem, 1.5vw, 1rem);
margin: 0;
padding: 0;
list-style: none;
}
.home-menu .pure-menu-link {
padding: 0.55rem 0.8rem;
color: var(--muted);
font-size: 0.9rem;
border-radius: 999px;
transition: color 160ms ease, background-color 160ms ease;
}
.home-menu .pure-menu-link:hover {
color: var(--text);
background: var(--surface-raised);
}
.home-menu .pure-menu-link.nav-support {
color: var(--page-deep);
background: var(--accent);
font-weight: 700;
}
.home-menu .pure-menu-link.nav-support:hover {
color: var(--page-deep);
background: var(--accent-strong);
}
.skip-link {
position: absolute;
top: -5rem;
left: 1rem;
z-index: 20;
padding: 0.6rem 1rem;
color: var(--page-deep);
background: var(--accent);
border-radius: 0.5rem;
}
.skip-link:focus {
top: 0.7rem;
}
main {
padding-top: var(--header-height);
}
.hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
align-items: center;
gap: 3rem;
min-height: min(690px, calc(100svh - var(--header-height)));
padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 10vw, 10rem);
overflow: hidden;
background:
radial-gradient(ellipse at 83% 48%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 35%),
linear-gradient(135deg, var(--page-deep), var(--page));
border-bottom: 1px solid var(--border);
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 780px;
}
.eyebrow,
.card-kicker {
margin-bottom: 0.8rem;
color: var(--accent);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1.4;
text-transform: uppercase;
}
.hero h1 {
max-width: 780px;
margin-bottom: 1.35rem;
}
.hero-copy {
max-width: 650px;
margin-bottom: 1.8rem;
font-size: clamp(1.08rem, 1.8vw, 1.3rem);
line-height: 1.65;
}
.hero-actions,
.project-links,
.about-links,
.community-actions,
.support-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem;
}
.button {
display: inline-flex;
min-height: 3rem;
align-items: center;
justify-content: center;
padding: 0.7rem 1.15rem;
border: 1px solid transparent;
border-radius: 0.75rem;
font-size: 0.92rem;
font-weight: 750;
text-align: center;
text-decoration: none;
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.button:hover {
transform: translateY(-2px);
text-decoration: none;
}
.button-primary {
color: var(--page-deep);
background: var(--accent);
}
.button-primary:hover {
color: var(--page-deep);
background: var(--accent-strong);
}
.button-secondary {
color: var(--text);
background: color-mix(in srgb, var(--surface) 74%, transparent);
border-color: var(--border);
}
.button-secondary:hover {
color: var(--text);
background: var(--surface-raised);
border-color: var(--subtle);
}
.hero-note {
margin: 1.5rem 0 0;
font-size: 0.85rem;
}
.hero-art {
position: relative;
width: min(30vw, 350px);
aspect-ratio: 1;
justify-self: center;
}
.orbit {
position: absolute;
inset: 10%;
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: 50%;
transform: rotate(-28deg) scaleY(0.72);
}
.orbit-one {
transform: rotate(-28deg) scaleY(0.72);
}
.orbit-two {
transform: rotate(32deg) scaleY(0.72);
border-color: color-mix(in srgb, var(--blue) 50%, transparent);
}
.orbit-three {
inset: 23%;
border-color: color-mix(in srgb, var(--green) 50%, transparent);
transform: rotate(72deg) scaleY(0.72);
}
.orbit-core {
position: absolute;
inset: 32%;
display: grid;
place-content: center;
color: var(--text);
background: radial-gradient(circle at 35% 30%, var(--surface-raised), var(--page-deep));
border: 1px solid var(--border);
border-radius: 50%;
box-shadow: 0 0 70px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 30px color-mix(in srgb, var(--accent) 8%, transparent);
font-size: clamp(1.1rem, 2vw, 1.7rem);
font-weight: 800;
letter-spacing: -0.07em;
line-height: 1.05;
text-align: center;
}
.section {
padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 9vw, 9rem);
}
.intro-section,
.featured-section {
max-width: 1600px;
margin-inline: auto;
}
.section-heading {
max-width: 760px;
margin-bottom: 2.4rem;
}
.section-heading h2,
.about-copy h2,
.support-copy h2,
.community-band h2 {
margin-bottom: 0.9rem;
}
.section-heading > p:last-child {
max-width: 650px;
margin-bottom: 0;
font-size: 1.05rem;
}
.path-grid,
.project-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.path-card,
.project-card {
min-width: 0;
padding: clamp(1.35rem, 2.5vw, 2rem);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 1.1rem;
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.path-card:hover,
.project-card:hover {
background: var(--surface-raised);
border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
transform: translateY(-4px);
}
.path-card h3,
.project-card h3 {
margin: 0.7rem 0;
}
.path-card p,
.project-card > p:not(.card-kicker) {
margin-bottom: 1.3rem;
}
.path-build {
border-top: 3px solid var(--blue);
}
.path-play {
border-top: 3px solid var(--peach);
}
.path-create {
border-top: 3px solid var(--green);
}
.card-kicker {
margin-bottom: 0.4rem;
color: var(--muted);
font-size: 0.68rem;
}
.text-link {
color: var(--accent-strong);
font-size: 0.91rem;
font-weight: 700;
}
.text-link:hover {
color: var(--text);
}
.featured-section {
padding-top: 2rem;
}
.section-heading-row {
display: flex;
align-items: end;
justify-content: space-between;
gap: 2rem;
}
.section-heading-row > .text-link {
flex: 0 0 auto;
margin-bottom: 0.5rem;
}
.project-card {
display: flex;
flex-direction: column;
min-height: 360px;
}
.project-mark {
display: grid;
width: 3rem;
height: 3rem;
margin-bottom: 1.4rem;
place-items: center;
background: var(--page-deep);
border: 1px solid var(--border);
border-radius: 0.9rem;
font-size: 1.4rem;
}
.mark-red {
color: var(--red);
}
.mark-blue {
color: var(--blue);
}
.mark-green {
color: var(--green);
}
.project-links {
align-items: flex-start;
gap: 0.55rem 1rem;
margin-top: auto;
padding-top: 0.8rem;
}
.community-band {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 3rem;
padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 9vw, 9rem);
background: var(--page-deep);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.community-band > div:first-child {
max-width: 700px;
}
.community-band h2 {
font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.community-band p:not(.eyebrow) {
margin-bottom: 0;
}
.community-actions {
justify-content: flex-start;
}
.quiet-link {
color: var(--muted);
font-size: 0.88rem;
}
.about-section {
display: grid;
grid-template-columns: minmax(200px, 0.55fr) minmax(0, 1.45fr);
align-items: center;
gap: clamp(2rem, 7vw, 7rem);
max-width: 1300px;
margin-inline: auto;
}
.about-photo {
width: min(100%, 300px);
padding: 0.5rem;
background: linear-gradient(140deg, var(--accent), var(--blue), var(--green));
border-radius: 1.35rem;
}
.about-photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: 1rem;
}
.about-copy > p:not(.eyebrow) {
max-width: 740px;
font-size: 1.05rem;
}
.about-links {
gap: 0.55rem 1.4rem;
}
.support-section {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
align-items: start;
gap: clamp(2rem, 7vw, 7rem);
padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 9vw, 9rem);
background: var(--surface);
border-top: 1px solid var(--border);
}
.support-copy {
max-width: 620px;
}
.support-actions {
align-items: flex-start;
flex-direction: column;
}
.crypto-support {
width: 100%;
margin-top: 0.2rem;
padding: 0.8rem 1rem;
color: var(--muted);
background: var(--page);
border: 1px solid var(--border);
border-radius: 0.8rem;
}
.crypto-support summary {
color: var(--text);
cursor: pointer;
font-weight: 700;
}
.wallet-address {
display: block;
overflow-wrap: anywhere;
padding: 0.8rem;
color: var(--text);
background: var(--page-deep);
border: 1px solid var(--border);
border-radius: 0.5rem;
font-size: 0.78rem;
user-select: all;
}
.footer {
position: static;
bottom: auto;
width: auto;
padding: 2.5rem 1.5rem;
color: var(--muted);
background: var(--page-deep);
text-align: center;
}
.footer-brand {
color: var(--text);
font-size: 1.1rem;
font-weight: 800;
letter-spacing: -0.05em;
text-decoration: none;
}
.footer > p {
margin: 0.3rem 0 1rem;
font-size: 0.87rem;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 1.2rem;
margin: 1rem 0 1.4rem;
}
.footer-links a,
.footer-credits a {
color: var(--muted);
font-size: 0.86rem;
}
.footer .footer-credits {
margin: 0;
color: var(--subtle);
font-size: 0.78rem;
}
@media (max-width: 900px) {
.hero {
grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.55fr);
gap: 1rem;
padding-inline: clamp(1.5rem, 6vw, 4rem);
}
.path-grid,
.project-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-card:last-child {
grid-column: 1 / -1;
}
.community-band {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 640px) {
:root {
--header-height: 4rem;
}
.header .home-menu {
padding-inline: 1rem;
}
.home-menu .pure-menu-heading {
font-size: 1.05rem;
}
.home-menu .pure-menu-list {
gap: 0;
}
.home-menu .pure-menu-link {
padding: 0.5rem 0.45rem;
font-size: 0.76rem;
}
.home-menu .pure-menu-item:nth-child(3) {
display: none;
}
.hero {
min-height: auto;
grid-template-columns: 1fr;
padding: 4.5rem 1.35rem 3.5rem;
}
.hero-art {
position: absolute;
right: -5rem;
bottom: -5rem;
width: 14rem;
opacity: 0.42;
}
.hero-inner {
z-index: 1;
}
.hero h1 {
max-width: 12ch;
}
.hero-copy {
max-width: 34rem;
}
.hero-actions {
align-items: stretch;
flex-direction: column;
max-width: 22rem;
}
.hero-note {
max-width: 24rem;
}
.section {
padding: 3.5rem 1.25rem;
}
.path-grid,
.project-grid {
grid-template-columns: 1fr;
}
.project-card:last-child {
grid-column: auto;
}
.project-card {
min-height: auto;
}
.section-heading-row {
align-items: flex-start;
flex-direction: column;
gap: 0.5rem;
}
.community-band {
padding: 3rem 1.25rem;
}
.community-actions {
align-items: stretch;
flex-direction: column;
}
.community-actions .button {
width: 100%;
}
.about-section {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.about-photo {
width: min(65vw, 240px);
}
.support-section {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 3.5rem 1.25rem;
}
.support-actions .button {
width: 100%;
}
}
@media (max-width: 380px) {
.home-menu .pure-menu-item:nth-child(2) {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}