From a15f4f603b2819e386626ea2ca61c09c4e344de4 Mon Sep 17 00:00:00 2001
From: Madison Scott-Clary <makyo@drab-makyo.com>
Date: Sun, 1 Mar 2020 23:16:11 -0800
Subject: [PATCH] fix for chrome

---
 assets/css/parts/_front.scss     |  2 +-
 content/publications/_index.html | 18 +++++++++---------
 layouts/index.html               | 28 ++++++++++++++--------------
 static/assets/js/carousel.js     | 23 ++++++++++++++---------
 4 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/assets/css/parts/_front.scss b/assets/css/parts/_front.scss
index b6562e0..5d89a65 100644
--- a/assets/css/parts/_front.scss
+++ b/assets/css/parts/_front.scss
@@ -50,7 +50,7 @@
                 flex-basis: 20%;
                 transition: transform 300ms ease;
 
-                &#recent, &#publications {
+                &.recent, &.publications {
                     display: inline-block;
                 }
 
diff --git a/content/publications/_index.html b/content/publications/_index.html
index b578454..b14e693 100644
--- a/content/publications/_index.html
+++ b/content/publications/_index.html
@@ -13,34 +13,34 @@ permalink: /publications/
                     <a href="https://ally.id/book?pk_campaign=publications" class="post-card-image" style="background-image: url(/assets/img/publications/ally.png )">
                     </a>
                     <div class="post-card-body">
-                        <a href="ally" class="post-card-link"><h3 class="post-card-title">ally</h3></a>
+                        <a href="https://ally.id/book?pk_campaign=publications" class="post-card-link"><h3 class="post-card-title">ally</h3></a>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="post-card">
-                    <a href="eigengrau" class="post-card-image" style="background-image: url(/assets/img/publications/eigengrau.png )">
+                    <a href="/publications/eigengrau" class="post-card-image" style="background-image: url(/assets/img/publications/eigengrau.png )">
                     </a>
                     <div class="post-card-body">
-                        <a href="eigengrau" class="post-card-link"><h3 class="post-card-title">Eigengrau</h3></a>
+                        <a href="/publications/eigengrau" class="post-card-link"><h3 class="post-card-title">Eigengrau</h3></a>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="post-card">
-                    <a href="restless-town" class="post-card-image" style="background-image: url(/assets/img/publications/restless-town.jpg )">
+                    <a href="/publications/restless-town" class="post-card-image" style="background-image: url(/assets/img/publications/restless-town.jpg )">
                     </a>
                     <div class="post-card-body">
-                        <a href="restless-town" class="post-card-link"><h3 class="post-card-title">Restless Town</h3></a>
+                        <a href="/publications/restless-town" class="post-card-link"><h3 class="post-card-title">Restless Town</h3></a>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="post-card">
-                    <a href="rum-and-coke" class="post-card-image" style="background-image: url(/assets/img/publications/rum-and-coke.jpg )">
+                    <a href="/publications/rum-and-coke" class="post-card-image" style="background-image: url(/assets/img/publications/rum-and-coke.jpg )">
                     </a>
                     <div class="post-card-body">
-                        <a href="rum-and-coke" class="post-card-link"><h3 class="post-card-title">Rum and Coke - Three Short Stories from a Furry Convention</h3></a>
+                        <a href="/publications/rum-and-coke" class="post-card-link"><h3 class="post-card-title">Rum and Coke - Three Short Stories from a Furry Convention</h3></a>
                     </div>
                 </div>
             </li>
@@ -50,10 +50,10 @@ permalink: /publications/
         <ol class="post-card-box clearfix">
             <li>
                 <div class="post-card">
-                    <a href="arcana" class="post-card-image" style="background-image: url(/assets/img/publications/arcana.jpg )">
+                    <a href="/publications/arcana" class="post-card-image" style="background-image: url(/assets/img/publications/arcana.jpg )">
                     </a>
                     <div class="post-card-body">
