feat: initial Greasy Sprocket website — Astro static + Go feedback service
- Astro 5.x static site with content collections for extensions - Pages: index, [slug] (per-extension), coffee (Ko-fi), feedback form - Go binary gs-feedback: SQLite storage + Discord webhook notification - Nginx config: static serving + POST proxy to Go backend - Deploy script: build + rsync to VPS - ThockBoard landing page with features and sound pack listing
This commit is contained in:
Jose Juan Moñino
@@ -0,0 +1,2 @@
|
||||
only-built-dependencies[]=esbuild
|
||||
only-built-dependencies[]=sharp
|
||||
@@ -0,0 +1,10 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
export default defineConfig({
|
||||
site: 'https://greasysprocket.com',
|
||||
output: 'static',
|
||||
server: {
|
||||
host: '127.0.0.1',
|
||||
port: 4321,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "greasy-sprocket-website",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"check": "astro check"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^5.7.0"
|
||||
}
|
||||
}
|
||||
Generated
+3440
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,6 @@
|
||||
allowBuilds:
|
||||
esbuild: set this to true or false
|
||||
sharp: set this to true or false
|
||||
onlyBuiltDependencies:
|
||||
- esbuild
|
||||
- sharp
|
||||
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
|
||||
<rect width="128" height="128" rx="28" fill="#0c0a09"/>
|
||||
<circle cx="64" cy="64" r="36" fill="none" stroke="#f97316" stroke-width="6"/>
|
||||
<circle cx="64" cy="64" r="8" fill="#f97316"/>
|
||||
<line x1="64" y1="28" x2="64" y2="40" stroke="#f97316" stroke-width="4" stroke-linecap="round"/>
|
||||
<line x1="64" y1="88" x2="64" y2="100" stroke="#f97316" stroke-width="4" stroke-linecap="round"/>
|
||||
<line x1="28" y1="64" x2="40" y2="64" stroke="#f97316" stroke-width="4" stroke-linecap="round"/>
|
||||
<line x1="88" y1="64" x2="100" y2="64" stroke="#f97316" stroke-width="4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 680 B |
@@ -0,0 +1,15 @@
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const extensions = defineCollection({
|
||||
type: 'content',
|
||||
schema: z.object({
|
||||
name: z.string(),
|
||||
tagline: z.string(),
|
||||
features: z.array(z.string()).optional(),
|
||||
screenshot: z.string().optional(),
|
||||
chromeStoreUrl: z.string().url().optional().or(z.literal('')),
|
||||
downloadUrl: z.string().optional(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { extensions };
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
name: ThockBoard
|
||||
tagline: Mechanical keyboard sounds for every keystroke. 16 sound packs, zero setup.
|
||||
features:
|
||||
- "16 sound packs (Cherry MX, buckling spring, zen, water drops, and more)"
|
||||
- "Adjustable volume per pack"
|
||||
- "Dark/light theme with palette switcher"
|
||||
- "Works on any website — no configuration needed"
|
||||
- "100% free, no premium tiers"
|
||||
screenshot: "/images/thockboard-preview.png"
|
||||
chromeStoreUrl: ""
|
||||
downloadUrl: "https://git.d0a1.es/d0a1/thockboard/releases"
|
||||
---
|
||||
|
||||
ThockBoard adds satisfying mechanical keyboard sounds to every keystroke, on any website.
|
||||
|
||||
Choose from 16 carefully crafted sound packs — from the classic Cherry MX Blue click
|
||||
to soothing zen water drops and bamboo chimes. Each pack is synthesized with DSP
|
||||
for realistic, non-repetitive audio.
|
||||
|
||||
## Sound packs
|
||||
|
||||
| Category | Packs |
|
||||
|----------|-------|
|
||||
| Mechanical | Cherry MX Blue, Cherry MX Red, Buckling Spring, Topre |
|
||||
| Thocky | Thocky Default, Deep Thock, Hall Effect |
|
||||
| Zen | Water Drop, Bamboo, Singing Bowl, Crystal |
|
||||
| Fun | Bubble, Soft Tap, Pop, Mechanical Click, Rain |
|
||||
|
||||
## Privacy
|
||||
|
||||
ThockBoard doesn't collect any data. No analytics, no tracking, no telemetry.
|
||||
Sound files are bundled with the extension — nothing is downloaded from external servers.
|
||||
|
||||
## Free forever
|
||||
|
||||
ThockBoard is 100% free. All 16 sound packs are available to everyone. There are no
|
||||
premium tiers, no locked features, no usage limits. If you enjoy it, you can
|
||||
[buy me a coffee](/coffee) — but there's zero pressure.
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description = 'Free Chrome extensions — no limits, no catch.' } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="/" class="logo">⚙️ <span>Greasy Sprocket</span></a>
|
||||
<nav>
|
||||
<a href="/">Extensions</a>
|
||||
<a href="/coffee">☕ Support</a>
|
||||
<a href="/feedback">Feedback</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>
|
||||
Greasy Sprocket — Free Chrome extensions, always.<br />
|
||||
<a href="/coffee">Support my work ☕</a> ·
|
||||
<a href="/feedback">Leave feedback</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const extensions = await getCollection('extensions');
|
||||
return extensions.map((ext) => ({
|
||||
params: { slug: ext.slug },
|
||||
props: { ext },
|
||||
}));
|
||||
}
|
||||
|
||||
const { ext } = Astro.props;
|
||||
const { Content } = await ext.render();
|
||||
---
|
||||
|
||||
<Base title={`${ext.data.name} — Greasy Sprocket`} description={ext.data.tagline}>
|
||||
<section class="ext-hero">
|
||||
<div class="container">
|
||||
<div class="info">
|
||||
<span class="badge">100% Free</span>
|
||||
<h1>{ext.data.name}</h1>
|
||||
<p>{ext.data.tagline}</p>
|
||||
<div style="display:flex;gap:12px">
|
||||
{ext.data.chromeStoreUrl && (
|
||||
<a href={ext.data.chromeStoreUrl} class="btn btn-primary" target="_blank" rel="noopener">
|
||||
Add to Chrome
|
||||
</a>
|
||||
)}
|
||||
{ext.data.downloadUrl && (
|
||||
<a href={ext.data.downloadUrl} class="btn btn-outline">
|
||||
Download ZIP
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{ext.data.screenshot && (
|
||||
<div class="screenshot">
|
||||
<img src={ext.data.screenshot} alt={`${ext.data.name} screenshot`} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="feature-list">
|
||||
{ext.data.features?.map((feature: string) => (
|
||||
<div class="feature-item">
|
||||
<h4>✅ {feature}</h4>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style="margin-top:32px">
|
||||
<Content />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Base>
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
---
|
||||
|
||||
<Base title="Support Greasy Sprocket ☕">
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<span class="badge">No pressure · Everything is free</span>
|
||||
<h1>Buy me a coffee ☕</h1>
|
||||
<p>
|
||||
If you enjoy my extensions and want to support my work, consider buying me a coffee.
|
||||
Every contribution helps me keep building free tools for everyone.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container" style="text-align:center">
|
||||
<div class="coffee-options">
|
||||
<a href="https://ko-fi.com/monyi" class="coffee-btn" target="_blank" rel="noopener">
|
||||
☕<br/>Ko-fi<span>Buy me a coffee</span>
|
||||
</a>
|
||||
</div>
|
||||
<p style="color:var(--text-muted);max-width:480px;margin:24px auto 0">
|
||||
All extensions are and will always be 100% free. This is completely voluntary —
|
||||
no features are locked behind donations, and there are no premium tiers.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Base>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
|
||||
const extSlug = Astro.url.searchParams.get('ext') || '';
|
||||
---
|
||||
|
||||
<Base title="Feedback — Greasy Sprocket">
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Tell us why you left</h1>
|
||||
<p>Your feedback helps us improve. No email required, no account needed.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div id="feedback-form" class="feedback-form">
|
||||
<form id="uninstall-feedback">
|
||||
<input type="hidden" name="ext" value={extSlug} />
|
||||
|
||||
<div class="form-group">
|
||||
<label for="reason">Why did you uninstall? <span style="color:var(--text-muted)">(optional)</span></label>
|
||||
<select name="reason" id="reason">
|
||||
<option value="">Select a reason...</option>
|
||||
<option value="not-needed">Didn't need it</option>
|
||||
<option value="too-many">Too many extensions</option>
|
||||
<option value="bugs">Bugs or issues</option>
|
||||
<option value="alternative">Prefer an alternative</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="text">Anything else? <span style="color:var(--text-muted)">(optional)</span></label>
|
||||
<textarea name="text" id="text" placeholder="Tell us more..." maxlength="500"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<a href="/" class="btn btn-outline">No thanks</a>
|
||||
<button type="submit" class="btn btn-primary">Send feedback</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="feedback-success" class="form-success" hidden>
|
||||
<h2>✅ Thanks for your feedback!</h2>
|
||||
<p>We appreciate you taking the time. All our extensions are free — feel free to come back anytime.</p>
|
||||
<a href="/" class="btn btn-outline" style="margin-top:24px">Back to home</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script is:inline>
|
||||
document.getElementById('uninstall-feedback').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const data = new FormData(form);
|
||||
const payload = {
|
||||
ext: data.get('ext') || '',
|
||||
reason: data.get('reason') || '',
|
||||
text: data.get('text') || '',
|
||||
};
|
||||
try {
|
||||
await fetch('/feedback', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
} catch (err) {
|
||||
// Silent fail — feedback is best-effort
|
||||
}
|
||||
document.getElementById('feedback-form').hidden = true;
|
||||
document.getElementById('feedback-success').hidden = false;
|
||||
});
|
||||
</script>
|
||||
</Base>
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const extensions = await getCollection('extensions');
|
||||
---
|
||||
|
||||
<Base title="Greasy Sprocket — Free Chrome Extensions">
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<span class="badge">100% Free · No limits · No catch</span>
|
||||
<h1>Chrome extensions that just work</h1>
|
||||
<p>
|
||||
We build small, useful browser extensions. They're free, they'll always be free,
|
||||
and they'll never nag you for money. If you love them, you can buy us a coffee.
|
||||
</p>
|
||||
<div style="display:flex;gap:12px;justify-content:center">
|
||||
<a href="#extensions" class="btn btn-primary">Browse extensions</a>
|
||||
<a href="/coffee" class="btn btn-outline">☕ Support us</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="extensions">
|
||||
<div class="container">
|
||||
<h2>Extensions</h2>
|
||||
<div class="ext-grid">
|
||||
{extensions.map((ext) => (
|
||||
<article class="ext-card">
|
||||
<h3>{ext.data.name}</h3>
|
||||
<p>{ext.data.tagline}</p>
|
||||
<div class="links">
|
||||
<a href={`/${ext.slug}`}>Learn more →</a>
|
||||
{ext.data.chromeStoreUrl && (
|
||||
<a href={ext.data.chromeStoreUrl} target="_blank" rel="noopener">Chrome Store</a>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container" style="text-align:center">
|
||||
<h2>Why free?</h2>
|
||||
<p style="color:var(--text-muted);max-width:520px;margin:0 auto">
|
||||
We believe useful tools shouldn't be locked behind paywalls. Every extension is
|
||||
fully featured, no premium tiers, no trial periods. If you want to support development,
|
||||
you can <a href="/coffee">buy us a coffee</a> — but there's zero pressure.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Base>
|
||||
@@ -0,0 +1,360 @@
|
||||
:root {
|
||||
--bg: #0c0a09;
|
||||
--bg-elevated: #1c1917;
|
||||
--bg-card: #1e1b18;
|
||||
--border: #2e2a27;
|
||||
--text: #fafaf9;
|
||||
--text-muted: #a8a29e;
|
||||
--accent: #f97316;
|
||||
--accent-hover: #fb923c;
|
||||
--radius: 8px;
|
||||
--max-width: 960px;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--bg: #fafaf9;
|
||||
--bg-elevated: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--border: #e7e5e4;
|
||||
--text: #1c1917;
|
||||
--text-muted: #78716c;
|
||||
--accent: #c2410c;
|
||||
--accent-hover: #9a3412;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { color: var(--accent-hover); }
|
||||
|
||||
.container {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 16px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--bg);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.site-header .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo span { color: var(--accent); }
|
||||
|
||||
nav { display: flex; gap: 24px; }
|
||||
nav a { color: var(--text-muted); font-size: 14px; font-weight: 500; }
|
||||
nav a:hover { color: var(--text); }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 80px 0 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 20px;
|
||||
color: var(--text-muted);
|
||||
max-width: 600px;
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
|
||||
.hero .badge {
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
background: color-mix(in srgb, var(--accent) 15%, transparent);
|
||||
color: var(--accent);
|
||||
border-radius: 9999px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Extension grid */
|
||||
.ext-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.ext-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
transition: border-color 200ms ease;
|
||||
}
|
||||
|
||||
.ext-card:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.ext-card h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ext-card p {
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ext-card .links {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ext-card .links a {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
transition: all 200ms ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
.btn-outline:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
padding: 60px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.site-footer a { color: var(--text-muted); }
|
||||
.site-footer a:hover { color: var(--text); }
|
||||
|
||||
/* Feedback form */
|
||||
.feedback-form {
|
||||
max-width: 480px;
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.form-success {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-success h2 { color: var(--accent); }
|
||||
|
||||
/* Coffee page */
|
||||
.coffee-options {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.coffee-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 24px 32px;
|
||||
background: var(--bg-card);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
min-width: 120px;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.coffee-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.coffee-btn span {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Landing page (per-extension) */
|
||||
.ext-hero {
|
||||
padding: 60px 0 40px;
|
||||
}
|
||||
|
||||
.ext-hero .container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ext-hero .info h1 {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ext-hero .info p {
|
||||
color: var(--text-muted);
|
||||
font-size: 17px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ext-hero .screenshot {
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ext-hero .screenshot img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.feature-item h4 {
|
||||
font-size: 15px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.feature-item p {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero h1 { font-size: 32px; }
|
||||
.hero p { font-size: 16px; }
|
||||
.ext-hero .container { grid-template-columns: 1fr; }
|
||||
.ext-hero .screenshot { order: -1; }
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [".astro/types.d.ts", "**/*"],
|
||||
"exclude": ["dist"]
|
||||
}
|
||||
Reference in New Issue
Block a user