diff --git a/app/globals.css b/app/globals.css
index 93e31ac..d1f74a0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -131,10 +131,10 @@ article :where(a, strong, :not(pre) > code) {
/* Shiki dual-theme (next-themes `.dark`; token colors via shiki-transformers). */
pre.shiki {
- --code-block-bg: color-mix(in srgb, var(--muted) 5%, var(--background));
+ --code-block-bg: color-mix(in srgb, white 65%, var(--background));
--code-line-highlight-wash: color-mix(
in srgb,
- var(--code-line-highlight-fill) 22%,
+ var(--code-line-highlight-fill) 5%,
var(--code-block-bg)
);
position: relative;
@@ -158,6 +158,15 @@ pre.shiki {
padding: 2rem 0;
}
+.dark pre.shiki {
+ --code-block-bg: color-mix(in srgb, var(--muted) 5%, var(--background));
+ --code-line-highlight-wash: color-mix(
+ in srgb,
+ var(--code-line-highlight-fill) 22%,
+ var(--code-block-bg)
+ );
+}
+
pre.shiki code {
display: block;
min-width: 100%;
@@ -234,7 +243,6 @@ pre.shiki[data-language]::after {
line-height: 1;
color: var(--code-line-highlight-bar);
text-transform: lowercase;
- opacity: 0.7;
content: attr(data-language);
pointer-events: none;
user-select: none;
diff --git a/app/theme/colors.css b/app/theme/colors.css
index bf9060a..1c00c31 100644
--- a/app/theme/colors.css
+++ b/app/theme/colors.css
@@ -9,12 +9,13 @@
/* Reference green: 6.78:1 as text on paper. */
--accent: oklch(0.431 0.063 167.2);
--accent-foreground: oklch(0.975 0.008 87.5); /* 7.30:1 on accent */
- /* Eyebrows and pillar numbers. Reference terracotta. */
- --label: oklch(0.53 0.073 56.4); /* 4.69:1 on background */
+ /* Eyebrows and pillar numbers. Reference terracotta.
+ Light: 5.22:1 on background, 4.81:1 on foreground/4. */
+ --label: oklch(0.5 0.073 56.4);
--trail: var(--accent);
--trail-foreground: var(--accent-foreground);
/* Shiki line highlight — Kent pattern: gray wash + darker bar */
- --code-line-highlight-bar: #7a8194;
+ --code-line-highlight-bar: #5e5e5e; /* 6.13:1 on the light code block, 5.97:1 on the highlight */
--code-line-highlight-fill: #b8bcc6;
}
diff --git a/components/views/about-view.tsx b/components/views/about-view.tsx
index d646cc4..bfd2174 100644
--- a/components/views/about-view.tsx
+++ b/components/views/about-view.tsx
@@ -26,7 +26,7 @@ const bandTitleClassName = 'font-display text-3xl font-medium'
const sectionTitleClassName = `mt-4 ${bandTitleClassName}`
-const subtitleClassName = 'mt-4 text-sm leading-relaxed text-foreground/55'
+const subtitleClassName = 'mt-4 text-sm leading-relaxed text-muted'
const ctaLinkClassName = [
'group mt-8 inline-flex items-center gap-2 text-sm font-normal text-accent',
@@ -112,7 +112,7 @@ function Intro({
{copy.blogCta}
-
+
{copy.pillars.map((pillar) => (
{pillar}
))}
@@ -156,7 +156,7 @@ function Experience({ copy }: { copy: AboutCopy }) {
aria-hidden="true"
className="absolute -left-1.25 top-1.5 size-2.25 rounded-full bg-accent ring-4 ring-background"
/>
-
+
{entry.period}
@@ -171,7 +171,7 @@ function Experience({ copy }: { copy: AboutCopy }) {
/
- {org.meta}
+ {org.meta}
>
) : null}
@@ -211,10 +211,10 @@ function Repertoire({ copy }: { copy: AboutCopy }) {
{group.title}
-
+
{group.description}
-
+
{group.skills.map((skill) => (
- {skill}
))}
@@ -226,7 +226,7 @@ function Repertoire({ copy }: { copy: AboutCopy }) {
{copy.stackLabel}
-
+
{copy.stackValue}
@@ -265,7 +265,7 @@ function Contact({ copy }: { copy: AboutCopy }) {
{rest.map((paragraph) => (
{paragraph}
diff --git a/components/views/alunos-view.tsx b/components/views/alunos-view.tsx
index 128fb00..56c746e 100644
--- a/components/views/alunos-view.tsx
+++ b/components/views/alunos-view.tsx
@@ -38,7 +38,7 @@ function CertificateGroupSection({ group }: { group: CertificateGroup }) {
{'emptyMessage' in group ? (
-
+
{group.emptyMessage}
) : (
@@ -50,7 +50,7 @@ function CertificateGroupSection({ group }: { group: CertificateGroup }) {
key={certificate.number}
className="grid grid-cols-[9.5rem_minmax(0,1fr)] gap-3"
>
-
+
{certificate.number}
{certificate.name}
@@ -70,7 +70,7 @@ export function AlunosView() {
{certificatePage.title}
-
+
{certificatePage.intro}