Merge pull request #17 from pubky/new/UI

new UI WIP

.obsidian/workspace.json

@@ -13,11 +13,22 @@
             "state": {
               "type": "image",
               "state": {
-                "file": "images/pubky-arch.png"
+                "file": "Explore/images/pubky-arch.png"
+              }
+            }
+          },
+          {
+            "id": "697b4658292e14ce",
+            "type": "leaf",
+            "state": {
+              "type": "release-notes",
+              "state": {
+                "currentVersion": "1.6.7"
               }
             }
           }
-        ]
+        ],
+        "currentTab": 1
       }
     ],
     "direction": "vertical"
@@ -83,7 +94,7 @@
             "state": {
               "type": "backlink",
               "state": {
-                "file": "images/pubky-arch.png",
+                "file": "Explore/images/pubky-arch.png",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -100,7 +111,7 @@
             "state": {
               "type": "outgoing-link",
               "state": {
-                "file": "images/pubky-arch.png",
+                "file": "Explore/images/pubky-arch.png",
                 "linksCollapsed": false,
                 "unlinkedCollapsed": true
               }
@@ -123,7 +134,7 @@
             "state": {
               "type": "outline",
               "state": {
-                "file": "images/pubky-arch.png"
+                "file": "Explore/images/pubky-arch.png"
               }
             }
           }
@@ -147,51 +158,51 @@
   },
   "active": "75a1317f66991245",
   "lastOpenFiles": [
-    "images/pubky-core.png_original",
-    "images/pubky-core.png_exiftool_tmp",
-    "images/pubky-backend.png_exiftool_tmp",
-    "images/pubky-arch.png_original",
-    "images/pubky-arch.png_exiftool_tmp",
-    "images/pubky-app.png_exiftool_tmp",
-    "images/pubky-header.png",
-    "images/pubky-core.png",
-    "images/pubky-backend.png",
-    "images/pubky-arch.png",
-    "images/pubky-app.png",
-    "images/client-homeserver.png",
-    "Technologies/DNS.md",
-    "Concepts/Credible Exit.md",
-    "The vision of Pubky.md",
-    "Pubky App/Introduction.md",
-    "Pubky Core/Introduction.md",
-    "index.md",
-    "Pubky Core/Homeservers.md",
-    "Pubky Core/Pkarr/ELI5.md",
-    "Technologies/DoH.md",
-    "Pubky Core/Pkarr/4.Architecture.md",
-    "Pubky Core/Pkarr/3.Expectations.md",
-    "Pubky Core/Pkarr/1.Why PKARR?.md",
-    "Pubky Core/Pkarr/2.Getting Started with PKARR.md",
-    "Pubky Core/Pkarr/0.Introduction.md",
     "quartz/public/404.html",
+    "quartz/public/Explore/images/mermaid_charts/semantic_social_graph.svg",
+    "quartz/public/Explore/images/quartz.png",
+    "quartz/public/Explore/images/pubky-header.png",
+    "quartz/public/Explore/images/pubky-core.png",
+    "quartz/public/Explore/images/pubky-backend.png",
+    "quartz/public/Explore/images/pubky-arch.png",
+    "quartz/public/Explore/images/pubky-app.png",
+    "quartz/public/Explore/images/obsidian.png",
+    "quartz/public/Explore/images/mermaid_charts",
+    "quartz/public/Explore/images/global_aggregator.png",
+    "quartz/public/Explore/images/custom_backend.png",
+    "quartz/public/Explore/images",
     "quartz/public/quartz/quartz/plugins/transformers/toc.ts",
     "quartz/public/quartz/quartz/plugins/transformers/syntax.ts",
     "quartz/public/quartz/quartz/plugins/transformers/oxhugofm.ts",
     "quartz/public/quartz/quartz/plugins/transformers/ofm.ts",
-    "quartz/public/quartz/quartz/static/og-image.png",
+    "quartz/public/quartz/quartz/plugins/transformers/links.ts",
-    "quartz/public/quartz/quartz/static/icon.png",
+    "quartz/public/quartz/quartz/plugins/transformers/linebreaks.ts",
-    "quartz/public/images/mermaid_charts/semantic_social_graph.svg",
+    "quartz/public/quartz/quartz/plugins/transformers/latex.ts",
-    "quartz/public/images/pubky-header.png",
+    "quartz/public/quartz/quartz/plugins/transformers/lastmod.ts",
-    "Pubky Core/ELI5.md",
+    "Readme.md",
-    "Technologies/DHT.md",
+    "Explore/Technologies/DNS.md",
-    "Pubky App/Backend/Introduction.md",
+    "Explore/Concepts/Credible Exit.md",
-    "Pubky App/Client/Introduction.md",
+    "The vision of Pubky.md",
-    "Pubky App/Backend/Web Server.md",
+    "Explore/Pubky App/Introduction.md",
-    "Pubky App/Backend/Indexer.md",
+    "Explore/Pubky Core/Introduction.md",
-    "Pubky App/Backend/Aggregator.md",
+    "index.md",
-    "Pubky App/App Architectures/4. Custom Backend.md",
+    "Explore/Pubky Core/Homeservers.md",
-    "Pubky App/App Architectures/3. Global Aggregators.md",
+    "Explore/Pubky Core/Pkarr/ELI5.md",
-    "Pubky App/App Architectures/2. Client - Homeserver.md",
+    "Explore/Technologies/DoH.md",
-    "Pubky App/App Architectures/1. Introduction.md"
+    "Explore/Pubky Core/Pkarr/4.Architecture.md",
+    "Explore/Pubky Core/Pkarr/3.Expectations.md",
+    "Pubky Core/Pkarr/1.Why PKARR?.md",
+    "Pubky Core/Pkarr/2.Getting Started with PKARR.md",
+    "Explore/Pubky Core/Pkarr/0.Introduction.md",
+    "Explore/Pubky Core/ELI5.md",
+    "Explore/Technologies/DHT.md",
+    "Explore/Pubky App/Backend/Introduction.md",
+    "Explore/Pubky App/Client/Introduction.md",
+    "Explore/Pubky App/Backend/Web Server.md",
+    "Explore/Pubky App/Backend/Indexer.md",
+    "Explore/Pubky App/Backend/Aggregator.md",
+    "Explore/Pubky App/App Architectures/4. Custom Backend.md",
+    "Explore/Pubky App/App Architectures/3. Global Aggregators.md",
+    "Explore/Pubky App/App Architectures/2. Client - Homeserver.md"
   ]
 }

Explore/Concepts/Semantic Social Graph.md