-                        <a href="arcana" class="post-card-link"><h3 class="post-card-title">Arcana: A Tarot Anthology</h3></a>
+                        <a href="/publications/arcana" class="post-card-link"><h3 class="post-card-title">Arcana: A Tarot Anthology</h3></a>
                     </div>
                 </div>
             </li>
diff --git a/layouts/index.html b/layouts/index.html
index c3ede07..4896138 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -12,7 +12,7 @@
         </nav>
         <main>
             <article>
-                <section id="home" class="carousel-item home">
+                <section class="carousel-item home">
                     <div class="small">
                         <img alt="Madison Scott-Clary" src="/assets/img/headshot.jpg" />
                     </div>
@@ -24,7 +24,7 @@
                         <p>This site comprises mostly completed written works. For drafts, in-progress words, and so on, head over to <a href="http://writing.drab-makyo.com">her blog and writing page</a></p>
                     </div>
                 </section>
-                <section id="publications" class="carousel-item publications">
+                <section class="carousel-item publications">
                     <h2><a href="/publications">Publications</a></h2>
                     <ol class="post-card-box clearfix">
                         <li>
@@ -32,34 +32,34 @@
                                 <a href="https://ally.id/book?pk_campaign=publications" class="post-card-image" style="background-image: url(/assets/img/publications/ally.png )">
                                 </a>
                                 <div class="post-card-body">
-                                    <a href="ally" class="post-card-link"><h3 class="post-card-title">ally</h3></a>
+                                    <a href="https://ally.id/book?pk_campaign=publications" class="post-card-link"><h3 class="post-card-title">ally</h3></a>
                                 </div>
                             </div>
                         </li>
                         <li>
                             <div class="post-card">
-                                <a href="eigengrau" class="post-card-image" style="background-image: url(/assets/img/publications/eigengrau.png )">
+                                <a href="/publications/eigengrau" class="post-card-image" style="background-image: url(/assets/img/publications/eigengrau.png )">
                                 </a>
                                 <div class="post-card-body">
-                                    <a href="eigengrau" class="post-card-link"><h3 class="post-card-title">Eigengrau</h3></a>
+                                    <a href="/publications/eigengrau" class="post-card-link"><h3 class="post-card-title">Eigengrau</h3></a>
                                 </div>
                             </div>
                         </li>
                         <li>
                             <div class="post-card">
-                                <a href="restless-town" class="post-card-image" style="background-image: url(/assets/img/publications/restless-town.jpg )">
+                                <a href="/publications/restless-town" class="post-card-image" style="background-image: url(/assets/img/publications/restless-town.jpg )">
                                 </a>
                                 <div class="post-card-body">
-                                    <a href="restless-town" class="post-card-link"><h3 class="post-card-title">Restless Town</h3></a>
+                                    <a href="/publications/restless-town" class="post-card-link"><h3 class="post-card-title">Restless Town</h3></a>
                                 </div>
                             </div>
                         </li>
                         <li>
                             <div class="post-card">
-                                <a href="rum-and-coke" class="post-card-image" style="background-image: url(/assets/img/publications/rum-and-coke.jpg )">
+                                <a href="/publications/rum-and-coke" class="post-card-image" style="background-image: url(/assets/img/publications/rum-and-coke.jpg )">
                                 </a>
                                 <div class="post-card-body">
-                                    <a href="rum-and-coke" class="post-card-link"><h3 class="post-card-title">Rum and Coke - Three Short Stories from a Furry Convention</h3></a>
+                                    <a href="/publications/rum-and-coke" class="post-card-link"><h3 class="post-card-title">Rum and Coke - Three Short Stories from a Furry Convention</h3></a>
                                 </div>
                             </div>
                         </li>
@@ -69,10 +69,10 @@
                     <ol class="post-card-box clearfix">
                         <li>
                             <div class="post-card">
