feat: add cloud and abstract video

src/scss/_abstract.scss

@@ -0,0 +1,24 @@
+.theme-abstract {
+  background-color: #fff;
+  background-image: url('images/abstract.png');
+
+  .slide-gurbani {
+    color: #fcfefe;
+  }
+
+  .slide-translation {
+    color: #fde5ab;
+  }
+
+  .slide-teeka {
+    color: #86a3ba;
+  }
+
+  .slide-transliteration {
+    color: #f1f5f4;
+  }
+
+  .logo path {
+    fill: #e0e0e0;
+  }
+}

src/scss/_clouds.scss

@@ -0,0 +1,25 @@
+.theme-clouds {
+  background-color: #fff;
+  background-image: url('images/clouds-video.png');
+
+  .slide-gurbani {
+    color: #0e2654;
+    text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.7);
+  }
+
+  .slide-translation {
+    color: #003a8c;
+  }
+
+  .slide-teeka {
+    color: #033780;
+  }
+
+  .slide-transliteration {
+    color: #80878a;
+  }
+
+  .logo path {
+    fill: #e0e0e0;
+  }
+}

src/scss/index.scss

@@ -37,7 +37,9 @@ $viewer-padding: 30px;
   "low-light",
   "nirbaan",
   "dhan-guru-nanak",
-  "ocean";
+  "ocean",
+  "clouds",
+  "abstract";
 
 /* Custom Styles */
 html {

src/scss/themes/_theme-abstract.scss

@@ -0,0 +1,14 @@
+$themeAbstract: (
+  type: 'dark',
+  background-color: #38987b,
+  gurbani: #fcfefe,
+  translation: #fde5ab,
+  teeka: #86a3ba,
+  transliteration: #f1f5f4,
+  visraam: #ffa5a5,
+  yamki: #ffde00,
+);
+
+.theme-abstract {
+  @include generateTheme($themeAbstract...);
+}

src/scss/themes/_theme-clouds.scss

@@ -0,0 +1,14 @@
+$themeClouds: (
+  type: 'light',
+  background-color: #07ccf3,
+  gurbani: #0e2654,
+  translation: #003a8c,
+  teeka: #033780,
+  transliteration: #80878a,
+  visraam: #d20b0b,
+  yamki: #c2951a,
+);
+
+.theme-clouds {
+  @include generateTheme($themeClouds...);
+}

src/scss/themes/_themes.scss

@@ -18,3 +18,5 @@
 @import 'theme-dhan-guru-nanak.scss';
 @import 'theme-nirbaan';
 @import 'theme-ocean';
+@import 'theme-clouds';
+@import 'theme-abstract';