feat: embed title as inline svg for easier theming

icelam · Nov 25, 2022 · 9357a60 · 9357a60
1 parent 8419049
commit 9357a60
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/src/assets/images/title.svg b/src/assets/images/title.svg
diff --git a/src/assets/scss/_colors.scss b/src/assets/scss/_colors.scss
@@ -27,6 +27,9 @@ $color-text-dark: $color-black;
 $color-link: rgba($color-white, 0.8);
 $color-link-hover: rgba($color-white, 0.9);
 
+// title
+$color-title-border: $color-yellow;
+
 // button
 $color-button-text: $color-white;
 $color-button-default-background: $color-yellow;

diff --git a/src/assets/scss/_slot.scss b/src/assets/scss/_slot.scss
@@ -12,13 +12,21 @@
   margin: $title-margin-top 0 $title-margin-bottom 0;
   position: relative;
   z-index: $z-index-title; // make sure title on top of sunburst
+  color: $color-title-border;
+  display: inline-block;
 
   @each $media-query, $factor in $scale-factors {
     @media #{$media-query} {
       max-width: $title-width * $factor;
       margin: $title-margin-top 0 $title-margin-bottom * $factor 0;
     }
   }
+
+  svg {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
 }
 
 .control-group {

diff --git a/src/pages/landing.pug b/src/pages/landing.pug
@@ -10,7 +10,9 @@ include ../mixins/icons
   canvas#confetti-canvas.confetti
 
   #lucky-draw
-    img.title(src="~@images/title.svg" alt="Lucky Draw")
+    .title
+      //- Pug loader currently does not handle webpack alias so we will use relative path here
+      include ../assets/images/title.svg
 
     .slot
       .slot__outer