bump some deps and fix some lints

assets/js/src/clipboard.js

@@ -11,20 +11,20 @@ document.querySelectorAll("div.highlight").forEach((highlightDiv) => {
   const button = document.createElement("button");
   button.className = "copy-button";
   button.textContent = defaultText;
-  button.addEventListener("click", () => {
+  button.addEventListener("click", async () => {
     // prevent unintentional double-clicks by unfocusing button
     button.blur();
 
     // actual code element will have class "language-*", even if plaintext
-    if (copy(trimNewlines(highlightDiv.querySelector('code[class^="language-"]').textContent))) {
-      // show a subtle indication of success
-      button.textContent = successText;
+    await copy(trimNewlines(highlightDiv.querySelector('code[class^="language-"]').textContent));
 
-      // reset button to original text after 2 seconds
-      setTimeout(() => {
-        button.textContent = defaultText;
-      }, 2000);
-    }
+    // show a subtle indication of success
+    button.textContent = successText;
+
+    // reset button to original text after 2 seconds
+    setTimeout(() => {
+      button.textContent = defaultText;
+    }, 2000);
   });
 
   // add Hugo's code block to a new wrapper element, and insert the copy button as a sibling to it

assets/sass/components/_content.scss

@@ -33,7 +33,7 @@ div#content {
     line-height: 1.5;
 
     &:hover > a.anchorjs-link {
-      opacity: 100%; // '#' link appears on hover over entire sub-heading line
+      opacity: 1; // '#' link appears on hover over entire sub-heading line
     }
   }
 
@@ -56,7 +56,7 @@ div#content {
     margin-left: 0.25em;
     padding: 0 0.5em 0 0.25em;
     background: none;
-    opacity: 0%;
+    opacity: 0;
     font-weight: 300;
     line-height: 1;
 

assets/sass/components/_header.scss

@@ -60,7 +60,7 @@ header {
         );
 
         img#header-selfie {
-          opacity: 90%;
+          opacity: 0.9;
         }
       }
     }
@@ -121,9 +121,7 @@ header {
             padding: 0;
             width: 1.56em; // 24.33px, don't ask
             height: 1.56em;
-            margin-top: -0.05em;
-            margin-left: 1.4em;
-            margin-right: -0.3em; // weirdness w/ svg ratio
+            margin: -0.075em -0.3em 0 1.4em; // weirdness w/ svg ratio
             cursor: pointer;
 
             // prepare for lightbulb symbol depending on active theme (set in components/_global)
@@ -162,7 +160,7 @@ header {
 
         &:hover {
           img#header-selfie {
-            opacity: 100%;
+            opacity: 1;
           }
         }
       }

assets/sass/pages/_home.scss

@@ -130,11 +130,10 @@ div.layout-home {
   padding-bottom: 0.6em;
 
   h1 {
-    margin: 0 0 0.3em 0;
+    margin: 0 0 0.3em -0.03em; // TODO: why is this indented slightly?
     font-size: 1.8em;
     font-weight: 500;
     letter-spacing: -0.014em;
-    margin-left: -0.03em; // TODO: why is this indented slightly?
 
     img.emoji {
       margin-left: 0.1em; // a little extra social distancing for the hand
@@ -142,11 +141,10 @@ div.layout-home {
   }
 
   h2 {
-    margin: 0.5em 0;
+    margin: 0.5em 0 0.5em -0.03em; // TODO: why is this indented slightly?
     font-size: 1.35em;
     font-weight: 400;
     letter-spacing: -0.022em;
-    margin-left: -0.03em; // TODO: why is this indented slightly?
     line-height: 1.4;
   }
 

assets/sass/pages/_single.scss

@@ -94,9 +94,7 @@ div.layout-single {
   }
 
   h1.title {
-    margin-top: 0.3em;
-    margin-bottom: 0.5em;
-    margin-left: -0.03em; // TODO: why is this indented slightly?
+    margin: 0.3em 0 0.5em -0.03em; // TODO: why is this indented slightly?
     font-size: 2.1em;
     line-height: 1.3;
     font-weight: 700;