diff --git a/.htmlhintrc b/.htmlhintrc
index e28096b..e6e7076 100644
--- a/.htmlhintrc
+++ b/.htmlhintrc
@@ -2,13 +2,12 @@
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
- "attr-no-duplication": true,
+ "attr-no-duplication": true,
"doctype-first": true,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
- "attr-no-duplication": true,
"title-require": true,
"alt-require": true,
diff --git a/src/index.html b/src/index.html
index 37e45d9..97ea8bc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,7 +8,8 @@
diff --git a/src/scss/_clouds.scss b/src/scss/_clouds.scss
new file mode 100644
index 0000000..3e2e94f
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/scss/_melancholy.scss b/src/scss/_melancholy.scss
new file mode 100644
index 0000000..ffde293
--- /dev/null
+++ b/src/scss/_melancholy.scss
@@ -0,0 +1,24 @@
+.theme-melancholy {
+ background-color: #fff;
+ background-image: url('images/melancholy.png');
+
+ .slide-gurbani {
+ color: #fcfefe;
+ }
+
+ .slide-translation {
+ color: #fde5ab;
+ }
+
+ .slide-teeka {
+ color: #86a3ba;
+ }
+
+ .slide-transliteration {
+ color: #f1f5f4;
+ }
+
+ .logo path {
+ fill: #e0e0e0;
+ }
+}
diff --git a/src/scss/_ocean.scss b/src/scss/_ocean.scss
new file mode 100644
index 0000000..e3e9ed1
--- /dev/null
+++ b/src/scss/_ocean.scss
@@ -0,0 +1,3 @@
+.theme-ocean {
+ background-image: url('images/ocean-theme.png');
+}
diff --git a/src/scss/images/clouds-video.png b/src/scss/images/clouds-video.png
new file mode 100644
index 0000000..c3a0ff2
Binary files /dev/null and b/src/scss/images/clouds-video.png differ
diff --git a/src/scss/images/melancholy.png b/src/scss/images/melancholy.png
new file mode 100644
index 0000000..c06a05a
Binary files /dev/null and b/src/scss/images/melancholy.png differ
diff --git a/src/scss/images/ocean-theme.png b/src/scss/images/ocean-theme.png
new file mode 100644
index 0000000..cbfa314
Binary files /dev/null and b/src/scss/images/ocean-theme.png differ
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 79f68b4..5cb08fe 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -36,7 +36,10 @@ $viewer-padding: 30px;
"high-contrast",
"low-light",
"nirbaan",
- "dhan-guru-nanak";
+ "dhan-guru-nanak",
+ "ocean",
+ "clouds",
+ "melancholy";
/* Custom Styles */
html {
diff --git a/src/scss/themes/_theme-clouds.scss b/src/scss/themes/_theme-clouds.scss
new file mode 100644
index 0000000..26131cb
--- /dev/null
+++ b/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...);
+}
diff --git a/src/scss/themes/_theme-melancholy.scss b/src/scss/themes/_theme-melancholy.scss
new file mode 100644
index 0000000..194d7a3
--- /dev/null
+++ b/src/scss/themes/_theme-melancholy.scss
@@ -0,0 +1,14 @@
+$themeMelancholy: (
+ type: 'dark',
+ background-color: #38987b,
+ gurbani: #fcfefe,
+ translation: #fde5ab,
+ teeka: #86a3ba,
+ transliteration: #f1f5f4,
+ visraam: #ffa5a5,
+ yamki: #ffde00,
+);
+
+.theme-melancholy {
+ @include generateTheme($themeMelancholy...);
+}
diff --git a/src/scss/themes/_theme-ocean.scss b/src/scss/themes/_theme-ocean.scss
new file mode 100644
index 0000000..853fe5a
--- /dev/null
+++ b/src/scss/themes/_theme-ocean.scss
@@ -0,0 +1,14 @@
+$themeDark: (
+ type: 'dark',
+ background-color: #000,
+ gurbani: #fff,
+ translation: #e2e2e2,
+ teeka: #c6c6c6,
+ transliteration: #ababab,
+ visraam: #c0392b,
+ yamki: #ffc500,
+);
+
+.theme-ocean {
+ @include generateTheme($themeDark...);
+}
diff --git a/src/scss/themes/_themes.scss b/src/scss/themes/_themes.scss
index 623f69d..ddb87de 100644
--- a/src/scss/themes/_themes.scss
+++ b/src/scss/themes/_themes.scss
@@ -16,4 +16,7 @@
@import 'theme-low-light';
@import 'theme-moody-blue';
@import 'theme-dhan-guru-nanak.scss';
-@import 'theme-nirbaan';
\ No newline at end of file
+@import 'theme-nirbaan';
+@import 'theme-ocean';
+@import 'theme-clouds';
+@import 'theme-melancholy';
diff --git a/src/scss/themes/helpers/_theme-generator.scss b/src/scss/themes/helpers/_theme-generator.scss
index c2e1f69..8baaa2a 100644
--- a/src/scss/themes/helpers/_theme-generator.scss
+++ b/src/scss/themes/helpers/_theme-generator.scss
@@ -77,15 +77,15 @@
color: $gurbani;
}
- .translation {
+ .slide-translation {
color: $translation;
}
- .teeka {
+ .slide-teeka {
color: $teeka;
}
- .transliteration {
+ .slide-transliteration {
color: $transliteration;
}
diff --git a/src/scss/viewer.scss b/src/scss/viewer.scss
index 6032825..e20cbfa 100644
--- a/src/scss/viewer.scss
+++ b/src/scss/viewer.scss
@@ -1,6 +1,13 @@
$gurbanithick: 'gurbaniakharthick';
$gurbani: 'gurbaniakhar';
+.verse-slide-wrapper {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 10;
+}
+
.shabad-deck {
height: 100vh;
padding: 15px 0;
diff --git a/webpack.config.js b/webpack.config.js
index 67c28be..cb513b8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,21 +1,21 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const path = require("path");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
const plugins = [
new HtmlWebpackPlugin({
- template: path.resolve(__dirname, "src", "index.html"),
+ template: path.resolve(__dirname, 'src', 'index.html'),
}),
new MiniCssExtractPlugin({
- filename: "app.[hash].css",
+ filename: 'app.[hash].css',
}),
];
module.exports = {
- mode: "production",
+ mode: 'production',
entry: [
- path.resolve(__dirname, "src", "js", "index.js"),
- path.resolve(__dirname, "src", "scss", "index.scss"),
+ path.resolve(__dirname, 'src', 'js', 'index.js'),
+ path.resolve(__dirname, 'src', 'scss', 'index.scss'),
],
module: {
rules: [
@@ -23,7 +23,7 @@ module.exports = {
test: /\.html$/,
use: [
{
- loader: "html-loader",
+ loader: 'html-loader',
options: {
minimize: true,
},
@@ -32,34 +32,34 @@ module.exports = {
},
{
test: /\.scss$/,
- use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+ use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.ttf$/,
type: 'asset/resource',
generator: {
- filename: './fonts/[name][ext]',
+ filename: './fonts/[name][ext]',
},
},
{
test: /\.jpg$/,
type: 'asset/resource',
generator: {
- filename: './images/[name][ext]',
+ filename: './images/[name][ext]',
},
},
{
test: /\.png$/,
type: 'asset/resource',
generator: {
- filename: './images/[name][ext]',
+ filename: './images/[name][ext]',
},
},
],
},
output: {
- path: path.resolve(__dirname, "dist"),
- filename: "app.[hash].js",
+ path: path.resolve(__dirname, 'dist'),
+ filename: 'app.[hash].js',
},
plugins,
};