fix: mobile styling

8bitgentleman · Feb 10, 2024 · 995d699 · 995d699
1 parent 417306b
commit 995d699
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 37 deletions.
diff --git a/quartz.layout.ts b/quartz.layout.ts
@@ -51,37 +51,77 @@ export const defaultContentPageLayout: PageLayout = {
     Component.DesktopOnly(Component.TableOfContents()),
   ],
   right: [
-    Component.Graph({
-      localGraph: {
-        drag: true, // whether to allow panning the view around
-        zoom: true, // whether to allow zooming in and out
-        depth: 2, // how many hops of notes to display
-        scale: 1.1, // default view scale
-        repelForce: 1, // how much nodes should repel each other
-        centerForce: 0.3, // how much force to use when trying to center the nodes
-        linkDistance: 30, // how long should the links be by default?
-        fontSize: 0.4, // what size should the node labels be?
-        opacityScale: 1, // how quickly do we fade out the labels when zooming out?
-      },
-      globalGraph: {
-        drag: true,
-        zoom: true,
-        depth: -1,
-        scale: 0.9,
-        repelForce: 1,
-        centerForce: 0.3,
-        linkDistance: 50,
-        fontSize: 0.4,
-        opacityScale: 0.8,
-      },
-    }),
-    Component.RecentNotes({ 
-      linkToMore: "tags/writing",
-      title: "Recent Writing",
-      filter: filterPages,
-      // limit: 5 
-    }),
-    Component.Backlinks(),
+    Component.DesktopOnly(),
+    Component.DesktopOnly(
+      Component.Graph({
+        localGraph: {
+          drag: true, // whether to allow panning the view around
+          zoom: true, // whether to allow zooming in and out
+          depth: 2, // how many hops of notes to display
+          scale: 1.1, // default view scale
+          repelForce: 1, // how much nodes should repel each other
+          centerForce: 0.3, // how much force to use when trying to center the nodes
+          linkDistance: 30, // how long should the links be by default?
+          fontSize: 0.4, // what size should the node labels be?
+          opacityScale: 1, // how quickly do we fade out the labels when zooming out?
+        },
+        globalGraph: {
+          drag: true,
+          zoom: true,
+          depth: -1,
+          scale: 0.9,
+          repelForce: 1,
+          centerForce: 0.3,
+          linkDistance: 50,
+          fontSize: 0.4,
+          opacityScale: 0.8,
+        },
+      })),
+    Component.DesktopOnly(
+      Component.RecentNotes({ 
+        linkToMore: "tags/writing",
+        title: "Recent Writing",
+        filter: filterPages,
+        // limit: 5 
+      })
+    ),
+    Component.DesktopOnly(Component.Backlinks()),
+    Component.MobileOnly(Component.Backlinks()),
+    Component.MobileOnly(
+      Component.RecentNotes({ 
+        linkToMore: "tags/writing",
+        title: "Recent Writing",
+        filter: filterPages,
+        // limit: 5 
+      })
+    ),
+
+    // Component.MobileOnly(
+    //   Component.Graph({
+    //     localGraph: {
+    //       drag: true, // whether to allow panning the view around
+    //       zoom: true, // whether to allow zooming in and out
+    //       depth: 2, // how many hops of notes to display
+    //       scale: 1.1, // default view scale
+    //       repelForce: 1, // how much nodes should repel each other
+    //       centerForce: 0.3, // how much force to use when trying to center the nodes
+    //       linkDistance: 30, // how long should the links be by default?
+    //       fontSize: 0.4, // what size should the node labels be?
+    //       opacityScale: 1, // how quickly do we fade out the labels when zooming out?
+    //     },
+    //     globalGraph: {
+    //       drag: true,
+    //       zoom: true,
+    //       depth: -1,
+    //       scale: 0.9,
+    //       repelForce: 1,
+    //       centerForce: 0.3,
+    //       linkDistance: 50,
+    //       fontSize: 0.4,
+    //       opacityScale: 0.8,
+    //     },
+    //   })),
+
   ],
 }
 

diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
@@ -175,7 +175,7 @@ body[data-slug^=tags\/] li:has(a[href*='/Book/'])>div:before {
   content: "📖 ";
   padding-right: 10px;
 }
-a[href*='/Book/']:before {
+a[href*='/Book/']:not(.alias):before {
   content: "Book/";
 }
 
@@ -256,11 +256,11 @@ body[data-slug^=Book\/] ul.tags{
 body[data-slug="Theme-Tester"] .article-title{
   font-family: var(--test);
 }
-body[data-slug="for-grandma"]{
-  font-family: var(--cursive2), cursive;//Delicious Handrawn;
-  p,div,span{
-    font-size: 1.3rem;}
-}
+// body[data-slug="for-grandma"]{
+//   // font-family: var(--cursive2), cursive;//Delicious Handrawn;
+//   p,div,span{
+//     font-size: 1.3rem;}
+// }
 
 body[data-slug="for-grandma"] {
   .article-title, .graph>h3, .backlinks>h3, .page-title{
@@ -467,3 +467,12 @@ circle[id^="tags/"]{
   margin-bottom: 0;
 }
 
+// make sidebar vertical on small screens
+@media only screen and (max-width: 780px) {
+  .page>#quartz-body .sidebar {
+
+    flex-direction: column;
+
+  }
+}
+