Added better footnoteref animations

TODO.md

@@ -15,7 +15,7 @@
 - [x] add custom slug to all pages
 - [x] test `postcss-easing-gradients` with Scss loaded in `/src`
 - [ ] add md table of contents
-- [ ] new start page: https://labs.semplice.com/s5-vertical-grid
+- [x] new start page: https://labs.semplice.com/s5-vertical-grid
 - [x] test purgecss with classes from Markdown files
 - [ ] add NOW deployment
   - [ ] Setup Nameserver

content/projects/__demo__/index.md

@@ -165,6 +165,17 @@ ModuleNotFoundError: No module named 'flask'
 > cleaner yet i see a bird i stare at it i meow at it i do a <b>wiggle come
 > here, eat a plant, kill</b>
 
+<div class="container container--small">
+  <blockquote>
+    <p>
+      Sleep in the bathroom sink allways wanting food. Rub whiskers on bare skin act innocent intently sniff hand intrigued by the shower.
+    </p>
+    <footer>
+      Marvin Heilemann
+    </footer>
+  </blockquote>
+</div>
+
 ## Images
 
 ![Caption could be here](img-01.jpg)

src/layouts/Article.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { scrollTo } from '../utils/animate'
+import { updateLocationHash, getDocumentHeight } from '../utils/helper'
 import { prefersReducedMotion } from '../utils/accessibility'
 import Lightbox from '../scripts/lightbox'
 
