new UI WIP

quartz/quartz.config.ts

@@ -22,9 +22,9 @@ const config: QuartzConfig = {
       fontOrigin: "googleFonts",
       cdnCaching: true,
       typography: {
-        header: "Poppins",
+        header: "Inter Tight",
-        body: "Lora",
+        body: "Inter Tight",
-        code: "Fira Code",
+        code: "Inter Tight",
       },
       colors: {
         lightMode: {
@@ -36,18 +36,18 @@ const config: QuartzConfig = {
           secondary: "#3498db", // Bright blue
           tertiary: "#e74c3c", // Bright red
           highlight: "rgba(52, 152, 219, 0.15)", // Light blue highlight
-          textHighlight: "#f1c40f88", // Yellow text highlight
+          //textHighlight: "#f1c40f88", // Yellow text highlight
         },
         darkMode: {
-          light: "#1e1e1e", // Very dark gray
+          light: "#05050A", // Very dark gray
-          lightgray: "#2c2c2c", // Darker gray
+          lightgray: "#1C1C1D", // Darker gray
           gray: "#575757", // Medium gray
-          darkgray: "#d4d4d4", // Light gray
+          darkgray: "#8e8e93", // Light gray
           dark: "#ecf0f1", // Very light gray
-          secondary: "#2980b9", // Darker blue
+          secondary: "#ffffff", // white
-          tertiary: "#c0392b", // Darker red
+          tertiary: "#ffffffcc", // Darker red
-          highlight: "rgba(41, 128, 185, 0.15)", // Dark blue highlight
+          highlight: "transparent", // white opacity 0.8
-          textHighlight: "#f39c1288", // Orange text highlight
+          //textHighlight: "green", // Orange text highlight
         },
       },
     },

quartz/quartz/components/Darkmode.tsx

@@ -8,8 +8,16 @@ import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
 const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
-  return (
+  return <></>
-    <div class={classNames(displayClass, "darkmode")}>
+}
+
+Darkmode.beforeDOMLoaded = darkmodeScript
+Darkmode.css = styles
+
+export default (() => Darkmode) satisfies QuartzComponentConstructor
+
+{
+  /** <div class={classNames(displayClass, "darkmode")}>
       <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
       <label id="toggle-label-light" for="darkmode-toggle" tabIndex={-1}>
         <svg
@@ -44,10 +52,5 @@ const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps)
         </svg>
       </label>
     </div>
-  )
+     */
 }
-
-Darkmode.beforeDOMLoaded = darkmodeScript
-Darkmode.css = styles
-
-export default (() => Darkmode) satisfies QuartzComponentConstructor

quartz/quartz/components/PageTitle.tsx

@@ -7,9 +7,17 @@ const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzCompo
   const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
   const baseDir = pathToRoot(fileData.slug!)
   return (
-    <h1 class={classNames(displayClass, "page-title")}>
+    <h2 class={classNames(displayClass, "page-title")}>
-      <a href={baseDir}>{title}</a>
+      <a href={baseDir}>
-    </h1>
+        {title === "Pubky Knowledge Base" && (
+          <>
+            Pubky
+            <br />
+            Knowledge Base
+          </>
+        )}
+      </a>
+    </h2>
   )
 }
 

quartz/quartz/components/Search.tsx

@@ -26,15 +26,31 @@ export default ((userOpts?: Partial<SearchOptions>) => {
             tabIndex={0}
             aria-labelledby="title desc"
             role="img"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 19.9 19.7"
           >
             <title id="title">Search</title>
             <desc id="desc">Search</desc>
-            <g class="search-path" fill="none">
+            <path
-              <path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
+              opacity="0.2"
-              <circle cx="8" cy="8" r="7" />
+              d="M9.06213 15.625C12.6865 15.625 15.6246 12.6869 15.6246 9.0625C15.6246 5.43813 12.6865 2.5 9.06213 2.5C5.43777 2.5 2.49963 5.43813 2.49963 9.0625C2.49963 12.6869 5.43777 15.625 9.06213 15.625Z"
-            </g>
+              fill="white"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M9.06213 3.125C5.78294 3.125 3.12463 5.78331 3.12463 9.0625C3.12463 12.3417 5.78294 15 9.06213 15C12.3413 15 14.9996 12.3417 14.9996 9.0625C14.9996 5.78331 12.3413 3.125 9.06213 3.125ZM1.87463 9.0625C1.87463 5.09295 5.09259 1.875 9.06213 1.875C13.0317 1.875 16.2496 5.09295 16.2496 9.0625C16.2496 13.032 13.0317 16.25 9.06213 16.25C5.09259 16.25 1.87463 13.032 1.87463 9.0625Z"
+              fill="white"
+            />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M13.2603 13.2612C13.5044 13.0171 13.9001 13.0171 14.1442 13.2612L17.9411 17.0581C18.1852 17.3022 18.1852 17.6979 17.9411 17.942C17.6971 18.1861 17.3013 18.1861 17.0572 17.942L13.2603 14.1451C13.0163 13.901 13.0163 13.5053 13.2603 13.2612Z"
+              fill="white"
+            />
           </svg>
         </div>
         <div id="search-container">

quartz/quartz/components/scripts/darkmode.inline.ts

@@ -1,4 +1,4 @@
-const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"
+const userPref = window.matchMedia("(prefers-color-scheme: light)").matches ? "dark" : "dark"
 const currentTheme = localStorage.getItem("theme") ?? userPref
 document.documentElement.setAttribute("saved-theme", currentTheme)
 

quartz/quartz/components/styles/explorer.scss

@@ -55,8 +55,10 @@ button#explorer {
 
   & ul {
     list-style: none;
-    margin: 0.08rem 0;
+    margin: 0.2rem 0;
     padding: 0;
+    padding-left: 25px;
+    font-size: 17px;
     transition:
       max-height 0.35s ease,
       transform 0.35s ease,

quartz/quartz/components/styles/footer.scss

@@ -4,12 +4,13 @@ footer {
   opacity: 0.7;
 
   & ul {
+    justify-content: center;
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: row;
-    gap: 1rem;
+    gap: 4rem;
     margin-top: -1rem;
   }
 }

quartz/quartz/components/styles/search.scss

@@ -7,8 +7,8 @@
 
   & > #search-icon {
     background-color: var(--lightgray);
-    border-radius: 4px;
+    border-radius: 80px;
-    height: 2rem;
+    height: 48px;
     display: flex;
     align-items: center;
     cursor: pointer;
@@ -20,14 +20,14 @@
 
     & > p {
       display: inline;
-      padding: 0 1rem;
+      padding: 0 1.5rem;
     }
 
     & svg {
       cursor: pointer;
       width: 18px;
       min-width: 18px;
-      margin: 0 0.5rem;
+      margin: 0 1.5rem;
 
       .search-path {
         stroke: var(--darkgray);

quartz/quartz/styles/base.scss

@@ -43,6 +43,10 @@ ul,
 .math {
   color: var(--darkgray);
   fill: var(--darkgray);
+  //font-size: 15px;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 20px !important;
   overflow-wrap: anywhere;
   hyphens: auto;
 }
@@ -73,6 +77,7 @@ a {
     padding: 0 0.1rem;
     border-radius: 5px;
     line-height: 1.4rem;
+    text-decoration-line: underline;
 
     &:has(> img) {
       background-color: none;
@@ -302,7 +307,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.4rem;
+  font-size: 1.5rem;
   margin-top: 1.9rem;
   margin-bottom: 1rem;
 }