Graph View

Search

SearchSearch

Pink Quanta Theme

This is a Quartz installation, which I am currently styling like my local Obsidian.
This Stylesheet is used to explore css-stylings for different markdown features, while also demonstrating ideas for people in search of inspiration on how to customizing their own secondBrain.
This page also serves as my project-notes for further theme developement.

I am not quite happy with it yet to be honest. The design is still all over the place. I am publishing it tho, in hopes others might have useful input for me as well.

I’d love to hear from you. Feel free to contact me, if you got any feedback or just wanna have a nerdy conversation about design psychology / philosophy.

THE PINK QUANTA COLOR SYSTEM

This theme is designed to be used primarily in darkmode, to fully emerse with the content. (Use the “sunny” icon near the search function)

The styling of my System/theme follows one simple rule: Blue is used for Links and references (WHERE & WHAT), PINK is the indicator(HOW/WHY).

How do we know something is important? Through contrast.
Our brain is programmed to focus on stimuli that stand out.

Block-Quotes
Its important to me, that external sources / quotes are well recognized as such. Therefore the sorta-APA-styling.

– Author title

The goal of the Pink Quanta design is to empazise central information easily, so that the reader can grasp the content fast and is able to decide, if a long text is interesting to him and decide if it is worth his time.

Also the pages consist of many QUANTA (chunks), therefore a clean but also distinguishable layout is important to me.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.


LIST of issues

  • Convert my Obsidian-CSS to SCSS for quartz
    • Heading stylings
    • Colors
  • I exchanged the SiteTitle with a typelogo for now, till I fix both issues
    • Change the styling of the siteTitle ⇒ PINKQUANTA
      • its the same color as my links atm since it is wrapped in <a>.
    • Add a SiteLogo, which is only displayed on Desktop (left sidebar) but is hidden on mobile
      • Component.DesktopOnly(Component.SiteLogo()), is not working properly, also displayes it on mobile
  • Weird behaviour on desktop (both on my 14” mac and 24” screen, all browsers): when the page is displayed at 100% the “mobile version” is shown, with a Header & Footer and no sidebars. Only if I zoom out to 90%, both sidebars get visible. I want to have this as a default, that desktop always gets a desktop view.
  • Change how embeds are displayed
    • can not add a left border- maybe my blockquote styling broke something (border right & top/bottom work when added in custom.scss)

Darkmode issues

  • Different body-font-weights for light/DarkMode, atm its too thin in lightmode
  • Different siteLogo for light/DarkMode
  • Make the darkmode the default option for new users visiting the page
Different css variables in Darkmode

Havent managed to create variables besides colors that work in custom.css yet. I tried to setup a variable fontweight in /quartz/util/theme.ts and used different values in Light/Dark theme quartz.config. Did notwork.

SiteLogo: Different versions for light/darkmode

To versions of a siteLogo, one for light, one for darkmode. Change the siteLogo when themechange event occours.

You can also listen to the themechange event to perform any custom logic when the theme changes.

Thats written in the Quartz Documentation , yet I dont know how to approach this

document.addEventListener("themechange", (e) => {
  console.log("Theme changed to " + e.detail.theme) // either "light" or "dark"
  // your logic here
})
making Darkmode default

Changed prefers-color-scheme to dark. doesnt seams to fix anything

const userPref = window.matchMedia("(prefers-color-scheme: dark)").matches ? "light" : "dark"
Different callout-colors for Dark/light

This callout is also not quite right

I have no clue how to fit it, the text within the <p> in the callout .callout[data-callout=note] has the same color as the tile

Advanced Things to solve for later

  • Create MOC-Layout w/ short summaries of the pages, sort/query via metadata
    • I really love how David Buchan solved this one in his Quantum Garden
    • still need a good method to distinguish articles in English & German

HOW I Structure my notes

At the start of a note I often describe the purpose, overview & status quo of the note / topic, as well as some todos

  • general info
    • Mostly just some sorted lists
      • Sublists are great to build a quick structure!
  • Quicklinks
    • people
    • related Projects

Todos

  • #to Hashtag Example Task 📅 2024-04-11 ✅ 2024-04-10
    • Another sub-todo
  • Unchecked Task

I also use Dataview to display a table of contents if the note happens to be a MOC.

How I use headings and style my notes

H1: Separates MAIN Topics within a large Note

Heading 2: Is used as my “H1”

Heading 3: is bold & pink

Heading 4: is italic & pink

Heading 5: USED FOR DEFINITIONS or single atomic pieces of text within a large paper (will be same color as a Link to an atomic-note when embedded)
Heading 6: is monospace (and not used very often. it is yellow atm, but that gives it a little too much meaning)

Demo content for styling tests

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.

Block-Quotes
Lorem Ipsum was created, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.
– Author title

There are two ways to create footnotes in Obsidian.1
You can add a [^1] and on the buttom a [^1]:.

Inline footnote ^[Inline footnotes will be displayed inline within text in the Editor, but renedered on the bottom of the page in Preview]. They seem to be working, too.

Their syntax is: ^[Inline footnotes].

Different styled items

Lists <li>

Ordered Lists <ol>

  1. First item
    1. Subitem
      1. subsubitem
  2. Second item

I havent managed to change the list behavior to my obsidian css, which uses alpabetical and roman lists for the subcathegories

Unordered bullet lists <Ul>

  • First item
    • Subitem
      • subsubitem
  • Second item

Same with the unordered bullet lists

Code

My code is custom highlighted. I dont use it that much tho - sublime text is my best friend.

I am not a coder, just an interested learner.
When I was in university I made my money though building websites.
Therefore I have an rudimentory idea of HTML & CSS.

(I once tried to understand QuantumProgramming, but I realized this might be a little bit too much. I rather stay with the theoretical part, for now.)

 
from qiskit import QuantumCircuit
qc = QuantumCircuit(3, 3)
# measure qubits 0, 1 & 2 to classical bits 0, 1 & 2 respectively
qc.measure([0,1,2], [0,1,2])
qc.draw()

Footnotes

  1. There are two ways how footnotes can be added in obsidian. I am curious if both are compatible with quartz ↩

Backlinks