quartz.config.ts

@@ -8,7 +8,7 @@ import * as Plugin from "./quartz/plugins"
  */
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "🗾 Japanese",
+    pageTitle: "Japanese",
     enableSPA: true,
     enablePopovers: true,
     analytics: null,

quartz.layout.ts

@@ -15,6 +15,7 @@ export const sharedPageComponents: SharedLayout = {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
+    // Component.MobileOnly(Component.Search()),
     Component.Breadcrumbs(),
   ],
   left: [
@@ -25,7 +26,7 @@ export const defaultContentPageLayout: PageLayout = {
   ],
   right: [
     Component.DesktopOnly(Component.Darkmode()),
-    Component.Search(),
+    Component.DesktopOnly(Component.Search()),
     Component.DesktopOnly(Component.TableOfContents()),
     Component.MobileOnly(Component.Explorer({folderDefaultState: "open"}))
   ],
@@ -37,6 +38,7 @@ export const defaultListPageLayout: PageLayout = {
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
+    // Component.Search(),
     Component.Darkmode(),
     Component.DesktopOnly(Component.Explorer()),
   ],

quartz/styles/custom.scss

@@ -1,7 +1,6 @@
 @use "./base.scss";
 @use "./variables.scss" as *;
 
-// Callouts design
 .text-highlight {
     background-color: #ddcee5;
 }
@@ -28,22 +27,6 @@
     --color: #a672c0;
 }
 
-.callout.note {
-    & table {
-        margin: 0;
-        margin-bottom: 0.5rem;
-
-        & thead {
-            display: none;
-        }
-
-        & td {
-            padding: 0;
-        }
-    }
-}
-
-
 table {
     border: 2px solid var(--gray);
 
@@ -60,9 +43,23 @@ table {
     }
 }
 
+.callout.note {
+    & table {
+        margin: 0;
+        margin-bottom: 0.5rem;
+
+        & thead {
+            display: none;
+        }
+
+        & td {
+            padding: 0;
+        }
+    }
+}
 
 ul.overflow, ol.overflow {
-    max-height: initial;
+    max-height: 75dvh;
 }
 
 ul.overflow::after, ol.overflow::after {
@@ -77,35 +74,85 @@ ul.overflow::after, ol.overflow::after {
     }
 }
 
