lashman/vesper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor: extract markdown typography colors into CSS variables

Browse Source
This commit is contained in:
Your Name
2026-02-19 21:13:07 +02:00
parent ecde5d7f88
commit c644d7372d
1 changed files with 75 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/styles.css
View File

@@ -64,7 +64,43 @@
--color-accent-small: #8BA3FF; /* for small text (11px) accent uses */
--color-accent-muted: rgba(107, 138, 255, 0.12);
--color-accent-subtle: rgba(107, 138, 255, 0.06);
/* Markdown typography */
--color-md-h1: #F5F6F7;
--color-md-h2: #EDEEF0;
--color-md-h3: #E4E5E8;
--color-md-h4: #D8DADE;
--color-md-h5: #CBCED3;
--color-md-h6: #BCC1C8;
--color-md-heading: #F0F1F3;
--color-md-paragraph: #C8CCD0;
--color-md-link: #93B8F9;
--color-md-link-underline: rgba(147, 184, 249, 0.3);
--color-md-link-hover: #A8C6FA;
--color-md-link-hover-underline: rgba(168, 198, 250, 0.7);
--color-md-marker: #93B8F9;
--color-md-blockquote-border: #93B8F9;
--color-md-blockquote-bg: rgba(147, 184, 249, 0.04);
--color-md-blockquote-text: #BFC3C8;
--color-md-code-inline: #E8B89E;
--color-md-code-inline-bg: rgba(255, 255, 255, 0.06);
--color-md-code-block-bg: #1A1D24;
--color-md-code-block-border: rgba(255, 255, 255, 0.06);
--color-md-code-text: #E4E6EB;
--color-md-table-header-bg: rgba(124, 169, 247, 0.08);
--color-md-table-border: rgba(255, 255, 255, 0.06);
--color-md-table-cell: #C8CCD0;
--color-md-table-stripe: rgba(30, 33, 40, 0.4);
--color-md-table-hover: rgba(124, 169, 247, 0.05);
--color-md-hr: rgba(255, 255, 255, 0.1);
--color-md-mark-bg: rgba(251, 191, 36, 0.2);
--color-md-mark-text: #FBBF24;
--color-md-comment: #7C8390;
--color-md-highlight-bg: rgba(251, 191, 36, 0.3);
--color-md-highlight-active-bg: rgba(251, 191, 36, 0.6);
--color-md-highlight-active-outline: rgba(251, 191, 36, 0.7);
--color-md-welcome-btn: #4A6AE5;
/* Borders */
--color-border-subtle: rgba(255, 255, 255, 0.04);
--color-border: rgba(255, 255, 255, 0.08);
@@ -782,7 +818,7 @@ html, body, #root {
.welcome-button {
padding: 12px 28px;
background-color: #4A6AE5;
background-color: var(--color-md-welcome-btn);
color: white;
border: none;
border-radius: 8px;
@@ -1130,7 +1166,7 @@ html, body, #root {
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
color: #F0F1F3;
color: var(--color-md-heading);
font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-weight: 600;
line-height: 1.2;
@@ -1144,7 +1180,7 @@ html, body, #root {
font-size: 2.35rem;
font-weight: 700;
letter-spacing: -0.03em;
color: #F5F6F7;
color: var(--color-md-h1);
margin-top: 0;
margin-bottom: 0.8em;
padding-bottom: 0.55em;
@@ -1153,7 +1189,7 @@ html, body, #root {
.markdown-content h2 {
font-size: 1.7rem;
color: #EDEEF0;
color: var(--color-md-h2);
margin-top: 1.85em;
padding-bottom: 0.4em;
border-bottom: 1px solid var(--color-border-subtle);
@@ -1161,47 +1197,47 @@ html, body, #root {
.markdown-content h3 {
font-size: 1.3rem;
color: #E4E5E8;
color: var(--color-md-h3);
}
.markdown-content h4 {
font-size: 1.15rem;
font-weight: 500;
color: #D8DADE;
color: var(--color-md-h4);
}
.markdown-content h5 {
font-size: 1rem;
font-weight: 500;
color: #CBCED3;
color: var(--color-md-h5);
}
.markdown-content h6 {
font-size: 0.92rem;
font-weight: 500;
color: #BCC1C8;
color: var(--color-md-h6);
}
/* Paragraphs with refined spacing */
.markdown-content p {
margin-bottom: 1.65em;
color: #C8CCD0;
color: var(--color-md-paragraph);
line-height: 1.7;
}
/* Links with subtle persistent underline */
.markdown-content a {
color: #93B8F9;
color: var(--color-md-link);
text-decoration: underline;
text-decoration-color: rgba(147, 184, 249, 0.3);
text-decoration-color: var(--color-md-link-underline);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.markdown-content a:hover {
color: #A8C6FA;
text-decoration-color: rgba(168, 198, 250, 0.7);
color: var(--color-md-link-hover);
text-decoration-color: var(--color-md-link-hover-underline);
text-decoration-thickness: 1.5px;
}
@@ -1234,13 +1270,13 @@ html, body, #root {
.markdown-content li {
margin-bottom: 0.45em;
color: #C8CCD0;
color: var(--color-md-paragraph);
line-height: 1.65;
list-style-position: outside;
}
.markdown-content li::marker {
color: #93B8F9;
color: var(--color-md-marker);
}
.markdown-content ol li::marker {
@@ -1321,17 +1357,17 @@ html, body, #root {
.markdown-content blockquote {
margin: 1.65em 0;
padding: 1.1em 1.4em;
border-left: 3px solid #93B8F9;
background-color: rgba(124, 169, 247, 0.04);
border-left: 3px solid var(--color-md-blockquote-border);
background-color: var(--color-md-blockquote-bg);
border-radius: 0 8px 8px 0;
color: #BFC3C8;
color: var(--color-md-blockquote-text);
font-style: normal;
line-height: 1.7;
}
.markdown-content blockquote p {
margin-bottom: 0.5em;
color: #BFC3C8;
color: var(--color-md-blockquote-text);
}
.markdown-content blockquote p:last-child {
@@ -1340,26 +1376,26 @@ html, body, #root {
/* Inline code */
.markdown-content code:not(pre code) {
background-color: rgba(255, 255, 255, 0.06);
background-color: var(--color-md-code-inline-bg);
padding: 0.22em 0.48em;
border-radius: 5px;
font-family: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
font-size: 0.88em;
font-weight: 400;
color: #E8B89E;
color: var(--color-md-code-inline);
letter-spacing: -0.02em;
}
/* Code blocks */
.markdown-content pre {
background-color: #1A1D24;
background-color: var(--color-md-code-block-bg);
border-radius: 10px;
padding: 1.35em 1.6em;
margin: 1.65em 0;
overflow-x: visible;
overflow-wrap: break-word;
white-space: pre-wrap;
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--color-md-code-block-border);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
@@ -1367,7 +1403,7 @@ html, body, #root {
font-family: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
font-size: 14px;
line-height: 1.7;
color: #E4E6EB;
color: var(--color-md-code-text);
background: none;
padding: 0;
letter-spacing: -0.02em;
@@ -1379,7 +1415,7 @@ html, body, #root {
/* Syntax highlighting - refined colors */
.hljs {
background: transparent !important;
color: #E4E6EB;
color: var(--color-md-code-text);
}
.hljs-keyword,
@@ -1409,7 +1445,7 @@ html, body, #root {
.hljs-quote,
.hljs-deletion,
.hljs-meta {
color: #7C8390;
color: var(--color-md-comment);
font-style: italic;
}
@@ -1443,7 +1479,7 @@ html, body, #root {
font-size: 14px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--color-md-table-border);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
@@ -1451,11 +1487,11 @@ html, body, #root {
.markdown-content td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid var(--color-border-subtle);
}
.markdown-content th {
background-color: rgba(124, 169, 247, 0.08);
background-color: var(--color-md-table-header-bg);
font-weight: 600;
color: var(--color-text-primary);
font-size: 12.5px;
@@ -1464,7 +1500,7 @@ html, body, #root {
}
.markdown-content td {
color: #C8CCD0;
color: var(--color-md-table-cell);
}
.markdown-content tr:last-child td {
@@ -1472,18 +1508,18 @@ html, body, #root {
}
.markdown-content tr:nth-child(even) td {
background-color: rgba(30, 33, 40, 0.4);
background-color: var(--color-md-table-stripe);
}
.markdown-content tr:hover td {
background-color: rgba(124, 169, 247, 0.05);
background-color: var(--color-md-table-hover);
}
/* Horizontal rule — gradient fade */
.markdown-content hr {
border: none;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
background: linear-gradient(to right, transparent, var(--color-md-hr), transparent);
margin: 2.5em 0;
}
@@ -1526,8 +1562,8 @@ html, body, #root {
/* Mark/highlight */
.markdown-content mark {
background-color: rgba(251, 191, 36, 0.2);
color: #FBBF24;
background-color: var(--color-md-mark-bg);
color: var(--color-md-mark-text);
padding: 0.18em 0.38em;
border-radius: 4px;
font-weight: 500;
@@ -1559,7 +1595,7 @@ html, body, #root {
/* Search highlights — high specificity to override Tailwind reset */
span.search-highlight {
background-color: rgba(251, 191, 36, 0.3) !important;
background-color: var(--color-md-highlight-bg) !important;
color: inherit !important;
border-radius: 2px;
padding: 1px 0;
@@ -1567,8 +1603,8 @@ span.search-highlight {
}
span.search-highlight.search-highlight-active {
background-color: rgba(251, 191, 36, 0.6) !important;
outline: 2px solid rgba(251, 191, 36, 0.7);
background-color: var(--color-md-highlight-active-bg) !important;
outline: 2px solid var(--color-md-highlight-active-outline);
outline-offset: 1px;
}