AI overhaul
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
@@ -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>
|
||||
|
||||
Executable
+4
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://www.eom.dev/sitemap.xml
|
||||
Executable
+6
@@ -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>
|
||||
Executable
+805
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user