embedding background in custom theme scss to avoid quarto bug

pharmaR · Jun 6, 2024 · 292882f · 292882f
1 parent a8358b7
commit 292882f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/_extensions/pharmaR/rvalhub/_extension.yml b/_extensions/pharmaR/rvalhub/_extension.yml
@@ -6,11 +6,10 @@ contributes:
  formats:
  revealjs:
  # general
-
- self-contained: true
+ embed-resources: true
  theme: [default, custom.scss, custom-light.scss]
  template-partials:
- - revealjs-assets/title-slide.html 
+ - revealjs-assets/title-slide.html
 
  # code
  highlight-style: arrow
@@ -19,11 +18,15 @@ contributes:
 
  # assets
  logo: assets/logo.svg
- background-image: assets/swirling-margins.svg
+ ## NOTE:
+ ## background-image embedding currently ignored
+ ## encoded in custom.scss `.reveal .backgrounds { background-image: }` instead
+ ## https://github.com/quarto-dev/quarto-cli/issues/980
+ # background-image: assets/swirling-margins.svg
 
  revealjs+light:
  # general
- self-contained: true
+ embed-resources: true
  theme: [default, custom.scss, custom-light.scss]
  template-partials:
  - revealjs-assets/title-slide.html 
@@ -35,11 +38,15 @@ contributes:
 
  # assets
  logo: assets/logo.svg
- background-image: assets/swirling-margins.svg
+ ## NOTE:
+ ## background-image embedding currently ignored
+ ## encoded in custom.scss `.reveal .backgrounds { background-image: }` instead
+ ## https://github.com/quarto-dev/quarto-cli/issues/980
+ # background-image: assets/swirling-margins.svg
 
  revealjs+dark:
  # general
- self-contained: true
+ embed-resources: true
  theme: [dark, custom.scss, custom-dark.scss]
  template-partials:
  - revealjs-assets/title-slide.html 
@@ -51,4 +58,8 @@ contributes:
 
  # assets
  logo: assets/logo.svg
- background-image: assets/swirling-margins.svg
+ ## NOTE:
+ ## background-image embedding currently ignored
+ ## encoded in custom.scss `.reveal .backgrounds { background-image: }` instead
+ ## https://github.com/quarto-dev/quarto-cli/issues/980
+ # background-image: assets/swirling-margins.svg
diff --git a/_extensions/pharmaR/rvalhub/custom.scss b/_extensions/pharmaR/rvalhub/custom.scss
@@ -17,6 +17,7 @@ $code-block-border-color: transparent;
  .backgrounds {
  background-size: cover;
  background-position-y: center;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><!-- rects --><path d="M 1000 -1000 L 1000 1000 80 1000 80 -1000 M -1000 -1000 L -1000 1000 -80 1000 -80 -1000" fill="%234D8DC930" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="0 0 50" to="360 0 50" dur="60s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 85 1000 85 -1000 M -1000 -1000 L -1000 1000 -85 1000 -85 -1000" fill="%234D8DC940" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="60 0 50" to="420 0 50" dur="65s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 90 1000 90 -1000 M -1000 -1000 L -1000 1000 -90 1000 -90 -1000" fill="%234D8DC950" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="120 0 50" to="480 0 50" dur="70s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 80 1000 80 -1000 M -1000 -1000 L -1000 1000 -80 1000 -80 -1000" fill="%234D8DC960" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="180 0 50" to="540 0 50" dur="75s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 85 1000 85 -1000 M -1000 -1000 L -1000 1000 -85 1000 -85 -1000" fill="%234D8DC970" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="240 0 50" to="600 0 50" dur="80s" ></animateTransform></path><path d="M 1000 -1000 L 1000 1000 90 1000 90 -1000 M -1000 -1000 L -1000 1000 -90 1000 -90 -1000" fill="%234D8DC980" ><animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="indefinite" from="300 0 50" to="660 0 50" dur="85s" ></animateTransform></path></svg>');
  }
 
  .slide-logo {