Match Aetheria chrome to GameCult

quartz-site/quartz.layout.ts

@@ -19,7 +19,11 @@ export const sharedPageComponents: SharedLayout = {
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
     Component.ConditionalRender({
-      component: Component.Breadcrumbs({ rootName: "Aetheria" }),
+      component: Component.Breadcrumbs({
+        rootName: "Aetheria",
+        showCurrentPage: false,
+        showRoot: false,
+      }),
       condition: (page) => page.fileData.slug !== "index",
     }),
     Component.ConditionalRender({
@@ -46,7 +50,11 @@ export const defaultContentPageLayout: PageLayout = {
 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
   beforeBody: [
-    Component.Breadcrumbs({ rootName: "Aetheria" }),
+    Component.Breadcrumbs({
+      rootName: "Aetheria",
+      showCurrentPage: false,
+      showRoot: false,
+    }),
   ],
   left: [],
   right: [],

quartz-site/quartz/components/Breadcrumbs.tsx

@@ -26,13 +26,18 @@ interface BreadcrumbOptions {
    * Whether to display the current page in the breadcrumbs.
    */
   showCurrentPage: boolean
+  /**
+   * Whether to display the root crumb.
+   */
+  showRoot: boolean
 }
 
 const defaultOptions: BreadcrumbOptions = {
-  spacerSymbol: "❯",
+  spacerSymbol: ">",
   rootName: "Home",
   resolveFrontmatterTitle: true,
   showCurrentPage: true,
+  showRoot: true,
 }
 
 function formatCrumb(displayName: string, baseSlug: FullSlug, currentSlug: SimpleSlug): CrumbData {
@@ -64,7 +69,6 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
         crumb.displayName = options.rootName
       }
 
-      // For last node (current page), set empty path
       if (idx === pathNodes.length - 1) {
         crumb.path = ""
       }
@@ -76,12 +80,22 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
       crumbs.pop()
     }
 
+    if (!options.showRoot) {
+      crumbs.shift()
+    }
+
+    if (crumbs.length === 0) {
+      return null
+    }
+
     return (
       <nav class={classNames(displayClass, "breadcrumb-container")} aria-label="breadcrumbs">
-        {crumbs.map((crumb, index) => (
+        {crumbs.map((crumb) => (
           <div class="breadcrumb-element">
             <a href={crumb.path}>{crumb.displayName}</a>
-            {index !== crumbs.length - 1 && <p>{` ${options.spacerSymbol} `}</p>}
+            <span class="breadcrumb-separator" aria-hidden="true">
+              {options.spacerSymbol}
+            </span>
           </div>
         ))}
       </nav>

quartz-site/quartz/components/styles/breadcrumbs.scss

@@ -9,14 +9,14 @@
 }
 
 .breadcrumb-element {
-  p {
-    margin: 0;
-    margin-left: 0.5rem;
-    padding: 0;
-    line-height: normal;
-  }
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+
+  .breadcrumb-separator {
+    margin: 0 0 0 0.4rem;
+    padding: 0;
+    line-height: 1;
+  }
 }

quartz-site/quartz/styles/custom.scss

@@ -416,8 +416,7 @@ article > h6 {
 .aetheria-hero-panel,
 .aetheria-media-card,
 .aetheria-embed-frame,
-.aetheria-section-shell,
-.aetheria-section-header {
+.aetheria-section-shell {
   border-radius: 20px;
   border: 1px solid rgba(89, 183, 255, 0.1);
   background: linear-gradient(180deg, rgba(13, 20, 31, 0.96), rgba(8, 13, 21, 0.92));
@@ -496,10 +495,11 @@ article > h6 {
   margin: 0;
   color: var(--dark);
   font-family: var(--titleFont);
-  font-size: clamp(1.3rem, 2vw, 1.8rem);
+  font-size: clamp(1.4rem, 2.1vw, 2rem);
   font-weight: 200;
-  letter-spacing: 0.015em;
-  text-transform: none;
+  line-height: 0.92;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
 .aetheria-section-stack {
@@ -553,17 +553,22 @@ article > h6 {
 }
 
 .aetheria-section-header {
+  display: block;
   margin: 0;
   padding: 0.8rem 0.95rem 0.85rem;
+  border: 1px solid rgba(89, 183, 255, 0.1);
   border-radius: 20px;
   background: linear-gradient(135deg, rgba(10, 16, 24, 0.9), rgba(17, 24, 35, 0.82));
   box-shadow:
     0 14px 28px rgba(0, 0, 0, 0.16),
     inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  min-width: 0;
 }
 
-.aetheria-section-header h2 {
-  line-height: 0.92;
+.aetheria-section-header > *,
+.aetheria-section-body,
+.aetheria-section-copy {
+  min-width: 0;
 }
 
 .aetheria-section-header h2 a {
@@ -706,7 +711,7 @@ a:hover,
   }
 
   .aetheria-section-header {
-    padding: 0.75rem 0.8rem 0.8rem;
+    padding: 0.8rem 0.85rem 0.85rem;
   }
 
   .aetheria-section-copy {