@@ -22,7 +22,7 @@ In **Pubky**, a decentralized Semantic Social Graph is central to providing a mo
 
 This diagram shows how a Semantic Social Graph works, representing users, content, and tags. Users tag content and peers, which adds context and helps determine how information flows through the network. Relationships are weighted (Pubky weighting features are under development), meaning users can specify trust levels and the strength of connections to further personalize their experience.
 
-![Semantic Social graph](../images/mermaid_charts/semantic_social_graph.svg)
+![Semantic Social graph](Explore/images/mermaid_charts/semantic_social_graph.svg)
 
 **Tags and Contextual Meaning**: Pubky allows users to add tags to content and connections, giving them the ability to add context to their relationships. This means users can easily categorize and prioritize content based on what matters to them most.
 

Explore/Concepts/What Is a Decentralized Semantic Social Graph?.md

@@ -1,5 +1,5 @@
 
-![Semantic Social graph](../images/mermaid_charts/semantic_social_graph.svg)
+![Semantic Social graph](Explore/images/mermaid_charts/semantic_social_graph.svg)
 
 **Semantic Relationships:** Connections between users and content are tagged with meaningful metadata, capturing the context, relevance, and nature of each relationship.
 **Weighted Connections:** Relationships aren't just binary; they carry weights that represent their strength, trust level, or relevance, enabling more sophisticated interactions.

Explore/Pubky App/App Architectures/1. Introduction.md

@@ -0,0 +1,9 @@
+Leveraging the [[Explore/Pubky Core/Introduction|Pubky Core]] protocol as the foundational layer, we can envision a diverse array of applications with distinct functionalities. While each app can implement its own unique design patterns and user interfaces, they all share a common underlying architecture: interacting with the distributed data stores, colloquially referred to as [[Homeservers|homeservers]], through standardized read and write operations.
+
+The [[Explore/Pubky Core/Introduction|Pubky Core protocol]] enables a decentralized approach to data management, facilitating seamless communication between clients and their respective data stores. This architecture promotes data sovereignty and enhances system resilience.
+
+Below, we present several high-level designs that showcase the versatility of this architecture, from simple client (browser) apps that interact directly with one or several [[Homeservers|homeservers]] to more complex applications with custom aggregators and backends capable of powerful inference:
+
+- [[2. Client - Homeserver|Client-Homeserver]]
+- [[4. Custom Backend|Custom backend]]
+- [[3. Global Aggregators|Global aggregators]]

Explore/Pubky App/App Architectures/2. Client - Homeserver.md

@@ -1,4 +1,4 @@
-![[client-homeserver.png]]
+![[Explore/images/client-homeserver.png]]
 
 In this architecture, we implement a direct communication model between the client application and the home server. This approach minimizes latency and reduces system complexity by establishing a direct data flow pathway.
 

Explore/Pubky App/App Architectures/3. Global Aggregators.md

@@ -1,4 +1,4 @@
-![[global_aggregator.png]]
+![[Explore/images/global_aggregator.png]]
 
 This architectural pattern implements a distributed system model centered around a global aggregation layer, eliminating the need to fetch data from a multitude (maybe thousands!) of homesevers by the client. The core component of this design is a centralized global aggregator that interfaces with multiple home servers, consuming events from each in a unified manner.
 

Explore/Pubky App/App Architectures/4. Custom Backend.md

@@ -1,4 +1,4 @@
-![[custom_backend.png]]
+![[Explore/images/custom_backend.png]]
 
 This architectural design introduces a more sophisticated data flow model, incorporating an intermediary backend layer between the client application and the home server. This backend functions as a middleware, enhancing the system's flexibility and data processing capabilities.
 
@@ -16,5 +16,5 @@ b) In cases where only data normalization is necessary, the backend can bypass o
 
 This modular approach allows for fine-grained control over data processing, enabling efficient resource utilization and optimized client-side performance based on specific application requirements.
 
