quartz customization log ꕤ florilegium

march 8, 2025

recently modified

added the “recently modified” section to the index. thank you to eilleen for demystifying it and writing helpful documentation…

note to self: you don’t have to put anything besides the first line () because the obsidian plugin for data serializer will generate the rest of it for ya.

<!-- QueryToSerialize: TABLE WITHOUT ID file.link as "page", file.mday as "last modified" FROM -"tags" SORT file.mtime DESC WHERE file.name != this.file.name AND file.name != "meta" AND draft != true LIMIT 8 -->
<!-- SerializedQuery: TABLE WITHOUT ID file.link as "page", file.mday as "last modified" FROM -"tags" SORT file.mtime DESC WHERE file.name != this.file.name AND file.name != "meta" AND draft != true LIMIT 8 -->
 
| page                                                                                  | last modified |
| ------------------------------------------------------------------------------------- | ------------- |
| [[archive/all files chronologically modified.md\|all files chronologically modified]] | Mar 20, 2026  |
| [[archive/vscode stuff.md\|vscode stuff]]                                             | Mar 20, 2026  |
| [[archive/zines & comics i've made.md\|zines & comics i've made]]                     | Mar 20, 2026  |
| [[archive/yuridetta whole world comic script.md\|yuridetta whole world comic script]] | Mar 20, 2026  |
| [[archive/yume zodiac signs.md\|yume zodiac signs]]                                   | Mar 20, 2026  |
| [[archive/yuridetta shrine.md\|yuridetta shrine]]                                     | Mar 20, 2026  |
| [[archive/yume enneagrams.md\|yume enneagrams]]                                       | Mar 20, 2026  |
| [[archive/wishlist.md\|wishlist]]                                                     | Mar 20, 2026  |
<!-- SerializedQuery END -->

smaller tags on page list views

listPage.scss

.page-listing .tag-link {
	font-size: 0.7rem; // SMALLER!!!!!
}
 
.page-listing .section .tags {
	display: none; // hides tags in page list views
}
 
.page-listing .section:hover .tags {
	display: initial; // shows the tags when a row (date/title) is hovered over
	height: 1.6rem; // this is a clumsy attempt to show just the first line of tags lol. the line height of tags is 1.4rem.
	overflow: hidden; // hides all other tags
}

link hover color

i want it to be completely different, damn it!

base.scss

