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

129
assets/styles/style.css
View File

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