diff --git a/apex-theme.css b/apex-theme.css index 99112ab..f9a21b4 100644 --- a/apex-theme.css +++ b/apex-theme.css @@ -1,12 +1,37 @@ -/* +/* Enhanced lists with Plus Jakarta Sans */ +ul, ol { + margin: var(--apex-space-4) 0; + padding-left: var(--apex-space-6); +} + +li { + margin-bottom: var(--apex-space-2); + line-height: var(--apex-leading-relaxed); + font-feature-settings: var(--apex-font-features); +} + +/* Small text and captions */ +small, .text-sm { + font-size: var(--apex-text-sm); + color: var(--apex-text-tertiary); + line-height: var(--apex-leading-normal); +} + +.caption { + font-size: var(--apex-text-sm); + color: var(--apex-text-tertiary); + font-style: italic; + text-align: center; + margin-top: var(--apex-space-2); +}/* * Apex Theme for Logseq - Refined Edition * An elegant, minimalistic dark theme inspired by Apple's design philosophy * with sophisticated typography using Azeret Mono and harmonious color theory */ -/* Import fonts */ -@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); +/* Import Plus Jakarta Sans - Perfect for knowledge management */ +@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); :root { /* === APEX CORE COLOR SYSTEM === */ @@ -87,8 +112,32 @@ --apex-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --apex-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); - /* Font feature settings for better typography */ - --apex-font-features: "liga" 1, "calt" 1, "kern" 1, "ss01" 1, "ss02" 1; + /* Font feature settings for optimal rendering */ + --apex-font-features: "liga" 1, "calt" 1, "kern" 1; + + /* Enhanced font weights for better hierarchy */ + --apex-font-thin: 200; + --apex-font-light: 300; + --apex-font-normal: 400; + --apex-font-medium: 500; + --apex-font-semibold: 600; + --apex-font-bold: 700; + --apex-font-extrabold: 800; + + /* Optimized line heights for reading */ + --apex-leading-tight: 1.25; + --apex-leading-snug: 1.375; + --apex-leading-normal: 1.5; + --apex-leading-relaxed: 1.625; + --apex-leading-loose: 2; + + /* Letter spacing for better readability */ + --apex-tracking-tighter: -0.05em; + --apex-tracking-tight: -0.025em; + --apex-tracking-normal: 0em; + --apex-tracking-wide: 0.025em; + --apex-tracking-wider: 0.05em; + --apex-tracking-widest: 0.1em; } /* === LOGSEQ VARIABLES MAPPING === */ @@ -214,20 +263,25 @@ html[data-theme="dark"] { html { font-size: 16px; - line-height: 1.6; + line-height: var(--apex-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: var(--apex-font-features); + font-variant-ligatures: common-ligatures; + font-variant-numeric: oldstyle-nums proportional-nums; } body { font-family: var(--apex-font-family); font-weight: var(--apex-font-normal); + font-size: var(--apex-text-base); + line-height: var(--apex-leading-relaxed); background-color: var(--apex-bg-primary); color: var(--apex-text-primary); transition: background-color var(--apex-transition-base); font-feature-settings: var(--apex-font-features); + letter-spacing: var(--apex-tracking-normal); } #app-container { @@ -238,34 +292,79 @@ body { h1, h2, h3, h4, h5, h6 { font-family: var(--apex-font-family); - font-weight: var(--apex-font-semibold); color: var(--apex-text-primary); - letter-spacing: -0.02em; - line-height: 1.3; - margin: var(--apex-space-6) 0 var(--apex-space-4) 0; font-feature-settings: var(--apex-font-features); + font-variant-numeric: lining-nums; + margin: 0; + line-height: var(--apex-leading-tight); + letter-spacing: var(--apex-tracking-tight); } -h1 { font-size: 2.25rem; font-weight: var(--apex-font-bold); } -h2 { font-size: 1.875rem; font-weight: var(--apex-font-semibold); } -h3 { font-size: 1.5rem; font-weight: var(--apex-font-semibold); } -h4 { font-size: 1.25rem; font-weight: var(--apex-font-medium); } -h5 { font-size: 1.125rem; font-weight: var(--apex-font-medium); } -h6 { font-size: 1rem; font-weight: var(--apex-font-medium); } - -/* Enhanced page title with text shadow */ -h1.title { - font-size: 2.5rem; +h1 { + font-size: var(--apex-text-4xl); font-weight: var(--apex-font-bold); + line-height: var(--apex-leading-tight); + margin-bottom: var(--apex-space-6); +} + +h2 { + font-size: var(--apex-text-3xl); + font-weight: var(--apex-font-semibold); + line-height: var(--apex-leading-tight); + margin-bottom: var(--apex-space-5); +} + +h3 { + font-size: var(--apex-text-2xl); + font-weight: var(--apex-font-semibold); + line-height: var(--apex-leading-snug); + margin-bottom: var(--apex-space-4); +} + +h4 { + font-size: var(--apex-text-xl); + font-weight: var(--apex-font-medium); + line-height: var(--apex-leading-snug); + margin-bottom: var(--apex-space-3); +} + +h5 { + font-size: var(--apex-text-lg); + font-weight: var(--apex-font-medium); + line-height: var(--apex-leading-normal); + margin-bottom: var(--apex-space-3); +} + +h6 { + font-size: var(--apex-text-sm); + font-weight: var(--apex-font-semibold); + line-height: var(--apex-leading-normal); + margin-bottom: var(--apex-space-2); + text-transform: uppercase; + letter-spacing: var(--apex-tracking-wide); +} + +/* Enhanced page title with optimized Plus Jakarta Sans */ +h1.title { + font-size: clamp(2rem, 4vw, 3rem); + font-weight: var(--apex-font-extrabold); color: var(--apex-text-accent); margin: var(--apex-space-8) 0 var(--apex-space-6) 0; - letter-spacing: -0.03em; - line-height: 1.2; - text-shadow: 0 2px 8px rgba(74, 158, 255, 0.2); - background: linear-gradient(135deg, var(--apex-text-accent) 0%, var(--apex-blue) 100%); + letter-spacing: var(--apex-tracking-tighter); + line-height: var(--apex-leading-tight); + + /* Subtle gradient text effect optimized for Plus Jakarta Sans */ + background: linear-gradient(135deg, + var(--apex-text-accent) 0%, + var(--apex-blue) 70%, + var(--apex-cyan) 100% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + + /* Enhanced text shadow */ + filter: drop-shadow(0 2px 8px rgba(74, 158, 255, 0.3)); } /* === LAYOUT COMPONENTS === */ @@ -371,11 +470,22 @@ h1.title { } .block-content { - font-size: 1.02rem; - line-height: 1.7; + font-size: var(--apex-text-base); + line-height: var(--apex-leading-relaxed); color: var(--apex-text-primary); font-family: var(--apex-font-family); font-feature-settings: var(--apex-font-features); + font-variant-numeric: oldstyle-nums; + max-width: 65ch; /* Optimal reading width */ + hyphens: auto; + hyphenate-limit-chars: 6 3 3; +} + +/* Enhanced paragraph spacing */ +p, .block-content p { + margin-bottom: var(--apex-space-4); + font-feature-settings: var(--apex-font-features); + font-variant-numeric: oldstyle-nums; } .block-content-wrapper { @@ -440,9 +550,22 @@ h1.title { /* === ENHANCED LINKS AND REFERENCES === */ +/* Enhanced text emphasis */ +strong, b { + font-weight: var(--apex-font-semibold); + color: var(--apex-text-accent); +} + +em, i { + font-style: italic; + color: var(--apex-text-secondary); +} + +/* Enhanced links with Plus Jakarta Sans */ a { color: var(--apex-blue); text-decoration: none; + font-weight: var(--apex-font-medium); transition: all var(--apex-transition-fast); position: relative; } @@ -550,28 +673,33 @@ a:hover::after { /* === ENHANCED CODE BLOCKS === */ +/* Enhanced code typography with JetBrains Mono */ code { - font-family: var(--apex-font-family); + font-family: var(--apex-font-mono); + font-size: 0.9em; + font-weight: var(--apex-font-normal); background: linear-gradient(135deg, var(--apex-bg-surface) 0%, rgba(74, 222, 128, 0.05) 100%); color: var(--apex-green); padding: 0.125rem 0.375rem; border-radius: var(--apex-radius-sm); - font-size: 0.9em; - font-weight: var(--apex-font-normal); border: 1px solid rgba(74, 222, 128, 0.2); - position: relative; + font-feature-settings: "liga" 1, "calt" 1, "zero" 1, "ss01" 1; + letter-spacing: -0.02em; } pre { + font-family: var(--apex-font-mono); + font-size: var(--apex-text-sm); + line-height: var(--apex-leading-relaxed); background: linear-gradient(135deg, var(--apex-bg-secondary) 0%, rgba(16, 23, 38, 0.8) 100%); border: 1px solid var(--apex-border-primary); border-radius: var(--apex-radius-lg); padding: var(--apex-space-6); overflow-x: auto; margin: var(--apex-space-4) 0; - font-family: var(--apex-font-family); - position: relative; backdrop-filter: blur(10px); + font-feature-settings: "liga" 1, "calt" 1, "zero" 1, "ss01" 1; + position: relative; } pre::before { @@ -590,24 +718,28 @@ pre code { padding: 0; color: var(--apex-text-primary); border: none; + font-size: inherit; } /* === ENHANCED BLOCKQUOTES === */ +/* Enhanced blockquotes with Plus Jakarta Sans */ blockquote { - border-left: 4px solid var(--apex-blue); - margin: var(--apex-space-4) 0; - color: var(--apex-text-secondary); + font-size: var(--apex-text-lg); + line-height: var(--apex-leading-relaxed); font-style: italic; + color: var(--apex-text-secondary); + border-left: 4px solid var(--apex-blue); + margin: var(--apex-space-6) 0; + padding: var(--apex-space-4) var(--apex-space-6); background: linear-gradient(135deg, rgba(74, 158, 255, 0.08) 0%, rgba(16, 23, 38, 0.6) 50%, rgba(30, 41, 64, 0.4) 100% ); border-radius: 0 var(--apex-radius-md) var(--apex-radius-md) 0; - padding: var(--apex-space-4) var(--apex-space-6); - position: relative; backdrop-filter: blur(10px); + position: relative; overflow: hidden; } @@ -631,7 +763,16 @@ blockquote::after { bottom: -var(--apex-space-2); line-height: 1; opacity: 0.1; - font-family: var(--apex-font-ui); + font-family: var(--apex-font-family); + font-weight: var(--apex-font-bold); +} + +blockquote p { + margin-bottom: var(--apex-space-2); +} + +blockquote p:last-child { + margin-bottom: 0; } /* === ENHANCED FORMS === */ @@ -1351,27 +1492,41 @@ a.priority[href="#/page/C" i]:before { /* === RESPONSIVE DESIGN === */ +/* === RESPONSIVE TYPOGRAPHY === */ + @media (max-width: 768px) { - .cp__sidebar-main-content { - padding: var(--apex-space-6); + html { + font-size: 15px; + } + + body { + font-size: var(--apex-text-sm); + line-height: var(--apex-leading-relaxed); + } + + h1 { font-size: var(--apex-text-3xl); } + h2 { font-size: var(--apex-text-2xl); } + h3 { font-size: var(--apex-text-xl); } + h4 { font-size: var(--apex-text-lg); } + + .block-content { + max-width: none; } h1.title { - font-size: 2rem; - } - - .block-content { - font-size: 0.95rem; + font-size: var(--apex-text-3xl); + line-height: var(--apex-leading-snug); } } @media (max-width: 480px) { - .cp__sidebar-main-content { - padding: var(--apex-space-4); + html { + font-size: 14px; } h1.title { - font-size: 1.75rem; + font-size: var(--apex-text-2xl); + line-height: var(--apex-leading-snug); } .left-sidebar-inner { @@ -1541,11 +1696,30 @@ html[data-theme="light"] { --ls-border-color: var(--apex-border-primary) !important; } -/* Print styles */ +/* === PRINT TYPOGRAPHY === */ + @media print { body { - background-color: white !important; + font-size: 11pt; + line-height: 1.4; color: black !important; + background-color: white !important; + font-family: var(--apex-font-family); + } + + h1, h2, h3, h4, h5, h6 { + color: black !important; + page-break-after: avoid; + font-family: var(--apex-font-family); + } + + p, .block-content { + orphans: 3; + widows: 3; + } + + blockquote { + page-break-inside: avoid; } #left-sidebar,