a {
	...
	
	&:hover {
	color: #7fa6ca !important; 
}

march 17

metadata date edits

added created/modified dates

i followed eilleen’s documentation.

Date.tsx, at the very end

export function _getDateCustom(cfg: GlobalConfiguration, data: QuartzPluginData, dateType: 'modified' | 'created'): Date | undefined {
  // Check if the dateType provided is valid
  if (dateType !== 'modified' && dateType !== 'created') {
    throw new Error(`Invalid date type '${dateType}'. Valid options are 'modified' or 'created'.`)
  }
  
  // Return the respective date based on the given dateType
  return data.dates?.[dateType]
}

ContentMeta.tsx, at the top

import { Date, getDate, _getDateCustom } from "./Date" //added _getDatecustom to the list of guys

still ContentMeta.tsx, replacing what used to be there

if (fileData.dates && fileData.slug !== "index") {
	segments.push(<>
	   ✽ created <Date date={_getDateCustom(cfg, fileData, 'created')!} locale={cfg.locale} />
	</>)
 
	// Only show the modified date if it's NOT equal to the created date
	// Extract the actual date values for comparison
	const datecreatedValue = _getDateCustom(cfg, fileData, 'created');
	const datemodifiedValue = _getDateCustom(cfg, fileData,'modified');
	// Compare the actual date values (ignoring the JSX components)
	const areDatesNotEqual = datecreatedValue?.getTime() !== datemodifiedValue?.getTime();
	if (areDatesNotEqual) {
	  segments.push(<>
		✎ modified <Date date={_getDateCustom(cfg, fileData,'modified')!} locale={cfg.locale} />
		</>
		)
	}

the thing it replaced

if (fileData.dates) {segments.push(<Date date={getDate(cfg, fileData)!} locale={cfg.locale} />)

changed comma to a dot

contentMeta.scss

&[show-slash="true"] {
> *:not(:last-child) {
  &::after {
	content: "・";
	color: var(--darkgray);
  }
}
}

ContentMeta.ts

after showComma: boolean: add showSlash: boolean
after showComma: false,: add showSlash: true,
then look for <p show-comma and replace that bit with this:

<p show-slash={options.showSlash} class={classNames(displayClass, "content-meta")}> 
  {segments}
</p>

i just replaced show-comma and showComma with show-slash and showSlash because i was scared and did not know if duplicating it would kill me.

made the date color stand out :)

custom.scss

// makes dates in post metadata a brighter color
.content-meta {
  > time {
    color: var(--custombright);
    font-weight: 550;
    text-transform: lowercase;
  }
}

popover.scss

for reasons i do not care to know, the edits i made to the tags on page list views did not apply here so lol.

.popover .page-listing .section .tags {
  display: none;
}

tinier things

i added a --custombright color to both the light and dark mode in theme.ts. i also added a --customblue color to only the light mode, since it looks good on both light and dark.
- i changed the a color in base.scss to --customblue from the hashtag it was on march 8.
changed the page title deco from a sparkle to a flower in quartz.config.ts.
added some fancy bullshit to the pre, code, and checkbox-related css in base.scss.
- code now has a little box shadow and hover animation.
- checkboxes are blue when checked and just a slightly lighter body color when not.
added custom css for the color of <em> text in custom.scss.
made tags align right on page list views.
added a tag for folders within the larger folder: 📂folder (big surprise).

march 19

just a bunch of cosmetic stuff i usually have on my main site – smaller image widths, spacing for list items, etc.

march 23

added obsidian linter and turned on the YAML timestamp function so i could get accurate dates created/modified.
changed default sort for notes on list pages (folders, tags) to be date created. might change this again in the future!
added password protection following eilleen’s tutorial.

march 24

added some code to remove the “evil notes” folder from the explore sidebar. it still shows up in search and on tag pages, but i don’t need it to Not!
locked notes’ titles and tags are visible, but not content.
password protection does not “remember” you. i don’t now if this will frustrate me in future…

june 18

been a while! i edited .staticrypt-html and .staticrypt-body in the file password.ts to be height:100vh instead of height:100%, so that the pink bg would go all the way down (instead of just until the bottom of the pw prompt box).

march 19, 2026

edited links.ts and switched externalLinkIcon to false, so credits on the snippets pages (such as on parenting) would not have the little lucide icon. instead, i gave it css in base.scss.
made the body narrower on desktop.
- in variables.scss:
  - templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}" → “auto” became “700px”
- in base.scss:
```
& > #quartz-body {
display: grid;
justify-content: center; /* added this */
...}
```

march 20

made the backlinks smaller &>ul {font-size: 90%;}
changed quartz.layout.ts so:
- the explorer (with the folders) doesn’t show up in a regular note’s page on the sidebar
  - it still shows up if you click on the folder, but that’s whatever.
- table of contents goes on the left sidebar
- right side has the graph AND backlinks
tags are smaller and at the bottom, with a different color (in taglist.tsx)
swapped the design of internal and external links on base.scss because i prefer the text-decoration for the links that show up more often (so, internal)

march 25

tried to comment out the component.explorer on pages with lists of files, so no one would have to see my folders…
- …
- also applies to me trying to get rid of the fuckass colon in every tag page. 🏷️: topic/webdev → 🏷️: topic/webdev ideally, but i’m too tired to try and do anything about it…

🌷 florilegium

table of contents

quartz customization log

march 8, 2025

recently modified

smaller tags on page list views

link hover color

march 17

metadata date edits

added created/modified dates

changed comma to a dot

made the date color stand out :)

hid tags in popover for folders

tinier things

march 19

march 23

march 24

june 18

march 19, 2026

march 20

march 25

see also

graph view

backlinks