Sidebar redesign, CSS reorganization

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,7 +15,6 @@ 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: [
@@ -26,7 +25,7 @@ export const defaultContentPageLayout: PageLayout = {
   ],
   right: [
     Component.DesktopOnly(Component.Darkmode()),
-    Component.DesktopOnly(Component.Search()),
+    Component.Search(),
     Component.DesktopOnly(Component.TableOfContents()),
     Component.MobileOnly(Component.Explorer({folderDefaultState: "open"}))
   ],
@@ -38,7 +37,6 @@ export const defaultListPageLayout: PageLayout = {
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
-    // Component.Search(),
     Component.Darkmode(),
     Component.DesktopOnly(Component.Explorer()),
   ],

quartz/styles/custom.scss

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