feat(design): reader view — strip terminal chrome, add typography controls
Replace monospace-terminal aesthetic with clean reader layout. System sans-serif default, typeface picker (sans/serif/mono) with per-face optical tuning. Warm color palettes (slate dark, bone light), crafted link underlines, WCAG AA contrast on all text tiers. Semantic HTML throughout: proper heading hierarchy, <time> elements, role=group, <dl>/<table>/<article> where appropriate. Net -140 lines.
This commit is contained in:
+12
-18
@@ -3,45 +3,39 @@ const year = new Date().getFullYear();
|
|||||||
---
|
---
|
||||||
|
|
||||||
<footer class="border-t border-[var(--color-border)] py-1lh mt-2lh">
|
<footer class="border-t border-[var(--color-border)] py-1lh mt-2lh">
|
||||||
<div class="px-4ch flex items-center justify-between">
|
<div class="px-4ch flex items-center justify-between text-[var(--color-text-dim)]">
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
<span>© {year} Tyler Koenig</span>
|
||||||
© {year} Tyler Koenig
|
<nav class="flex items-center gap-2ch">
|
||||||
</span>
|
|
||||||
<div class="flex items-center gap-2ch">
|
|
||||||
<a
|
<a
|
||||||
href="https://github.com/lerko96"
|
href="https://github.com/lerko96"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
aria-label="GitHub"
|
class="underline hover:text-[var(--color-text)]"
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
|
||||||
>
|
>
|
||||||
[github]
|
GitHub
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://gitea.lerkolabs.com/lerko"
|
href="https://gitea.lerkolabs.com/lerko"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
aria-label="Gitea"
|
class="underline hover:text-[var(--color-text)]"
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
|
||||||
>
|
>
|
||||||
[gitea]
|
Gitea
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://www.linkedin.com/in/tyler-koenig"
|
href="https://www.linkedin.com/in/tyler-koenig"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
aria-label="LinkedIn"
|
class="underline hover:text-[var(--color-text)]"
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
|
||||||
>
|
>
|
||||||
[linkedin]
|
LinkedIn
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="mailto:tyler@lerkolabs.com"
|
href="mailto:tyler@lerkolabs.com"
|
||||||
aria-label="Email"
|
class="underline hover:text-[var(--color-text)]"
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
|
||||||
>
|
>
|
||||||
[email]
|
Email
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
+42
-68
@@ -1,71 +1,45 @@
|
|||||||
<section class="mb-16">
|
<section class="mb-3lh">
|
||||||
<div class="flex flex-col gap-1ch">
|
<h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1>
|
||||||
<div>
|
<p class="text-[var(--color-text-label)] mb-1lh">
|
||||||
<p class="font-mono text-sm font-bold text-[var(--color-text)]">
|
Security Operations · Self-Hosted Infrastructure
|
||||||
<span
|
</p>
|
||||||
class="text-[var(--color-accent-green)] select-none mr-1ch"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
❯
|
|
||||||
</span>
|
|
||||||
tyler koenig
|
|
||||||
</p>
|
|
||||||
<p class="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
|
|
||||||
Security Operations · Self-Hosted Infrastructure
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
|
<p class="text-[var(--color-text-label)] leading-relaxed mb-1lh">
|
||||||
Homelab runs 30+
|
Homelab runs 30+ services across segmented VLANs — pfSense, Authentik SSO,
|
||||||
services across segmented VLANs — pfSense, Authentik SSO, full
|
full observability stack. Write software too: mobile apps, Go backends, open
|
||||||
observability stack. Write software too: mobile apps, Go backends,
|
protocols. Daily drivers, all of it.
|
||||||
open protocols. Daily drivers, all of it.{" "}
|
</p>
|
||||||
<span
|
|
||||||
class="animate-cursor text-[var(--color-accent-green)]"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
█
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
|
<nav class="flex flex-wrap items-center gap-x-2ch gap-y-half-lh text-[var(--color-text-label)]">
|
||||||
<span class="font-mono text-sm text-[var(--color-accent-green)]">
|
<a
|
||||||
● available
|
href="https://github.com/lerko96"
|
||||||
</span>
|
target="_blank"
|
||||||
<a
|
rel="noopener noreferrer"
|
||||||
href="https://github.com/lerko96"
|
class="underline hover:text-[var(--color-text)]"
|
||||||
target="_blank"
|
>
|
||||||
rel="noopener noreferrer"
|
GitHub
|
||||||
aria-label="GitHub"
|
</a>
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
<a
|
||||||
>
|
href="https://gitea.lerkolabs.com/lerko"
|
||||||
[github]
|
target="_blank"
|
||||||
</a>
|
rel="noopener noreferrer"
|
||||||
<a
|
class="underline hover:text-[var(--color-text)]"
|
||||||
href="https://gitea.lerkolabs.com/lerko"
|
>
|
||||||
target="_blank"
|
Gitea
|
||||||
rel="noopener noreferrer"
|
</a>
|
||||||
aria-label="Gitea"
|
<a
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
href="https://www.linkedin.com/in/tyler-koenig"
|
||||||
>
|
target="_blank"
|
||||||
[gitea]
|
rel="noopener noreferrer"
|
||||||
</a>
|
class="underline hover:text-[var(--color-text)]"
|
||||||
<a
|
>
|
||||||
href="https://www.linkedin.com/in/tyler-koenig"
|
LinkedIn
|
||||||
target="_blank"
|
</a>
|
||||||
rel="noopener noreferrer"
|
<a
|
||||||
aria-label="LinkedIn"
|
href="mailto:tyler@lerkolabs.com"
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
class="underline hover:text-[var(--color-text)]"
|
||||||
>
|
>
|
||||||
[linkedin]
|
Email
|
||||||
</a>
|
</a>
|
||||||
<a
|
</nav>
|
||||||
href="mailto:tyler@lerkolabs.com"
|
|
||||||
aria-label="Email"
|
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
|
||||||
>
|
|
||||||
[email]
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
+53
-25
@@ -8,15 +8,8 @@ const links = [
|
|||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
|
<header class="sticky top-0 z-50 bg-[var(--color-bg)] border-b border-[var(--color-border)]">
|
||||||
<nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
|
<nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
|
||||||
<a
|
|
||||||
href="/"
|
|
||||||
class="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
|
|
||||||
>
|
|
||||||
~/
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<ul class="flex items-center gap-2ch">
|
<ul class="flex items-center gap-2ch">
|
||||||
{links.map(({ href, label }) => {
|
{links.map(({ href, label }) => {
|
||||||
const active = pathname === href || pathname === href.replace(/\/$/, "");
|
const active = pathname === href || pathname === href.replace(/\/$/, "");
|
||||||
@@ -26,7 +19,6 @@ const links = [
|
|||||||
href={href}
|
href={href}
|
||||||
aria-current={active ? "page" : undefined}
|
aria-current={active ? "page" : undefined}
|
||||||
class:list={[
|
class:list={[
|
||||||
"font-mono text-sm",
|
|
||||||
active
|
active
|
||||||
? "text-[var(--color-text)]"
|
? "text-[var(--color-text)]"
|
||||||
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
|
: "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
|
||||||
@@ -37,37 +29,73 @@ const links = [
|
|||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
data-theme-toggle
|
|
||||||
aria-label="Switch to light mode"
|
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
|
|
||||||
>
|
|
||||||
[light]
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2ch">
|
||||||
|
<div role="group" aria-label="Typeface" class="flex items-center gap-[0.5ch] text-[var(--color-text-dim)]">
|
||||||
|
<button data-typeface-btn="sans" class="hover:text-[var(--color-text)] cursor-pointer">sans</button>
|
||||||
|
<span aria-hidden="true">/</span>
|
||||||
|
<button data-typeface-btn="serif" class="hover:text-[var(--color-text)] cursor-pointer">serif</button>
|
||||||
|
<span aria-hidden="true">/</span>
|
||||||
|
<button data-typeface-btn="mono" class="hover:text-[var(--color-text)] cursor-pointer">mono</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
data-theme-toggle
|
||||||
|
aria-label="Switch to light mode"
|
||||||
|
class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
|
||||||
|
>
|
||||||
|
light
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
|
const themeBtn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
|
||||||
|
|
||||||
function update() {
|
function updateTheme() {
|
||||||
const isDark = document.documentElement.classList.contains("dark");
|
const isDark = document.documentElement.classList.contains("dark");
|
||||||
btn.textContent = isDark ? "[light]" : "[dark]";
|
themeBtn.textContent = isDark ? "light" : "dark";
|
||||||
btn.setAttribute(
|
themeBtn.setAttribute(
|
||||||
"aria-label",
|
"aria-label",
|
||||||
isDark ? "Switch to light mode" : "Switch to dark mode",
|
isDark ? "Switch to light mode" : "Switch to dark mode",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
btn.addEventListener("click", () => {
|
themeBtn.addEventListener("click", () => {
|
||||||
const next = !document.documentElement.classList.contains("dark");
|
const next = !document.documentElement.classList.contains("dark");
|
||||||
document.documentElement.classList.toggle("dark", next);
|
document.documentElement.classList.toggle("dark", next);
|
||||||
localStorage.setItem("lerko96-dark-mode", String(next));
|
localStorage.setItem("lerko96-dark-mode", String(next));
|
||||||
update();
|
updateTheme();
|
||||||
});
|
});
|
||||||
|
|
||||||
update();
|
updateTheme();
|
||||||
|
|
||||||
|
const tfBtns = document.querySelectorAll("[data-typeface-btn]");
|
||||||
|
|
||||||
|
function updateTypeface() {
|
||||||
|
const current = document.documentElement.dataset.typeface || "sans";
|
||||||
|
tfBtns.forEach((b) => {
|
||||||
|
const val = b.getAttribute("data-typeface-btn");
|
||||||
|
if (val === current) {
|
||||||
|
b.classList.add("font-bold", "text-[var(--color-text)]");
|
||||||
|
b.classList.remove("text-[var(--color-text-dim)]");
|
||||||
|
} else {
|
||||||
|
b.classList.remove("font-bold", "text-[var(--color-text)]");
|
||||||
|
b.classList.add("text-[var(--color-text-dim)]");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
tfBtns.forEach((b) => {
|
||||||
|
b.addEventListener("click", () => {
|
||||||
|
const val = b.getAttribute("data-typeface-btn")!;
|
||||||
|
document.documentElement.dataset.typeface = val;
|
||||||
|
localStorage.setItem("lerko96-typeface", val);
|
||||||
|
updateTypeface();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
updateTypeface();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -8,60 +8,28 @@ interface Props {
|
|||||||
const { project } = Astro.props;
|
const { project } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<article class="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
|
<article class="mb-2lh">
|
||||||
<div class="flex items-start justify-between gap-1ch">
|
<div class="flex items-baseline gap-1ch mb-half-lh">
|
||||||
<a
|
<h3>
|
||||||
href={project.githubUrl}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
|
|
||||||
>
|
|
||||||
{project.title}
|
|
||||||
</a>
|
|
||||||
<div class="flex items-center gap-1ch shrink-0">
|
|
||||||
{project.stats && (
|
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
|
||||||
{project.stats}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{project.externalUrl && (
|
|
||||||
<a
|
|
||||||
href={project.externalUrl}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
aria-label={`View ${project.title} externally`}
|
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
|
||||||
>
|
|
||||||
↗
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
<a
|
<a
|
||||||
href={project.githubUrl}
|
href={project.githubUrl}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
aria-label={`View ${project.title} on GitHub`}
|
class="font-semibold underline hover:text-[var(--color-text-label)]"
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
|
||||||
>
|
>
|
||||||
↗
|
{project.title}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</h3>
|
||||||
|
{project.statusBadge && (
|
||||||
|
<span class="text-[var(--color-text-dim)]">({project.statusBadge})</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{project.statusBadge && (
|
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
|
||||||
<span class="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
|
|
||||||
{project.statusBadge}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
|
|
||||||
{project.description}
|
{project.description}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
|
<p class="text-[var(--color-text-dim)]">
|
||||||
{project.tags.map((tag) => (
|
{project.tags.join(" · ")}
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
</p>
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
@@ -27,14 +27,14 @@ const skillGroups = [
|
|||||||
const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
|
const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
|
||||||
---
|
---
|
||||||
|
|
||||||
<Widget title="tyler/skills" badge={totalCount} as="section">
|
<Widget title="Skills" badge={totalCount} as="section">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
{skillGroups.map(({ label, skills }) => (
|
{skillGroups.map(({ label, skills }) => (
|
||||||
<div class="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh">
|
<div class="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh">
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
|
<span class="text-[var(--color-text-dim)] w-28 shrink-0">
|
||||||
{label}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
<span class="font-mono text-sm text-[var(--color-text)]">
|
<span>
|
||||||
{skills.join(" · ")}
|
{skills.join(" · ")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,13 +2,7 @@
|
|||||||
import Widget from "./Widget.astro";
|
import Widget from "./Widget.astro";
|
||||||
import { timeline, type TimelineType } from "@/data/timeline";
|
import { timeline, type TimelineType } from "@/data/timeline";
|
||||||
|
|
||||||
const typeColor: Record<TimelineType, string> = {
|
const isDate = (d: string) => /^\d{4}/.test(d);
|
||||||
career: "var(--color-timeline-career)",
|
|
||||||
education: "var(--color-timeline-education)",
|
|
||||||
cert: "var(--color-timeline-cert)",
|
|
||||||
project: "var(--color-timeline-project)",
|
|
||||||
homelab: "var(--color-timeline-homelab)",
|
|
||||||
};
|
|
||||||
|
|
||||||
const typeLabel: Record<TimelineType, string> = {
|
const typeLabel: Record<TimelineType, string> = {
|
||||||
career: "career",
|
career: "career",
|
||||||
@@ -19,70 +13,31 @@ const typeLabel: Record<TimelineType, string> = {
|
|||||||
};
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
<Widget title="tyler/journey">
|
<Widget title="Journey">
|
||||||
<ol class="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
|
<ol class="flex flex-col gap-0">
|
||||||
{timeline.map((entry) => (
|
{timeline.map((entry) => (
|
||||||
<li data-tl-entry class="pl-[3ch] pb-2lh last:pb-0 relative">
|
<li class="pb-2lh last:pb-0">
|
||||||
<span
|
<p class="text-[var(--color-text-dim)] mb-qtr-lh">
|
||||||
class="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
|
{isDate(entry.date)
|
||||||
style={`background-color: ${typeColor[entry.type]}`}
|
? <time datetime={entry.date}>{entry.date}</time>
|
||||||
aria-hidden="true"
|
: <span>{entry.date}</span>
|
||||||
/>
|
}
|
||||||
|
<span class="mx-[0.5ch]">·</span>
|
||||||
<div class="flex items-center gap-1ch mb-half-lh">
|
<em>{typeLabel[entry.type]}</em>
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
|
|
||||||
<span
|
|
||||||
class="font-mono text-sm px-1 border"
|
|
||||||
style={`color: ${typeColor[entry.type]}; border-color: ${typeColor[entry.type]}; opacity: 0.7;`}
|
|
||||||
>
|
|
||||||
{typeLabel[entry.type]}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
|
|
||||||
{entry.title}
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
|
<h3 class="font-semibold mb-half-lh">{entry.title}</h3>
|
||||||
|
|
||||||
|
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
|
||||||
{entry.description}
|
{entry.description}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{entry.tags && entry.tags.length > 0 && (
|
{entry.tags && entry.tags.length > 0 && (
|
||||||
<div class="flex flex-wrap gap-x-1ch gap-y-half-lh">
|
<p class="text-[var(--color-text-dim)]">
|
||||||
{entry.tags.map((tag) => (
|
{entry.tags.join(" · ")}
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
</p>
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ol>
|
</ol>
|
||||||
</Widget>
|
</Widget>
|
||||||
|
|
||||||
<script>
|
|
||||||
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
||||||
const entries = document.querySelectorAll<HTMLElement>("[data-tl-entry]");
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
(observed) => {
|
|
||||||
observed.forEach((entry) => {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
(entry.target as HTMLElement).style.opacity = "1";
|
|
||||||
(entry.target as HTMLElement).style.transform = "translateY(0)";
|
|
||||||
observer.unobserve(entry.target);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{ threshold: 0.15 },
|
|
||||||
);
|
|
||||||
|
|
||||||
entries.forEach((el) => {
|
|
||||||
el.style.opacity = "0";
|
|
||||||
el.style.transform = "translateY(8px)";
|
|
||||||
el.style.transition = "opacity 240ms linear, transform 240ms linear";
|
|
||||||
observer.observe(el);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|||||||
@@ -8,22 +8,18 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
|
const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
|
||||||
const slashIdx = title.lastIndexOf("/");
|
|
||||||
const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
|
|
||||||
const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Tag class:list={["mb-4lh", className]}>
|
<Tag class:list={["mb-4lh", className]}>
|
||||||
<div class="flex items-center gap-1ch mb-2lh">
|
<div class="mb-2lh">
|
||||||
{prefix && (
|
<h2 class="text-lg font-semibold">
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
|
{title}
|
||||||
)}
|
{badge !== undefined && (
|
||||||
<span class="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
|
<span class="text-[var(--color-text-dim)] font-normal"> ({badge})</span>
|
||||||
{badge !== undefined && (
|
)}
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
|
</h2>
|
||||||
)}
|
|
||||||
{meta && (
|
{meta && (
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
|
<p class="text-[var(--color-text-dim)]">{meta}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@@ -25,14 +25,18 @@ const {
|
|||||||
if (dark) document.documentElement.classList.add("dark");
|
if (dark) document.documentElement.classList.add("dark");
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
<script is:inline>
|
||||||
|
(function () {
|
||||||
|
var tf = localStorage.getItem("lerko96-typeface") || "sans";
|
||||||
|
document.documentElement.dataset.typeface = tf;
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
|
class="bg-[var(--color-bg)] text-[var(--color-text)] min-h-screen"
|
||||||
>
|
>
|
||||||
<slot name="nav" />
|
<slot name="nav" />
|
||||||
<div
|
<div class="max-w-[740px] mx-auto">
|
||||||
class="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]"
|
|
||||||
>
|
|
||||||
<main class="px-4ch py-3lh">
|
<main class="px-4ch py-3lh">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
+42
-77
@@ -86,16 +86,8 @@ const adrs = [
|
|||||||
<Nav slot="nav" />
|
<Nav slot="nav" />
|
||||||
|
|
||||||
<div class="mb-4lh">
|
<div class="mb-4lh">
|
||||||
<p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
|
<h1 class="text-xl font-bold mb-half-lh">Homelab</h1>
|
||||||
<span
|
<p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
|
||||||
class="text-[var(--color-accent-green)] select-none mr-1ch"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
❯
|
|
||||||
</span>
|
|
||||||
homelab
|
|
||||||
</p>
|
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
|
|
||||||
Personal infrastructure environment for learning, self-hosting, and
|
Personal infrastructure environment for learning, self-hosting, and
|
||||||
operational practice. Running 24/7 on production-grade hardware with
|
operational practice. Running 24/7 on production-grade hardware with
|
||||||
real network segmentation, SSO, monitoring, and IaC-style
|
real network segmentation, SSO, monitoring, and IaC-style
|
||||||
@@ -103,53 +95,43 @@ const adrs = [
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Widget title="homelab/overview" badge={glanceStats.length} as="section">
|
<Widget title="Overview" badge={glanceStats.length} as="section">
|
||||||
<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
|
<dl class="flex flex-col">
|
||||||
{glanceStats.map(({ label, value }) => (
|
{glanceStats.map(({ label, value }) => (
|
||||||
<div class="bg-[var(--color-surface)] px-2ch py-half-lh">
|
<div class="flex gap-2ch py-qtr-lh">
|
||||||
<p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
|
<dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
|
||||||
{label}
|
<dd>{value}</dd>
|
||||||
</p>
|
|
||||||
<p class="font-mono text-sm text-[var(--color-text)]">
|
|
||||||
{value}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</dl>
|
||||||
</Widget>
|
</Widget>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="homelab/network"
|
title="Network"
|
||||||
meta="8 network segments · default deny"
|
meta="8 segments, default deny"
|
||||||
as="section"
|
as="section"
|
||||||
>
|
>
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="w-full text-sm border-collapse">
|
<table class="w-full border-collapse">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="border-b border-[var(--color-border)]">
|
<tr class="border-b border-[var(--color-border)]">
|
||||||
<th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
|
<th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
|
||||||
Segment
|
Segment
|
||||||
</th>
|
</th>
|
||||||
<th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
|
<th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
|
||||||
Name
|
Name
|
||||||
</th>
|
</th>
|
||||||
<th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase">
|
<th class="text-[var(--color-text-dim)] text-left py-qtr-lh">
|
||||||
Purpose
|
Purpose
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{vlans.map((v) => (
|
{vlans.map((v) => (
|
||||||
<tr class="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]">
|
<tr class="border-b border-[var(--color-border)]">
|
||||||
<td class="font-mono text-[var(--color-accent-green)] py-half-lh pr-[3ch]">
|
<td class="py-half-lh pr-[3ch]">{v.id}</td>
|
||||||
{v.id}
|
<td class="py-half-lh pr-[3ch]">{v.name}</td>
|
||||||
</td>
|
<td class="text-[var(--color-text-label)] py-half-lh">{v.purpose}</td>
|
||||||
<td class="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]">
|
|
||||||
{v.name}
|
|
||||||
</td>
|
|
||||||
<td class="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">
|
|
||||||
{v.purpose}
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -157,29 +139,23 @@ const adrs = [
|
|||||||
</div>
|
</div>
|
||||||
</Widget>
|
</Widget>
|
||||||
|
|
||||||
<Widget title="homelab/services" badge={services.length} as="section">
|
<Widget title="Services" badge={services.length} as="section">
|
||||||
<div class="flex flex-col gap-3ch">
|
<div class="flex flex-col gap-2lh">
|
||||||
{categoryOrder.map((cat) => {
|
{categoryOrder.map((cat) => {
|
||||||
const catServices = services.filter((s) => s.category === cat);
|
const catServices = services.filter((s) => s.category === cat);
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<p class="font-mono text-sm text-[var(--color-text-dim)] mb-1lh">
|
<h3 class="text-[var(--color-text-dim)] font-semibold mb-half-lh">
|
||||||
{categoryLabels[cat]}
|
{categoryLabels[cat]}
|
||||||
</p>
|
</h3>
|
||||||
<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
|
<ul class="flex flex-col">
|
||||||
{catServices.map((svc) => (
|
{catServices.map((svc) => (
|
||||||
<div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-1ch px-2ch py-half-lh">
|
<li class="py-qtr-lh">
|
||||||
<div>
|
<span class="font-semibold">{svc.name}</span>
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] mb-0.5">
|
<span class="text-[var(--color-text-label)]"> — {svc.description}</span>
|
||||||
{svc.name}
|
</li>
|
||||||
</p>
|
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
|
|
||||||
{svc.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -187,49 +163,38 @@ const adrs = [
|
|||||||
</Widget>
|
</Widget>
|
||||||
|
|
||||||
<Widget
|
<Widget
|
||||||
title="homelab/ADRs"
|
title="ADRs"
|
||||||
meta="why things are configured the way they are"
|
meta="why things are configured the way they are"
|
||||||
badge={adrs.length}
|
badge={adrs.length}
|
||||||
as="section"
|
as="section"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col gap-px bg-[var(--color-border)]">
|
<div class="flex flex-col gap-2lh">
|
||||||
{adrs.map((adr) => (
|
{adrs.map((adr) => (
|
||||||
<div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-2ch py-1lh">
|
<div>
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] mb-1lh">
|
<h3 class="font-semibold mb-half-lh">{adr.title}</h3>
|
||||||
{adr.title}
|
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
|
||||||
|
<strong>Decision:</strong> {adr.decision}
|
||||||
</p>
|
</p>
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75">
|
<p class="text-[var(--color-text-label)] leading-relaxed">
|
||||||
<span class="text-[var(--color-text-label)] opacity-100">
|
<strong>Why:</strong> {adr.why}
|
||||||
decision:{" "}
|
|
||||||
</span>
|
|
||||||
{adr.decision}
|
|
||||||
</p>
|
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
|
|
||||||
<span class="text-[var(--color-text-label)] opacity-100">
|
|
||||||
why:{" "}
|
|
||||||
</span>
|
|
||||||
{adr.why}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Widget>
|
</Widget>
|
||||||
|
|
||||||
<section class="pt-qtr-lh">
|
<section class="mb-4lh">
|
||||||
<p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
|
<h2 class="text-lg font-semibold mb-half-lh">Docs</h2>
|
||||||
homelab/docs
|
<p class="text-[var(--color-text-label)] mb-half-lh">
|
||||||
</p>
|
VLAN maps, runbooks, service registry, config exports, and setup guides.
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75">
|
|
||||||
VLAN maps, runbooks, service registry, config exports, and setup
|
|
||||||
guides.
|
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a
|
||||||
href="https://gitea.lerkolabs.com/lerko/homelab"
|
href="https://gitea.lerkolabs.com/lerko/homelab"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
|
class="underline hover:text-[var(--color-text-label)]"
|
||||||
>
|
>
|
||||||
↗ gitea.lerkolabs.com/lerko/homelab
|
gitea.lerkolabs.com/lerko/homelab
|
||||||
</a>
|
</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
+29
-42
@@ -14,61 +14,48 @@ import { featuredProjects, archiveProjects } from "@/data/projects";
|
|||||||
<Nav slot="nav" />
|
<Nav slot="nav" />
|
||||||
|
|
||||||
<div class="mb-4lh">
|
<div class="mb-4lh">
|
||||||
<p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
|
<h1 class="text-xl font-bold mb-half-lh">Projects</h1>
|
||||||
<span class="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
|
<p class="text-[var(--color-text-label)] leading-relaxed max-w-xl">
|
||||||
projects
|
|
||||||
</p>
|
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
|
|
||||||
Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
|
Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Widget title="projects/featured" badge={featuredProjects.length} as="section">
|
<Widget title="Featured" badge={featuredProjects.length} as="section">
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-1ch">
|
<div class="flex flex-col">
|
||||||
{featuredProjects.map((project) => (
|
{featuredProjects.map((project) => (
|
||||||
<ProjectCard project={project} />
|
<ProjectCard project={project} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Widget>
|
</Widget>
|
||||||
|
|
||||||
<Widget title="projects/archive" badge={archiveProjects.length} as="section">
|
<Widget title="Archive" badge={archiveProjects.length} as="section">
|
||||||
<div class="flex flex-col gap-px bg-[var(--color-border)]">
|
<div class="flex flex-col gap-2lh">
|
||||||
{archiveProjects.map((project) => (
|
{archiveProjects.map((project) => (
|
||||||
<a
|
<div>
|
||||||
href={project.githubUrl}
|
<div class="flex items-baseline gap-1ch mb-half-lh">
|
||||||
target="_blank"
|
{project.year && (
|
||||||
rel="noopener noreferrer"
|
<span class="text-[var(--color-text-dim)] shrink-0">
|
||||||
class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-2ch px-2ch py-1lh group"
|
{project.year}
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-1ch flex-1 min-w-0">
|
|
||||||
<div class="flex items-center gap-1ch">
|
|
||||||
{project.year && (
|
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
|
|
||||||
{project.year}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span class="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
|
|
||||||
{project.title}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
)}
|
||||||
<p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
|
<h3>
|
||||||
{project.description}
|
<a
|
||||||
</p>
|
href={project.githubUrl}
|
||||||
<div class="flex flex-wrap gap-x-1ch gap-y-0.5">
|
target="_blank"
|
||||||
{project.tags.map((tag) => (
|
rel="noopener noreferrer"
|
||||||
<span class="font-mono text-sm text-[var(--color-text-dim)]">
|
class="font-semibold underline hover:text-[var(--color-text-label)]"
|
||||||
{tag}
|
>
|
||||||
</span>
|
{project.title}
|
||||||
))}
|
</a>
|
||||||
</div>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<span
|
<p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
|
||||||
class="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
|
{project.description}
|
||||||
aria-hidden="true"
|
</p>
|
||||||
>
|
<p class="text-[var(--color-text-dim)]">
|
||||||
↗
|
{project.tags.join(" · ")}
|
||||||
</span>
|
</p>
|
||||||
</a>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Widget>
|
</Widget>
|
||||||
|
|||||||
+40
-51
@@ -3,28 +3,21 @@
|
|||||||
@variant dark (&:where(.dark, .dark *));
|
@variant dark (&:where(.dark, .dark *));
|
||||||
|
|
||||||
@theme {
|
@theme {
|
||||||
/* macOS Classic Dark (default) */
|
/* Slate (dark, default) */
|
||||||
--color-bg: #131313;
|
--color-bg: #1A1B1E;
|
||||||
--color-surface: #1e1d1e;
|
--color-surface: #22242A;
|
||||||
--color-surface-raised: #272727;
|
--color-surface-raised: #2A2D34;
|
||||||
--color-border: #3a3a3a;
|
--color-border: #33363E;
|
||||||
--color-border-bright: #404040;
|
--color-border-bright: #3E4148;
|
||||||
--color-text: #caccca;
|
--color-text: #D4D4D8;
|
||||||
--color-text-label: #9e9e9e;
|
--color-text-label: #9CA0AA;
|
||||||
--color-text-dim: #8f8f8f;
|
--color-text-dim: #888D9B;
|
||||||
--color-accent-green: #62ba46;
|
|
||||||
--color-accent-red: #c74028;
|
|
||||||
|
|
||||||
/* Timeline type colors — dark */
|
|
||||||
--color-timeline-career: #62ba46;
|
|
||||||
--color-timeline-education: #c28b12;
|
|
||||||
--color-timeline-cert: #c75828;
|
|
||||||
--color-timeline-project: #c72855;
|
|
||||||
--color-timeline-homelab: #e1d797;
|
|
||||||
|
|
||||||
/* Typography */
|
/* Typography */
|
||||||
--font-mono: "Source Code Pro", ui-monospace, monospace;
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
--font-sans: ui-sans-serif, system-ui, sans-serif;
|
--font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
|
||||||
|
--font-mono: "Source Code Pro", ui-monospace, monospace;
|
||||||
|
--font-body: var(--font-sans);
|
||||||
|
|
||||||
/* Breakpoints */
|
/* Breakpoints */
|
||||||
--breakpoint-xs: 576px;
|
--breakpoint-xs: 576px;
|
||||||
@@ -42,28 +35,22 @@
|
|||||||
--spacing-2lh: 2lh;
|
--spacing-2lh: 2lh;
|
||||||
--spacing-3lh: 3lh;
|
--spacing-3lh: 3lh;
|
||||||
--spacing-4lh: 4lh;
|
--spacing-4lh: 4lh;
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
--animate-fade-in: fadeIn 120ms linear forwards;
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Base */
|
/* Base */
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
font-size: 15px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-body);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes blink { 50% { opacity: 0; } }
|
/* Typeface picker overrides */
|
||||||
.animate-cursor { animation: blink 1s step-start infinite; }
|
html[data-typeface="sans"] { --font-body: var(--font-sans); }
|
||||||
|
html[data-typeface="serif"] { --font-body: var(--font-serif); line-height: 1.6; }
|
||||||
|
html[data-typeface="mono"] { --font-body: var(--font-mono); font-size: 15px; letter-spacing: -0.01em; }
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@@ -73,31 +60,33 @@ html {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* macOS Classic Light overrides */
|
/* Bone (light) overrides */
|
||||||
:root:not(.dark) {
|
:root:not(.dark) {
|
||||||
--color-bg: #ffffff;
|
--color-bg: #FAF8F5;
|
||||||
--color-surface: #f9f9f9;
|
--color-surface: #F3F0EB;
|
||||||
--color-surface-raised: #f7f7f7;
|
--color-surface-raised: #EBE8E3;
|
||||||
--color-border: #e0e0e0;
|
--color-border: #E0DCD5;
|
||||||
--color-border-bright: #d2d2d2;
|
--color-border-bright: #D4D0C8;
|
||||||
--color-text: #000000;
|
--color-text: #2C2C2C;
|
||||||
--color-text-label: #505050;
|
--color-text-label: #6B6560;
|
||||||
--color-text-dim: #929292;
|
--color-text-dim: #787068;
|
||||||
--color-accent-green: #036a07;
|
|
||||||
--color-accent-red: #d21f07;
|
|
||||||
|
|
||||||
--color-timeline-career: #036a07;
|
|
||||||
--color-timeline-education: #0433ff;
|
|
||||||
--color-timeline-cert: #957931;
|
|
||||||
--color-timeline-project: #6f42c1;
|
|
||||||
--color-timeline-homelab: #0000a2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Default transitions — linear, fast */
|
/* Link underlines */
|
||||||
|
a {
|
||||||
|
text-decoration-thickness: 1px;
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
text-decoration-color: var(--color-border-bright);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration-color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default transitions */
|
||||||
a,
|
a,
|
||||||
button {
|
button {
|
||||||
transition: color 120ms linear, border-color 120ms linear,
|
transition: color 120ms linear, border-color 120ms linear,
|
||||||
background-color 120ms linear, opacity 120ms linear;
|
opacity 120ms linear, text-decoration-color 120ms linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|||||||
Reference in New Issue
Block a user