guess-the-year-web-component 3.2.0 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "guess-the-year-web-component",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Guess the year",
   "main": "dist/main.js",
   "type": "module",

package/src/guess-the-year.ts

@@ -427,10 +427,14 @@ export class GuessTheYear extends LitElement {
       `;
     }
 
-    // Preserve html structure to prevent the webcomponent to collapse.
-    return html`<div class="incident--image">
+    if (!this.suppressImages) {
+      // Preserve html structure to prevent the webcomponent to collapse.
+      return html`<div class="incident--image">
           <img/>
         </div>`;
+    }
+
+    return html``;
   }
 
   // renders a list of possible answers

package/src/index.html

@@ -36,14 +36,16 @@
       --guess-the-year-title-background-color: orange;
       --guess-the-year-title-color: white;
       /* --guess-the-year-text-position: static; */
-      /* --guess-the-year-text-color: white;
-      --guess-the-year-text-background-color: rgb(3, 78, 3); */
+      /* --guess-the-year-text-color: white; */
+      --guess-the-year-intro-background-color: white;
+      --guess-the-year-text-background-color: rgba(255, 255, 255, 0.861);
       --guess-the-year-text-max-height: 200px;
       --guess-the-year-tile-min-height: 500px;
       --guess-the-year-tile-max-height: 90vh;
       --guess-the-year-attribution-font-color: rgb(168, 170, 171);
       --guess-the-year-attribution-font-size: 8px;
       --guess-the-year-font-family: "Comfortaa", cursive;
+      --guess-the-year-button-background-color: rgb(124, 1, 78);
 
       min-height: 80vh;
     }

package/src/scss/_variables.scss

@@ -1,29 +1,28 @@
-
 $background_color: var(--guess-the-year-background-color, white);
 $text_color: var(--guess-the-year-text-color, black);
 $text_font_size: var(--guess-the-year-text-font-size, 14px);
 
 $title_background_color: var(--guess-the-year-title-background-color,
-    rgba(255, 255, 255, 0.7));
+        rgba(255, 255, 255, 0.7));
 $title_color: var(--guess-the-year-title-color, rgba(0, 0, 0, 1));
 $title_font_size: var(--guess-the-year-title-font-size, 16px);
 
 $splash_background_color: var(--guess-the-year-splash-screen-background-color,
-    rgba(255, 255, 255, 0.7));
-$splash_text_color: var(--guess-the-year-splash-screen-color, rgba(0, 0, 0, 1));    
+        rgba(255, 255, 255, 0.7));
+$splash_text_color: var(--guess-the-year-splash-screen-color, rgba(0, 0, 0, 1));
 $splash_font_size: var(--guess-the-year-splash-screen-font-size, 16px);
 
 
-$intro_background_color: var(--guess-the-year-title-background-color,
-    rgba(255, 255, 255, 0.7));
+$intro_background_color: var(--guess-the-year-intro-background-color,
+        rgba(255, 255, 255, 0.7));
 $intro_text_color: var(--guess-the-year-title-color, rgba(0, 0, 0, 1));
 
 $button_background_color: var(--guess-the-year-button-background-color,
-    rgba(0, 0, 0, 1));
-$button_color: var(--guess-the-year-button-color, rgba(255, 255, 255, 1)); 
+        rgba(0, 0, 0, 1));
+$button_color: var(--guess-the-year-button-color, rgba(255, 255, 255, 1));
 
 
 $footer_background_color: var(--guess-the-year-footer-background-color,
-    rgba(255, 255, 255, 0.7));
+        rgba(255, 255, 255, 0.7));
 $footer_color: var(--guess-the-year-footer-color, rgba(0, 0, 0, 1));
 $footer_font_size: var(--guess-the-year-footer-font-size, 12px);