Typography edit

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 Plus Jakarta Sans - Perfect for knowledge management */
-@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=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=Inter:wght@300;400;500;600;700&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 */
+  /* Font feature settings for optimal rendering */
-  --apex-font-features: "liga" 1, "calt" 1, "kern" 1, "ss01" 1, "ss02" 1;
+  --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); }
+h1 {
-h2 { font-size: 1.875rem; font-weight: var(--apex-font-semibold); }
+  font-size: var(--apex-text-4xl);
-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;
   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;
+  letter-spacing: var(--apex-tracking-tighter);
-  line-height: 1.2;
+  line-height: var(--apex-leading-tight);
-  text-shadow: 0 2px 8px rgba(74, 158, 255, 0.2);
+  
-  background: linear-gradient(135deg, var(--apex-text-accent) 0%, var(--apex-blue) 100%);
+  /* 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;
+  font-size: var(--apex-text-base);
-  line-height: 1.7;
+  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);
+  font-size: var(--apex-text-lg);
-  margin: var(--apex-space-4) 0;
+  line-height: var(--apex-leading-relaxed);
-  color: var(--apex-text-secondary);
   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 {
+  html {
-    padding: var(--apex-space-6);
+    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;
+    font-size: var(--apex-text-3xl);
-  }
+    line-height: var(--apex-leading-snug);
-  
-  .block-content {
-    font-size: 0.95rem;
   }
 }
 
 @media (max-width: 480px) {
-  .cp__sidebar-main-content {
+  html {
-    padding: var(--apex-space-4);
+    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,