-                                <a href="arcana" class="post-card-image" style="background-image: url(/assets/img/publications/arcana.jpg )">
+                                <a href="/publications/arcana" class="post-card-image" style="background-image: url(/assets/img/publications/arcana.jpg )">
                                 </a>
                                 <div class="post-card-body">
-                                    <a href="arcana" class="post-card-link"><h3 class="post-card-title">Arcana: A Tarot Anthology</h3></a>
+                                    <a href="/publications/arcana" class="post-card-link"><h3 class="post-card-title">Arcana: A Tarot Anthology</h3></a>
                                 </div>
                             </div>
                         </li>
@@ -89,7 +89,7 @@
                         <li><a href="https://www.weaselpress.com/shop/knotted-vol-ii">Knotted: A BDSM Anthology, vol II</a> - <em>Centerpiece</em></li>
                     </ul>
                 </section>
-                <section id="projects" class="carousel-item projects">
+                <section class="carousel-item projects">
                     <h2>Projects</h2>
                     <div class="large">
                         <p>Along with standalone works and story collections, Madison has worked on several writing projects, often with others</p>
@@ -105,7 +105,7 @@
                         <a target="_blank" href="https://adjectivespecies.com"><img alt="[a][s]" src="/assets/img/projects/adjspecies.png" /></a>
                     </div>
                 </section>
-                <section id="recent" class="carousel-item recent">
+                <section class="carousel-item recent">
                     <h2>Recent</h2>
                     <ol class="post-card-box clearfix">
                         {{ range first 6 (where .Site.Pages.ByPublishDate.Reverse ".Params.date" "!=" nil) }}
@@ -129,7 +129,7 @@
                     </ol>
                     <p style="text-align: center"><a href="/post"><b>More...</b></a></p>
                 </section>
-                <section id="more" class="carousel-item more">
+                <section class="carousel-item more">
                     <div class="third">
                         <h2><a href="/categories">Categories</a></h2>
                         <p>Madison has worked on several pieces of various kinds. These are broken down into sensible categories.</p>
diff --git a/static/assets/js/carousel.js b/static/assets/js/carousel.js
index cc0ccd3..483b94a 100644
--- a/static/assets/js/carousel.js
+++ b/static/assets/js/carousel.js
@@ -1,35 +1,40 @@
 function switchTab(e) {
   e.preventDefault();
+  const tab = window.location.hash.substring(1);
 
   // Unselect currently selected item.
-  document
-    .querySelector('.carousel-entry.on').classList.remove('on');
+  try {
+    document
+      .querySelector('.carousel-entry.on').classList.remove('on');
+  } catch(e) {
+    // pass
+  }
 
   // Select the new item.
   document
-    .querySelector(`.carousel-entry.${window.location.hash.substring(1)}`)
+    .querySelector(`.carousel-entry.${tab}`)
     .classList.add('on');
 
   // In case of back button, in some edge cases, scroll the element into view.
-  document.body.scrollTo(0, 0);
   document.querySelector('.carousel').scrollTo(
-    document.querySelector(window.location.hash).offsetLeft, 0);
+    document.querySelector(`.carousel-item.${tab}`).offsetLeft, 0);
+  document.body.scrollTo(0, 0);
 }
 
 function load() {
+  // Add a listener for the location changing if window width supports it.
   if (window.innerWidth >= 960) {
-    // Add a listener for the location changing if window width supports it.
     window.addEventListener('popstate', switchTab);
+    document.querySelector('.carousel nav').style.display = 'block';
   } else {
     window.removeEventListener('popstate', switchTab);
+    document.querySelector('.carousel nav').style.display = 'none';
   }
 }
 
 // If we enter the page with a hash, select the current item.
 window.addEventListener('load', () => {
-  document.querySelector(`.carousel-entry.${window.location.hash.substring(1)}`)
-    .classList.add('on');
-  document.body.scrollTo(0, 0);
+  switchTab({preventDefault: () => {}});
   load();
 });
 window.addEventListener('resize', load);