interaction

_layouts/default.html

@@ -8,7 +8,7 @@
     </main>
     {%- include footer.html -%}
     {% include link-previews.html %}
-    <script src="{{ "/assets/js/d3.v6.min.js" | relative_url }}" defer></script>
-    <script src="{{ "/assets/js/scripts.js" | relative_url }}" defer></script>
+    <script src="{{ "/assets/js/d3.v6.min.js" | relative_url }}" async></script>
+    <script src="{{ "/assets/js/scripts.js" | relative_url }}" async></script>
   </body>
 </html>

_sass/_digital-garden.scss

@@ -13,6 +13,16 @@
   font-family: "Anthony", sans-serif;
 }
 
+// Extended cursors
+
+.grab:hover {
+  cursor: grab;
+}
+
+.grabbing:active {
+  cursor: grabbing;
+}
+
 // Notes Graph
 
 .links path {

assets/js/scripts.js

@@ -166,7 +166,7 @@ if (typeof window.graphData !== 'undefined') {
   const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
   element.setAttribute('width', graphWrapper.getBoundingClientRect().width)
   element.setAttribute('height', window.innerHeight * 0.8)
-  element.classList.add('absolute', 'vh-100')
+  element.classList.add('absolute', 'vh-100', 'grab', 'grabbing')
   graphWrapper.appendChild(element)
 
   const reportWindowSize = () => {