slide trigger updates

kingsdigitallab · Dec 13, 2023 · 1c8e6aa · 1c8e6aa
1 parent 6bfe6a7
commit 1c8e6aa
Show file tree

Hide file tree

Showing 4 changed files with 1,385 additions and 1,332 deletions.
diff --git a/frontend/.eleventy.js b/frontend/.eleventy.js
@@ -57,7 +57,7 @@ module.exports = function (config) {
         //return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n';
         if (m) {
           return (
-            '<article id="slide_' +
+            '<article class="mapSlide" id="slide_' +
             md.utils.escapeHtml(m[1]) +
             '" data-slideId="' +
             md.utils.escapeHtml(m[1]) +
@@ -68,7 +68,7 @@ module.exports = function (config) {
         }
       } else {
         // closing tag
-        return "</article>\n";
+        return "</article>\n<div class=\"article_spacer\">&nbsp;</div>";
       }
     },
     marker: ":",

diff --git a/frontend/_includes/stories.liquid b/frontend/_includes/stories.liquid
@@ -64,39 +64,39 @@ layout: base.liquid
 
     <section id="s-2">
         <div class="storyTitleSpacerAbove" id="s2-start"></div>
-        <article id="slide_500" data-slideId="500" class="storyTitle">
+        <article id="slide_500" data-slideId="500" class="storyTitle mapSlide">
             <h2>Homelands</h2>
         </article>
         <div class="storyTitleSpacerBelow"></div>
         {% renderFile "./stories/homelands.md", "liquid" %}
     </section>
     <section id="s-3">
         <div class="storyTitleSpacerAbove"></div>
-        <article id="slide_600" data-slideId="600" class="storyTitle">
+        <article id="slide_600" data-slideId="600" class="storyTitle mapSlide">
             <h2>Pathways</h2>
         </article>
          <div class="storyTitleSpacerBelow"></div>
         {% renderFile "./stories/pathways.md", "liquid" %}
     </section>
     <section id="s-4">
         <div class="storyTitleSpacerAbove" id="s2-start"></div>
-        <article class="storyTitle" id="slide_700" data-slideId="700" >
+        <article class="storyTitle mapSlide" id="slide_700" data-slideId="700" >
             <h2>Villagers, Settlers</h2>
         </article>
          <div class="storyTitleSpacerBelow"></div>
         {% renderFile "./stories/villagers_settlers.md", "liquid" %}
     </section>
     <section id="s-5">
         <div class="storyTitleSpacerAbove" id="s2-start"></div>
-        <article class="storyTitle" id="slide_800" data-slideId="800" >
+        <article class="storyTitle mapSlide" id="slide_800" data-slideId="800" >
             <h2>Lines</h2>
         </article>
          <div class="storyTitleSpacerBelow"></div>
         {% renderFile "./stories/lines.md", "liquid" %}
     </section>
 
     <section id="filters">
-        <article class="storyTitle">
+        <article class="storyTitle mapSlide">
             <h2>Explore</h2>
         </article>
         <article>
@@ -327,7 +327,6 @@ layout: base.liquid
                       </span>
                                 </label>
                             </div>
-
                             <div class="checkbox-wrapper-1">
                                 <label class="checkbox-wrapper">
                                     <input type="checkbox" class="checkbox-input"/>

diff --git a/frontend/assets/css/style.scss b/frontend/assets/css/style.scss
@@ -336,11 +336,16 @@ nav {
       margin-top: 10em;
       font-size: 1.7em;
     } //h1 a
+
+    div.article_spacer {
+      padding-top: 75vh;
+      padding-bottom: 75vh;
+    }
     article {
       width: calc(95% - 4em);
       background: rgba(255, 255, 255, 0.7);
       padding: 1em 2em;
-      margin: 0 5% 100vh 0;
+      margin: 0 5% 0 0;
       text-align: justify;
 
       blockquote {
@@ -476,7 +481,7 @@ nav {
       padding-top: 40vh;
     }
     .storyTitleSpacerBelow {
-      padding-bottom: 50vh;
+      padding-bottom: 65vh;
     }
     // Story Heading
     article.storyTitle {
@@ -496,7 +501,7 @@ nav {
       margin: 0;
       article {
         width: 40%;
-        margin: 0 30% 100vh 30%;
+        margin: 0 30% 0 30%;
         &.storyTitle {
           margin-bottom: 0;
         } //.storyTitle {