mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-01 19:55:53 +02:00
⚡ 🔤 UI enhancements
This commit is contained in:
parent
bdb20ec298
commit
c3a17e6dde
@ -31,9 +31,11 @@ ${host} {
|
||||
overflow: auto;
|
||||
border-radius: var(--border-radius);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
margin-block: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Light mode overrides to match GitHub-like theme */
|
||||
@ -113,8 +115,6 @@ html[data-theme="dark"] ${host} {
|
||||
${host}[data-js=todo] {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--code-bg);
|
||||
position: relative;
|
||||
@ -137,8 +137,13 @@ ${host}[data-js=todo]::before {
|
||||
/* All code blocks should have consistent font and sizing */
|
||||
${host} code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
font-size: inherit;
|
||||
line-height: 1.5;
|
||||
padding: 0;
|
||||
}
|
||||
${host} pre {
|
||||
margin-block: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* Ensure line numbers (if added) are styled appropriately */
|
||||
|
||||
@ -19,7 +19,7 @@ ${host} .runtime {
|
||||
.CodeMirror {
|
||||
height: 100% !important;
|
||||
font-family: var(--font-mono) !important;
|
||||
font-size: 0.95rem !important;
|
||||
font-size: 0.8rem !important;
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
|
||||
@ -9,12 +9,13 @@ ${host} {
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
${host} a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1.25rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--primary-dark); /* Darker background for better contrast */
|
||||
color: white;
|
||||
@ -59,7 +60,6 @@ ${host} a:only-child {
|
||||
|
||||
@media (max-width: 640px) {
|
||||
${host} a {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
@ -72,7 +72,7 @@ import { el } from "../../index.js";
|
||||
* */
|
||||
export function h3({ textContent, id }){
|
||||
if(!id) id= "h-"+textContent.toLowerCase().replaceAll(/\s/g, "-").replaceAll(/[^a-z-]/g, "");
|
||||
return el("h3", { id, className: "section-heading" }).append(
|
||||
return el("h3", { id }).append(
|
||||
el("a", {
|
||||
className: "heading-anchor",
|
||||
href: "#"+id,
|
||||
|
||||
@ -1,41 +1,35 @@
|
||||
import { styles } from "./ssr.js";
|
||||
styles.css`
|
||||
/* Modern custom styling with reddish color scheme and high contrast */
|
||||
:root {
|
||||
/* Color variables - reddish theme with increased contrast */
|
||||
--primary: #b71c1c; /* Darker red for better contrast on white */
|
||||
--primary-light: #f05545; /* Lighter but still contrasting red */
|
||||
--primary-dark: #7f0000; /* Very dark red for maximum contrast */
|
||||
--primary-rgb: 183, 28, 28; /* RGB values for rgba operations */
|
||||
--secondary: #700037; /* Darker purple for better contrast */
|
||||
--secondary-light: #ae1357; /* More saturated magenta for visibility */
|
||||
--secondary-dark: #4a0027; /* Very dark purple */
|
||||
--secondary-rgb: 112, 0, 55; /* RGB values for rgba operations */
|
||||
--primary: #b71c1c;
|
||||
--primary-light: #f05545;
|
||||
--primary-dark: #7f0000;
|
||||
--primary-rgb: 183, 28, 28;
|
||||
--secondary: #700037;
|
||||
--secondary-light: #ae1357;
|
||||
--secondary-dark: #4a0027;
|
||||
--secondary-rgb: 112, 0, 55;
|
||||
|
||||
/* Typography */
|
||||
--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
|
||||
/* Layout */
|
||||
--body-max-width: 50rem;
|
||||
--sidebar-width: 16rem;
|
||||
--body-max-width: 40rem;
|
||||
--sidebar-width: 20rem;
|
||||
--header-height: 4rem;
|
||||
--border-radius: 0.375rem;
|
||||
|
||||
/* Colors light mode - enhanced contrast */
|
||||
--bg: #ffffff;
|
||||
--bg-sidebar: #fff5f5;
|
||||
--text: #1a1313; /* Near-black text for high contrast */
|
||||
--text-light: #555050; /* Darker gray text that meets contrast requirements */
|
||||
--text: #1a1313;
|
||||
--text-light: #555050;
|
||||
--code-bg: #f9f2f2;
|
||||
--code-text: #9a0000; /* Darker red for code text */
|
||||
--code-text: #9a0000;
|
||||
--border: #d8c0c0;
|
||||
--selection: rgba(183, 28, 28, 0.15);
|
||||
--marked: #b71c1c;
|
||||
--accent: var(--secondary);
|
||||
--shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Contrast improvements for components */
|
||||
--link-color: #9a0000;
|
||||
--link-hover: #7f0000;
|
||||
--button-text: #ffffff;
|
||||
@ -43,32 +37,29 @@ styles.css`
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #121212; /* Pure dark background */
|
||||
--bg-sidebar: #1a1212; /* Slightly lighter sidebar */
|
||||
--text: #ffffff; /* Pure white text for highest contrast */
|
||||
--text-light: #cccccc; /* Light gray that still meets contrast requirements */
|
||||
--bg: #121212;
|
||||
--bg-sidebar: #1a1212;
|
||||
--text: #ffffff;
|
||||
--text-light: #cccccc;
|
||||
--code-bg: #2c2020;
|
||||
--code-text: #ff9e80; /* Slightly more orange for better visibility */
|
||||
--code-text: #ff9e80;
|
||||
--border: #4d3939;
|
||||
--selection: rgba(255, 99, 71, 0.25);
|
||||
--primary: #b74141; /* Brighter red for better visibility on dark */
|
||||
--primary-light: #ff867f; /* Even brighter highlight red */
|
||||
--primary-dark: #c62828; /* Darker red that still has good contrast */
|
||||
--secondary: #f02b47; /* Brighter magenta for better visibility */
|
||||
--secondary-light: #ff6090; /* Bright pink with good contrast */
|
||||
--secondary-dark: #b0003a; /* Darker but still visible pink */
|
||||
--primary: #b74141;
|
||||
--primary-light: #ff867f;
|
||||
--primary-dark: #c62828;
|
||||
--secondary: #f02b47;
|
||||
--secondary-light: #ff6090;
|
||||
--secondary-dark: #b0003a;
|
||||
--accent: var(--secondary);
|
||||
|
||||
/* Contrast improvements for dark mode components */
|
||||
--link-color: #ff5252;
|
||||
--link-hover: #ff867f;
|
||||
--button-text: #ffffff;
|
||||
|
||||
/* Navigation current page - darker for better contrast */
|
||||
--nav-current-bg: #aa2222;
|
||||
--nav-current-text: #ffffff;
|
||||
|
||||
/* RGB values for rgba operations in dark mode */
|
||||
--primary-rgb: 255, 82, 82;
|
||||
--secondary-rgb: 233, 30, 99;
|
||||
}
|
||||
@ -131,15 +122,6 @@ html {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-main);
|
||||
background-color: var(--bg);
|
||||
@ -163,27 +145,31 @@ body {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 2rem;
|
||||
font-weight: 700; /* Bolder for better contrast */
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25rem; /* Slightly larger for better hierarchy */
|
||||
font-size: 2.25rem;
|
||||
margin-top: 0;
|
||||
color: var(--primary-dark); /* Distinctive color for main headings */
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
h1 > a {
|
||||
font-weight: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
border-bottom: 2px solid var(--border); /* Thicker border for better visibility */
|
||||
border-bottom: 2px solid var(--border);
|
||||
padding-bottom: 0.5rem;
|
||||
color: var(--primary); /* Color for better hierarchy */
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--secondary); /* Different color for tertiary headings */
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
p {
|
||||
@ -192,21 +178,16 @@ p {
|
||||
|
||||
a {
|
||||
color: var(--link-color, var(--primary));
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
font-weight: 500; /* Slightly bolder for better contrast */
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
text-underline-offset: 3px;
|
||||
transition: color 0.2s ease, text-underline-offset 0.2s ease;
|
||||
}
|
||||
|
||||
/* Ensure visited links maintain high contrast */
|
||||
a:visited {
|
||||
color: var(--secondary, #700037);
|
||||
--link-color: var(--secondary, #700037);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-hover, var(--primary-light));
|
||||
--link-color: var(--link-hover, var(--primary-light));
|
||||
text-underline-offset: 5px;
|
||||
}
|
||||
|
||||
@ -252,12 +233,18 @@ body > main {
|
||||
padding: 2rem;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[full-main-start] 1fr
|
||||
[main-start] min(var(--body-max-width), 90%) [main-end]
|
||||
1fr [full-main-end];
|
||||
}
|
||||
|
||||
body > main > *, body > main slot > * {
|
||||
max-width: calc(var(--body-max-width) - var(--sidebar-width));
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
grid-column: main;
|
||||
}
|
||||
|
||||
/* Page title with ID anchor for skip link */
|
||||
@ -278,24 +265,23 @@ body > main h2, body > main h3 {
|
||||
|
||||
body > main h3 {
|
||||
border-left: 3px solid var(--primary);
|
||||
padding-left: 0.75rem;
|
||||
margin-left: -0.75rem;
|
||||
position: relative;
|
||||
left: -1.5rem;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
/* Make clickable heading links for better navigation */
|
||||
body > main h2 .heading-anchor,
|
||||
body > main h3 .heading-anchor {
|
||||
.heading-anchor {
|
||||
position: absolute;
|
||||
color: var(--text-light);
|
||||
left: -1rem;
|
||||
left: -2rem;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
body > main h2:hover .heading-anchor,
|
||||
body > main h3:hover .heading-anchor {
|
||||
h2:hover .heading-anchor,
|
||||
h3:hover .heading-anchor {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@ -303,9 +289,12 @@ body > main h3:hover .heading-anchor {
|
||||
body > main {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
body > main > *, body > main slot > * {
|
||||
max-width: 100%;
|
||||
body > main h2, body > main h3 {
|
||||
left: 1rem;
|
||||
width: calc(100% - 1rem);
|
||||
}
|
||||
.heading-anchor {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -342,7 +331,6 @@ body > main h3:hover .heading-anchor {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: -0.125em;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
|
||||
@ -40,7 +40,9 @@ ${host} .version-badge {
|
||||
}
|
||||
|
||||
${host} p {
|
||||
display: none;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -53,7 +55,6 @@ ${host} .github-link {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
margin-left: 1rem;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
@ -63,14 +64,6 @@ ${host} .github-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
${host} p {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
${host_nav} {
|
||||
grid-area: sidebar;
|
||||
@ -185,7 +178,18 @@ export function header({ info: { href, title, description }, pkg }){
|
||||
// Header section with accessibility support
|
||||
el("header", { role: "banner", className: header.name }).append(
|
||||
el("div", { className: "header-title" }).append(
|
||||
el("h1", pkg.name),
|
||||
el("a", {
|
||||
href: pkg.homepage,
|
||||
className: "github-link",
|
||||
"aria-label": "View on GitHub",
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
}).append(
|
||||
el(iconGitHub),
|
||||
),
|
||||
el("h1").append(
|
||||
el("a", { href: pages[0].href, textContent: pkg.name, title: "Go to documentation homepage" }),
|
||||
),
|
||||
el("span", {
|
||||
className: "version-badge",
|
||||
"aria-label": "Version",
|
||||
@ -193,16 +197,6 @@ export function header({ info: { href, title, description }, pkg }){
|
||||
})
|
||||
),
|
||||
el("p", description),
|
||||
el("a", {
|
||||
href: pkg.homepage,
|
||||
className: "github-link",
|
||||
"aria-label": "View on GitHub",
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer"
|
||||
}).append(
|
||||
el(iconGitHub),
|
||||
"GitHub"
|
||||
)
|
||||
),
|
||||
|
||||
// Navigation between pages
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user