-.page-title {
-    margin-top: 0.5rem;
+.page {
+    & > #quartz-body {
+
+        & .center {
+            & p {
+                font-size: 1.15rem;
+                white-space: break-spaces;
+                hyphens: none;
             }
             
-
-// Align dark mode and search
-.darkmode.desktop-only {
-    margin:unset;
-    margin-top:0.25rem;
+            & li {
+                font-size: 1.15rem;
             }
             
+            & h1 {
+                font-size: 2rem;
+                margin-top: 1.25rem;
+            }
 
-// Bigger popover
-.popover {
+            & h2 {
+                font-size: 1.7rem;
+            }
 
-    & > .popover-inner {
-      width: 45rem;
-      max-height: 35rem;
+            & h3 {
+                font-size: 1.5rem;
+            }
+
+            & h4 {
+                font-size: 1.3rem;
             }
         }
 
-
-// Hide buttons
-button#explorer {
-    display: none;
+        & .sidebar {
+            @media all and (max-width: $fullPageWidth) {
+                margin-top: 1rem;
+            }
        }
 
-button#toc {
-    display: none;
+        & .right.sidebar {
+            @media all and (max-width: $fullPageWidth) {
+                margin-top: 0;
+            }
+        }
+
+        .sidebar {
+            gap: 1rem;
+            margin-top: 1.25rem;
+        }
+
+        .sidebar.left {
+            @media all and (min-width: $maxFullPageWidth) {
+                left: calc(50vw - 900px);
+            }
+            @media all and (max-width: $maxFullPageWidth) {
+                left: calc(50vw - 790px);
+            }
+
+        }
+        .sidebar.right {
+            @media all and (min-width: $maxFullPageWidth) {
+                right: calc(50vw - 900px);
+            }
+            @media all and (max-width: $maxFullPageWidth) {
+                right: calc(50vw - 790px);
+            }
+        }
+    }
+}
+
+.page .center, .page footer {
+    @media all and (min-width: $maxFullPageWidth) {
+        width: 950px;
+    }
+    @media all and (max-width: $maxFullPageWidth) {
+        width: 800px;
+    }
+    @media all and (max-width: $mobileBreakpoint) {
+        width: initial;
+    }
 }
 
 .page .page-header {
@@ -134,114 +181,42 @@ footer {
 }
 
 
-.page {
-    & > #quartz-body {
+// Align dark mode and search
 
-        & .center {
-            & p {
-                font-size: 1.15rem;
-                white-space: break-spaces;
-                hyphens: none;
-            }
-            
-            & li {
-                font-size: 1.15rem;
-            }
-            
-            & h1 {
-                font-size: 2rem;
-                margin-top: 0.65rem;
-            }
-
-            & h2 {
-                font-size: 1.7rem;
-            }
-
-            & h3 {
-                font-size: 1.5rem;
-            }
-
-            & h4 {
-                font-size: 1.3rem;
-            }
-        }
-
-        & .sidebar {
-            gap: 1rem;
-            margin-top: 1.25rem;
-
-            @media all and (min-width: $fullPageWidth) {
-                gap: 0rem;
-                width: 370px;
-                padding: 0 3rem;
-            }
-
-            @media all and (max-width: $fullPageWidth) {
-                margin-top: 1rem;
-            }
-        }
-
-        & .sidebar.left {
-            margin-top: 0;
-            height: 100%;
-            overflow-y: scroll;
-
-            @media all and (min-width: $maxFullPageWidth) {
-                left: calc(50vw - 900px);
-            }
-            @media all and (max-width: $maxFullPageWidth) {
-                left: calc(50vw - 790px);
-            }
-
-        }
-        & .sidebar.right {
+.page > #quartz-body .sidebar.right {
     flex-direction: row;
     gap: 1rem;
-
-            @media all and (min-width: $maxFullPageWidth) {
-                right: calc(50vw - 900px);
-            }
-            @media all and (max-width: $fullPageWidth) {
-                margin-top: 0;
-                flex-direction: column;
-            }
-            @media all and (max-width: $maxFullPageWidth) {
-                right: calc(50vw - 790px);
 }
 
-            & > * {
-                @media all and (max-width: $fullPageWidth) {
-                    flex: 1;
-                    min-width: 100%;
+.darkmode.desktop-only {
+    margin:unset;
+    margin-top:0.25rem;
 }
+
+// Bigger popover
+
+.popover {
+
+    & > .popover-inner {
+      width: 45rem;
+      max-height: 45rem;
     }
 }
 
-    }
-}
 
-.page .center, .page footer {
-    @media all and (min-width: $maxFullPageWidth) {
-        width: 950px;
-    }
-    @media all and (max-width: $maxFullPageWidth) {
-        width: 800px;
-    }
-    @media all and (max-width: $mobileBreakpoint) {
-        width: initial;
-    }
-}
+// Usage
 
 .usage {
     display:flex;
     flex-direction: row;
     align-items: center;
+}
 
-    & p {
+.usage p {
     margin:0;
 }
 
-    & .box {
+.usage .box {
     border: 1px solid var(--darkgray);
     border-radius: 0.5rem;
     padding: 0.2rem 0.3rem 0.2rem 0.3rem;
@@ -250,7 +225,7 @@ footer {
     margin: 0.2rem;
 }
 
-    & .left {
+.usage .left {
     padding-right: 1.7rem;
 
     background-image: linear-gradient(var(--darkgray), var(--darkgray)), linear-gradient(var(--darkgray), var(--darkgray));
@@ -262,28 +237,11 @@ footer {
     border-width: 0 2px;
 }
 
-    & .right {
+.usage .right {
     padding-left: 1rem;
 }
 
-    & .r {
+.usage .r {
     margin-left: 0.25rem;
     margin-right: 0.25rem;
 }
-
-    & .ileft {
-        padding-left: 1.7rem;
-    
-        background-image: linear-gradient(black, black), linear-gradient(black, black);
-        background-repeat: no-repeat;
-        background-size: 8px 2px;
-        background-position: top left, bottom left;
-    
-        border-left: solid black;
-        border-width: 0 2px;
-    }
-    
-    & .iright {
-        padding-right: 1rem;
-    }
-}