Improve WYSIWYG between Obsidian & Quartz

[MasssiveJuice08]

TL;DR:

This is a broad category. TL;DR is that there are numerous small differences between what you see in the Morrowind Modding Wiki in Obsidian and what you get in Quartz.

About:

The aim of this issue is to outline and track ideas for aligning the appearance of MMW's Obsidian Vault and its Quartz website so that when editing and creating content for the wiki in Obsidian, users can rest assured that it will look the same in Quartz as it did in Obsidian – WYSIWYG.

What differences?

I'm glad you asked! There are numerous small differences:

Callouts

• Callouts in Obsidian are styled differently from Quartz (minor differences in color and border)
• Quartz Callouts do not use Obsidian's .callout-content class. Callout content is not placed in its own <div> – see issue #1180 in the Quartz github.

Layout:

• MMW's Quartz pagewidth is set to be wider than Obsidian's 'readable line length'.

  • This makes testing layouts inconsistent between Obsidian and Quartz.

Links:

• Hyperlinks and wikilinks differ in appearance between Obsidian's default theme and Quartz.

  • Wikilinks: in Obsidian they're colored purple and underlined; in Quartz they are blue and highlighted with gray.
  • External links: In Obsidian they're colored purple; in Quartz they're colored blue. Both use the same symbol.

• Embedded files (using the ![[...]] wikilink syntax) are rendered differently. Per issue #40 we should create a custom style for embedded download links

  • Obsidian displays embedded files which it cannot render, such as a zip file (unlike images or videos which it does render), with a 'note' symbol and displays the filename, whereas Quartz just renders it as a blockquote (and displays the file name).

Navigation:

Differences between Obsidian index.md files and Quartz Folder Pages:

• Quartz has folder click behaviour set to link in quartz.layout.ts, so clicking a folder opens its associated index.md which is hidden from the file-tree. In Obsidian, index files are not hidden and folder click behaviour is 'collapse'
• After content, Quartz folder pages render an alphabetical list of pages contained within the folder, along with each page's description and tags. The relevant index.md files in Obsidian do not render this contents list.

Tables:

• Tables in Quartz, though stylish, are very different from Obsidian's default theme.

  • Per issue #39 Quartz tables squish content on mobile and do not overflow to a scrollbar where appropriate.

---

Solution:

Aligning the style of Quartz and our Obsidian Vault needs to consider what visual theme we ultimately want to design for the wiki. As an example, we could create a custom theme for our Quartz site inspired by Kezyma's UI Remastered.

To align the appearance and UI of any custom MMW Quartz theme with our Obsidian Vault, we might consider developing an Obsidian Community Theme for use by MMW and available to the public. This may be possible with CSS snippets (or one big snippet) alone, but a community theme may be more suitable for such an extensive overhaul of the Obsidian UI and content styles. For copyright purposes, the community theme could be called something like 'Outlander' instead of containing direct reference to Morrowind and TES.