clean the layout a bit

README.md

@@ -13,7 +13,6 @@ It is powered by [Quartz](https://github.com/jackyzha0/quartz/) and [Obsidian](h
 
 - [🌱 Forgetful Notes](#-forgetful-notes)
   - [Contents](#contents)
-  - [Screenshots](#screenshots)
   - [Features](#features)
   - [Background](#background)
   - [Technology](#technology)
@@ -24,25 +23,6 @@ It is powered by [Quartz](https://github.com/jackyzha0/quartz/) and [Obsidian](h
 
 </details>
 
-## Screenshots
-
-<details>
-<summary>Show/Hide</summary>
-
-### Full Width
-
-<img alt="Website Screenshot" src="screenshot-full.png" width="720px" />
-
-### Slim (light)
-
-<img alt="Website Screenshot" src="screenshot-light.png" width="360px" />
-
-### Slim (dark)
-
-<img alt="Website Screenshot" src="screenshot-dark.png" width="360px" />
-
-</details>
-
 ## Features
 
 - Fast Natural-Language Search
@@ -97,11 +77,11 @@ You can add custom CSS code within `/quartz/styles/custom.scss`. You will then n
 
 ### Fonts
 
-| Used in: |                       Font Family                        |                              Previous Font                               |
-| -------- | :------------------------------------------------------: | :----------------------------------------------------------------------: |
-| Headers  |    [Bitter](https://fonts.google.com/specimen/Bitter)    | [Schibsted Grotesk](https://fonts.google.com/specimen/Schibsted+Grotesk) |
-| Body     |    [Bitter](https://fonts.google.com/specimen/Bitter)    |    [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+3)    |
-| Code     | [Fira Mono](https://fonts.google.com/specimen/Fira+Mono) |     [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono)     |
+| Used in: | Font Family | Previous Font |
+| --- | :-: | :-: |
+| Headers | [Bitter](https://fonts.google.com/specimen/Bitter) | [Schibsted Grotesk](https://fonts.google.com/specimen/Schibsted+Grotesk) |
+| Body | [Bitter](https://fonts.google.com/specimen/Bitter) | [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+3) |
+| Code | [Fira Mono](https://fonts.google.com/specimen/Fira+Mono) | [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) |
 
 ## Folder Structure
 

quartz.config.ts

@@ -68,8 +68,8 @@ const config: QuartzConfig = {
       Plugin.AliasRedirects(),
       Plugin.ComponentResources(),
       Plugin.ContentPage(),
-      Plugin.FolderPage(),
-      Plugin.TagPage(),
+      // Plugin.FolderPage(),
+      // Plugin.TagPage(),
       Plugin.ContentIndex({
         enableSiteMap: true,
         enableRSS: true,

quartz.layout.ts

@@ -12,46 +12,23 @@ export const sharedPageComponents: SharedLayout = {
       Meta: "/Meta",
       GitHub: "https://github.com/semanticdata/",
       Source: "https://github.com/semanticdata/forgetful-notes/",
-      // Tags: "/tags",
     },
   }),
 }
 
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
-  beforeBody: [
-    Component.ArticleTitle(),
-    // Component.Breadcrumbs(),
-    // Component.ContentMeta(),
-    // Component.TagList(),
-  ],
-  left: [
-    // Component.PageTitle(),
-    // Component.MobileOnly(Component.Spacer()),
-    // Component.Search(),
-    // Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
-  ],
+  beforeBody: [Component.ArticleTitle()],
+  left: [Component.MobileOnly(Component.Spacer())],
   right: [
-    Component.Graph(),
-    Component.DesktopOnly(Component.TableOfContents()),
-    Component.Backlinks(),
+    Component.MobileOnly(Component.Graph()),
+    Component.MobileOnly(Component.Backlinks()),
   ],
 }
 
 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
-  beforeBody: [
-    Component.Breadcrumbs(),
-    Component.ArticleTitle(),
-    // Component.ContentMeta()
-  ],
-  left: [
-    // Component.PageTitle(),
-    // Component.MobileOnly(Component.Spacer()),
-    // Component.Search(),
-    // Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
-  ],
-  right: [],
+  beforeBody: [Component.ArticleTitle()],
+  left: [Component.MobileOnly(Component.Spacer())],
+  right: [Component.MobileOnly(Component.Spacer())],
 }

quartz/i18n/locales/hu-HU.ts

@@ -1,4 +1,4 @@
-import { Translation } from "./definition"
+import {Translation} from "./definition"
 
 export default {
   propertyDefaults: {
@@ -40,10 +40,10 @@ export default {
     },
     recentNotes: {
       title: "Legutóbbi jegyzetek",
-      seeRemainingMore: ({ remaining }) => `${remaining} további megtekintése →`,
+      seeRemainingMore: ({remaining}) => `${remaining} további megtekintése →`,
     },
     transcludes: {
-      transcludeOf: ({ targetSlug }) => `${targetSlug} áthivatkozása`,
+      transcludeOf: ({targetSlug}) => `${targetSlug} áthivatkozása`,
       linkToOriginal: "Hivatkozás az eredetire",
     },
     search: {
@@ -54,13 +54,13 @@ export default {
       title: "Tartalomjegyzék",
     },
     contentMeta: {
-      readingTime: ({ minutes }) => `${minutes} perces olvasás`,
+      readingTime: ({minutes}) => `${minutes} perces olvasás`,
     },
   },
   pages: {
     rss: {
       recentNotes: "Legutóbbi jegyzetek",
-      lastFewNotes: ({ count }) => `Legutóbbi ${count} jegyzet`,
+      lastFewNotes: ({count}) => `Legutóbbi ${count} jegyzet`,
     },
     error: {
       title: "Nem található",
@@ -68,14 +68,15 @@ export default {
     },
     folderContent: {
       folder: "Mappa",
-      itemsUnderFolder: ({ count }) => `Ebben a mappában ${count} elem található.`,
+      itemsUnderFolder: ({count}) =>
+        `Ebben a mappában ${count} elem található.`,
     },
     tagContent: {
       tag: "Címke",
       tagIndex: "Címke index",
-      itemsUnderTag: ({ count }) => `${count} elem található ezzel a címkével.`,
-      showingFirst: ({ count }) => `Első ${count} címke megjelenítve.`,
-      totalTags: ({ count }) => `Összesen ${count} címke található.`,
+      itemsUnderTag: ({count}) => `${count} elem található ezzel a címkével.`,
+      showingFirst: ({count}) => `Első ${count} címke megjelenítve.`,
+      totalTags: ({count}) => `Összesen ${count} címke található.`,
     },
   },
 } as const satisfies Translation

quartz/i18n/locales/pt-BR.ts

@@ -1,4 +1,4 @@
-import { Translation } from "./definition"
+import {Translation} from "./definition"
 
 export default {
   propertyDefaults: {
@@ -40,10 +40,10 @@ export default {
     },
     recentNotes: {
       title: "Notas recentes",
-      seeRemainingMore: ({ remaining }) => `Veja mais ${remaining} →`,
+      seeRemainingMore: ({remaining}) => `Veja mais ${remaining} →`,
     },
     transcludes: {
-      transcludeOf: ({ targetSlug }) => `Transcrever de ${targetSlug}`,
+      transcludeOf: ({targetSlug}) => `Transcrever de ${targetSlug}`,
       linkToOriginal: "Link ao original",
     },
     search: {
@@ -54,13 +54,13 @@ export default {
       title: "Sumário",
     },
     contentMeta: {
-      readingTime: ({ minutes }) => `Leitura de ${minutes} min`,
+      readingTime: ({minutes}) => `Leitura de ${minutes} min`,
     },
   },
   pages: {
     rss: {
       recentNotes: "Notas recentes",
-      lastFewNotes: ({ count }) => `Últimas ${count} notas`,
+      lastFewNotes: ({count}) => `Últimas ${count} notas`,
     },
     error: {
       title: "Não encontrado",
@@ -68,16 +68,18 @@ export default {
     },
     folderContent: {
       folder: "Arquivo",
-      itemsUnderFolder: ({ count }) =>
-        count === 1 ? "1 item mneste arquivo." : `${count} items neste arquivo.`,
+      itemsUnderFolder: ({count}) =>
+        count === 1
+          ? "1 item mneste arquivo."
+          : `${count} items neste arquivo.`,
     },
     tagContent: {
       tag: "Tag",
       tagIndex: "Sumário de Tags",
-      itemsUnderTag: ({ count }) =>
+      itemsUnderTag: ({count}) =>
         count === 1 ? "1 item com esta tag." : `${count} items com esta tag.`,
-      showingFirst: ({ count }) => `Mostrando as ${count} primeiras tags.`,
-      totalTags: ({ count }) => `Encontradas ${count} tags.`,
+      showingFirst: ({count}) => `Mostrando as ${count} primeiras tags.`,
+      totalTags: ({count}) => `Encontradas ${count} tags.`,
     },
   },
 } as const satisfies Translation

quartz/styles/base.scss

@@ -167,7 +167,7 @@ a {
       position: fixed;
       @media all and (max-width: $fullPageWidth) {
         position: initial;
-        flex-direction: row;
+        flex-direction: column;
         padding: 0;
         width: initial;
         margin-top: 2rem;

quartz/styles/variables.scss

@@ -1,9 +1,16 @@
-$pageWidth: 750px;
+$normalWeight: 400;
+$semiBoldWeight: 600;
+$boldWeight: 700;
+
 $mobileBreakpoint: 600px;
 $tabletBreakpoint: 1000px;
-$sidePanelWidth: 380px;
+
 $topSpacing: 4rem;
-$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
-$boldWeight: 700;
-$semiBoldWeight: 600;
-$normalWeight: 400;
+
+$pageWidth: 750px;
+$sidePanelWidth: 380px;
+$fullPageWidth: $pageWidth + $sidePanelWidth;
+
+$emptySpace: calc(100vw - ($pageWidth + $sidePanelWidth));
+$centerPanelLeftMargin: $emptySpace / 2;
+$rightPanelRightMargin: $emptySpace / 2;