update typography

- a few adjustments to typography, using Space Grotesk and making fonts / spacing a bit tighter - some light clean-up / figuring out how the CSS / tailwind classes interact, to prep for a full clean-up
cloverich · Sep 2, 2024 · cd5decf · cd5decf
1 parent 5e6ffc9
commit cd5decf
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 281 deletions.
diff --git a/src/index.css b/src/index.css
@@ -5,6 +5,8 @@
 /* This section initially added as recommended copypasta https://platejs.org/docs/components/installation/manual */
 @layer base {
   :root {
+    --font-sans: "Space Grotesk", sans-serif;
+    --font-heading: "Space Grotesk";
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
@@ -98,18 +100,6 @@ div {
   margin: auto;
 }
 
-.mono {
-  font-family: "IBM Plex Mono", "SF Mono", SFMono-Regular, ui-monospace,
-    "DejaVu Sans Mono", Menlo, Consolas, monospace;
-}
-
-.doc-date {
-  margin-left: -150px;
-  font-family: "IBM Plex Mono";
-  font-size: 18px;
-  color: rgb(41, 58, 242);
-}
-
 /**
  * When first elements of each note have margin-top,
  * like heading elements, it acts like extra padding in the
@@ -128,36 +118,3 @@ article {
 article img {
   max-width: 64%;
 }
-
-/* see link styling in Layout */
-.link-active {
-  font-weight: 700;
-  margin: 1rem 0.5rem;
-  font-size: 0.8rem;
-}
-
-.link-inactive {
-  margin: 1rem 0.5rem;
-  font-size: 0.8rem;
-}
-
-.link-active::after {
-  content: " }";
-}
-
-.link-active::before {
-  content: "{ ";
-}
-
-.link-inactive::after {
-  content: "  ";
-}
-
-.link-inactive::before {
-  content: "  ";
-}
-
-/* 
-removed this one from typography.js
-p *:last-child{margin-bottom:0;}
-*/
diff --git a/src/markdown/remark-slate-transformer/transformers/mdast-to-slate.ts b/src/markdown/remark-slate-transformer/transformers/mdast-to-slate.ts
@@ -141,16 +141,25 @@ function createParagraph(node: mdast.Paragraph, deco: Decoration) {
 
 export type Heading = ReturnType<typeof createHeading>;
 
+function depthToHeading(depth: number): string {
+  // stylistic choice: limit depth to h3
+  switch (depth) {
+    case 1:
+      return "h1";
+    case 2:
+      return "h2";
+    default:
+      return "h3";
+  }
+}
+
 function createHeading(node: mdast.Heading, deco: Decoration) {
   const { type, children, depth } = node;
 
   return {
-    // see slate-to-mdast heading conversion
-    // mdast deals in type: "heading" with depth, but
-    // slate (and actually, I think Plate) want type to be
-    // "h1", "h2", etc. I only have toolbar buttons for h1 and h2
-    // so I default to h2 if its not h1
-    type: depth === 1 ? "h1" : "h2",
+    // mdast uses "heading" + depth; our slate implementation
+    // uses "h1", "h2", etc
+    type: depthToHeading(depth),
     depth,
     children: convertNodes(children, deco),
   };

diff --git a/src/markdown/remark-slate-transformer/transformers/slate-to-mdast.ts b/src/markdown/remark-slate-transformer/transformers/slate-to-mdast.ts
@@ -303,13 +303,27 @@ function createParagraph(node: SlateNodes.Paragraph): mdast.Paragraph {
   };
 }
 
+// weird type is what mdast.Heading expects
+function headingToDepth(heading: string): 1 | 2 | 3 {
+  // stylistic choice: limit depth to h3; we make the same choice
+  // in mdast-to-slate
+  switch (heading) {
+    case "h1":
+      return 1;
+    case "h2":
+      return 2;
+    default:
+      return 3;
+  }
+}
+
 function createHeading(node: SlateNodes.Heading): mdast.Heading {
   const { type, depth, children } = node;
   return {
     type: "heading",
-    // Slate claims "type" will always be "Heading", but its coming through as
-    // "h1", "h2", etc. Probably the Plate plugin encoding it that way.
-    depth: (type as string) === "h1" ? 1 : 2,
+    // todo: Slate type claims "Heading" + depth, but I see only "h1", "h2"
+    // etc here.
+    depth: headingToDepth(type as string),
     children: convertNodes(children) as any as mdast.Heading["children"],
   };
 }

diff --git a/src/typography.css b/src/typography.css
@@ -70,11 +70,6 @@ dfn {
   font-style: italic;
 }
 
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 mark {
   background-color: #ff0;
   color: #000;
@@ -252,16 +247,20 @@ html {
 }
 
 body {
-  color: hsla(0, 0%, 0%, 0.8);
+  color: hsla(0, 0%, 8%, 0.8);
+  font-size: 0.9rem;
   font-family:
-    "IBM Plex Serif",
+    "Space Grotesk",
+    sans-serif,
     -apple-system,
+    "Roboto",
+    "Iosevka Aile",
+    "Iosevka Etoile",
+    "Iosevka",
     "BlinkMacSystemFont",
     "Segoe UI",
-    "Roboto",
     "Helvetica",
     "Arial",
-    sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
     "Segoe UI Symbol";
@@ -286,176 +285,6 @@ img {
   margin-bottom: 0.8125rem;
 }
 
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 2.4375rem;
-  padding-bottom: calc(0.40625rem - 1px);
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.21875rem;
-  color: #515151;
-  font-family:
-    "Roboto Slab",
-    -apple-system,
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "Helvetica",
-    "Arial",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  font-weight: 600;
-  text-rendering: optimizeLegibility;
-  font-size: 2rem;
-  line-height: 1.1;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.07);
-}
-
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 2.4375rem;
-  padding-bottom: calc(0.40625rem - 1px);
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 0.40625rem;
-  color: inherit;
-  font-family:
-    "Roboto Slab",
-    -apple-system,
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "Helvetica",
-    "Arial",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  font-weight: 400;
-  text-rendering: optimizeLegibility;
-  font-size: 1.51572rem;
-  line-height: 1.1;
-  border-bottom: 0;
-}
-
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 0.8125rem;
-  color: inherit;
-  font-family:
-    "Roboto Slab",
-    -apple-system,
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "Helvetica",
-    "Arial",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  font-weight: 600;
-  text-rendering: optimizeLegibility;
-  font-size: 1.31951rem;
-  line-height: 1.1;
-}
-
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 0.8125rem;
-  color: inherit;
-  font-family:
-    "Roboto Slab",
-    -apple-system,
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "Helvetica",
-    "Arial",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  font-weight: 600;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 0.8125rem;
-  color: inherit;
-  font-family:
-    "Roboto Slab",
-    -apple-system,
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "Helvetica",
-    "Arial",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  font-weight: 600;
-  text-rendering: optimizeLegibility;
-  font-size: 0.87055rem;
-  line-height: 1.1;
-}
-
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 0.8125rem;
-  color: hsla(0, 0%, 0%, 0.53);
-  font-family:
-    "Roboto Slab",
-    -apple-system,
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "Helvetica",
-    "Arial",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-  font-weight: 600;
-  text-rendering: optimizeLegibility;
-  font-size: 0.81225rem;
-  line-height: 1.1;
-}
-
 hgroup {
   margin-left: 0;
   margin-right: 0;
@@ -787,44 +616,8 @@ li > ul {
   margin-left: 2.03125rem;
 }
 
-/* Commented the links out when I re-styled editor links, but keeping them here for reference */
-
-/* a {
-  color: #3e3e3e;
-  text-decoration: none;
-  border-bottom: 1px solid #3e3e3e;
-} */
-
-/* a:hover,
-a:active {
-  text-decoration: underline;
-} */
-
-a.gatsby-resp-image-link {
-  box-shadow: none;
-}
-
-/* a:hover {
-  text-decoration: none;
-}
-
-header a {
-  text-decoration: none;
-  border-bottom: none;
-} */
-
 blockQuote {
   margin-top: 25px;
   margin-bottom: 25px;
   border-left: none;
 }
-
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 400;
-  font-size: 1.3em;
-  color: #515151;
-}
diff --git a/src/views/documents/DocumentItem.tsx b/src/views/documents/DocumentItem.tsx
@@ -16,10 +16,10 @@ export function DocumentItem(props: {
       className="cursor-pointer flex hover:underline hover:underline-offset"
     >
       {/* Without mono font, dates won't be a uniform width */}
-      <div className="mono" style={{ flexShrink: 0, marginRight: "24px" }}>
+      <div className="font-mono text-sm tracking-tight mr-6 shrink-0">
         {doc.createdAt.slice(0, 10)}
       </div>
-      <div>
+      <div className="font-sans">
         {doc.title}
         <small>
           <Badge