@@ -10,30 +11,64 @@ class Article extends React.Component {
   componentDidMount() {
     Lightbox.init()
 
-    this.scrollElements = document.querySelectorAll(
-      '.footnote-backref, .footnote-ref, .toc a'
-    )
-    this.scrollElements.forEach(ref => {
-      ref.addEventListener('click', this.handleClick)
-    })
+    // TODO: put article blocks into separate components
+    if (!prefersReducedMotion()) {
+      this.scrollElements = document.querySelectorAll(
+        '.footnote-backref, .footnote-ref, .toc a'
+      )
+      this.scrollElements.forEach((ref) => {
+        ref.addEventListener('click', this.handleClick)
+      })
+    }
   }
 
   componentWillUnmount() {
     Lightbox.destroy()
 
-    this.scrollElements.forEach(ref => {
-      ref.removeEventListener('click', this.handleClick)
-    })
+    if (this.scrollElements.length > 0) {
+      this.scrollElements.forEach((ref) => {
+        ref.removeEventListener('click', this.handleClick)
+      })
+    }
   }
 
-  handleClick(event) {
-    if (prefersReducedMotion()) {
-      return
-    }
+  handleClick = (event) => {
     event.preventDefault()
     const target = document.getElementById(event.target.hash.substr(1))
     if (target) {
-      scrollTo(target)
+      const offsetPosition = scrollTo(target)
+
+      // highlight target element when reached
+      function onScrollEvent() {
+        if (
+          window.scrollY === offsetPosition || // reached element
+          window.scrollY === getDocumentHeight() - window.innerHeight || // reached document end
+          window.scrollY === 0 // reached document start
+        ) {
+          removeListeners()
+          updateLocationHash(target.id)
+
+          target.classList.add('highlight')
+          setTimeout(() => {
+            target.classList.remove('highlight')
+          }, 2400)
+        }
+      }
+
+      // remove event listeners when user interrupts `scrollTo` function
+      function detectScrollInterrupt() {
+        removeListeners()
+      }
+
+      function removeListeners() {
+        window.removeEventListener('scroll', onScrollEvent)
+        window.removeEventListener('wheel', detectScrollInterrupt)
+        window.removeEventListener('keyup', detectScrollInterrupt)
+      }
+
+      window.addEventListener('scroll', onScrollEvent)
+      window.addEventListener('wheel', detectScrollInterrupt)
+      window.addEventListener('keyup', detectScrollInterrupt)
     }
   }
 
@@ -48,7 +83,6 @@ class Article extends React.Component {
       <>
         <article
           id="article"
-          // className="container container--small"
           dangerouslySetInnerHTML={{
             __html: this.props.html || fallbackContent,
           }}

src/styles/_animations.scss

@@ -0,0 +1,28 @@
+// Pulsation
+@keyframes pulse {
+  0% {
+    transform: scale(0.3);
+  }
+  80%,
+  100% {
+    opacity: 0;
+  }
+}
+
+// // Pop-out effect
+// @keyframes seeMe {
+//   0% {
+//     transform: scale(1);
+//   }
+//   70% {
+//     transform: scale(2);
+//   }
+//   100% {
+//     transform: scale(1);
+//   }
+// }
+
+// .seeMe {
+//   // transition: transform 300ms ease-in-out;
+//   animation: seeMe 600ms cubic-bezier(0, 0.63, 0.49, 1.7);
+// }

src/styles/_base.scss

@@ -66,7 +66,7 @@ article {
   form,
   figure,
   table,
-  blockquote,
+  fieldset,
   p,
   ul,
   ol,
@@ -126,4 +126,41 @@ article {
       padding: var(--spacing-md);
     }
   }
+
+  blockquote {
+    position: relative;
+    margin: 0 0 var(--content-margin) 0;
+    padding: var(--spacing-xxl) var(--spacing-xxl)
+      calc(var(--spacing-xxl) - 5px);
+    background: var(--color-10);
+    font-family: var(--font-serif);
+    z-index: 0;
+    text-align: center;
+
+    &::before {
+      content: '"';
+      position: absolute;
+      top: 0px;
+      left: 20px;
+      font-size: 200px;
+      font-weight: var(--font-black);
+      font-family: var(--font-serif);
+      line-height: 1;
+      z-index: -1;
+      opacity: 0.1;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+
+    footer {
+      margin-top: var(--spacing-lg);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-size: var(--text-sm);
+      font-weight: var(--font-semi-bold);
+      font-family: var(--font-sans);
+    }
+  }
 }

src/styles/app.scss

@@ -7,6 +7,7 @@
 @import 'mixins';
 @import 'reset';
 @import 'base';
+@import 'animations';
 
 // ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
 // Themes
@@ -36,7 +37,6 @@
 // ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
 // Components
 
-@import 'components/animation';
 @import 'components/backdrop';
 @import 'components/button';
 @import 'components/code';

src/styles/components/_footnote.scss

@@ -15,7 +15,18 @@ article {
 }
 
 .footnotes {
+  @extend .container;
+  @extend .container--small;
+
   a {
     text-decoration: none;
   }
+
+  li {
+    transition: background 240ms linear;
+  }
+
+  .highlight {
+    background: var(--color-10);
+  }
 }

src/styles/components/_list.scss

@@ -41,19 +41,6 @@ article {
         justify-content: center;
         opacity: 0.6;
       }
-
-      // &:nth-child(1n)::before {
-      //   content: '♡';
-      // }
-      // &:nth-child(2n)::before {
-      //   content: '♢';
-      // }
-      // &:nth-child(3n)::before {
-      //   content: '♤';
-      // }
-      // &:nth-child(4n)::before {
-      //   content: '♧';
-      // }
     }
   }
 
@@ -66,7 +53,7 @@ article {
       &::before {
         content: counter(counter) '.';
         left: 0;
-        top: 8px;
+        top: 7px;
         width: 13px;
         height: 13px;
         font-size: var(--text-sm);

src/utils/animate.js

@@ -1,28 +1,22 @@
-import { updateLocationHash } from './helper'
-
+/**
+ * Scroll to a HTML element by target.
+ *
+ * @param {HTMLElement} target HTML element to scroll to
+ *
+ * @returns {number} Y position of target element
+ */
 export function scrollTo(target) {
   const offset = 50
 
-  target.classList.remove('seeMe')
   const scrollY = window.scrollY || window.pageYOffset
   const headerHeight = document.getElementById('header').offsetHeight
   const elementPosition = target.getBoundingClientRect().top + scrollY
   const offsetPosition = Math.round(elementPosition - headerHeight - offset)
 
-  window.addEventListener('scroll', function onScrollEvent() {
-    if (
-      window.scrollY === offsetPosition || // reached element
-      window.scrollY === document.body.scrollHeight - window.innerHeight || // reached document end
-      window.scrollY === 0 // reached document start
-    ) {
-      window.removeEventListener('scroll', onScrollEvent)
-      target.classList.add('seeMe')
-      updateLocationHash(target.id)
-    }
-  })
-
   window.scrollTo({
     top: offsetPosition,
     behavior: 'smooth',
   })
+
+  return offsetPosition
 }

src/utils/helper.js

@@ -21,6 +21,24 @@ export function getRandomDate(
   return dayjs(+start + Math.random() * (end - start))
 }
 
+/**
+ * Get documents real height.
+ */
+export function getDocumentHeight() {
+  const body = document.body
+  const html = document.documentElement
+
+  let height = Math.max(
+    body.scrollHeight,
+    body.offsetHeight,
+    html.clientHeight,
+    html.scrollHeight,
+    html.offsetHeight
+  )
+
+  return height
+}
+
 /**
  * Returns a random number between min (inclusive) and max (exclusive)
  *