new UI WIP

2025-12-17 13:54:23 +01:00 · 2024-10-21 14:20:21 +02:00
parent 780cbe1bcf
commit 34cdab453e
9 changed files with 70 additions and 35 deletions
--- a/quartz/quartz.config.ts
+++ b/quartz/quartz.config.ts
@@ -22,9 +22,9 @@ const config: QuartzConfig = {
      fontOrigin: "googleFonts",
      cdnCaching: true,
      typography: {
-        header: "Poppins",
-        body: "Lora",
-        code: "Fira Code",
+        header: "Inter Tight",
+        body: "Inter Tight",
+        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
-          lightgray: "#2c2c2c", // Darker gray
+          light: "#05050A", // Very dark 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
-          tertiary: "#c0392b", // Darker red
-          highlight: "rgba(41, 128, 185, 0.15)", // Dark blue highlight
-          textHighlight: "#f39c1288", // Orange text highlight
+          secondary: "#ffffff", // white
+          tertiary: "#ffffffcc", // Darker red
+          highlight: "transparent", // white opacity 0.8
+          //textHighlight: "green", // Orange text highlight
        },
      },
    },
--- a/quartz/quartz/components/Darkmode.tsx
+++ b/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 (
-    <div class={classNames(displayClass, "darkmode")}>
+  return <></>
+}
+
+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
--- a/quartz/quartz/components/PageTitle.tsx
+++ b/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")}>
-      <a href={baseDir}>{title}</a>
-    </h1>
+    <h2 class={classNames(displayClass, "page-title")}>
+      <a href={baseDir}>
+        {title === "Pubky Knowledge Base" && (
+          <>
+            Pubky
+            <br />
+            Knowledge Base
+          </>
+        )}
+      </a>
+    </h2>
  )
 }

--- a/quartz/quartz/components/Search.tsx
+++ b/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 stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
-              <circle cx="8" cy="8" r="7" />
-            </g>
+            <path
+              opacity="0.2"
+              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"
+              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">
--- a/quartz/quartz/components/scripts/darkmode.inline.ts
+++ b/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)

--- a/quartz/quartz/components/styles/explorer.scss
+++ b/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,
--- a/quartz/quartz/components/styles/footer.scss
+++ b/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;
  }
 }
--- a/quartz/quartz/components/styles/search.scss
+++ b/quartz/quartz/components/styles/search.scss
@@ -7,8 +7,8 @@

  & > #search-icon {
    background-color: var(--lightgray);
-    border-radius: 4px;
-    height: 2rem;
+    border-radius: 80px;
+    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);
--- a/quartz/quartz/styles/base.scss
+++ b/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;
 }