Quartz sync: May 19, 2025, 1:03 AM

Author: codeyoma

content/index.md

@@ -1,12 +1,14 @@
 ---
 description: 
-title: Home
+title: Hello Again!
 created: 2025-05-18
 modified: 2025-05-18
 comments: "false"
 ---
 
+<!--
 ![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira&weight=500&size=42&duration=2468&pause=4000&width=600&height=70&lines=Hello%2C+Again!)
+-->
 ![[Lqp2z3I.gif]]
 
 # MOC

quartz.layout.ts

@@ -41,8 +41,7 @@ export const defaultContentPageLayout: PageLayout = {
         Component.TagList(),
     ],
     left: [
-        Component.MobileOnly(Component.PageTitle()),
-        Component.DesktopOnly(Component.PageTitleWithLogo()),
+        Component.PageTitle(),
         Component.MobileOnly(Component.Spacer()),
         Component.Flex({
             components: [
@@ -97,8 +96,7 @@ export const defaultContentPageLayout: PageLayout = {
 export const defaultListPageLayout: PageLayout = {
     beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
     left: [
-        Component.MobileOnly(Component.PageTitle()),
-        Component.DesktopOnly(Component.PageTitleWithLogo()),
+        Component.PageTitle(),
         Component.MobileOnly(Component.Spacer()),
         Component.Flex({
             components: [

quartz/components/PageTitle.tsx

@@ -7,32 +7,47 @@ const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzCompo
     const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
     const baseDir = pathToRoot(fileData.slug!)
     return (
-        <h2 class={classNames(displayClass, "page-title")}>
-            <a href={baseDir}>
+        <a href={baseDir} class="page-header-link">
+            <h2 class={classNames(displayClass, "page-title")}>
                 {title}
-                <img class="logo" src="https://avatars.githubusercontent.com/u/71107230?v=4" />
-            </a>
-        </h2>
+            </h2>
+            <img class="page-logo" src="https://avatars.githubusercontent.com/u/71107230?v=4" />
+        </a>
     )
 }
 
 PageTitle.css = `
+.page-header-link {
+  display: flex;
+  gap: 0.5rem;
+  text-decoration: none;
+
+  @media (min-width: 1024px) {
+    flex-direction: column;
+  }
+}
+
 .page-title {
-  font-size: 1.75rem;
+  font-size: 1.1rem;
   margin: 0;
+  margin-left: 0.5em;
   font-family: var(--titleFont);
-  display: flex;
-  align-items: center;
-}
-.page-title a {
- margin-left: 0.5rem;
+  white-space: nowrap;
+
+  @media (min-width: 1024px) {
+    font-size: 1.7rem;
+  }
 }
-.logo {
-  width: 2rem;
-  height: 2rem;
-  padding-left: 0.25rem;
+
+.page-logo {
   margin: 0;
-  vertical-align: text-top;
+  width: 1.6rem;
+  height: 1.6rem;
+
+  @media (min-width: 1024px) {
+    width: auto;
+    height: auto;
+  }
 }
 `
 

quartz/components/PageTitleWithLogo.tsx

@@ -7,7 +7,6 @@ import Darkmode from "./Darkmode"
 import ReaderMode from "./ReaderMode"
 import Head from "./Head"
 import PageTitle from "./PageTitle"
-import PageTitleWithLogo from "./PageTitleWithLogo"
 import ContentMeta from "./ContentMeta"
 import Spacer from "./Spacer"
 import TableOfContents from "./TableOfContents"
@@ -34,7 +33,6 @@ export {
     ReaderMode,
     Head,
     PageTitle,
-    PageTitleWithLogo,
     ContentMeta,
     Spacer,
     TableOfContents,

quartz/components/index.ts

@@ -2,7 +2,6 @@
 
 // put your custom CSS here!
 
-
 .center article,
 p {
     @media (min-width: 1400px) {
@@ -20,19 +19,19 @@ footer {
     }
 }
 
-.explorer-content .folder-container {
-    margin: 0.1em 0;
+// .explorer-content .folder-container {
+//     padding: 0.1em 0;
 
-    @media (min-width: 1400px) {
-        margin: 0.4em 0;
-    }
-}
+//     @media (min-width: 1400px) {
+//         padding: 0.1em 0;
+//     }
+// }
 
 .explorer-content li {
-    margin: 0.2em 0;
+    padding: 0.2em 0;
 
     @media (min-width: 1400px) {
-        margin: 0.4em 0;
+        padding: 0.4em 0;
         line-height: 1.3;
     }
 }