Docs: Make the fonts and sidebar a bit tighter (#34314)

GitOrigin-RevId: 16b3cd25ebc70cfb4d6b7b473cf2bc45583e6f41

Author: ikhare

npm-packages/docs/src/css/custom.css

@@ -47,11 +47,13 @@
   --convex-code-border-color: rgba(0, 0, 0, 0.04);
   --convex-code-block-header-background-color: #eef2f9;
 
+  --doc-sidebar-width: 260px !important; /* Reduced from default 300px */
+
   --ifm-code-padding-horizontal: 0.25rem;
   --ifm-global-shadow-lw: none;
 
   --ifm-navbar-shadow: none;
-  --ifm-navbar-height: 5rem;
+  --ifm-navbar-height: 4rem;
 
   --ifm-menu-color-active: var(--ifm-navbar-link-color);
   --ifm-menu-color-background-active: rgb(222, 226, 234);
@@ -110,11 +112,21 @@
   /* Zen of Convex */
   --convex-zen-do-color: var(--ifm-color-success-dark);
   --convex-zen-do-not-color: var(--ifm-color-warning-dark);
+
+  --ifm-font-size-base: 0.9375rem;
+  --ifm-line-height-base: 1.6;
+  --ifm-h1-font-size: 2rem;
+  --ifm-h2-font-size: 1.5rem;
+  --ifm-h3-font-size: 1.25rem;
+  --ifm-h4-font-size: 1rem;
+  --ifm-heading-margin-bottom: 1rem;
+  --ifm-spacing-vertical: 1rem;
+  --ifm-paragraph-margin-bottom: 1rem;
 }
 
 /* Sets the main top-left logo size */
 .navbar__logo {
-  height: 3rem;
+  height: 2.5rem;
   margin-right: 0;
 }
 
