Small adjustments for responsiveness

quartz.config.ts

@@ -70,7 +70,7 @@ const config: QuartzConfig = {
       }),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),
-      Plugin.Latex({ renderEngine: "katex" }),
+      // Plugin.Latex({ renderEngine: "katex" }),
     ],
     filters: [Plugin.RemoveDrafts()],
     emitters: [
@@ -102,11 +102,11 @@ const config: QuartzConfig = {
           const f2Title = f2.frontmatter?.title?.toLowerCase() ?? ""
           return naturalCompare(f1Title, f2Title)
         },
-  }),
+      }),
       Plugin.TagPage(),
       Plugin.ContentIndex({
         enableSiteMap: true,
-        enableRSS: true,
+        enableRSS: false,
       }),
       Plugin.Assets(),
       Plugin.Static(),

quartz.layout.ts

@@ -6,15 +6,22 @@ export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
   header: [],
   afterBody: [
-    Component.Footer({
-      links: {
-        "Théo Marchal": "https://theo.marchal.dev"
-      }
-    })
+    Component.DesktopOnly(
+      Component.Footer({
+        links: {
+          "Théo Marchal": "https://theo.marchal.dev"
+        }
+      })
+    )
   ],
-  footer: Component.Flex({
-    components:[]
-  }),
+  footer: 
+    Component.MobileOnly(
+      Component.Footer({
+        links: {
+          "Théo Marchal": "https://theo.marchal.dev"
+        }
+      })
+    ),
 }
 
 // components for pages that display a single page (e.g. a single note)
@@ -29,22 +36,21 @@ export const defaultContentPageLayout: PageLayout = {
 
   left: [
     Component.PageTitle(),
-
-    Component.MobileOnly(Component.Spacer()),
-    Component.MobileOnly(Component.Flex({
-      components: [
-        {
-          Component: Component.Search(),
-          grow: true,
-        },
-        { Component: Component.Darkmode() },
-      ]
-    })),
-
     Component.Explorer( { folderDefaultState: "open" } ),
   ],
 
   right: [
+
+    Component.MobileOnly(Component.Flex({
+      components: [
+        { Component: Component.Darkmode() },
+        {
+          Component: Component.Search(),
+          grow: true,
+        },
+      ]
+    })),
+
     Component.DesktopOnly(Component.Darkmode()),
     Component.DesktopOnly(Component.Search()),
     Component.TableOfContents(),
@@ -53,8 +59,8 @@ export const defaultContentPageLayout: PageLayout = {
 
 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
-
-    beforeBody: [
+  
+  beforeBody: [
     Component.ConditionalRender({
       component: Component.Breadcrumbs(),
       condition: (page) => page.fileData.slug !== "index",
@@ -63,24 +69,23 @@ export const defaultListPageLayout: PageLayout = {
 
   left: [
     Component.PageTitle(),
-
-    Component.MobileOnly(Component.Spacer()),
-    Component.MobileOnly(Component.Flex({
-      components: [
-        {
-          Component: Component.Search(),
-          grow: true,
-        },
-        { Component: Component.Darkmode() },
-      ]
-    })),
-
     Component.Explorer( { folderDefaultState: "open" } ),
   ],
 
   right: [
+
+    Component.MobileOnly(Component.Flex({
+      components: [
+        { Component: Component.Darkmode() },
+        {
+          Component: Component.Search(),
+          grow: true,
+        },
+      ]
+    })),
+
     Component.DesktopOnly(Component.Darkmode()),
     Component.DesktopOnly(Component.Search()),
     Component.TableOfContents(),
   ],
-}
+}

quartz/styles/custom.scss

@@ -157,6 +157,10 @@ table {
                 margin: 1rem auto;
             }
 
+            .page-footer {
+                margin-bottom: 0.5rem;
+            }
+
             footer {
                 margin-bottom: 1rem;
 
@@ -188,6 +192,13 @@ table {
                     margin-left: unset;
                     margin-right: unset;
                 }
+                @media all and ($medDesktop) {
+                    width: 750px;
+                    min-width: unset;
+                    max-width: unset;
+                    margin-left: unset;
+                    margin-right: unset;
+                }
                 @media all and ($maxDesktop) {
                     width: 950px;
                     min-width: unset;
@@ -203,6 +214,10 @@ table {
                     padding-left: 1.5rem;
                     padding-right: 1.5rem;
                 }
+                @media all and ($desktop) {
+                    padding-left: 1.8rem;
+                    padding-right: 1.8rem;
+                }
                 @media all and ($maxDesktop) {
                     padding-left: 3.5rem;
                     padding-right: 3.5rem;
@@ -311,6 +326,7 @@ table {
                 flex-direction: row;
                 flex-wrap: wrap;
                 padding-top: 1rem;
+                height: fit-content;
 
                 @media all and ($desktop)
                 {
@@ -342,7 +358,7 @@ table {
                     height: fit-content;
                     min-width: fit-content;
                     max-width: 14rem;
-                    flex-grow: .3;
+                    flex-grow: 1;
                     width: 10rem;
                 }
 
@@ -362,7 +378,11 @@ table {
     @media all and ($mobile) {
 
         h1 {
-            margin-top: 0;
+            margin-top: 1rem;
+        }
+
+        .center hr {
+            margin-bottom: 1rem;
         }
 
         .darkmode {
@@ -370,9 +390,8 @@ table {
         }
 
         footer {
-            margin-bottom: 0;
+            margin-bottom: 0.5em;
         }
-
     }
 }
 

quartz/styles/variables.scss

@@ -15,6 +15,7 @@ $breakpoints: (
 $mobile: "(max-width: #{map.get($breakpoints, mobile)})";
 $tablet: "(min-width: #{map.get($breakpoints, mobile)}) and (max-width: #{map.get($breakpoints, desktop)})";
 $desktop: "(min-width: #{map.get($breakpoints, desktop)})";
+$medDesktop: "(min-width: 1420px)";
 $maxDesktop: "(min-width: 1630px)";
 
 $pageWidth: #{map.get($breakpoints, mobile)};