zaine/org_roam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI changes 3
All checks were successful
Build Roam Site / build (push) Successful in 31s
Details

Browse Source
This commit is contained in:
Zaine
2026-05-16 00:17:33 +01:00
parent 350a830482
commit 5d30c8f19e
1 changed files with 75 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
assets/styles/style.css
View File

@@ -2,7 +2,7 @@
ZETTELKASTEN GARDEN style.css
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@400;500&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Noto+Sans+Arabic:wght@400;700&display=swap');
/* =========================================================
TOKENS
@@ -13,40 +13,40 @@
--toolbar-h: 36px;
--rail-w: 52px;
--panel-w: 260px;
--content-max: 680px;
--content-pad: 2.5rem;
--content-max: none;
--content-pad: clamp(1.5rem, 4vw, 4.5rem);
/* Dark palette warm aged manuscript */
--bg: #18160f;
--page-bg: #111009;
--pane-bg: #1c1a12;
--surface: #221f15;
--surface-2: #2a2720;
/* Dark academia: ink, vellum, forest green, oxblood, and aged brass */
--bg: #11100c;
--page-bg: #090907;
--pane-bg: #15130f;
--surface: #1e1a14;
--surface-2: #29231a;
--fg: #e4ddd0;
--fg-dim: #9e9284;
--fg-faint: #584e42;
--fg-ghost: #352e24;
--fg: #e8dfcd;
--fg-dim: #b5a68f;
--fg-faint: #766a58;
--fg-ghost: #43382b;
--accent: #c8923c;
--accent: #b68b45;
--accent-dim: color-mix(in oklab, var(--accent) 35%, transparent);
--accent-sub: color-mix(in oklab, var(--accent) 10%, transparent);
--accent-glow:color-mix(in oklab, var(--accent) 6%, transparent);
--heading: #ecdcbc;
--heading-2: #c8a060;
--heading-3: #a87848;
--link: #b89e6a;
--link-hover:#e4ddd0;
--tag-bg: #2a2418;
--heading: #f1e2c2;
--heading-2: #d3b16a;
--heading-3: #a8604f;
--link: #c7a763;
--link-hover:#f1e2c2;
--tag-bg: #251f16;
--tag-fg: var(--accent);
--border: #2a2518;
--border-2: #38321e;
--code-bg: #0f0e08;
--border: #332c20;
--border-2: #4a3d29;
--code-bg: #0c0c09;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-body: 'Inter', 'Noto Sans Arabic', system-ui, sans-serif;
--font-mono: 'DM Mono', 'Fira Mono', monospace;
--font-serif: 'Lora', Georgia, serif;
--font-serif: 'Cormorant Garamond', Georgia, serif;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -60,24 +60,24 @@
/* Light theme */
[data-theme="light"] {
--bg: #f7f3eb;
--page-bg: #efead8;
--pane-bg: #faf7f0;
--surface: #f2ece0;
--surface-2: #e8e1d0;
--fg: #2a2218;
--fg-dim: #6a5e4a;
--fg-faint: #b8ac98;
--fg-ghost: #ddd5c0;
--accent: #9a6820;
--border: #ddd4bc;
--border-2: #ccc0a0;
--code-bg: #eee8d8;
--tag-bg: #e8dfc8;
--link: #7a5a20;
--heading: #2a2218;
--heading-2: #6a4818;
--heading-3: #8a5c28;
--bg: #f3eee3;
--page-bg: #e9e0cf;
--pane-bg: #f7f1e6;
--surface: #efe5d4;
--surface-2: #e3d5be;
--fg: #211c15;
--fg-dim: #625744;
--fg-faint: #998b72;
--fg-ghost: #d2c3a8;
--accent: #80602f;
--border: #d4c4a7;
--border-2: #b9a57f;
--code-bg: #e8dcc8;
--tag-bg: #dfd0b5;
--link: #684f28;
--heading: #211c15;
--heading-2: #5b4929;
--heading-3: #7e4438;
}
/* =========================================================
@@ -101,7 +101,7 @@ html, body {
body { display: flex; flex-direction: column; }
body, p, li, td, th, span, div {
font-family: 'Noto Sans Arabic', sans-serif;
font-family: var(--font-body);
}
/* =========================================================
@@ -111,8 +111,11 @@ body, p, li, td, th, span, div {
#preamble {
height: var(--header-h);
flex-shrink: 0;
background: var(--bg);
background:
linear-gradient(180deg, color-mix(in oklab, var(--surface) 52%, transparent), transparent),
var(--bg);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 color-mix(in oklab, var(--accent) 10%, transparent);
z-index: 300;
}
@@ -386,7 +389,9 @@ body, p, li, td, th, span, div {
#sidebar {
width: var(--rail-w);
flex-shrink: 0;
background: var(--bg);
background:
linear-gradient(90deg, color-mix(in oklab, #233327 18%, transparent), transparent 78%),
var(--bg);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
@@ -576,7 +581,7 @@ body, p, li, td, th, span, div {
gap: var(--r2);
padding: 4px var(--r4);
height: var(--toolbar-h);
background: var(--bg);
background: color-mix(in oklab, var(--bg) 92%, #233327 8%);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
font-size: 0.75rem;
@@ -642,16 +647,19 @@ body, p, li, td, th, span, div {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
background: var(--pane-bg);
background-color: var(--pane-bg);
background-image:
linear-gradient(180deg, color-mix(in oklab, #233327 12%, transparent), transparent 22rem),
linear-gradient(90deg, color-mix(in oklab, var(--accent) 7%, transparent) 0 1px, transparent 1px),
repeating-linear-gradient(
180deg,
transparent, transparent 27px,
color-mix(in oklab, var(--fg) 2%, transparent) 27px,
color-mix(in oklab, var(--fg) 2%, transparent) 28px
);
position: relative;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
background-image: repeating-linear-gradient(
180deg,
transparent, transparent 27px,
color-mix(in oklab, var(--fg) 2%, transparent) 27px,
color-mix(in oklab, var(--fg) 2%, transparent) 28px
);
background-attachment: local;
}
#content-area::-webkit-scrollbar { width: 5px; }
@@ -675,6 +683,8 @@ body, p, li, td, th, span, div {
#content, .tab-content-inner {
margin: 0 auto;
width: 100%;
max-width: var(--content-max);
padding: var(--r6) var(--content-pad) calc(var(--r8) * 2.5);
}
@@ -686,7 +696,9 @@ body, p, li, td, th, span, div {
position: relative;
margin-bottom: var(--r6);
padding: var(--r5) var(--r5) var(--r4);
background: color-mix(in oklab, var(--surface) 60%, transparent);
background:
linear-gradient(135deg, color-mix(in oklab, #233327 16%, transparent), transparent 58%),
color-mix(in oklab, var(--surface) 74%, transparent);
border: 1px solid var(--border);
border-left: 3px solid var(--accent-dim);
border-radius: 0 7px 7px 0;
@@ -696,8 +708,9 @@ body, p, li, td, th, span, div {
margin: 0 0 var(--r3);
font-size: 1.5rem;
font-weight: 500;
font-family: var(--font-serif);
line-height: 1.25;
letter-spacing: -0.025em;
letter-spacing: 0;
color: var(--heading);
}
@@ -731,22 +744,26 @@ body, p, li, td, th, span, div {
h1 {
font-size: 1.5rem; font-weight: 500;
letter-spacing: -0.02em; color: var(--heading);
font-family: var(--font-serif);
letter-spacing: 0; color: var(--heading);
margin: 0 0 var(--r5); line-height: 1.25;
}
h2 {
font-size: 1.1rem; font-weight: 500;
letter-spacing: -0.01em; color: var(--heading);
font-family: var(--font-serif);
letter-spacing: 0; color: var(--heading);
margin: var(--r8) 0 var(--r4);
padding-bottom: var(--r3);
border-bottom: 1px solid var(--border);
}
h3 {
font-size: 1rem; font-weight: 500;
font-family: var(--font-serif);
color: var(--heading-2); margin: var(--r6) 0 var(--r3);
}
h4 {
font-size: 0.9rem; font-weight: 500;
font-family: var(--font-serif);
color: var(--heading-3); margin: var(--r5) 0 var(--r2);
}