Skip to content

Instantly share code, notes, and snippets.

@writeblankspace

writeblankspace/README.md

Created September 2, 2024 17:14
Show Gist options
  • Save writeblankspace/8518715cb8381566b45a3c673e3c972e to your computer and use it in GitHub Desktop.
Save writeblankspace/8518715cb8381566b45a3c673e3c972e to your computer and use it in GitHub Desktop.
Download ZIP
Obsidian single-line and multi-line flashcard styling
Raw
README.md

This was made specifically for this Obsidian plugin. I will assume you know how to add custom CSS snippets.

The code here is not maintained. I am too lazy.

Usage

The following styles render the content as flashcard content when in Reading Mode. The styling will be similar to a callout's.

Content touches the hashtag:

outside flashcard

#flashcards 
flashcard content here
lorem ipsum dolor sit amet

outside flashcard

image

Content is in a blockquote directly containing the hashtag

outside flashcard

> #flashcards
> 
> content here
>
> lorem ipsum dolor sit amet

outside flashcard

image

Raw
flashcards.css
/* style hashtag */
.tag[href^="#flashcards"] {
font-size: var(--callout-title-size);
font-weight: var(--callout-title-weight);
padding: var(--callout-title-padding);
background: none;
&:hover {
background: none;
}
/* add space between hastag and content */
& + br {
content: "";
display: block;
margin-bottom: var(--size-4-4);
}
/* container
* style as container unless:
* 1. it does not have content directly after it, or
* 2. it has content directly before it
* 3. it is inside a blockquote and passes the first two points */
*:has(>&),
blockquote:has(>*>&) {
border-radius: var(--callout-radius);
padding: var(--callout-padding);
padding-bottom: var(--size-4-6) !important;
background: var(--color-base-20);
border: none;
}
/* see container notes - 1 */
*:has(>&):not(:has(br)) {
padding: unset !important;
background: unset;
}
/* see container notes - 2 */
*:has(> br + &), /* - 3 */
blockquote>*:not(blockquote):has(>&) {
padding: unset !important;
background: unset;
}
*:has(> br + &) & + br {
content: unset;
display: unset;
margin-bottom: unset;
}
}
@writeblankspace
Copy link
Author

I did this because.... uh.... in my defense, I had finished all my homework.

also, it looked kinda ugly when I made flashcards within a file so I wanna make it ✨️pretty 🎀✨️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment