Add aritcle and new icon

quartz.config.ts

@@ -36,13 +36,13 @@ const config: QuartzConfig = {
           highlight: "rgba(143, 159, 169, 0.15)",
         },
         darkMode: {
-          light: "#161618",
+          light: "#212121",
           lightgray: "#393639",
           gray: "#646464",
           darkgray: "#d4d4d4",
           dark: "#ebebec",
-          secondary: "#7b97aa",
-          tertiary: "#84a59d",
+          secondary: "#2c8d96",
+          tertiary: "#4fbf9e",
           highlight: "rgba(143, 159, 169, 0.15)",
         },
       },

quartz.layout.ts

@@ -7,8 +7,7 @@ export const sharedPageComponents: SharedLayout = {
   header: [],
   footer: Component.Footer({
     links: {
-      GitHub: "https://github.com/jackyzha0/quartz",
-      "Discord Community": "https://discord.gg/cRFFHYye7t",
+      GitHub: "https://github.com/carsonclarke570",
     },
   }),
 }

quartz/components/GraphicsBlogs.tsx

@@ -22,6 +22,16 @@ export default (() => {
                 return p.filePath?.startsWith("content/blogs/graphics/") && !p.frontmatter?.draft
             }
             return isValid(curr)
+        }).sort((a, b) => {
+            const aDate: Date = a.frontmatter?.publishDate as Date
+            const bDate: Date = b.frontmatter?.publishDate as Date
+
+            if (aDate < bDate) {
+                return 1;
+            } else if (aDate > bDate) {
+                return -1;
+            }
+            return 0;
         })
 
         const parseDate = (date: Date) => {

quartz/components/PageTitle.tsx

@@ -6,9 +6,12 @@ import { i18n } from "../i18n"
 const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
   const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
   const baseDir = pathToRoot(fileData.slug!)
+
   return (
     <h1 class={classNames(displayClass, "page-title")}>
-      <a href={baseDir}>{title}</a>
+      <a href={baseDir}>
+        <img className="Logo" src="/Resources/Icon.svg" width={250} />
+      </a>
     </h1>
   )
 }

quartz/components/RecentBlog.tsx

@@ -33,9 +33,6 @@ export default (() => {
 
         const title = page.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
         const tags = page.frontmatter?.tags ?? []
-        const parseDate = (date: Date) => {
-            return date.toLocaleDateString('en-US') //`${date.getFullYear()}/${date.getMonth()}/${date.getDay()}`
-        }
 
         return fileData.filePath?.startsWith("content/index") ? (
             <blockquote class="callout blog" data-callout="blog">

quartz/components/styles/recentblog.scss

@@ -23,6 +23,7 @@
     & > .preview-content {
         margin: 0px 10px;
         align-self: flex-start;
+        width: 100%;
 
         & > .preview-title {
             display: flex;

quartz/styles/callouts.scss

@@ -45,9 +45,9 @@
   }
 
   &[data-callout="math"] {
-    --color: #dba642;
+    --color: #c29e1d;
     --border: #dba64244;
-    --bg: #dba64210;
+    --bg: #c29e1d10;
     --callout-icon: var(--callout-icon-sigma);
   }
 
@@ -64,9 +64,9 @@
   }
 
   &[data-callout="tip"] {
-    --color: #00bfa5;
+    --color: #4fbf9e;
     --border: #00bfa544;
-    --bg: #00bfa510;
+    --bg: #2c8d9610;
     --callout-icon: var(--callout-icon-tip);
   }
 
@@ -85,9 +85,9 @@
   }
 
   &[data-callout="warning"] {
-    --color: #db8942;
+    --color: #f19155;
     --border: #db894244;
-    --bg: #db894210;
+    --bg: #ba4e3b10;
     --callout-icon: var(--callout-icon-warning);
   }
 

quartz/styles/custom.scss

@@ -1,9 +1,6 @@
 @use "./base.scss";
 @use "./variables.scss" as *;
 
-.page-title {
-    height: 200px;
-}
 
 #explorer-ul {
     max-height: calc(100vh - 400px);