adjust layout, moves desktop backlinks, add toc

.gitignore

@@ -1,13 +1,13 @@
 .DS_Store
 .gitignore
-node_modules
-public
-prof
-tsconfig.tsbuildinfo
 .obsidian
-quartz/.quartz-cache
 .quartz-cache
-private/
 .replit
-replit.nix
+node_modules
 package-lock.json
+private/
+prof
+public
+quartz/.quartz-cache
+replit.nix
+tsconfig.tsbuildinfo

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2023 Miguel Pimentel
+Copyright (c) 2021-2023 jackyzha0
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

quartz.config.ts

@@ -15,7 +15,7 @@ const config: QuartzConfig = {
     theme: {
       typography: {
         header: "Bitter", // Schibsted Grotesk
-        body: "Poppins", // Source Sans Pro
+        body: "Bitter", // Source Sans Pro, Poppins
         code: "Fira Mono", // IBM Plex Mono
       },
       colors: {
@@ -23,13 +23,11 @@ const config: QuartzConfig = {
           light: "#faf8f8",
           lightgray: "#e5e5e5",
           gray: "#b8b8b8",
-          darkgray: "#4e4e4e",
+          darkgray: "#2e2e2e", // #4e4e4e
-          // darkgray: "#2e2e2e",
+          dark: "#1c1c1c", // #2b2b2b
-          dark: "#2b2b2b",
+          secondary: "#091217", // #2844b63, #152733
-          secondary: "#284b63",
+          tertiary: "#242e3b", // #84a59d
-          // secondary: "#152733",
+          highlight: "rgba(143, 159, 169, 0.15)", // #8f9fa926
-          tertiary: "#84a59d",
-          highlight: "#8f9fa926",
         },
         darkMode: {
           light: "#1e1e2e",
@@ -37,9 +35,9 @@ const config: QuartzConfig = {
           gray: "#a6adc8",
           darkgray: "#cdd6f4",
           dark: "#cdd6f4",
-          secondary: "#a6e3a1",
+          secondary: "#9be895", // #a6e3a1
-          tertiary: "#89dceb",
+          tertiary: "#d62edf", // #89dceb, #c072c4
-          highlight: "rgba(143, 159, 169, 0.15)",
+          highlight: "rgba(143, 159, 169, 0.1)", // rgba(143, 159, 169, 0.15)
         },
       },
     },

quartz.layout.ts

@@ -44,10 +44,12 @@ export const defaultContentPageLayout: PageLayout = {
       //   },
       // }
       )),
+      Component.DesktopOnly(Component.Backlinks()),
     ],
     right: [
       Component.Graph(),
-      Component.Backlinks(),
+      Component.MobileOnly(Component.Backlinks()),
+      Component.DesktopOnly(Component.TableOfContents()),
   ],
 }
 

quartz/components/styles/darkmode.scss

@@ -18,7 +18,7 @@
     height: 20px;
     top: calc(50% - 10px);
     fill: var(--darkgray);
-    transition: opacity 0.1s ease;
+    transition: opacity 0.3s ease; // 0.1s
   }
 }
 

quartz/components/styles/popover.scss

@@ -35,7 +35,7 @@
     box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
     overflow: auto;
     white-space: normal;
-    scrollbar-width: none;
+    // scrollbar-width: none;
   }
 
   h1 {

quartz/styles/base.scss

@@ -3,6 +3,10 @@
 @use "callouts";
 // @use "explorer";
 
+* {
+  scrollbar-width: thin;
+}
+
 html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: none;
@@ -28,8 +32,8 @@ section {
 }
 
 ::selection {
-  background: color-mix(in srgb, var(--tertiary) 75%, transparent);
+  background: color-mix(in srgb, var(--tertiary) 25%, transparent); // 75%
-  color: var(--darkgray);
+  // color: var(--darkgray);
 }
 
 p,
@@ -58,12 +62,12 @@ ul,
 a {
   font-weight: 600;
   text-decoration: none;
-  transition: color 0.2s ease;
+  // transition: color 0.5s ease; // 0.2s
   color: var(--secondary);
 
-  &:hover {
+  // &:hover {
-    color: var(--tertiary) !important;
+  //   color: var(--tertiary) !important;
-  }
+  // }
 
   &.internal:not(:has(> img)) {
     text-decoration: none;
@@ -462,9 +466,8 @@ video {
 
 ul.overflow,
 ol.overflow {
-  max-height: 500; // 400
+  max-height: 450; // 400
-  overflow-y: auto;
+  overflow-y: auto; // auto, scroll
-  scrollbar-width: thin;
 
   // clearfix
   content: "";

quartz/styles/custom.scss

@@ -1,3 +1,44 @@
 @use "./base.scss";
 
 // put your custom CSS here!
+
+// a {
+//   display: inline-block;
+//   position: relative;
+//   // color: #0087ca;
+// }
+
+// a::after {
+//   content: '';
+//   position: absolute;
+//   width: 100%;
+//   transform: scaleX(0);
+//   height: 2px;
+//   bottom: 0;
+//   left: 0;
+//   background-color: #0087ca;
+//   transform-origin: bottom right;
+//   transition: transform 0.25s ease-out;
+// }
+
+// a:hover::after {
+//   transform: scaleX(1);
+//   transform-origin: bottom left;
+// }
+
+// a.article-title {
+  
+// }
+
+a {
+  // text-decoration: underline 0.15em rgba(0, 0, 0, 1);
+  // text-underline-offset: 0.2em;
+  // transition: text-decoration-color 0.3s, text-underline-offset 0.3s;
+  text-decoration: underline 0.2rem transparent;
+  transition: text-decoration-color 0.5s;
+}
+
+a:hover {
+  text-decoration-color: var(--tertiary);
+  // text-underline-offset: 0.4em;
+}