maint: misc css improvements; preview via run.sh

hymnal/assets/styles/main.css

@@ -2,9 +2,11 @@
  * Black theme for reveal.js. This is the opposite of the 'white' theme.
  *
  * By Hakim El Hattab, http://hakim.se
+ *
+ * Modified by Jovial Joe Jayarson
  */
 
-@import "../fonts/NotoSerifMalayalam/NotoSerifMalayalam.css";
+@import url(../fonts/NotoSerifMalayalam/NotoSerifMalayalam.css);
 
 section.has-light-background,
 section.has-light-background h1,
@@ -17,37 +19,44 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * GLOBAL STYLES
-    *********************************************/
+  * GLOBAL STYLES
+  *********************************************/
 :root {
   --r-background-color: #191919;
   --r-main-font: NotoSerifMalayalam, Helvetica, sans-serif;
   --r-main-font-size: 42px;
-  --r-main-color: #fff;
   --r-block-margin: 20px;
   --r-heading-margin: 0 0 20px 0;
   --r-heading-font: NotoSerifMalayalam, Helvetica, sans-serif;
-  --r-heading-color: #fff;
   --r-heading-line-height: 1.2;
   --r-heading-letter-spacing: normal;
   --r-heading-text-transform: uppercase;
   --r-heading-text-shadow: none;
   --r-heading-font-weight: 600;
   --r-heading1-text-shadow: none;
-  --r-heading1-size: clamp(0.5em, 10vh, 2.5em);
-  --r-heading2-size: 1.6em; /* clamp(0.5em, 4vh, 1.6em); */
-  --r-heading3-size: clamp(0.5em, 4.3vh, 1.3em);
-  --r-heading4-size: 1em; /* clamp(0.5em, 4vh, 1em); */
+  /* --r-heading1-size: 2.5em;
+  --r-heading2-size: 1.6em;
+  --r-heading3-size: 1.3em;
+  --r-heading4-size: 1em; */
+  --r-heading1-size: clamp(1.5rem, 8vmax, 3.5rem);
+  --r-heading2-size: 1.6em;
+  --r-heading3-size: clamp(0.3rem, 4vmax, 2.3rem);
+  --r-heading4-size: 1em;
+  /* colors */
+  --r-main-color: #fff;
+  --r-heading-color: #fff;
   --r-code-font: monospace;
   --r-link-color: #42affa;
   --r-link-color-dark: #068de9;
   --r-link-color-hover: #8dcffc;
   --r-selection-background-color: rgba(66, 175, 250, 0.75);
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
+/* Light Theme */
 @media (prefers-color-scheme: light) {
-  /* Set the variables to the values for the dark theme */
   section.has-dark-background,
   section.has-dark-background h1,
   section.has-dark-background h2,
@@ -70,6 +79,8 @@ section.has-light-background h6 {
     --r-link-color-hover: #6ca0e8;
     --r-selection-background-color: #98bdef;
     --r-selection-color: #fff;
+    --r-overlay-element-bg-color: 0, 0, 0;
+    --r-overlay-element-fg-color: 240, 240, 240;
   }
 }
 
@@ -104,8 +115,8 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * HEADERS
-    *********************************************/
+  * HEADERS
+  *********************************************/
 .reveal h1,
 .reveal h2,
 .reveal h3,
@@ -144,8 +155,8 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * OTHER
-    *********************************************/
+  * OTHER
+  *********************************************/
 .reveal p {
   margin: var(--r-block-margin) 0;
   line-height: 1.3;
@@ -331,8 +342,8 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * LINKS
-    *********************************************/
+  * LINKS
+  *********************************************/
 .reveal a {
   color: var(--r-link-color);
   text-decoration: none;
@@ -351,8 +362,8 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * Frame helper
-    *********************************************/
+  * Frame helper
+  *********************************************/
 .reveal .r-frame {
   border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@@ -368,33 +379,32 @@ section.has-light-background h6 {
 }
 
 /*********************************************
-    * NAVIGATION CONTROLS
-    *********************************************/
+  * NAVIGATION CONTROLS
+  *********************************************/
 .reveal .controls {
   color: var(--r-link-color);
 }
 
 /*********************************************
-    * PROGRESS BAR
-    *********************************************/
+  * PROGRESS BAR
+  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
   color: var(--r-link-color);
 }
 
 /*********************************************
-    * PRINT BACKGROUND
-    *********************************************/
+  * PRINT BACKGROUND
+  *********************************************/
 @media print {
   .backgrounds {
     background-color: var(--r-background-color);
   }
 }
 
 /*********************************************
-   * CUSTOM DEFINITIONS
-   *********************************************/
-
+  * CUSTOM DEFINITIONS
+  *********************************************/
 .reveal .verse-no {
   color: gray;
   font-size: 0.45em;

run.sh

@@ -21,23 +21,23 @@ echo -e "${BLUE}==> Build & Generate${RESET}"
 pdm run python ./src/hymnal/main.py &&
   pnpm build
 
-# # preview
-# pnpm preview
-
-# deploy
-commands=("docker" "podman")
-for cmd in "${commands[@]}"; do
-  if command_exists "$cmd"; then
-    echo -e "\n${BLUE}==> Deploy with '$cmd'${RESET}\n"
-    $cmd-compose -p hymnal -f ./compose.yaml down
-    $cmd-compose -p hymnal -f ./compose.yaml up -d
-    echo -e "\n${GREEN}==> Open http://[::1]:8080 in your browser${RESET}"
-    exit $?
-  else
-    echo -e "\n${YELLOW}==> Warning: Command '$cmd' not found${RESET}"
-  fi
-done
-echo -e "\n${RED}==> Error: Deploymnet failed${RESET}"
-exit 1
+# preview
+pnpm preview
+
+# # deploy
+# commands=("docker" "podman")
+# for cmd in "${commands[@]}"; do
+#   if command_exists "$cmd"; then
+#     echo -e "\n${BLUE}==> Deploy with '$cmd'${RESET}\n"
+#     $cmd-compose -p hymnal -f ./compose.yaml down
+#     $cmd-compose -p hymnal -f ./compose.yaml up -d
+#     echo -e "\n${GREEN}==> Open http://[::1]:8080 in your browser${RESET}"
+#     exit $?
+#   else
+#     echo -e "\n${YELLOW}==> Warning: Command '$cmd' not found${RESET}"
+#   fi
+# done
+# echo -e "\n${RED}==> Error: Deploymnet failed${RESET}"
+# exit 1
 
 set +e

src/hymnal/templates/start-at-refrain-without-verses.html.j2

@@ -40,7 +40,10 @@
       hash: true,
       keyboardCondition: 'focused', // only react to keys when focused
       // Learn about plugins: https://revealjs.com/plugins/
-      plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
+      plugins: [RevealNotes],
+      scrollActivationWidth: null,
+      disableLayout: true,
+      slideNumber: 'c/t'
     });
     Reveal.slide(0, 0);
   </script>

src/hymnal/templates/start-at-refrain.html.j2

@@ -50,7 +50,10 @@
       hash: true,
       keyboardCondition: 'focused', // only react to keys when focused
       // Learn about plugins: https://revealjs.com/plugins/
-      plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
+      plugins: [RevealNotes],
+      scrollActivationWidth: null,
+      disableLayout: true,
+      slideNumber: 'c/t'
     });
     Reveal.slide(1, 0);
   </script>

src/hymnal/templates/start-at-verse-with-refrain.html.j2

@@ -56,7 +56,10 @@
       hash: true,
       keyboardCondition: 'focused', // only react to keys when focused
       // Learn about plugins: https://revealjs.com/plugins/
-      plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
+      plugins: [RevealNotes],
+      scrollActivationWidth: null,
+      disableLayout: true,
+      slideNumber: 'c/t'
     });
     Reveal.slide(0, 0);
   </script>

src/hymnal/templates/start-at-verse-without-refrain.html.j2

@@ -51,7 +51,10 @@
       hash: true,
       keyboardCondition: 'focused', // only react to keys when focused
       // Learn about plugins: https://revealjs.com/plugins/
-      plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
+      plugins: [RevealNotes],
+      scrollActivationWidth: null,
+      disableLayout: true,
+      slideNumber: 'c/t'
     });
     Reveal.slide(1, 0);
   </script>