feat(website): add skills browse and search page to docs (#4500)
Adds a Skills Hub page to the documentation site with browsable/searchable catalog of all skills (built-in, optional, and community from cached hub indexes). - Python extraction script (website/scripts/extract-skills.py) parses SKILL.md frontmatter and hub index caches into skills.json - React page (website/src/pages/skills/) with search, category filtering, source filtering, and expandable skill cards - CI workflow updated to run extraction before Docusaurus build - Deploy trigger expanded to include skills/ and optional-skills/ changes Authored by @IAvecilla
This commit is contained in:
Nacho Avecilla
582
website/src/pages/skills/index.tsx
Normal file
582
website/src/pages/skills/index.tsx
Normal file
@@ -0,0 +1,582 @@
|
||||
import React, { useState, useMemo, useCallback, useRef, useEffect } from "react";
|
||||
import Layout from "@theme/Layout";
|
||||
import skills from "../../data/skills.json";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
interface Skill {
|
||||
name: string;
|
||||
description: string;
|
||||
category: string;
|
||||
categoryLabel: string;
|
||||
source: string;
|
||||
tags: string[];
|
||||
platforms: string[];
|
||||
author: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
const allSkills: Skill[] = skills as Skill[];
|
||||
|
||||
const CATEGORY_ICONS: Record<string, string> = {
|
||||
apple: "\u{f179}",
|
||||
"autonomous-ai-agents": "\u{1F916}",
|
||||
blockchain: "\u{26D3}",
|
||||
communication: "\u{1F4AC}",
|
||||
creative: "\u{1F3A8}",
|
||||
"data-science": "\u{1F4CA}",
|
||||
devops: "\u{2699}",
|
||||
dogfood: "\u{1F436}",
|
||||
domain: "\u{1F310}",
|
||||
email: "\u{2709}",
|
||||
feeds: "\u{1F4E1}",
|
||||
gaming: "\u{1F3AE}",
|
||||
gifs: "\u{1F3AC}",
|
||||
github: "\u{1F4BB}",
|
||||
health: "\u{2764}",
|
||||
"inference-sh": "\u{26A1}",
|
||||
leisure: "\u{2615}",
|
||||
mcp: "\u{1F50C}",
|
||||
media: "\u{1F3B5}",
|
||||
migration: "\u{1F4E6}",
|
||||
mlops: "\u{1F9EA}",
|
||||
"note-taking": "\u{1F4DD}",
|
||||
productivity: "\u{2705}",
|
||||
"red-teaming": "\u{1F6E1}",
|
||||
research: "\u{1F50D}",
|
||||
security: "\u{1F512}",
|
||||
"smart-home": "\u{1F3E0}",
|
||||
"social-media": "\u{1F4F1}",
|
||||
"software-development": "\u{1F4BB}",
|
||||
translation: "\u{1F30D}",
|
||||
other: "\u{1F4E6}",
|
||||
};
|
||||
|
||||
const SOURCE_CONFIG: Record<
|
||||
string,
|
||||
{ label: string; color: string; bg: string; border: string; icon: string }
|
||||
> = {
|
||||
"built-in": {
|
||||
label: "Built-in",
|
||||
color: "#4ade80",
|
||||
bg: "rgba(74, 222, 128, 0.08)",
|
||||
border: "rgba(74, 222, 128, 0.2)",
|
||||
icon: "\u{2713}",
|
||||
},
|
||||
optional: {
|
||||
label: "Optional",
|
||||
color: "#fbbf24",
|
||||
bg: "rgba(251, 191, 36, 0.08)",
|
||||
border: "rgba(251, 191, 36, 0.2)",
|
||||
icon: "\u{2B50}",
|
||||
},
|
||||
Anthropic: {
|
||||
label: "Anthropic",
|
||||
color: "#d4845a",
|
||||
bg: "rgba(212, 132, 90, 0.08)",
|
||||
border: "rgba(212, 132, 90, 0.2)",
|
||||
icon: "\u{25C6}",
|
||||
},
|
||||
LobeHub: {
|
||||
label: "LobeHub",
|
||||
color: "#60a5fa",
|
||||
bg: "rgba(96, 165, 250, 0.08)",
|
||||
border: "rgba(96, 165, 250, 0.2)",
|
||||
icon: "\u{25CB}",
|
||||
},
|
||||
"Claude Marketplace": {
|
||||
label: "Marketplace",
|
||||
color: "#a78bfa",
|
||||
bg: "rgba(167, 139, 250, 0.08)",
|
||||
border: "rgba(167, 139, 250, 0.2)",
|
||||
icon: "\u{25A0}",
|
||||
},
|
||||
};
|
||||
|
||||
const SOURCE_ORDER = ["all", "built-in", "optional", "Anthropic", "LobeHub", "Claude Marketplace"];
|
||||
|
||||
function highlightMatch(text: string, query: string): React.ReactNode {
|
||||
if (!query || !text) return text;
|
||||
const idx = text.toLowerCase().indexOf(query.toLowerCase());
|
||||
if (idx === -1) return text;
|
||||
return (
|
||||
<>
|
||||
{text.slice(0, idx)}
|
||||
<mark className={styles.highlight}>{text.slice(idx, idx + query.length)}</mark>
|
||||
{text.slice(idx + query.length)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SkillCard({
|
||||
skill,
|
||||
query,
|
||||
expanded,
|
||||
onToggle,
|
||||
onCategoryClick,
|
||||
onTagClick,
|
||||
style,
|
||||
}: {
|
||||
skill: Skill;
|
||||
query: string;
|
||||
expanded: boolean;
|
||||
onToggle: () => void;
|
||||
onCategoryClick: (cat: string) => void;
|
||||
onTagClick: (tag: string) => void;
|
||||
style?: React.CSSProperties;
|
||||
}) {
|
||||
const src = SOURCE_CONFIG[skill.source] || SOURCE_CONFIG["optional"];
|
||||
const icon = CATEGORY_ICONS[skill.category] || "\u{1F4E6}";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.card} ${expanded ? styles.cardExpanded : ""}`}
|
||||
onClick={onToggle}
|
||||
style={style}
|
||||
>
|
||||
<div className={styles.cardAccent} style={{ background: src.color }} />
|
||||
|
||||
<div className={styles.cardInner}>
|
||||
<div className={styles.cardTop}>
|
||||
<span className={styles.cardIcon}>{icon}</span>
|
||||
<div className={styles.cardTitleGroup}>
|
||||
<h3 className={styles.cardTitle}>
|
||||
{highlightMatch(skill.name, query)}
|
||||
</h3>
|
||||
<span
|
||||
className={styles.sourcePill}
|
||||
style={{
|
||||
color: src.color,
|
||||
background: src.bg,
|
||||
borderColor: src.border,
|
||||
}}
|
||||
>
|
||||
{src.icon} {src.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={`${styles.cardDesc} ${expanded ? styles.cardDescFull : ""}`}>
|
||||
{highlightMatch(skill.description || "No description available.", query)}
|
||||
</p>
|
||||
|
||||
<div className={styles.cardMeta}>
|
||||
<button
|
||||
className={styles.catButton}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCategoryClick(skill.category);
|
||||
}}
|
||||
title={`Filter by ${skill.categoryLabel}`}
|
||||
>
|
||||
{skill.categoryLabel || skill.category}
|
||||
</button>
|
||||
{skill.platforms?.map((p) => (
|
||||
<span key={p} className={styles.platformPill}>
|
||||
{p === "macos" ? "\u{F8FF} macOS" : p === "linux" ? "\u{1F427} Linux" : p}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className={styles.cardDetail}>
|
||||
{skill.tags?.length > 0 && (
|
||||
<div className={styles.tagRow}>
|
||||
{skill.tags.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
className={styles.tagPill}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onTagClick(tag);
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{skill.author && (
|
||||
<div className={styles.authorRow}>
|
||||
<span className={styles.authorLabel}>Author</span>
|
||||
<span className={styles.authorValue}>{skill.author}</span>
|
||||
</div>
|
||||
)}
|
||||
{skill.version && (
|
||||
<div className={styles.authorRow}>
|
||||
<span className={styles.authorLabel}>Version</span>
|
||||
<span className={styles.authorValue}>{skill.version}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.installHint}>
|
||||
<code>hermes skills install {skill.name}</code>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ value, label, color }: { value: number; label: string; color: string }) {
|
||||
return (
|
||||
<div className={styles.stat}>
|
||||
<span className={styles.statValue} style={{ color }}>
|
||||
{value}
|
||||
</span>
|
||||
<span className={styles.statLabel}>{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const PAGE_SIZE = 60;
|
||||
|
||||
export default function SkillsDashboard() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [sourceFilter, setSourceFilter] = useState("all");
|
||||
const [categoryFilter, setCategoryFilter] = useState("all");
|
||||
const [expandedCard, setExpandedCard] = useState<string | null>(null);
|
||||
const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
const gridRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === "/" && document.activeElement?.tagName !== "INPUT") {
|
||||
e.preventDefault();
|
||||
searchRef.current?.focus();
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
searchRef.current?.blur();
|
||||
setExpandedCard(null);
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", handler);
|
||||
return () => window.removeEventListener("keydown", handler);
|
||||
}, []);
|
||||
|
||||
const sources = useMemo(() => {
|
||||
const set = new Set(allSkills.map((s) => s.source));
|
||||
return SOURCE_ORDER.filter((s) => s === "all" || set.has(s));
|
||||
}, []);
|
||||
|
||||
const categoryEntries = useMemo(() => {
|
||||
const pool =
|
||||
sourceFilter === "all"
|
||||
? allSkills
|
||||
: allSkills.filter((s) => s.source === sourceFilter);
|
||||
const map = new Map<string, { label: string; count: number }>();
|
||||
for (const s of pool) {
|
||||
const key = s.category || "uncategorized";
|
||||
const existing = map.get(key);
|
||||
if (existing) {
|
||||
existing.count++;
|
||||
} else {
|
||||
map.set(key, {
|
||||
label: s.categoryLabel || s.category || "Uncategorized",
|
||||
count: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
return Array.from(map.entries())
|
||||
.sort((a, b) => b[1].count - a[1].count)
|
||||
.map(([key, { label, count }]) => ({ key, label, count }));
|
||||
}, [sourceFilter]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = search.toLowerCase().trim();
|
||||
return allSkills.filter((s) => {
|
||||
if (sourceFilter !== "all" && s.source !== sourceFilter) return false;
|
||||
if (categoryFilter !== "all" && s.category !== categoryFilter) return false;
|
||||
if (q) {
|
||||
const haystack = [s.name, s.description, s.categoryLabel, s.author, ...(s.tags || [])]
|
||||
.join(" ")
|
||||
.toLowerCase();
|
||||
return haystack.includes(q);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [search, sourceFilter, categoryFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
setVisibleCount(PAGE_SIZE);
|
||||
setExpandedCard(null);
|
||||
}, [search, sourceFilter, categoryFilter]);
|
||||
|
||||
const visible = filtered.slice(0, visibleCount);
|
||||
const hasMore = visibleCount < filtered.length;
|
||||
|
||||
const handleSourceChange = useCallback(
|
||||
(src: string) => {
|
||||
setSourceFilter(src);
|
||||
setCategoryFilter("all");
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleCategoryClick = useCallback((cat: string) => {
|
||||
setCategoryFilter(cat);
|
||||
gridRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
setSidebarOpen(false);
|
||||
}, []);
|
||||
|
||||
const handleTagClick = useCallback((tag: string) => {
|
||||
setSearch(tag);
|
||||
searchRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
const clearAll = useCallback(() => {
|
||||
setSearch("");
|
||||
setSourceFilter("all");
|
||||
setCategoryFilter("all");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title="Skills Hub"
|
||||
description="Browse all skills and plugins available for Hermes Agent"
|
||||
>
|
||||
<div className={styles.page}>
|
||||
<header className={styles.hero}>
|
||||
<div className={styles.heroGlow} />
|
||||
<div className={styles.heroContent}>
|
||||
<p className={styles.heroEyebrow}>Hermes Agent</p>
|
||||
<h1 className={styles.heroTitle}>Skills Hub</h1>
|
||||
<p className={styles.heroSub}>
|
||||
Discover, search, and install from{" "}
|
||||
<strong className={styles.heroAccent}>{allSkills.length}</strong> skills
|
||||
across {sources.length - 1} registries
|
||||
</p>
|
||||
|
||||
<div className={styles.statsRow}>
|
||||
<StatCard
|
||||
value={allSkills.filter((s) => s.source === "built-in").length}
|
||||
label="Built-in"
|
||||
color="#4ade80"
|
||||
/>
|
||||
<StatCard
|
||||
value={allSkills.filter((s) => s.source === "optional").length}
|
||||
label="Optional"
|
||||
color="#fbbf24"
|
||||
/>
|
||||
<StatCard
|
||||
value={
|
||||
allSkills.filter(
|
||||
(s) => s.source !== "built-in" && s.source !== "optional"
|
||||
).length
|
||||
}
|
||||
label="Community"
|
||||
color="#60a5fa"
|
||||
/>
|
||||
<StatCard
|
||||
value={new Set(allSkills.map((s) => s.category)).size}
|
||||
label="Categories"
|
||||
color="#a78bfa"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className={styles.controlsBar}>
|
||||
<div className={styles.searchWrap}>
|
||||
<svg className={styles.searchIcon} viewBox="0 0 20 20" fill="currentColor" width="18" height="18">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
ref={searchRef}
|
||||
type="text"
|
||||
placeholder='Search skills... (press "/" to focus)'
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className={styles.searchInput}
|
||||
/>
|
||||
{search && (
|
||||
<button className={styles.clearBtn} onClick={() => setSearch("")}>
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.sourcePills}>
|
||||
{sources.map((src) => {
|
||||
const active = sourceFilter === src;
|
||||
const conf = SOURCE_CONFIG[src];
|
||||
const count =
|
||||
src === "all"
|
||||
? allSkills.length
|
||||
: allSkills.filter((s) => s.source === src).length;
|
||||
return (
|
||||
<button
|
||||
key={src}
|
||||
className={`${styles.srcPill} ${active ? styles.srcPillActive : ""}`}
|
||||
onClick={() => handleSourceChange(src)}
|
||||
style={
|
||||
active && conf
|
||||
? ({
|
||||
"--pill-color": conf.color,
|
||||
"--pill-bg": conf.bg,
|
||||
"--pill-border": conf.border,
|
||||
} as React.CSSProperties)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{src === "all" ? "All" : conf?.label || src}
|
||||
<span className={styles.srcCount}>{count}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.layout}>
|
||||
<button
|
||||
className={styles.sidebarToggle}
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
>
|
||||
<svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Categories
|
||||
{categoryFilter !== "all" && (
|
||||
<span className={styles.activeCatBadge}>
|
||||
{categoryEntries.find((c) => c.key === categoryFilter)?.label}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<aside className={`${styles.sidebar} ${sidebarOpen ? styles.sidebarOpen : ""}`}>
|
||||
<div className={styles.sidebarHeader}>
|
||||
<h2 className={styles.sidebarTitle}>Categories</h2>
|
||||
{categoryFilter !== "all" && (
|
||||
<button className={styles.sidebarClear} onClick={() => setCategoryFilter("all")}>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<nav className={styles.catList}>
|
||||
<button
|
||||
className={`${styles.catItem} ${categoryFilter === "all" ? styles.catItemActive : ""}`}
|
||||
onClick={() => {
|
||||
setCategoryFilter("all");
|
||||
setSidebarOpen(false);
|
||||
}}
|
||||
>
|
||||
<span className={styles.catItemIcon}>{"\u{1F4CB}"}</span>
|
||||
<span className={styles.catItemLabel}>All Skills</span>
|
||||
<span className={styles.catItemCount}>{filtered.length}</span>
|
||||
</button>
|
||||
{categoryEntries.map((cat) => (
|
||||
<button
|
||||
key={cat.key}
|
||||
className={`${styles.catItem} ${categoryFilter === cat.key ? styles.catItemActive : ""}`}
|
||||
onClick={() => handleCategoryClick(cat.key)}
|
||||
>
|
||||
<span className={styles.catItemIcon}>
|
||||
{CATEGORY_ICONS[cat.key] || "\u{1F4E6}"}
|
||||
</span>
|
||||
<span className={styles.catItemLabel}>{cat.label}</span>
|
||||
<span className={styles.catItemCount}>{cat.count}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main className={styles.main} ref={gridRef}>
|
||||
{(search || sourceFilter !== "all" || categoryFilter !== "all") && (
|
||||
<div className={styles.filterSummary}>
|
||||
<span className={styles.filterCount}>
|
||||
{filtered.length} result{filtered.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
{search && (
|
||||
<span className={styles.filterChip}>
|
||||
“{search}”
|
||||
<button onClick={() => setSearch("")}>×</button>
|
||||
</span>
|
||||
)}
|
||||
{sourceFilter !== "all" && (
|
||||
<span className={styles.filterChip}>
|
||||
{SOURCE_CONFIG[sourceFilter]?.label || sourceFilter}
|
||||
<button onClick={() => setSourceFilter("all")}>×</button>
|
||||
</span>
|
||||
)}
|
||||
{categoryFilter !== "all" && (
|
||||
<span className={styles.filterChip}>
|
||||
{categoryEntries.find((c) => c.key === categoryFilter)?.label ||
|
||||
categoryFilter}
|
||||
<button onClick={() => setCategoryFilter("all")}>×</button>
|
||||
</span>
|
||||
)}
|
||||
<button className={styles.clearAllBtn} onClick={clearAll}>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{visible.length > 0 ? (
|
||||
<>
|
||||
<div className={styles.grid}>
|
||||
{visible.map((skill, i) => {
|
||||
const key = `${skill.source}-${skill.name}-${i}`;
|
||||
return (
|
||||
<SkillCard
|
||||
key={key}
|
||||
skill={skill}
|
||||
query={search}
|
||||
expanded={expandedCard === key}
|
||||
onToggle={() =>
|
||||
setExpandedCard(expandedCard === key ? null : key)
|
||||
}
|
||||
onCategoryClick={handleCategoryClick}
|
||||
onTagClick={handleTagClick}
|
||||
style={{ animationDelay: `${Math.min(i, 20) * 25}ms` }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{hasMore && (
|
||||
<div className={styles.loadMoreWrap}>
|
||||
<button
|
||||
className={styles.loadMoreBtn}
|
||||
onClick={() => setVisibleCount((v) => v + PAGE_SIZE)}
|
||||
>
|
||||
Show more ({filtered.length - visibleCount} remaining)
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className={styles.empty}>
|
||||
<div className={styles.emptyIcon}>{"\u{1F50D}"}</div>
|
||||
<h3 className={styles.emptyTitle}>No skills found</h3>
|
||||
<p className={styles.emptyDesc}>
|
||||
Try a different search term or clear your filters.
|
||||
</p>
|
||||
<button className={styles.emptyReset} onClick={clearAll}>
|
||||
Reset all filters
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sidebarOpen && (
|
||||
<div className={styles.backdrop} onClick={() => setSidebarOpen(false)} />
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
819
website/src/pages/skills/styles.module.css
Normal file
819
website/src/pages/skills/styles.module.css
Normal file
@@ -0,0 +1,819 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
|
||||
|
||||
.page {
|
||||
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 4rem 2rem 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heroGlow {
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
rgba(255, 215, 0, 0.07) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.heroEyebrow {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 215, 0, 0.5);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .heroTitle {
|
||||
color: #fafaf6;
|
||||
}
|
||||
|
||||
.heroSub {
|
||||
font-size: 1.05rem;
|
||||
color: var(--ifm-font-color-secondary, #9a968e);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
|
||||
.heroAccent {
|
||||
color: #ffd700;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.statsRow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ifm-font-color-secondary, #9a968e);
|
||||
}
|
||||
|
||||
|
||||
.controlsBar {
|
||||
position: sticky;
|
||||
top: 60px; /* below Docusaurus navbar */
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
backdrop-filter: blur(16px) saturate(1.4);
|
||||
border-bottom: 1px solid rgba(255, 215, 0, 0.06);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .controlsBar {
|
||||
background: rgba(7, 7, 13, 0.85);
|
||||
}
|
||||
|
||||
.searchWrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
position: absolute;
|
||||
left: 0.85rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: rgba(255, 215, 0, 0.35);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
width: 100%;
|
||||
padding: 0.7rem 2.5rem 0.7rem 2.6rem;
|
||||
font-size: 0.95rem;
|
||||
font-family: "DM Sans", sans-serif;
|
||||
border: 1px solid rgba(255, 215, 0, 0.12);
|
||||
border-radius: 10px;
|
||||
background: rgba(15, 15, 24, 0.6);
|
||||
color: var(--ifm-font-color-base, #e8e4dc);
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.searchInput:focus {
|
||||
border-color: rgba(255, 215, 0, 0.4);
|
||||
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.06);
|
||||
}
|
||||
|
||||
.searchInput::placeholder {
|
||||
color: var(--ifm-font-color-secondary, #9a968e);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.clearBtn {
|
||||
position: absolute;
|
||||
right: 0.6rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--ifm-font-color-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.15rem;
|
||||
display: flex;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.clearBtn:hover {
|
||||
opacity: 1;
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.sourcePills {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.srcPill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 20px;
|
||||
background: transparent;
|
||||
color: var(--ifm-font-color-secondary, #9a968e);
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.srcPill:hover {
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
color: var(--ifm-font-color-base);
|
||||
}
|
||||
|
||||
.srcPillActive {
|
||||
border-color: var(--pill-border, rgba(255, 215, 0, 0.3));
|
||||
background: var(--pill-bg, rgba(255, 215, 0, 0.06));
|
||||
color: var(--pill-color, #ffd700);
|
||||
}
|
||||
|
||||
.srcCount {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 0.05rem 0.35rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.srcPillActive .srcCount {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
gap: 0;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 160px;
|
||||
height: calc(100vh - 160px);
|
||||
overflow-y: auto;
|
||||
padding: 1.25rem 1rem 2rem 1.5rem;
|
||||
border-right: 1px solid rgba(255, 215, 0, 0.05);
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sidebarHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.sidebarTitle {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ifm-font-color-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebarClear {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.72rem;
|
||||
color: rgba(255, 215, 0, 0.6);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.sidebarClear:hover {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.catList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.catItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--ifm-font-color-secondary, #9a968e);
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.catItem:hover {
|
||||
background: rgba(255, 215, 0, 0.04);
|
||||
color: var(--ifm-font-color-base);
|
||||
}
|
||||
|
||||
.catItemActive {
|
||||
background: rgba(255, 215, 0, 0.08);
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.catItemIcon {
|
||||
font-size: 0.9rem;
|
||||
width: 1.3rem;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.catItemLabel {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.catItemCount {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
color: rgba(255, 215, 0, 0.3);
|
||||
min-width: 1.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.catItemActive .catItemCount {
|
||||
color: rgba(255, 215, 0, 0.6);
|
||||
}
|
||||
|
||||
.sidebarToggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.main {
|
||||
padding: 1.25rem 1.5rem 3rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.filterSummary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(255, 215, 0, 0.05);
|
||||
}
|
||||
|
||||
.filterCount {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--ifm-font-color-base);
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.filterChip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border: 1px solid rgba(255, 215, 0, 0.15);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 215, 0, 0.04);
|
||||
color: rgba(255, 215, 0, 0.8);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.filterChip button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.filterChip button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.clearAllBtn {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.75rem;
|
||||
color: var(--ifm-font-color-secondary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.clearAllBtn:hover {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@keyframes cardIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
|
||||
animation: cardIn 0.35s ease both;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .card {
|
||||
background: #0c0c16;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: rgba(255, 215, 0, 0.15);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 215, 0, 0.05);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.cardExpanded {
|
||||
border-color: rgba(255, 215, 0, 0.2);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 215, 0, 0.08);
|
||||
}
|
||||
|
||||
.cardAccent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.card:hover .cardAccent {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cardInner {
|
||||
padding: 1rem 1rem 0.85rem 1.15rem;
|
||||
}
|
||||
|
||||
.cardTop {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cardIcon {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.1rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cardTitleGroup {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
color: var(--ifm-font-color-base);
|
||||
}
|
||||
|
||||
.sourcePill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 500;
|
||||
padding: 0.15rem 0.45rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.cardDesc {
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.55;
|
||||
color: var(--ifm-font-color-secondary, #9a968e);
|
||||
margin: 0 0 0.6rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cardDescFull {
|
||||
-webkit-line-clamp: unset;
|
||||
}
|
||||
|
||||
.cardMeta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.catButton {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.66rem;
|
||||
padding: 0.15rem 0.45rem;
|
||||
border: 1px solid rgba(255, 215, 0, 0.12);
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 215, 0, 0.04);
|
||||
color: rgba(255, 215, 0, 0.7);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.catButton:hover {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
color: #ffd700;
|
||||
border-color: rgba(255, 215, 0, 0.25);
|
||||
}
|
||||
|
||||
.platformPill {
|
||||
font-size: 0.66rem;
|
||||
padding: 0.12rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
background: rgba(96, 165, 250, 0.06);
|
||||
color: rgba(96, 165, 250, 0.8);
|
||||
border: 1px solid rgba(96, 165, 250, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.cardDetail {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.7rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||||
animation: cardIn 0.2s ease both;
|
||||
}
|
||||
|
||||
.tagRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.tagPill {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.68rem;
|
||||
padding: 0.12rem 0.4rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: var(--ifm-font-color-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.tagPill:hover {
|
||||
background: rgba(255, 215, 0, 0.06);
|
||||
color: rgba(255, 215, 0, 0.8);
|
||||
border-color: rgba(255, 215, 0, 0.15);
|
||||
}
|
||||
|
||||
.authorRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.authorLabel {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--ifm-font-color-secondary);
|
||||
opacity: 0.5;
|
||||
min-width: 3.5rem;
|
||||
}
|
||||
|
||||
.authorValue {
|
||||
font-size: 0.78rem;
|
||||
color: var(--ifm-font-color-base);
|
||||
}
|
||||
|
||||
.installHint {
|
||||
margin-top: 0.65rem;
|
||||
padding: 0.45rem 0.65rem;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(255, 215, 0, 0.06);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.installHint code {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.72rem;
|
||||
color: rgba(255, 215, 0, 0.7);
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
color: #ffd700;
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
|
||||
.loadMoreWrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.loadMoreBtn {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 1.5rem;
|
||||
border: 1px solid rgba(255, 215, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 215, 0, 0.04);
|
||||
color: rgba(255, 215, 0, 0.8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.loadMoreBtn:hover {
|
||||
background: rgba(255, 215, 0, 0.08);
|
||||
border-color: rgba(255, 215, 0, 0.35);
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emptyIcon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.emptyTitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.5rem;
|
||||
color: var(--ifm-font-color-base);
|
||||
}
|
||||
|
||||
.emptyDesc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--ifm-font-color-secondary);
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.emptyReset {
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border: 1px solid rgba(255, 215, 0, 0.25);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #ffd700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.emptyReset:hover {
|
||||
background: rgba(255, 215, 0, 0.08);
|
||||
}
|
||||
|
||||
|
||||
.backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.activeCatBadge {
|
||||
font-size: 0.72rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
color: rgba(255, 215, 0, 0.8);
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
z-index: 200;
|
||||
background: #0a0a14;
|
||||
border-right: 1px solid rgba(255, 215, 0, 0.1);
|
||||
padding-top: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidebarOpen {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 190;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.sidebarToggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.5rem 0.85rem;
|
||||
margin: 0 1rem 0.75rem;
|
||||
border: 1px solid rgba(255, 215, 0, 0.1);
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 215, 0, 0.03);
|
||||
color: var(--ifm-font-color-secondary);
|
||||
font-family: "DM Sans", sans-serif;
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.sidebarToggle:hover {
|
||||
border-color: rgba(255, 215, 0, 0.2);
|
||||
color: var(--ifm-font-color-base);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 2.5rem 1.25rem 1.75rem;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.statsRow {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.controlsBar {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 0.75rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) and (max-width: 1100px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user