Quartz sync: May 19, 2025, 12:13 AM

Author: codeyoma

quartz/components/PageTitle.tsx

@@ -24,6 +24,9 @@ PageTitle.css = `
   display: flex;
   align-items: center;
 }
+.page-title a {
+ margin-left: 0.5rem;
+}
 .logo {
   width: 2rem;
   height: 2rem;

quartz/components/PageTitleWithLogo.tsx

@@ -23,10 +23,22 @@ PageTitle.css = `
   font-family: var(--titleFont);
   display: flex;
 }
+
 .page-logo {
   justify-content: center;
   align-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding-left: 0.25rem;
   margin: 0;
+  vertical-align: text-top;
+
+  @media (min-width: 1400px){
+    display: block;
+    width: auto;
+    height: auto;
+    padding: 0;
+  }
 }
 `
 

quartz/components/Search.tsx

@@ -6,48 +6,48 @@ import { classNames } from "../util/lang"
 import { i18n } from "../i18n"
 
 export interface SearchOptions {
-  enablePreview: boolean
+    enablePreview: boolean
 }
 
 const defaultOptions: SearchOptions = {
-  enablePreview: true,
+    enablePreview: true,
 }
 
 export default ((userOpts?: Partial<SearchOptions>) => {
-  const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
-    const opts = { ...defaultOptions, ...userOpts }
-    const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
-    return (
-      <div class={classNames(displayClass, "search")}>
-        <button class="search-button">
-          <p>{i18n(cfg.locale).components.search.title}</p>
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
-            <title>Search</title>
-            <g class="search-path" fill="none">
-              <path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
-              <circle cx="8" cy="8" r="7" />
-            </g>
-          </svg>
-        </button>
-        <div class="search-container">
-          <div class="search-space">
-            <input
-              autocomplete="off"
-              class="search-bar"
-              name="search"
-              type="text"
-              aria-label={searchPlaceholder}
-              placeholder={searchPlaceholder}
-            />
-            <div class="search-layout" data-preview={opts.enablePreview}></div>
-          </div>
-        </div>
-      </div>
-    )
-  }
+    const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+        const opts = { ...defaultOptions, ...userOpts }
+        const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
+        return (
+            <div class={classNames(displayClass, "search")}>
+                <button class="search-button">
+                    <p class="search-label">{i18n(cfg.locale).components.search.title}</p>
+                    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
+                        <title>Search</title>
+                        <g class="search-path" fill="none">
+                            <path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
+                            <circle cx="8" cy="8" r="7" />
+                        </g>
+                    </svg>
+                </button>
+                <div class="search-container">
+                    <div class="search-space">
+                        <input
+                            autocomplete="off"
+                            class="search-bar"
+                            name="search"
+                            type="text"
+                            aria-label={searchPlaceholder}
+                            placeholder={searchPlaceholder}
+                        />
+                        <div class="search-layout" data-preview={opts.enablePreview}></div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
 
-  Search.afterDOMLoaded = script
-  Search.css = style
+    Search.afterDOMLoaded = script
+    Search.css = style
 
-  return Search
+    return Search
 }) satisfies QuartzComponentConstructor