1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-01 12:22:15 +02:00

🔤 UI enhancements

This commit is contained in:
2025-03-04 10:38:26 +01:00
parent bdb20ec298
commit dcf389e28e
6 changed files with 87 additions and 101 deletions

View File

@ -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 */

View File

@ -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;
}

View File

@ -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,