flashcard

[MayaGans]

First of all thanks for giving a home to my little orphan idea!
This is still a mess but the basic idea worked when I made a little markdown with the chunk:

library(xaringanExtra)
library(htmltools)
xaringanExtra::flashcard(span(style="color:red;", h1("FRONT")), span(style="color:red;", h1("BACK")))

Changelog

• R/flashcard.R creates our little flashcard
• inst/flashcard/flashcard.css does the flipping. This really needs be cleaned up though because I was thinking I'd like to use var(--header-color) or other dynamic variables from xaringanThemer. Curious how you'd css this one.....

Some more thoughts Im not sure how to operationalize....

Somehow if the user makes more than one card we should put it inside a flexbox container so the cards become a grid cuz right now I assume they'll just be vertically aligned?

Happy to change whatever you think necessary to make this more generic

[gadenbuie]

I'd like to use var(--header-color) or other dynamic variables

This is a great idea and will work really well! I love making the design customizable via CSS variables. The way that I typically approach this is two fold:

1. Set the default values of all of the CSS variables on the :root element in flashcards.css. This makes that CSS file portable, and by setting the values on the :root element, it's easier to override the defaults with a more specific selector. Alternatively, you can use var(--header-foreground, red) syntax to provide a fallback value if the variable isn't found.
2. Then provide a style_flashcards() function with R-styled arguments that writes a chunk of CSS to set these variables for a selector. For an example, see style_search().

style_search(
  search_input_foreground = "black",
  search_match_background = "rgb(38, 220, 249)"
)

<style>
.search {
  --search-icon-fill: rgba(128, 128, 128, 0.5);
  --search-input-background: rgb(204, 204, 204);
  --search-input-foreground: black;
  --search-input-border: 1px solid rgb(249, 38, 114);
  --search-match-background: rgb(38, 220, 249);
  --search-match-foreground: black;
  --search-match-current-background: rgb(38, 249, 68);
  --search-match-current-foreground: black;
}</style>

One place that I'm kind of picky: when referencing the color property, I prefer -foreground, which makes it okay to use -background for the background-color property. I've found that it's easy to get confused about which of text or background color a variable references when it's called something-color. (Hence --header-foreground instead of --header-color.) Otherwise, it's best to have the variable name match the CSS property name as much as reasonable.