Refactor homepage layout and refresh shared styling
This commit is contained in:
@@ -54,14 +54,14 @@ const icons = {
|
||||
<span class="card-icon" aria-hidden="true">
|
||||
<i class={icons[icon]} aria-hidden="true"></i>
|
||||
</span>
|
||||
<div class="card-copy">
|
||||
<div class="card-header">
|
||||
<span class="card-copy">
|
||||
<span class="card-header">
|
||||
<h3>{title}</h3>
|
||||
<span class="card-arrow" aria-hidden="true">↗</span>
|
||||
</div>
|
||||
<p>{description}</p>
|
||||
{warning && <p class="card-warning">{warning}</p>}
|
||||
</div>
|
||||
<span class="card-cta">{cta}</span>
|
||||
<span class="card-arrow" aria-hidden="true">›</span>
|
||||
</span>
|
||||
<span class="card-description">{description}</span>
|
||||
{warning && <span class="card-warning">{warning}</span>}
|
||||
<span class="card-cta">{cta} <span aria-hidden="true">→</span></span>
|
||||
</span>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
@@ -9,12 +9,11 @@ interface Props {
|
||||
const { title, description, id, columns = "4" } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="section shell" aria-labelledby={id}>
|
||||
<div class="section-copy">
|
||||
<p class="section-kicker">Section</p>
|
||||
<section class="section" aria-labelledby={id}>
|
||||
<header class="section-copy">
|
||||
<h2 id={id}>{title}</h2>
|
||||
{description && <p class="section-description">{description}</p>}
|
||||
</div>
|
||||
</header>
|
||||
<div class="section-grid" data-columns={columns}>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -20,7 +20,7 @@ export type HubLink = {
|
||||
export const hero = {
|
||||
eyebrow: "Welcome",
|
||||
title: "thelilfrog.com",
|
||||
subtitle: "Code and places to play.",
|
||||
subtitle: "Code, communities, and places to play — gathered in one small corner of the internet.",
|
||||
hostname: "thelilfrog.com",
|
||||
};
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ const {
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="theme-color" content="#0f1115" />
|
||||
<meta name="theme-color" content="#26739f" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
+142
-53
@@ -3,64 +3,153 @@ import Card from "../components/Card.astro";
|
||||
import Section from "../components/Section.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import { codeLinks, hero, playLinks, socialLinks, utilityLinks } from "../data/links";
|
||||
|
||||
const primaryForge = codeLinks.find((link) => link.accent === "primary") ?? codeLinks[0];
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Checkpoint"
|
||||
description="A minimal personal hub linking code forges and gaming profiles."
|
||||
title="Checkpoint · thelilfrog.com"
|
||||
description="A personal start page for code, social profiles, useful links, and games."
|
||||
>
|
||||
<main>
|
||||
<section class="hero shell" aria-labelledby="hero-title">
|
||||
<div class="hero-copy">
|
||||
<p class="hero-eyebrow">{hero.eyebrow}</p>
|
||||
<h1 id="hero-title">{hero.title}</h1>
|
||||
<p class="hero-subtitle">{hero.subtitle}</p>
|
||||
</div>
|
||||
<div class="hero-meta" aria-label="Quick details">
|
||||
<p>Signals from a personal node.</p>
|
||||
<div class="page-backdrop">
|
||||
<header class="masthead shell">
|
||||
<a class="brand" href="#home" aria-label="Checkpoint home">
|
||||
<span class="brand-mark" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</span>
|
||||
<span class="brand-name">Checkpoint</span>
|
||||
</a>
|
||||
<p class="masthead-note"><span aria-hidden="true"></span> Personal link center</p>
|
||||
</header>
|
||||
|
||||
<main class="portal shell" id="home">
|
||||
<nav class="portal-nav" aria-label="Primary navigation">
|
||||
<a href="#home" aria-current="page">Home</a>
|
||||
<a href="#code">Code</a>
|
||||
<a href="#social">Social</a>
|
||||
<a href="#links">Utilities</a>
|
||||
<a href="#play">Play</a>
|
||||
</nav>
|
||||
<div class="chrome-glow" aria-hidden="true"></div>
|
||||
|
||||
<header class="portal-title">
|
||||
<h1>{hero.title}</h1>
|
||||
<span>{hero.hostname}</span>
|
||||
</header>
|
||||
|
||||
<div class="content-grid">
|
||||
<aside class="sidebar" aria-label="Checkpoint directory">
|
||||
<nav class="directory" aria-labelledby="directory-title">
|
||||
<h2 id="directory-title">Explore Checkpoint</h2>
|
||||
<ul>
|
||||
<li><a href="#code">Code forges and mirrors</a></li>
|
||||
<li><a href="#social">Social profile</a></li>
|
||||
<li><a href="#links">Temporary links</a></li>
|
||||
<li><a href="#play">Gaming profiles</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="sidebar-module sidebar-feature" aria-labelledby="forge-title">
|
||||
<h2 id="forge-title">Primary Forge</h2>
|
||||
<a href={primaryForge.href} target="_blank" rel="noreferrer">
|
||||
<span class="orb-icon" aria-hidden="true"><i class="fa-brands fa-git-alt"></i></span>
|
||||
<span>Visit {primaryForge.title}<small>Repositories, issues, and projects</small></span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="sidebar-module" aria-labelledby="highlights-title">
|
||||
<h2 id="highlights-title">Highlights</h2>
|
||||
<ul class="sidebar-links">
|
||||
<li><a href={codeLinks[1].href} target="_blank" rel="noreferrer">Public GitHub mirror</a></li>
|
||||
<li><a href={socialLinks[0].href} target="_blank" rel="me noreferrer">Updates on Mastodon</a></li>
|
||||
<li><a href={utilityLinks[0].href} target="_blank" rel="noreferrer">Make a short link</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="sidebar-module" aria-labelledby="places-title">
|
||||
<h2 id="places-title">Featured Places</h2>
|
||||
<ul class="sidebar-links">
|
||||
{playLinks.map((link) => (
|
||||
<li><a href={link.href} target="_blank" rel="noreferrer">{link.title}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<div class="main-column">
|
||||
<section class="feature" aria-labelledby="feature-title">
|
||||
<div class="feature-copy">
|
||||
<p class="feature-kicker">Welcome</p>
|
||||
<h2 id="feature-title">A brighter way to find me online <span aria-hidden="true">›</span></h2>
|
||||
<p>{hero.subtitle}</p>
|
||||
<a class="feature-action" href={primaryForge.href} target="_blank" rel="noreferrer">
|
||||
Start with {primaryForge.title} <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="feature-art" aria-hidden="true">
|
||||
<div class="feature-orb"><i class="fa-solid fa-frog"></i></div>
|
||||
<div class="glass-card glass-card-code">
|
||||
<i class="fa-solid fa-code"></i>
|
||||
<span><b></b><b></b><b></b></span>
|
||||
</div>
|
||||
<div class="glass-card glass-card-play">
|
||||
<i class="fa-solid fa-gamepad"></i>
|
||||
<span><b></b><b></b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-tabs" aria-label="Featured categories">
|
||||
<a href="#code">Build things</a>
|
||||
<a href="#social">Keep in touch</a>
|
||||
<a href="#play">Find a game</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Section
|
||||
id="code"
|
||||
title="Code"
|
||||
columns="2"
|
||||
description="The primary forge lives on Gitea, with GitHub kept in sync as a public mirror."
|
||||
>
|
||||
{codeLinks.map((link) => <Card {...link} />)}
|
||||
</Section>
|
||||
|
||||
<div class="section-pair">
|
||||
<Section
|
||||
id="social"
|
||||
title="Social"
|
||||
columns="2"
|
||||
description="A small public profile for fediverse updates and verification."
|
||||
>
|
||||
{socialLinks.map((link) => <Card {...link} />)}
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
id="links"
|
||||
title="Temporary Links"
|
||||
columns="2"
|
||||
description="A short URL utility for quick, temporary shares."
|
||||
>
|
||||
{utilityLinks.map((link) => <Card {...link} />)}
|
||||
</Section>
|
||||
</div>
|
||||
|
||||
<Section
|
||||
id="play"
|
||||
title="Places to Play"
|
||||
columns="4"
|
||||
description="Gaming profiles for PC, consoles, and co-op nights."
|
||||
>
|
||||
{playLinks.map((link) => <Card {...link} />)}
|
||||
</Section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Section
|
||||
id="code"
|
||||
title="Code"
|
||||
columns="2"
|
||||
description="The primary forge lives on Gitea, with GitHub kept in sync as a public mirror."
|
||||
>
|
||||
{codeLinks.map((link) => <Card {...link} />)}
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
id="social"
|
||||
title="Social"
|
||||
columns="2"
|
||||
description="A small public profile for fediverse updates and verification."
|
||||
>
|
||||
{socialLinks.map((link) => <Card {...link} />)}
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
id="links"
|
||||
title="Temporary Links"
|
||||
columns="2"
|
||||
description="A small utility for temporary short URLs when permanence is not important."
|
||||
>
|
||||
{utilityLinks.map((link) => <Card {...link} />)}
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
id="play"
|
||||
title="Play"
|
||||
columns="4"
|
||||
description="A few places to find me when the terminal is closed and the backlog wins."
|
||||
>
|
||||
{playLinks.map((link) => <Card {...link} />)}
|
||||
</Section>
|
||||
</main>
|
||||
|
||||
<footer class="shell footer">
|
||||
<p>Checkpoint. Quiet links to code, mirrors, and co-op nights.</p>
|
||||
<small>{hero.hostname}</small>
|
||||
</footer>
|
||||
<footer class="footer">
|
||||
<p>Checkpoint — quiet links to code, mirrors, and co-op nights.</p>
|
||||
<a href="#home">Back to top ↑</a>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
+758
-183
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user