@@ -246,7 +258,7 @@ nav.menu {
 .theme-doc-sidebar-item-category-level-2,
 .theme-doc-sidebar-item-category-level-3,
 .theme-doc-sidebar-item-category-level-4 {
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
 }
 
 /* reset padding on container because we added footer inside of it */
@@ -256,7 +268,7 @@ main > .container {
 
 /* Increase the padding on the main text */
 main > .container > .row {
-  padding: 1rem var(--convex-container-padding-horizontal) 2rem;
+  padding: 0.75rem var(--convex-container-padding-horizontal) 1.5rem;
   margin: 0;
 }
 
@@ -323,20 +335,20 @@ article code {
 /* START: Custom cards implementation */
 .cards {
   display: grid;
-  gap: 1.25rem;
-  margin: 2rem 0 3rem;
+  gap: 1rem;
+  margin: 1.5rem 0 2.5rem;
 }
 
 .qs-cards {
   display: grid;
-  gap: 1.25rem;
-  margin: 2rem 0 3rem;
+  gap: 1rem;
+  margin: 1.5rem 0 2.5rem;
 }
 
 .component-cards {
   display: grid;
-  gap: 1.25rem;
-  margin: 2rem 0 3rem;
+  gap: 1rem;
+  margin: 1.5rem 0 2.5rem;
 }
 
 /* This magic number 462 is the size of the article div container as rendered */
@@ -363,10 +375,10 @@ article code {
 
 a.card {
   box-shadow: none;
-  padding: 1.75rem 1rem;
+  padding: 1.25rem 1rem;
   border: 1px solid var(--ifm-toc-border-color);
   flex-direction: row;
-  gap: 1rem;
+  gap: 0.75rem;
   align-items: center;
   max-width: 550px;
   text-decoration: none;
@@ -393,7 +405,7 @@ a.card:hover {
 }
 
 a.card h2 {
-  font-size: 1rem;
+  font-size: 0.9375rem;
 }
 
 a.card p {
@@ -484,18 +496,18 @@ a.pagination-nav__link .pagination-nav__label:hover {
 
 /* Stylize the top doc headings to match convex.dev */
 .markdown h1:first-child {
-  --ifm-h1-font-size: 2.5rem;
-  margin-top: 1.75rem;
+  --ifm-h1-font-size: 2rem;
+  margin-top: 1.25rem;
   --ifm-heading-font-family: "GT America", system-ui, "Segoe UI", Roboto,
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol";
   font-weight: 700;
-  letter-spacing: -0.03em;
+  letter-spacing: -0.01em;
 }
 
 @media (min-width: 997px) {
   .markdown h1:first-child {
-    --ifm-h1-font-size: 3.5rem;
+    --ifm-h1-font-size: 2.5rem;
   }
 }
 
@@ -508,7 +520,7 @@ h4 {
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol";
   font-weight: 700;
-  letter-spacing: -0.025em;
+  letter-spacing: -0.01em;
 }
 
 h2.text--truncate {
@@ -620,8 +632,8 @@ html[data-theme="dark"] .convex-menu-header {
 .theme-doc-sidebar-item-link-level-1 > a::before,
 .theme-doc-sidebar-item-category-level-1 > div > a::before {
   padding-left: 0.125rem;
-  padding-right: 0.625rem;
-  padding-top: 0.0625rem;
+  padding-right: 0.5rem;
+  padding-top: 0;
   width: 1rem;
   height: 1.0625rem;
   content: var(--convex-icon);
@@ -630,7 +642,7 @@ html[data-theme="dark"] .convex-menu-header {
 
 /* Ensures all menu items are the same height, with or without a submenu. */
 .menu__link {
-  min-height: 2.125rem;
+  min-height: 1.875rem;
 }
 
 /* START: Icons for each top level item */
@@ -892,11 +904,11 @@ main article > div {
 
 /* START: StepByStep styling */
 .convex-step-by-step {
-  margin-bottom: 2.5rem;
+  margin-bottom: 2rem;
 }
 
 .convex-step {
-  margin-bottom: 2.5rem;
+  margin-bottom: 2rem;
 }
 
 @media (min-width: 997px) {
@@ -967,14 +979,14 @@ main .container .col[class*="docItemCol"] {
   display: flex;
   flex-direction: column;
   justify-content: left;
-  gap: 1em;
-  padding: 1.5rem;
+  gap: 0.75rem;
+  padding: 1.25rem;
   background-color: var(--ifm-color-info-contrast-background);
   border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);
   border-left-width: var(--ifm-alert-border-left-width);
   border-radius: var(--ifm-alert-border-radius);
   box-shadow: var(--ifm-alert-shadow);
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 @media (min-width: 997px) {
@@ -1083,7 +1095,7 @@ h2.zen-header {
 /* Fix pages without Table of Contents on the right should not be
 too wide, except for all the quick starts */
 html:not([class*="docs-doc-id-quickstart/"]) main > .container > .row .col {
-  max-width: 966px;
+  max-width: 860px;
 }
 
 /* Border for screenshots that are confusing if left on white background */
@@ -1150,10 +1162,10 @@ html[data-theme="dark"] a.card.convex-invert-icon svg {
 .StackPosts {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 1rem;
   container-type: inline-size;
-  margin-top: 3rem;
-  padding-top: 2rem;
+  margin-top: 2.5rem;
+  padding-top: 1.5rem;
   border-top: 1px solid var(--ifm-toc-border-color);
 }
 
@@ -1165,7 +1177,7 @@ html[data-theme="dark"] a.card.convex-invert-icon svg {
   align-items: center;
   gap: 0.375rem;
   font-weight: bold;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
 }
 
 .StackPosts-title-imageLink {
@@ -1189,7 +1201,7 @@ html[data-theme="dark"] .StackPosts-title-image--dark {
 .StackPosts-posts {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1.25rem;
 }
 
 @container (min-width: 45rem) {
@@ -1259,8 +1271,8 @@ html[data-theme="dark"] .StackPosts-title-image--dark {
 /* START: Large cards implementation */
 .large-cards {
   display: grid;
-  gap: 1.25rem;
-  margin: 2rem 0 3rem;
+  gap: 1rem;
+  margin: 1.5rem 0 2.5rem;
 }
 
 @container (width > 743px) {
@@ -1271,15 +1283,15 @@ html[data-theme="dark"] .StackPosts-title-image--dark {
 
 a.large-card {
   box-shadow: none;
-  padding: 1.5rem;
+  padding: 1.25rem;
   border: 1px solid var(--ifm-toc-border-color);
   border-radius: var(--ifm-card-border-radius);
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 0.5rem;
   height: 100%;
-  min-height: 150px;
+  min-height: 130px;
   text-decoration: none;
   background-color: var(--ifm-background-color);
 }
@@ -1292,7 +1304,7 @@ a.large-card:hover {
 }
 
 a.large-card h2 {
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   margin: 0;
 }
 
@@ -1308,8 +1320,8 @@ a.large-card p {
 /* Video link cards */
 .video-cards {
   display: grid;
-  gap: 1.25rem;
-  margin: 2rem 0 3rem;
+  gap: 1rem;
+  margin: 1.5rem 0 2.5rem;
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
@@ -1321,7 +1333,7 @@ a.large-card p {
 
 a.video-card {
   box-shadow: none;
-  padding: 1.5rem;
+  padding: 1.25rem;
   border: 1px solid var(--ifm-toc-border-color);
   border-radius: var(--ifm-card-border-radius);
   display: flex;