Merge pull request #122 from plastic-labs/abigail/dev-1308

Minor menu and text changes

quartz.layout.ts

@@ -51,32 +51,24 @@ export const defaultContentPageLayout: PageLayout = {
     }),
     Component.Explorer({
       sortFn: (a, b) => {
-        // Sort folders first, then files by date (newest first)
+        const folderOrder = ["blog", "notes", "research", "careers", "archive"]
+
         if (a.isFolder && b.isFolder) {
-          // Both folders: alphabetical
+          const aIndex = folderOrder.indexOf(a.displayName.toLowerCase())
-          return a.displayName.localeCompare(b.displayName, undefined, {
+          const bIndex = folderOrder.indexOf(b.displayName.toLowerCase())
-            numeric: true,
+          if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex
-            sensitivity: "base",
+          if (aIndex !== -1) return -1
-          })
+          if (bIndex !== -1) return 1
+          return a.displayName.localeCompare(b.displayName)
         }
 
-        if (a.isFolder) return -1  // Folders before files
+        if (a.isFolder) return -1
-        if (b.isFolder) return 1   // Folders before files
+        if (b.isFolder) return 1
 
-        // Both files: sort by date descending (newest first)
+        // Files: sort by date (newest first)
-        // Note: dates come from JSON as strings, need to convert to Date objects
         const aDate = a.data?.date ? new Date(a.data.date).getTime() : 0
         const bDate = b.data?.date ? new Date(b.data.date).getTime() : 0
-
+        return bDate - aDate || a.displayName.localeCompare(b.displayName)
-        if (aDate !== bDate) {
-          return bDate - aDate  // Descending order (newest first)
-        }
-
-        // Same date or no dates: alphabetical fallback
-        return a.displayName.localeCompare(b.displayName, undefined, {
-          numeric: true,
-          sensitivity: "base",
-        })
       },
     }),
   ],
@@ -121,32 +113,24 @@ export const defaultListPageLayout: PageLayout = {
     }),
     Component.Explorer({
       sortFn: (a, b) => {
-        // Sort folders first, then files by date (newest first)
+        const folderOrder = ["blog", "notes", "research", "careers", "archive"]
+
         if (a.isFolder && b.isFolder) {
-          // Both folders: alphabetical
+          const aIndex = folderOrder.indexOf(a.displayName.toLowerCase())
-          return a.displayName.localeCompare(b.displayName, undefined, {
+          const bIndex = folderOrder.indexOf(b.displayName.toLowerCase())
-            numeric: true,
+          if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex
-            sensitivity: "base",
+          if (aIndex !== -1) return -1
-          })
+          if (bIndex !== -1) return 1
+          return a.displayName.localeCompare(b.displayName)
         }
 
-        if (a.isFolder) return -1  // Folders before files
+        if (a.isFolder) return -1
-        if (b.isFolder) return 1   // Folders before files
+        if (b.isFolder) return 1
 
-        // Both files: sort by date descending (newest first)
+        // Files: sort by date (newest first)
-        // Note: dates come from JSON as strings, need to convert to Date objects
         const aDate = a.data?.date ? new Date(a.data.date).getTime() : 0
         const bDate = b.data?.date ? new Date(b.data.date).getTime() : 0
-
+        return bDate - aDate || a.displayName.localeCompare(b.displayName)
-        if (aDate !== bDate) {
-          return bDate - aDate  // Descending order (newest first)
-        }
-
-        // Same date or no dates: alphabetical fallback
-        return a.displayName.localeCompare(b.displayName, undefined, {
-          numeric: true,
-          sensitivity: "base",
-        })
       },
     }),
   ],

quartz/components/styles/explorer.scss

@@ -124,6 +124,12 @@ button.desktop-explorer {
       color: var(--dark);
       opacity: 0.75;
       pointer-events: all;
+      transition: color 0.15s ease, opacity 0.15s ease;
+
+      &:hover {
+        opacity: 1;
+        color: var(--tertiary);
+      }
 
       &.active {
         opacity: 1;
@@ -132,6 +138,13 @@ button.desktop-explorer {
     }
   }
 
+  // Add bullet points to file items (articles) inside folders
+  .folder-outer > ul > li:not(:has(.folder-container)) > a::before {
+    content: "•";
+    margin-right: 6px;
+    color: var(--gray);
+  }
+
   .folder-outer {
     display: grid;
     grid-template-rows: 0fr;

quartz/styles/base.scss

@@ -156,7 +156,7 @@ a {
   margin: 0 auto;
   & article {
     & > h1 {
-      font-size: 2rem;
+      font-size: 1.8rem;
     }
 
     & li:has(> input[type="checkbox"]) {
@@ -389,19 +389,19 @@ h6 {
 
 // typography improvements
 h1 {
-  font-size: 1.75rem;
+  font-size: 1.58rem;
   margin-top: 2.25rem;
   margin-bottom: 1rem;
 }
 
 h2 {
-  font-size: 1.4rem;
+  font-size: 1.26rem;
   margin-top: 1.9rem;
   margin-bottom: 1rem;
 }
 
 h3 {
-  font-size: 1.12rem;
+  font-size: 1.01rem;
   margin-top: 1.62rem;
   margin-bottom: 1rem;
 }
@@ -409,7 +409,7 @@ h3 {
 h4,
 h5,
 h6 {
-  font-size: 1rem;
+  font-size: 0.9rem;
   margin-top: 1.5rem;
   margin-bottom: 1rem;
 }
@@ -422,7 +422,7 @@ figure[data-rehype-pretty-code-figure] {
 
   & > [data-rehype-pretty-code-title] {
     font-family: var(--codeFont);
-    font-size: 0.9rem;
+    font-size: 0.81rem;
     padding: 0.1rem 0.5rem;
     border: 1px solid var(--lightgray);
     width: fit-content;
@@ -451,7 +451,7 @@ pre {
   & > code {
     background: none;
     padding: 0;
-    font-size: 0.85rem;
+    font-size: 0.77rem;
     counter-reset: line;
     counter-increment: line 0;
     display: grid;
@@ -506,7 +506,7 @@ code {
 tbody,
 li,
 p {
-  line-height: 1.6rem;
+  line-height: 1.44rem;
 }
 
 .table-container {

quartz/styles/custom.scss

@@ -71,27 +71,27 @@ iframe {
 /* } */
 
 .explorer {
-  font-size: 0.85rem;
+  font-size: 0.77rem;
-  
+
   .folder, .file {
     a {
-      font-size: 0.85rem;
+      font-size: 0.77rem;
       font-weight: 200 !important;
     }
   }
 }
 
 .toc {
-  font-size: 0.85rem;
+  font-size: 0.77rem;
-  
+
   a {
-    font-size: 0.85rem;
+    font-size: 0.77rem;
     font-weight: 600 !important;
   }
 }
 
 body {
-  font-size: 0.95rem;
+  font-size: 0.86rem;
 }
 
 input[type="search"] {