-An example of a complex backend that does aggregation, normalization, indexation, filtering (compliance) and powerful inference is [Pubky-Nexus](https://github.com/pubky/pubky-nexus), the backend that powers the [[Pubky App/Introduction|Pubky App]] social features.
+An example of a complex backend that does aggregation, normalization, indexation, filtering (compliance) and powerful inference is [Pubky-Nexus](https://github.com/pubky/pubky-nexus), the backend that powers the [[Explore/Pubky App/Introduction|Pubky App]] social features.
 

Explore/Pubky App/Backend/Introduction.md

@@ -1,6 +1,6 @@
 The Backend is responsible for collecting ([[Aggregator|aggregators]]) and organizing ([[Indexer|indexer]]) data from various sources, known as [[Homeservers|homeservers]].
 
-![backend](../../images/pubky-backend.png)
+![backend](Explore/images/pubky-backend.png)
 
 Imagine you're trying to find a specific document in a large library. The backend is like a librarian who searches through the shelves, finds the right documents, and prepares them for you to use. This ensures that the data is accurate, up-to-date, and in a format that's easy to work with.
 
@@ -8,4 +8,4 @@ Imagine you're trying to find a specific document in a large library. The backen
 
 - [[Aggregator|Aggregators]] execute a **data retrieval protocol** to obtain data from **data storage**, initiating a process that retrieves and collects data from various sources.
 - [[Indexer|Indexers]] receive aggregated data from the **Aggregators** and initiate a rigorous **data normalization** process, transforming and converting the data into a standardized format to ensure consistency and accuracy.
-- [[Web Server|Web servers]] provide the requested data to [[Pubky App/Client/Introduction|Pubky client]]
+- [[Web Server|Web servers]] provide the requested data to [[Explore/Pubky App/Client/Introduction|Pubky client]]

Explore/Pubky App/Client/Introduction.md

@@ -1,14 +1,14 @@
 # Pubky Client
 
-![pubkey-client](../../images/pubky-header.png)
+![pubkey-client](Explore/images/pubky-header.png)
 
-The Pubky client will be available as both a desktop application and a hosted website service (standard website) that allows users to interface with the social media layer of [[Pubky App/Backend/Introduction|Pubky Backend]] using [Synonym](https://synonym.to/) hosted services.
+The Pubky client will be available as both a desktop application and a hosted website service (standard website) that allows users to interface with the social media layer of [[Explore/Pubky App/Backend/Introduction|Pubky Backend]] using [Synonym](https://synonym.to/) hosted services.
 
-Using the library analogy again, the Pubky Client is like a personalized research assistant who takes the prepared documents from the librarian ([[Pubky App/Backend/Introduction|backend]]) and creates a customized report just for you. This report is designed to be easy to read and understand, with all the relevant information presented in a clear and concise manner.
+Using the library analogy again, the Pubky Client is like a personalized research assistant who takes the prepared documents from the librarian ([[Explore/Pubky App/Backend/Introduction|backend]]) and creates a customized report just for you. This report is designed to be easy to read and understand, with all the relevant information presented in a clear and concise manner.
 
 - Users are able to take control of the data and exit the Synonym hosted services and run their own without hampering discoverability ([[Credible Exit|credible exit]]).
 
-- Pubky client uses the open [[Pubky Core/Introduction|Pubky Core]] for nearly all features, allowing users to avoid censorship by choosing self-hosting or alternate hosts without losing followers or integrity. 
+- Pubky client uses the open [[Explore/Pubky Core/Introduction|Pubky Core]] for nearly all features, allowing users to avoid censorship by choosing self-hosting or alternate hosts without losing followers or integrity. 
 
 - Pubky also features support for [[Paykit|paykit]], our open payment protocol for coordinating payments among peers supporting various methods. This allows users to create sub-accounts from master wallets for familiar payment experiences. This suite of features removes any requirement from [Synonym](https://synonym.to/) to custody user funds, while allowing for users to set up subscriptions, recurring payments, paywalls, etc, in a P2P way. This feature will not be in the first launch version of Pubky app, but it is worth noting that next year we will enable all users to buy and sell data in this way.
 

Explore/Pubky App/Introduction.md

@@ -1,6 +1,6 @@
-![pubkey-app](../images/pubky-app.png)
+![pubkey-app](Explore/images/pubky-app.png)
 
-> Synonym will be initially hosting: [[Pubky Core/Homeservers|homeserver]] and [[Pubky App/Introduction|Pubky App]]
+> Synonym will be initially hosting: [[Homeservers|homeserver]] and [[Explore/Pubky App/Introduction|Pubky App]]
 
 ## Overview
 
@@ -8,17 +8,17 @@ Pubky-app's initial focus is building a decentralized social media protocol.
 
 ## Key aspects
 
-- **Data Ownership**: Users have full autonomy over their data, hosting it on **independent [[Pubky Core/Homeservers|homeservers]]** that are decentralized and distributed across the network. This approach enables users to maintain **control** and **ownership** of their data, while also ensuring **data sovereignty** and **privacy**. 
+- **Data Ownership**: Users have full autonomy over their data, hosting it on **independent [[Homeservers|homeservers]]** that are decentralized and distributed across the network. This approach enables users to maintain **control** and **ownership** of their data, while also ensuring **data sovereignty** and **privacy**. 
 - **Profiles**: The system employs a **decentralized data storage** approach, where **post**, **comment**, and **like** data are stored in association with **user profiles**.
 - [[Aggregator|Aggregators]] collecting social graphs
 - Feeds of followings' activities
 - [[Search|Searching]] profiles and posts
-- Notification delivery through [[Pubky App/Backend/Introduction|aplication backends]] 
+- Notification delivery through [[Explore/Pubky App/Backend/Introduction|aplication backends]] 
 - Distributed moderation through user blocking
 
 ## Components
 
-The Pubky App is a complex system that can be broken down into two main components: the [[Pubky App/Backend/Introduction|backend]] and the [[Pubky App/Client/Introduction|client]]. These two pieces work together to provide a seamless user experience.
+The Pubky App is a complex system that can be broken down into two main components: the [[Explore/Pubky App/Backend/Introduction|backend]] and the [[Explore/Pubky App/Client/Introduction|client]]. These two pieces work together to provide a seamless user experience.
 
 ##### Backend: The Data Organizer
 
@@ -30,7 +30,7 @@ It is the part of the Pubky App that you interact with directly. It's responsibl
 
 ## MVP Architecture
 
-The early versions of Pubky app take some shortcuts over the [[Pubky Core/Introduction|Pubky Core]] design. The MVP app is centralized, therefore we saved time and complexity by aggregating functionality into fewer components. The main two components are the `Homeserver` and the `Indexer`
+The early versions of Pubky app take some shortcuts over the [[Explore/Pubky Core/Introduction|Pubky Core]] design. The MVP app is centralized, therefore we saved time and complexity by aggregating functionality into fewer components. The main two components are the `Homeserver` and the `Indexer`
 
 - The [[Homeservers|homeservers]] fulfils the function of `data stores`, republishing users keys to [[0.Introduction|PKARR]] and it acts also as an identity-provider (Oauth-like sign-in). Users maintain a trust relationship with the homeserver.
-- The `Indexer` fulfils the function of the [[Pubky App/Backend/Introduction|backend]] for the Pubky App. 
+- The `Indexer` fulfils the function of the [[Explore/Pubky App/Backend/Introduction|backend]] for the Pubky App. 

Explore/Pubky Core/Homeservers.md

@@ -17,7 +17,7 @@ Current implementations across Pubky currently only support public, unencrypted
 
 ## User Data Control and Credible Exit
 
-- The current network is being bootstrapped by Synonym's first homeserver, which supports key accounts as a service, as well as all services required to operate the [[Pubky App/Introduction|pubky App]]. 
+- The current network is being bootstrapped by Synonym's first homeserver, which supports key accounts as a service, as well as all services required to operate the [[Explore/Pubky App/Introduction|pubky App]]. 
 - While Synonym is currently not charging fees for homeserving, it is totall possible for anyone to run their own homerserver and require service fees or peer-to-peer micropayments, or any other requirement, to improve data redundancy and competition.
 - Synonym does not control who can join or serve data on the network, but in order to truly have a [[Credible Exit|"credible exit"]] the network will need to mature to have more providers of homeservers and Pubky applications.
 - We will also need to make it as easy as possible for people to host their own homeservers, and to host homerserver clouds.

Explore/Pubky Core/Introduction.md

@@ -1,6 +1,6 @@
 ## Pubky Core Overview
 
-![pubky-core](../images/pubky-core.png)
+![pubky-core](Explore/images/pubky-core.png)
 
 Pubky Core is built on a few core concepts:
 
@@ -16,7 +16,7 @@ Pubky Core's distributed architecture aims to provide user autonomy through [[Cr
 
 Pubky Core is made for developers and builders of internet software products. We will actively work to cultivate a community of builders and startups using our tech.
 
-[[Pubky App/Introduction|Pubky App]] is made for anyone interested in social media and online publishing that wants new ways to control their data and more control over which posts they see.
+[[Explore/Pubky App/Introduction|Pubky App]] is made for anyone interested in social media and online publishing that wants new ways to control their data and more control over which posts they see.
 
 ## Why? What is the reward?
 

Explore/Pubky Core/Pkarr/0.Introduction.md

@@ -23,4 +23,4 @@ For more technical details on PKARR's architecture and how it works, refer to th
 
 ## Getting Started
 
-[To start using PKARR](2.Getting%20Started%20with%20PKARR.md), you can visit the [web app demo](https://app.pkarr.org) or explore the Rust examples provided in [PKARR repository](https://github.com/Nuhvi/pkarr/).
+[To start using PKARR](2.Getting%20Started%20with%20Pkarr.md), you can visit the [web app demo](https://app.pkarr.org) or explore the Rust examples provided in [PKARR repository](https://github.com/Nuhvi/pkarr/).

Explore/Pubky Core/Pkarr/3.Expectations.md

@@ -18,4 +18,4 @@ Records are heavily cached, and updates might take some time to propagate. In ca
 
 ## Next Steps
 
-For a deeper understanding of why [[0.Introduction|PKARR]] was created and its motivation, refer to the [[1.Why PKARR?|why PKARR?]] note.
+For a deeper understanding of why [[0.Introduction|PKARR]] was created and its motivation, refer to the [[1.Why Pkarr?|why PKARR?]] note.

Explore/Pubky Core/notes/3.Protocols.md

@@ -8,7 +8,7 @@ This note is indicative and highly creative. We have not yet explored much about
 
 **Pubky Search** - Format for full-text search indices and queries across aggregated Pubky Data. Enables cross-platform discovery.
 
-**[Pubky Payments](Technologies/Paykit.md)** - Decentralized and interoperable payment protocol for microtransactions like tips, subscriptions and purchasing goods/services.
+**[Pubky Payments](Paykit.md)** - Decentralized and interoperable payment protocol for microtransactions like tips, subscriptions and purchasing goods/services.
 
 **Pubky Identity** - Self-sovereign digital credentials for authentication without centralized authorities like usernames/passwords.
 

Pubky App/App Architectures/1. Introduction.md

@@ -1,9 +0,0 @@
-Leveraging the [[Pubky Core/Introduction|Pubky Core]] protocol as the foundational layer, we can envision a diverse array of applications with distinct functionalities. While each app can implement its own unique design patterns and user interfaces, they all share a common underlying architecture: interacting with the distributed data stores, colloquially referred to as [[Homeservers|homeservers]], through standardized read and write operations.
-
-The [[Pubky Core/Introduction|Pubky Core protocol]] enables a decentralized approach to data management, facilitating seamless communication between clients and their respective data stores. This architecture promotes data sovereignty and enhances system resilience.
-
-Below, we present several high-level designs that showcase the versatility of this architecture, from simple client (browser) apps that interact directly with one or several [[Homeservers|homeservers]] to more complex applications with custom aggregators and backends capable of powerful inference:
-
-- [[2. Client - Homeserver|Client-Homeserver]]
-- [[4. Custom Backend|Custom backend]]
-- [[3. Global Aggregators|Global aggregators]]

TLDR.md

@@ -1,7 +1,7 @@
 ### Pubky App
 
-[[Pubky App/Introduction|Pubky App]] is an open-source web application that helps users publish and consume Pubky homeserver data within a user experience that merges the features of popular social media, search, and publishing apps.
+[[Explore/Pubky App/Introduction|Pubky App]] is an open-source web application that helps users publish and consume Pubky homeserver data within a user experience that merges the features of popular social media, search, and publishing apps.
 
 Architecture overview.
 
-![arch](pubky-arch.png)
+![arch](Explore/images/pubky-arch.png)

index.md

@@ -1,17 +1,17 @@
-# Welcome to the Pubky Knowledge Base
+## Welcome to the Pubky Knowledge Base
 
-This is a knowledge base for the Pubky platform, which includes [[Pubky Core/Introduction|Pubky Core]], [[Pubky Core/Pkarr/0.Introduction|PKARR]] and [[Pubky App/Introduction|Pubky App]]. These documents are a work in progress, much like Pubky's protocols and applications!
+This is a knowledge base for the Pubky platform, which includes [[Explore/Pubky Core/Introduction|Pubky Core]], [[0.Introduction|PKARR]] and [[Explore/Pubky App/Introduction|Pubky App]]. These documents are a work in progress, much like Pubky's protocols and applications!
 
-# What is Pubky?
+## What is Pubky?
 
 Pubky attempts to unlock the web by realizing our vision for a key-based, self-regulating web that puts users in control.
 
-So far, Pubky does this by combining practical decentralized routing & identity ([[Pubky Core/Pkarr/0.Introduction|PKARR]]), with simple interoperable hosting ([[Pubky Core/Homeservers|Homeservers]]) that allow for [[Concepts/Censorship|censorship]] resistance and a [[Concepts/Credible Exit|credible exit]], as well as a publishing application, Pubky App, that facilitates the creation of a [[Concepts/Semantic Social Graph|Semantic Social Graph]], which can be used for filtering, discovery, matching and coordination.
+So far, Pubky does this by combining practical decentralized routing & identity ([[0.Introduction|PKARR]]), with simple interoperable hosting ([[Homeservers|Homeservers]]) that allow for [[Censorship|censorship]] resistance and a [[Credible Exit|credible exit]], as well as a publishing application, Pubky App, that facilitates the creation of a [[Semantic Social Graph|Semantic Social Graph]], which can be used for filtering, discovery, matching and coordination.
 
 Learn more about the overall vision here: [[The vision of Pubky|The Vision of Pubky]]
 
 ## Get Started
 
-1. [[Pubky Core/Pkarr/0.Introduction|Getting Started with PKARR]] - If your main interest is using the most decentralized, key-based identity & routing method, start with PKARR.
+1. [[0.Introduction|Getting Started with PKARR]] - If your main interest is using the most decentralized, key-based identity & routing method, start with PKARR.
-2. [[Pubky Core/Introduction|Pubky Core - Introduction]] - If you want run your own Homeserver and apply PKARR, check out Pubky Core.
+2. [[Explore/Pubky Core/Introduction|Pubky Core - Introduction]] - If you want run your own Homeserver and apply PKARR, check out Pubky Core.
-3. [[Pubky App/Introduction|Pubky App - Introduction]] - If you want to dig into the application, indexer, etc, start here!
+3. [[Explore/Pubky App/Introduction|Pubky App - Introduction]] - If you want to dig into the application, indexer, etc, start here!

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.layout.ts

@@ -8,8 +8,8 @@ export const sharedPageComponents: SharedLayout = {
   footer: Component.Footer({
     links: {
       Synonym: "https://synonym.to",
-      GitHub: "https://github.com/pubky/pubky-docs",
+      GitHub: "https://github.com/pubky/pubky-knowledge-base",
-      "Discord Community": "https://discord.gg/TODO",
+      "Discord Community": "https://discord.com/invite/DxTBJXvJxn",
     },
   }),
 }
@@ -32,7 +32,7 @@ export const defaultContentPageLayout: PageLayout = {
   right: [
     Component.Graph(),
     Component.DesktopOnly(Component.TableOfContents()),
-    Component.Backlinks(),
+    //Component.Backlinks(),
   ],
 }
 

quartz/quartz/components/ArticleTitle.tsx

@@ -13,6 +13,7 @@ const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzCompone
 ArticleTitle.css = `
 .article-title {
   margin: 2rem 0 0 0;
+  font-size: 38px;
 }
 `
 

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/Explorer.tsx

@@ -84,30 +84,14 @@ export default ((userOpts?: Partial<Options>) => {
     constructFileTree(allFiles)
     return (
       <div class={classNames(displayClass, "explorer")}>
-        <button
+        <div
           type="button"
           id="explorer"
           data-behavior={opts.folderClickBehavior}
           data-collapsed={opts.folderDefaultState}
           data-savestate={opts.useSavedState}
           data-tree={jsonTree}
-        >
+          />
-          <h1>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h1>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="14"
-            viewBox="5 8 14 8"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="fold"
-          >
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </button>
         <div id="explorer-content">
           <ul class="overflow" id="explorer-ul">
             <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />

quartz/quartz/components/ExplorerNode.tsx

@@ -177,31 +177,46 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
     <>
       {node.file ? (
         // Single file node
-        <li key={node.file.slug}>
+        <>
-          <a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
+          {node.displayName === "Readme" && (
-            {node.displayName}
+            <div
-          </a>
+              style={{
-        </li>
+                border: "none",
+                borderTop: "0.1px solid white",
+                opacity: 0.2,
+                marginBottom: "20px",
+              }}
+            />
+          )}
+          <li key={node.file.slug}>
+            <a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
+              {node.displayName}
+            </a>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="5 8 14 8"
+              fill="none"
+              stroke="grey"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="folder-icon-fixed"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </li>
+        </>
       ) : (
         <li>
           {node.name !== "" && (
             // Node with entire folder
             // Render svg button + folder name, then children
-            <div class="folder-container">
+            <div
-              <svg
+              style={node.displayName === "Explore" ? { marginBottom: "10px" } : {}}
-                xmlns="http://www.w3.org/2000/svg"
+              class="folder-container"
-                width="12"
+            >
-                height="12"
-                viewBox="5 8 14 8"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="folder-icon"
-              >
-                <polyline points="6 9 12 15 18 9"></polyline>
-              </svg>
               {/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
               <div key={node.name} data-folderpath={folderPath}>
                 {folderBehavior === "link" ? (
@@ -218,10 +233,24 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
                   </button>
                 )}
               </div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="5 8 14 8"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="folder-icon"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
             </div>
           )}
           {/* Recursively render children of folder */}
-          <div class={`folder-outer ${node.depth === 0 || isDefaultOpen ? "open" : ""}`}>
+          <div class={`folder-outer ${node.depth <= 1 || isDefaultOpen ? "open" : ""}`}>
             <ul
               // Inline style for left folder paddings
               style={{

quartz/quartz/components/Footer.tsx

@@ -12,16 +12,78 @@ export default ((opts?: Options) => {
     const year = new Date().getFullYear()
     const links = opts?.links ?? []
     return (
-      <footer class={`${displayClass ?? ""}`}>
+      <>
-        <hr />
+        <footer class={`${displayClass ?? ""}`}>
-        <ul>
+          <div
-          {Object.entries(links).map(([text, link]) => (
+            style={{
-            <li>
+              border: "none",
-              <a href={link}>{text}</a>
+              borderTop: "0.1px solid white",
-            </li>
+              width: "100%",
-          ))}
+              marginTop: "100px",
-        </ul>
+              marginBottom: "35px",
-      </footer>
+              opacity: 0.7,
+            }}
+          />
+          <ul>
+            {Object.entries(links).map(([text, link]) => (
+              <li>
+                <a style={{ color: "white", fontWeight: 400, fontSize: "17px" }} href={link}>
+                  {text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </footer>
+        <div
+          style={{
+            backgroundImage: "url('static/bg.png')",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            pointerEvents: "none",
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: -1,
+          }}
+        />
+        <div
+          style={{
+            backgroundImage: "url('static/bg-2.png')",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            pointerEvents: "none",
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: -1,
+          }}
+        />
+        <div
+          style={{
+            backgroundImage: "url('static/bg-3.png')",
+            backgroundSize: "cover",
+            backgroundPosition: "left",
+            backgroundRepeat: "no-repeat",
+            position: "fixed",
+            pointerEvents: "none",
+            right: 0,
+            bottom: 0,
+            width: "100%",
+            height: "100%",
+            maxHeight: "20%",
+            maxWidth: "20%",
+            zIndex: 0,
+          }}
+        />
+      </>
     )
   }
 

quartz/quartz/components/Head.tsx

@@ -20,7 +20,7 @@ export default (() => {
 
     return (
       <head>
-        <title>{title}</title>
+        <title>{title} | Pubky Core</title>
         <meta charSet="utf-8" />
         {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
           <>

quartz/quartz/components/PageTitle.tsx

@@ -7,9 +7,22 @@ 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>
+      <a style={{ position: "absolute", top: "-100px" }} href="/">
-    </h1>
+        <img src="static/pubky-core-logo.svg" width={209} height={44} />
+      </a>
+      <h2 class={classNames(displayClass, "page-title")}>
+        <a href={baseDir}>
+          {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/TableOfContents.tsx

@@ -47,7 +47,16 @@ const TableOfContents: QuartzComponent = ({
         <ul class="overflow">
           {fileData.toc.map((tocEntry) => (
             <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
-              <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
+              <a
+                style={{
+                  fontSize: "17px",
+                  lineHeight: "22px",
+                  letterSpacing: "0.4px",
+                  fontWeight: 600,
+                }}
+                href={`#${tocEntry.slug}`}
+                data-for={tocEntry.slug}
+              >
                 {tocEntry.text}
               </a>
             </li>

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

@@ -1,6 +1,6 @@
-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
+const currentTheme = localStorage.getItem("theme") ?? "userPref"
-document.documentElement.setAttribute("saved-theme", currentTheme)
+document.documentElement.setAttribute("saved-theme", "dark") // , currentTheme) // disable light mode
 
 const emitThemeChangeEvent = (theme: "light" | "dark") => {
   const event: CustomEventMap["themechange"] = new CustomEvent("themechange", {

quartz/quartz/components/styles/contentMeta.scss

@@ -1,6 +1,8 @@
 .content-meta {
   margin-top: 0;
-  color: var(--gray);
+  color: var(--darkgray);
+  font-size: 15px;
+  margin-top: 5px;
 
   &[show-comma="true"] {
     > span:not(:last-child) {

quartz/quartz/components/styles/explorer.scss

@@ -47,7 +47,7 @@ button#explorer {
   overflow: hidden;
   max-height: none;
   transition: max-height 0.35s ease;
-  margin-top: 0.5rem;
+  margin-top: 0rem;
 
   &.collapsed > .overflow::after {
     opacity: 0;
@@ -57,13 +57,22 @@ button#explorer {
     list-style: none;
     margin: 0.08rem 0;
     padding: 0;
+    padding-left: 0px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    font-size: 17px;
+    line-height: 22px;
+    letter-spacing: 0.4px;
+    font-weight: 600;
     transition:
       max-height 0.35s ease,
       transform 0.35s ease,
       opacity 0.2s ease;
+
     & li > a {
       color: var(--dark);
-      opacity: 0.75;
+      opacity: 0.5;
       pointer-events: all;
     }
   }
@@ -111,23 +120,34 @@ svg {
     & span {
       font-size: 0.95rem;
       display: inline-block;
+      font-size: 17px;
+      line-height: 22px;
+      letter-spacing: 0.4px;
+      font-weight: 600;
       color: var(--secondary);
-      font-weight: $semiBoldWeight;
       margin: 0;
-      line-height: 1.5rem;
       pointer-events: none;
     }
   }
 }
 
 .folder-icon {
-  margin-right: 5px;
+  margin-left: 0.5rem;
   color: var(--secondary);
   cursor: pointer;
   transition: transform 0.3s ease;
   backface-visibility: visible;
 }
 
+.folder-icon-fixed {
+  margin-left: 0.5rem;
+  color: var(--secondary);
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  backface-visibility: visible;
+  transform: rotate(-90deg);
+}
+
 li:has(> .folder-outer:not(.open)) > .folder-container > svg {
   transform: rotate(-90deg);
 }

quartz/quartz/components/styles/footer.scss

@@ -1,15 +1,15 @@
 footer {
   text-align: left;
-  margin-bottom: 4rem;
+  margin-bottom: 1.5rem;
-  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/graph.scss

@@ -7,11 +7,11 @@
   }
 
   & > .graph-outer {
-    border-radius: 5px;
+    border-radius: 8px;
-    border: 1px solid var(--lightgray);
+    border: 1px solid var(--gray);
     box-sizing: border-box;
     height: 250px;
-    margin: 0.5em 0;
+    margin: 1em 0 0.5em 0;
     position: relative;
     overflow: hidden;
 

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);
@@ -66,7 +66,7 @@
       & > * {
         width: 100%;
         border-radius: 7px;
-        background: var(--light);
+        background: #1C1C1D;
         box-shadow:
           0 14px 50px rgba(27, 33, 48, 0.12),
           0 10px 30px rgba(27, 33, 48, 0.16);
@@ -75,7 +75,8 @@
 
       & > input {
         box-sizing: border-box;
-        padding: 0.5em 1em;
+        border-radius: 80px;
+        padding: 13px 24px;
         font-family: var(--bodyFont);
         color: var(--dark);
         font-size: 1.1em;

quartz/quartz/components/styles/toc.scss

@@ -38,8 +38,11 @@ button#toc {
 
   & ul {
     list-style: none;
-    margin: 0.5rem 0;
+    margin: 1rem 0;
     padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
     & > li > a {
       color: var(--dark);
       opacity: 0.35;
@@ -47,7 +50,7 @@ button#toc {
         0.5s ease opacity,
         0.3s ease color;
       &.in-view {
-        opacity: 0.75;
+        opacity: 0.5;
       }
     }
   }

quartz/quartz/static/pubky-core-logo.svg

@@ -0,0 +1,11 @@
+<svg width="210" height="44" viewBox="0 0 210 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M108.015 35.6497H115.073L108.119 26.1585L113.894 19.3914L120.678 35.3716L120.122 36.797C119.843 37.5387 119.507 38.1066 119.113 38.5006C118.719 38.9178 118.082 39.1264 117.201 39.1264C116.923 39.1264 116.61 39.0916 116.262 39.0221C115.938 38.9757 115.637 38.9062 115.358 38.8135L114.733 43.6112C115.15 43.7271 115.637 43.8198 116.193 43.8893C116.772 43.9589 117.329 43.9936 117.862 43.9936C118.951 43.9936 119.89 43.8662 120.678 43.6112C121.489 43.3563 122.184 42.9738 122.764 42.4639C123.367 41.9772 123.876 41.3746 124.294 40.6561C124.734 39.9608 125.128 39.1611 125.476 38.2572L133.229 18.3362H127.179L123.737 29.4614H123.633L119.774 18.3362H114.795L114.795 18.3361H107.876L102.348 25.3589H102.244V9.36644H96.5071V35.6497H102.244V27.3406H102.348L108.015 35.6497Z" fill="white"/>
+<path d="M94.6483 26.9234C94.6483 28.1286 94.4629 29.2875 94.0921 30.4C93.7212 31.5125 93.1765 32.4976 92.458 33.3551C91.7626 34.1895 90.905 34.8617 89.8852 35.3716C88.8653 35.8815 87.7064 36.1364 86.4084 36.1364C85.2495 36.1364 84.1486 35.9047 83.1055 35.4411C82.0857 34.9544 81.2976 34.2706 80.7414 33.3899H80.6718V35.6497H75.4219V9.36644H81.1238V20.1787H81.1933C81.6801 19.5993 82.3638 19.0662 83.2446 18.5795C84.1254 18.0928 85.2032 17.8494 86.478 17.8494C87.7296 17.8494 88.8538 18.0928 89.8504 18.5795C90.8703 19.0662 91.7279 19.7268 92.4232 20.5612C93.1417 21.3956 93.6864 22.369 94.0573 23.4815C94.4513 24.5709 94.6483 25.7182 94.6483 26.9234ZM89.1551 26.9234C89.1551 26.3671 89.0624 25.8225 88.8769 25.2894C88.7147 24.7563 88.4597 24.2927 88.1121 23.8987C87.7644 23.4815 87.3356 23.1455 86.8257 22.8905C86.3157 22.6356 85.7247 22.5081 85.0525 22.5081C84.4035 22.5081 83.8241 22.6356 83.3141 22.8905C82.8042 23.1455 82.3638 23.4815 81.993 23.8987C81.6453 24.3159 81.3672 24.7911 81.1586 25.3241C80.9731 25.8572 80.8804 26.4019 80.8804 26.9581C80.8804 27.5144 80.9731 28.0591 81.1586 28.5922C81.3672 29.1252 81.6453 29.6004 81.993 30.0176C82.3638 30.4348 82.8042 30.7708 83.3141 31.0258C83.8241 31.2808 84.4035 31.4082 85.0525 31.4082C85.7247 31.4082 86.3157 31.2808 86.8257 31.0258C87.3356 30.7708 87.7644 30.4348 88.1121 30.0176C88.4597 29.6004 88.7147 29.1252 88.8769 28.5922C89.0624 28.0359 89.1551 27.4796 89.1551 26.9234Z" fill="white"/>
+<path d="M67.1979 35.6498V33.2509H67.1284C66.9198 33.6449 66.6417 34.0157 66.294 34.3634C65.9695 34.7111 65.5755 35.0124 65.1119 35.2673C64.6715 35.5223 64.1732 35.7309 63.6169 35.8931C63.0838 36.0554 62.5159 36.1365 61.9133 36.1365C60.7544 36.1365 59.7693 35.9279 58.9581 35.5107C58.17 35.0935 57.521 34.5604 57.0111 33.9114C56.5243 33.2393 56.1651 32.486 55.9333 31.6516C55.7247 30.7941 55.6204 29.9249 55.6204 29.0442V18.3362H61.357V27.7231C61.357 28.2098 61.3918 28.6733 61.4613 29.1137C61.5309 29.5541 61.6583 29.9481 61.8438 30.2958C62.0524 30.6434 62.3189 30.9216 62.6434 31.1302C62.9679 31.3156 63.3967 31.4083 63.9298 31.4083C64.9265 31.4083 65.6798 31.0374 66.1897 30.2958C66.7228 29.5541 66.9893 28.6849 66.9893 27.6883V18.3362H72.6912V35.6498H67.1979Z" fill="white"/>
+<path d="M54.7409 18.6143C54.7409 20.0513 54.4744 21.2681 53.9413 22.2647C53.4082 23.2382 52.6896 24.0262 51.7857 24.6288C50.8817 25.2314 49.8387 25.6718 48.6566 25.9499C47.4745 26.2281 46.2461 26.3671 44.9713 26.3671H42.016V35.6497H36.0708V11.0352H45.1103C46.4547 11.0352 47.7063 11.1743 48.8652 11.4524C50.0473 11.7074 51.0672 12.1361 51.9248 12.7388C52.8055 13.3182 53.4893 14.0946 53.976 15.0681C54.4859 16.0184 54.7409 17.2004 54.7409 18.6143ZM48.7957 18.649C48.7957 18.0696 48.6798 17.5944 48.448 17.2236C48.2162 16.8528 47.9033 16.563 47.5093 16.3545C47.1153 16.1459 46.6633 16.0068 46.1534 15.9373C45.6666 15.8677 45.1567 15.833 44.6236 15.833H42.016V21.6389H44.5193C45.0756 21.6389 45.6087 21.5926 46.1186 21.4999C46.6285 21.4071 47.0805 21.2449 47.4745 21.0131C47.8917 20.7814 48.2162 20.48 48.448 20.1092C48.6798 19.7152 48.7957 19.2285 48.7957 18.649Z" fill="white"/>
+<path d="M206.722 26.2686C206.652 24.7396 206.154 23.477 205.227 22.4809C204.324 21.4615 203.026 20.9519 201.335 20.9519C200.547 20.9519 199.818 21.1025 199.146 21.4036C198.474 21.6816 197.883 22.0755 197.373 22.5851C196.864 23.0716 196.458 23.6392 196.157 24.2879C195.856 24.9134 195.682 25.5736 195.636 26.2686H206.722ZM209.119 27.0331C209.119 27.1953 209.119 27.369 209.119 27.5544C209.119 27.7397 209.108 27.9366 209.085 28.1451H195.601C195.624 28.956 195.786 29.7205 196.088 30.4386C196.389 31.1568 196.806 31.7823 197.339 32.3151C197.872 32.848 198.497 33.2765 199.215 33.6009C199.933 33.902 200.71 34.0526 201.544 34.0526C202.771 34.0526 203.826 33.7746 204.706 33.2186C205.609 32.6395 206.293 31.9792 206.756 31.2379L208.529 32.6279C207.556 33.8557 206.478 34.736 205.297 35.2689C204.138 35.8017 202.887 36.0681 201.544 36.0681C200.339 36.0681 199.215 35.8596 198.173 35.4426C197.153 35.0025 196.273 34.4001 195.532 33.6356C194.79 32.8711 194.199 31.9676 193.759 30.9251C193.342 29.8826 193.134 28.7475 193.134 27.5196C193.134 26.2918 193.342 25.1566 193.759 24.1141C194.176 23.0716 194.756 22.1681 195.497 21.4036C196.238 20.6391 197.107 20.0484 198.103 19.6314C199.099 19.1912 200.177 18.9711 201.335 18.9711C202.609 18.9711 203.733 19.1912 204.706 19.6314C205.679 20.0484 206.49 20.6275 207.139 21.3689C207.787 22.087 208.274 22.9326 208.598 23.9056C208.946 24.8786 209.119 25.9211 209.119 27.0331Z" fill="white"/>
+<path d="M183.794 22.9674C183.794 22.5272 183.782 21.9596 183.759 21.2646C183.736 20.5696 183.701 19.9441 183.655 19.3881H185.914C185.96 19.8283 185.995 20.3148 186.018 20.8476C186.041 21.3805 186.053 21.8206 186.053 22.1681H186.122C186.586 21.2183 187.281 20.4538 188.207 19.8746C189.134 19.2723 190.177 18.9711 191.335 18.9711C191.636 18.9711 191.903 18.9827 192.134 19.0059C192.389 19.029 192.644 19.0754 192.899 19.1449L192.586 21.3689C192.447 21.3225 192.215 21.2762 191.891 21.2299C191.567 21.1835 191.242 21.1604 190.918 21.1604C190.292 21.1604 189.69 21.2762 189.111 21.5079C188.532 21.7395 188.022 22.1102 187.582 22.6199C187.165 23.1064 186.817 23.7435 186.539 24.5311C186.284 25.2956 186.157 26.2223 186.157 27.3111V35.6511H183.794V22.9674Z" fill="white"/>
+<path d="M180.099 27.5196C180.099 28.7475 179.879 29.8826 179.438 30.9251C179.021 31.9676 178.431 32.8711 177.666 33.6356C176.902 34.4001 175.986 35.0025 174.921 35.4426C173.855 35.8596 172.685 36.0681 171.411 36.0681C170.16 36.0681 169.001 35.8596 167.936 35.4426C166.87 35.0025 165.955 34.4001 165.19 33.6356C164.426 32.8711 163.824 31.9676 163.383 30.9251C162.966 29.8826 162.758 28.7475 162.758 27.5196C162.758 26.2918 162.966 25.1566 163.383 24.1141C163.824 23.0716 164.426 22.1681 165.19 21.4036C165.955 20.6391 166.87 20.0484 167.936 19.6314C169.001 19.1912 170.16 18.9711 171.411 18.9711C172.685 18.9711 173.855 19.1912 174.921 19.6314C175.986 20.0484 176.902 20.6391 177.666 21.4036C178.431 22.1681 179.021 23.0716 179.438 24.1141C179.879 25.1566 180.099 26.2918 180.099 27.5196ZM177.597 27.5196C177.597 26.6161 177.446 25.7705 177.145 24.9829C176.867 24.172 176.461 23.477 175.929 22.8979C175.396 22.2955 174.747 21.8206 173.982 21.4731C173.218 21.1256 172.361 20.9519 171.411 20.9519C170.461 20.9519 169.604 21.1256 168.839 21.4731C168.098 21.8206 167.461 22.2955 166.928 22.8979C166.395 23.477 165.978 24.172 165.677 24.9829C165.399 25.7705 165.26 26.6161 165.26 27.5196C165.26 28.4231 165.399 29.2803 165.677 30.0911C165.978 30.8788 166.395 31.5738 166.928 32.1761C167.461 32.7553 168.098 33.2186 168.839 33.5661C169.604 33.8905 170.461 34.0526 171.411 34.0526C172.361 34.0526 173.218 33.8905 173.982 33.5661C174.747 33.2186 175.396 32.7553 175.929 32.1761C176.461 31.5738 176.867 30.8788 177.145 30.0911C177.446 29.2803 177.597 28.4231 177.597 27.5196Z" fill="white"/>
+<path d="M161.576 31.6896C161.159 32.3151 160.649 32.9059 160.047 33.4619C159.468 34.0179 158.784 34.5044 157.996 34.9214C157.232 35.3384 156.375 35.6627 155.425 35.8944C154.498 36.1492 153.479 36.2766 152.367 36.2766C150.513 36.2766 148.799 35.9523 147.224 35.3036C145.648 34.655 144.293 33.7631 143.158 32.6279C142.022 31.4696 141.131 30.1027 140.482 28.5274C139.856 26.9521 139.544 25.2261 139.544 23.3496C139.544 21.4731 139.868 19.7472 140.517 18.1719C141.165 16.5966 142.057 15.2413 143.192 14.1061C144.351 12.9478 145.706 12.0443 147.258 11.3956C148.834 10.747 150.537 10.4226 152.367 10.4226C153.27 10.4226 154.151 10.5153 155.008 10.7006C155.888 10.886 156.711 11.1524 157.475 11.4999C158.24 11.8242 158.935 12.2296 159.56 12.7161C160.186 13.1795 160.707 13.7123 161.124 14.3146L159.039 15.8436C158.784 15.4498 158.437 15.056 157.996 14.6621C157.579 14.2683 157.081 13.9208 156.502 13.6196C155.923 13.3185 155.286 13.0752 154.591 12.8899C153.919 12.7046 153.189 12.6119 152.402 12.6119C150.803 12.6119 149.367 12.9015 148.092 13.4806C146.841 14.0598 145.776 14.8475 144.895 15.8436C144.015 16.8166 143.343 17.9518 142.88 19.2491C142.416 20.5465 142.185 21.9133 142.185 23.3496C142.185 24.786 142.416 26.1528 142.88 27.4501C143.366 28.7475 144.05 29.8942 144.93 30.8904C145.81 31.8634 146.876 32.6395 148.127 33.2186C149.401 33.7978 150.826 34.0874 152.402 34.0874C153.815 34.0874 155.158 33.7978 156.433 33.2186C157.707 32.6395 158.773 31.7128 159.63 30.4386L161.576 31.6896Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6722 0L8.85081 3.6968L5.21733 1.40989L4.21715 5.26089L0 4.37575L3.8359 10.6371C5.92708 8.80215 8.66823 7.68955 11.6686 7.68865V7.68871H11.6759V7.68865C14.6763 7.68956 17.4174 8.80217 19.5086 10.6372L23.3445 4.37575L19.1273 5.26089L18.1271 1.40989L14.4937 3.6968L11.6759 0.00484788V0.00479665L11.6752 0.0038624L11.6722 0ZM11.6722 10.6298C6.73449 10.6298 2.73141 14.6297 2.73141 19.564C2.73141 21.6993 3.48179 23.6576 4.72872 25.1919L1.30829 35.6441H22.0362L18.6157 25.1919C19.8627 23.6576 20.6131 21.6993 20.6131 19.564C20.6131 14.6297 16.61 10.6298 11.6722 10.6298ZM16.4022 19.5641C16.4022 16.954 14.2847 14.8379 11.6723 14.8379H11.6722C9.05981 14.8379 6.94229 16.954 6.94229 19.5641C6.94229 21.373 7.95926 22.9449 9.45414 23.7395L9.60766 23.8211L7.11567 31.4362H16.2288L13.7368 23.8211L13.8903 23.7395C15.3852 22.9449 16.4022 21.373 16.4022 19.5641Z" fill="white"/>
+</svg>

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: 22px !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;
@@ -96,6 +101,10 @@ a {
   }
 }
 
+#nightIcon {
+  display: none;
+}
+
 .desktop-only {
   display: initial;
   @media all and (max-width: $fullPageWidth) {
@@ -302,7 +311,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.4rem;
+  font-size: 1.5rem;
   margin-top: 1.9rem;
   margin-bottom: 1rem;
 }
@@ -504,7 +513,7 @@ ol.overflow {
     bottom: 0;
     opacity: 1;
     transition: opacity 0.3s ease;
-    background: linear-gradient(transparent 0px, var(--light));
+    background: linear-gradient(transparent 0px, var(--highlight));
   }
 }