Fixes + modal slide change

Simon-Rey · Mar 6, 2024 · 07eff15 · 07eff15
1 parent bc4ab82
commit 07eff15
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/docs/_includes/gallery.html b/docs/_includes/gallery.html
@@ -96,11 +96,11 @@
     });
 
     modalPrev.addEventListener('click', () => {
-        showPhoto(-1);
+        showPhoto(currentSlideIndex - 1);
     });
 
     modalNext.addEventListener('click', () => {
-        showPhoto(1);
+        showPhoto(currentSlideIndex + 1);
     });
 
     function showModal() {
@@ -167,9 +167,9 @@
     function updateOnSwipe() {
         const diff = touchEndX - touchStartX
         if (diff < -50) {
-            showPhoto(-1); // Trigger plusSlides(-1) when the user slides to the right
+            showPhoto(currentSlideIndex - 1);
         } else if (diff > 50) {
-            showPhoto(1); // Trigger plusSlides(1) when the user slides to the left
+            showPhoto(currentSlideIndex + 1);
         }
     }
 </script>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -14,19 +14,27 @@
 
 <nav id="main-menu-wrap">
     <ul id="main-menu">
+        <li class="separator"></li>
+
         <li><a href="{{ "scrape_the_surface" | relative_url }}">Scrape the Surface</a></li>
         <li><a href="{{ "shipped_around" | relative_url }}">Shipped Around</a></li>
         <li><a href="{{ "patterns" | relative_url }}">Patterns</a></li>
         <li><a href="{{ "lines_that_divide_or_unite" | relative_url }}">Lines that Divide or Unite</a></li>
         <li><a href="{{ "shaping_the_silhouette" | relative_url }}">Shaping the Silhouette</a></li>
-        <li style="margin-bottom: 50px"><a href="{{ "the_other_side_of_the_mirror" | relative_url }}">The Other Side of the Mirror</a></li>
+        <li><a href="{{ "the_other_side_of_the_mirror" | relative_url }}">The Other Side of the Mirror</a></li>
+
+        <li class="separator"></li>
 
         <li><a href="{{ "insides" | relative_url }}">Insides</a></li>
         <li><a href="{{ "strolling_the_streets" | relative_url }}">Strolling the Streets</a></li>
-        <li style="margin-bottom: 50px"><a href="{{ "outsides" | relative_url }}">Outside</a></li>
+        <li><a href="{{ "outsides" | relative_url }}">Outside</a></li>
+
+        <li class="separator"></li>
 
         <li><a href="{{ "somewhere_up_in_the_sky" | relative_url }}">Somewhere up in the Sky</a></li>
-        <li style="margin-bottom: 50px"><a href="{{ "skies" | relative_url }}">Skies</a></li>
+        <li><a href="{{ "skies" | relative_url }}">Skies</a></li>
+
+        <li class="separator"></li>
 
         <li><a href="{{ "solitude" | relative_url }}">Solitudes</a></li>
         <li><a href="{{ "foggy" | relative_url }}">Foggy</a></li>

diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
@@ -106,8 +106,8 @@ Main Menu
 
 #main-menu-wrap {
     position: fixed;
-    top: 120px;
-    width: 18ch;
+    top: 120px;  /* 120 banner */
+    width: calc(18ch + 20px);
 }
 
 #main-menu {
@@ -125,6 +125,7 @@ Main Menu
     width: 0;
     height: 0;
 }
+
 #main-menu > li {
     font-weight: bold;
     display: block;
@@ -134,28 +135,36 @@ Main Menu
 }
 
 #main-menu > li a {
-    padding: 20px 10px;
+    padding: 20px 20px 20px 20px;
     color: black;
     text-decoration: none;
     display: block;
-    width: 18ch;
     box-sizing: border-box;
 }
 
-#main-menu > li:hover {
+#main-menu > li a:hover {
     background-color: var(--color-background-dark);
     transition: background-color 0.5s;
 }
 
+#main-menu .separator {
+    margin: 25px 20%;
+    border: 1px #939393 solid;
+}
+
 /* ========
 Body Layout
 ======== */
 
 main {
-    margin-left: 18ch;
+    margin-left: calc(18ch + 20px);
     margin-top: 150px;
     margin-right: 0;
-    padding: 0 20px;
+    padding: 0;
+}
+
+main > p {
+    padding-left: 20px;
 }
 
 h1 {