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 {
+.page {
-    margin-top: 0.5rem;
+    & > #quartz-body {
-}
 
+        & .center {
+            & p {
+                font-size: 1.15rem;
+                white-space: break-spaces;
+                hyphens: none;
+            }
+            
+            & li {
+                font-size: 1.15rem;
+            }
+            
+            & h1 {
+                font-size: 2rem;
+                margin-top: 1.25rem;
+            }
 
-// Align dark mode and search
+            & h2 {
-.darkmode.desktop-only {
+                font-size: 1.7rem;
-    margin:unset;
+            }
-    margin-top:0.25rem;
-}
 
+            & h3 {
+                font-size: 1.5rem;
+            }
 
-// Bigger popover
+            & h4 {
-.popover {
+                font-size: 1.3rem;
+            }
+        }
 
-    & > .popover-inner {
+        & .sidebar {
-      width: 45rem;
+            @media all and (max-width: $fullPageWidth) {
-      max-height: 35rem;
+                margin-top: 1rem;
+            }
+       }
+
+        & .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 {
-// Hide buttons
+    @media all and (min-width: $maxFullPageWidth) {
-button#explorer {
+        width: 950px;
-    display: none;
+    }
-}
+    @media all and (max-width: $maxFullPageWidth) {
-
+        width: 800px;
-button#toc {
+    }
-    display: none;
+    @media all and (max-width: $mobileBreakpoint) {
+        width: initial;
+    }
 }
 
 .page .page-header {
@@ -134,156 +181,67 @@ footer {
 }
 
 
-.page {
+// Align dark mode and search
-    & > #quartz-body {
 
-        & .center {
+.page > #quartz-body .sidebar.right {
-            & p {
+    flex-direction: row;
-                font-size: 1.15rem;
+    gap: 1rem;
-                white-space: break-spaces;
+}
-                hyphens: none;
-            }
-            
-            & li {
-                font-size: 1.15rem;
-            }
-            
-            & h1 {
-                font-size: 2rem;
-                margin-top: 0.65rem;
-            }
 
-            & h2 {
+.darkmode.desktop-only {
-                font-size: 1.7rem;
+    margin:unset;
-            }
+    margin-top:0.25rem;
+}
 
-            & h3 {
+// Bigger popover
-                font-size: 1.5rem;
-            }
 
-            & h4 {
+.popover {
-                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 {
-            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%;
-                }
-            }
-        }
 
+    & > .popover-inner {
+      width: 45rem;
+      max-height: 45rem;
     }
 }
 
-.page .center, .page footer {
+
-    @media all and (min-width: $maxFullPageWidth) {
+// Usage
-        width: 950px;
-    }
-    @media all and (max-width: $maxFullPageWidth) {
-        width: 800px;
-    }
-    @media all and (max-width: $mobileBreakpoint) {
-        width: initial;
-    }
-}
 
 .usage {
     display:flex;
     flex-direction: row;
     align-items: center;
+}
 
-    & p {
+.usage p {
-        margin:0;
+    margin:0;
-    }
+}
 
-    & .box {
+.usage .box {
-        border: 1px solid var(--darkgray);
+    border: 1px solid var(--darkgray);
-        border-radius: 0.5rem;
+    border-radius: 0.5rem;
-        padding: 0.2rem 0.3rem 0.2rem 0.3rem;
+    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
-        display: inline-block;
+    display: inline-block;
-        width: fit-content;
+    width: fit-content;
-        margin: 0.2rem;
+    margin: 0.2rem;
-    }
+}
 
-    & .left {
+.usage .left {
-        padding-right: 1.7rem;
+    padding-right: 1.7rem;
-    
-        background-image: linear-gradient(var(--darkgray), var(--darkgray)), linear-gradient(var(--darkgray), var(--darkgray));
-        background-repeat: no-repeat;
-        background-size: 8px 2px;
-        background-position: top right, bottom right;
-    
-        border-right: solid var(--darkgray);
-        border-width: 0 2px;
-    }
 
-    & .right {
+    background-image: linear-gradient(var(--darkgray), var(--darkgray)), linear-gradient(var(--darkgray), var(--darkgray));
-        padding-left: 1rem;
+    background-repeat: no-repeat;
-    }
+    background-size: 8px 2px;
+    background-position: top right, bottom right;
 
-    & .r {
+    border-right: solid var(--darkgray);
-        margin-left: 0.25rem;
+    border-width: 0 2px;
-        margin-right: 0.25rem;
+}
-    }
 
-    & .ileft {
+.usage .right {
-        padding-left: 1.7rem;
+    padding-left: 1rem;
-    
+}
-        background-image: linear-gradient(black, black), linear-gradient(black, black);
+
-        background-repeat: no-repeat;
+.usage .r {
-        background-size: 8px 2px;
+    margin-left: 0.25rem;
-        background-position: top left, bottom left;
+    margin-right: 0.25rem;
-    
-        border-left: solid black;
-        border-width: 0 2px;
-    }
-    
-    & .iright {
-        padding-right: 1rem;
-    }
 }