jekyll-theme-easy-wedding 0.1.22 → 0.1.23

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e528e2b17bf7d135f76bfb5ad60f9e7af920a1c821d9e3065741b7b100bb9c00
-  data.tar.gz: c1d5943e355a2f870238db8b14f1502fadca721a47590accf79830e17d9e4eb6
+  metadata.gz: 79dc9132a933e22fead91fdeee7b4b4b8bb47560fd3ccd99a2b83104904a7641
+  data.tar.gz: 86103803d00a9e83fcc905b365450fc5e314318ce23e76a566eb903d3cf9b7dd
 SHA512:
-  metadata.gz: 5ff1e3f02b4f85f5aae767eb2f6d5ad717a9318b5887b8715bf7b3f50da7abbcc50c40d3cd9057c25104fc1c03228845d017df6fd1313c513f4baacd454237ff
-  data.tar.gz: 4350aec67292b38a6f8c33e8669871d3835e5c268ebd8cda7cd8f6c5bb66905cf9d9622708113f87420be2a8dd1387ee34f36590631f083b1c28733265e61220
+  metadata.gz: 33ce7691f1653d3c04b8be5dbbcd5b2aebfd9535825e7317bfe77272417f823f0d8ecb1f827b7865f500ca72e069d66611b90d91f27e5789d084dc4e7a60f3ab
+  data.tar.gz: d0511e08b7324d811f2168d53fe4952647ba4cbd64560066d48e0f1cc47d98c45f475fcbfa19035284407118db4ccede6366dfed8f9c0ea5d983446804885986

data/_config.yml

@@ -15,6 +15,7 @@ collections:
   stories:
     sort_by: order
   modals:
+  banners:
 
 sass:
   style: compressed
@@ -24,6 +25,10 @@ defaults:
       path: "photos/"
     values:
       image: true
+  - scope:
+      path: banners
+    values:
+      layout: banner
 
 # Build settings
 markdown: kramdown

data/_includes/banners.html

@@ -0,0 +1,5 @@
+<div class="banner-container">
+    {% for banner in site.banners %}
+    {{banner.output}}
+    {% endfor %}
+</div>

data/_layouts/banner.html

@@ -0,0 +1,36 @@
+{% if page.hide != true %}
+    <div class="banner" id="{{page.id}}-banner">
+        <div class="close-button">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="banner-content">
+            {{content}}
+        </div>
+    </div>
+
+    <script>
+        (function(){
+            const banner = document.getElementById('{{page.id}}-banner');
+            // hide banner when close button is clicked.
+            banner.querySelector('.btn-close').addEventListener('click', function(){
+                banner.classList.add('hidden');
+                setTimeout(() =>
+                    banner.classList.add('closed'),
+                    1000
+                );
+            });
+
+            // hide banner if it's not time to show it.
+            {% if page.start_time or page.end_time %}
+                const startTime = new Date('{{page.start_time | default: "1970-01-01"}}');
+                const endTime = new Date('{{page.end_time | default: "2099-12-31"}}');
+                console.log(startTime);
+                console.log(endTime);
+                const now = new Date();
+                if (now < startTime || now > endTime) {
+                    banner.classList.add('hidden');
+                }
+            {% endif %}
+        })();
+    </script>
+{% endif %}

data/assets/css/styles.scss

@@ -30,8 +30,11 @@ $secondary-color-darkest: scale-color({{site.data.settings.theme.secondary_color
 $secondary-text-color-darkest: text-clr($secondary-color-darkest);
 
 $accent-color: {{site.data.settings.theme.accent_color | default: "#219ab3"}};
+$accent-text-color: text-clr($accent-color);
 $accent-color-darker: scale-color({{site.data.settings.theme.accent_color | default: "#fff"}}, $lightness: -10%);
+$accent-text-color-darker: text-clr($accent-color-darker);
 $accent-color-darkest: scale-color({{site.data.settings.theme.accent_color | default: "#fff"}}, $lightness: -30%);
+$accent-text-color-darkest: text-clr($accent-color-darkest);
 
 $background-color: {{site.data.settings.theme.background_color | default: "#fff"}};
 $background-color-lighter: scale-color({{site.data.settings.theme.background_color | default: "#fff"}}, $lightness: 50%);
@@ -70,6 +73,9 @@ $background-color-lighter: scale-color({{site.data.settings.theme.background_col
     --accent-color: #{$accent-color};
     --accent-color-darker: #{$accent-color-darker};
     --accent-color-darkest: #{$accent-color-darkest};
+    --accent-text-color: #{$accent-text-color};
+    --accent-text-color-darker: #{$accent-text-color-darker};
+    --accent-text-color-darkest: #{$accent-text-color-darkest};
 
     --background-color: #{$background-color};
     --background-color-lighter: #{$background-color-lighter};