loading

app/js/craft-gl.js

@@ -298,7 +298,7 @@ class Craft {
 
   run() {
     if (!WEBGL.isWebGLAvailable()) {
-      this.error();
+      this.error('webgl');
       return;
     }
 
@@ -426,7 +426,7 @@ class Craft {
       this.blocks.clear();
     });
     this.socket.on("connect_error", () => {
-      this.error();
+      this.error('socket');
     });
   }
 

app/js/home.js

@@ -1,5 +1,5 @@
 import "./common";
-import Craft from './craft-gl';
+import Craft from "./craft-gl";
 import CraftUI from "./craft-ui";
 
 $(function() {
@@ -13,36 +13,49 @@ $(function() {
   });
 });
 
-let homeEnabled = true;
 const homenav = $("#home-nav");
 const blognav = $("#blog-nav");
 
-if (window.location.hash) {
-  homenav.hide();
+let homeEnabled = true;
+
+if (!window.WEBGL.isWebGLAvailable()) {
+  homeEnabled = false;
+  $("#craft").hide();
+  $("#craft-nav").hide();
+  switchMode("blog");
 } else {
-  blognav.hide();
+  $(() => {
+    window.craft = new Craft($("#craft-gl"));
+    window.craft.error = e => {
+      console.log("Craft crashed :(", e);
+      homeEnabled = false;
+      $("#craft").hide();
+      $("#craft-nav").hide();
+      switchMode("blog");
+    };
+    window.craft.run();
+    CraftUI("craft-ui");
+  });
+  switchMode("home");
 }
 
-$(() => {
-  window.craft = new Craft($("#craft-gl"));
-  window.craft.error = () => {
-    console.log('Craft crashed :(');
-    homeEnabled = false;
-    switchMode("blog");
-    $("#craft").hide();
-    $("#craft-nav").hide();
-  };
-  window.craft.run()
-  CraftUI('craft-ui')
-});
+if (window.location.hash) {
+  switchMode("blog");
+} else {
+  switchMode("home");
+}
 
 function switchMode(mode) {
+  if (!homeEnabled) {
+    mode = "blog";
+  }
+
   if (mode == "blog") {
-    blognav.css('display', 'flex');
+    blognav.css("display", "flex");
     homenav.hide();
     $('nav > a[href="#blog"]').addClass("active");
-  } else if (mode == "home" && homeEnabled) {
-    homenav.css('display', 'flex');
+  } else if (mode == "home") {
+    homenav.css("display", "flex");
     blognav.hide();
     $('nav > a[href="#blog"]').removeClass("active");
   }

layouts/index.html

@@ -4,6 +4,7 @@
 
     {{ if not .Paginator.HasPrev }}
     <div id="craft">
+        <img id="craft-loading" src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwb29reWdob3N0IiB3aWR0aD0iMjAwcHgiICBoZWlnaHQ9IjIwMHB4IiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBzdHlsZT0iYmFja2dyb3VuZDogbm9uZTsiPiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwIDUwKSI+CiAgICAgIDxnIHRyYW5zZm9ybT0ic2NhbGUoMSAtMSkiPgogICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTAgLTUwKSI+CiAgICAgIDxnIHRyYW5zZm9ybT0icm90YXRlKDIzOS44MTkgNTAgNTApIj4KICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSItMiA1MCA1MDszNTkgNTAgNTAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjUgMCAwLjUgMSI+PC9hbmltYXRlVHJhbnNmb3JtPgogICAgICAgIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjM5Ljg5MSIgc3Ryb2tlPSIjZjJmMmYyIiBzdHJva2Utd2lkdGg9IjE0LjQiIGZpbGw9Im5vbmUiIHN0cm9rZS1kYXNoYXJyYXk9IjAgMzAwIj4KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNoYXJyYXkiIHZhbHVlcz0iMTAgMzAwOzYwLjE1NDIxMDgyMTI4ODIxIDMwMDs0IDMwMCIga2V5VGltZXM9IjA7MC41OzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBjYWxjTW9kZT0ibGluZWFyIiBrZXlTcGxpbmVzPSIwIDEgMSAwOzAgMSAxIDAiPjwvYW5pbWF0ZT4KICAgICAgICA8L2NpcmNsZT4KICAgICAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzOS44OTEiIHN0cm9rZT0iI2YyZjJmMiIgc3Ryb2tlLXdpZHRoPSI3LjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1kYXNoYXJyYXk9IjAgMzAwIj4KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNoYXJyYXkiIHZhbHVlcz0iMTAgMzAwOzYwLjE1NDIxMDgyMTI4ODIxIDMwMDs0IDMwMCIga2V5VGltZXM9IjA7MC41OzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBjYWxjTW9kZT0ibGluZWFyIiBrZXlTcGxpbmVzPSIwIDEgMSAwOzAgMSAxIDAiPjwvYW5pbWF0ZT4KICAgICAgICA8L2NpcmNsZT4KICAgICAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzMi43NzEiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBzdHJva2UtZGFzaGFycmF5PSIwIDMwMCI+CiAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2UtZGFzaGFycmF5IiB2YWx1ZXM9IjEwIDMwMDs0OS40MTc1MDM3NjgzNzk3MyAzMDA7NCAzMDAiIGtleVRpbWVzPSIwOzAuNTsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgY2FsY01vZGU9ImxpbmVhciIga2V5U3BsaW5lcz0iMCAxIDEgMDswIDEgMSAwIj48L2FuaW1hdGU+CiAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDcuMTcxIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWRhc2hhcnJheT0iMCAzMDAiPgogICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ic3Ryb2tlLWRhc2hhcnJheSIgdmFsdWVzPSIxMCAzMDA7NzIuMDM2OTcwODc0MjI2MjQgMzAwOzQgMzAwIiBrZXlUaW1lcz0iMDswLjU7MSIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGNhbGNNb2RlPSJsaW5lYXIiIGtleVNwbGluZXM9IjAgMSAxIDA7MCAxIDEgMCI+PC9hbmltYXRlPgogICAgICAgIDwvY2lyY2xlPgogICAgICA8L2c+PC9nPiA8L2c+PC9nPgogICAgICA8ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMTguODUxIDUwIDUwKSI+CiAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHZhbHVlcz0iMzYwIDUwIDUwOzAgNTAgNTAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjUgMCAwLjUgMSI+PC9hbmltYXRlVHJhbnNmb3JtPgogICAgICAgIDxwYXRoIGZpbGw9IiNmMmYyZjIiIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTgyLjgsNTBjMCwwLjksMC43LDIuNiwxLjgsMy43YzAuMywwLjMsMC44LDAuNiwxLDFjMC4yLDAuNSwwLjIsMS0wLjEsMS41Yy0wLjMsMC41LTAuOCwwLjktMS4xLDEuMyBjLTAuNSwwLjUtMC44LDEuMS0wLjksMS43Yy0wLjIsMC42LTAuMiwxLjIsMC4yLDEuOGMwLjYsMSwyLDEuNywyLDIuOGMtMC4xLDAuOS0xLDEuNS0xLjQsMi4yYy0wLjMsMC42LTAuNCwxLjItMC4yLDEuOSBjMC4yLDAuNywwLjUsMS4zLDEsMS44YzEsMSwyLjQsMS40LDMuOSwxLjVjLTEuMS0xLTEuMi0yLjctMC41LTRjMC43LTEuMiwyLjItMS45LDIuNS0zLjNjMC4yLTEuMi0wLjQtMi41LDAuMS0zLjYgYzAuNy0xLjUsMy4zLTEuMyw0LjEtMi45YzAuMy0wLjksMC0xLjksMC4zLTIuOGMwLjItMC43LDAuNi0xLjEsMS0xLjVjMC40LTAuNCwwLjgtMC45LDAuOS0xLjZjMC4xLTAuNSwwLjEtMC45LDAuMS0xLjYiPjwvcGF0aD4KCiAgICAgIDwvZz4KICAgICAgPGcgdHJhbnNmb3JtPSJyb3RhdGUoNjIuNDg5NCA1MCA1MCkiPgogICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiB2YWx1ZXM9IjM2MCA1MCA1MDswIDUwIDUwIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgY2FsY01vZGU9InNwbGluZSIga2V5U3BsaW5lcz0iMC41IDAgMC41IDEiIGJlZ2luPSItMC4xcyI+PC9hbmltYXRlVHJhbnNmb3JtPgoKICAgICAgICA8cGF0aCBmaWxsPSIjZjJmMmYyIiBzdHJva2U9IiMwMDAwMDAiIGQ9Ik04Mi44LDUwYy0wLjEtMy4xLTAuNC02LjItMS4zLTkuMmMtMC4xLTAuNC0wLjItMC44LTAuMi0xLjJjLTAuMS0wLjQtMC4xLTAuOCwwLTEuMmMwLjEtMC44LDAuMy0xLjYsMC43LTIuNCBjMC44LTEuNSwyLTMsMy44LTMuOWwwLDBjMS44LTAuOSwzLjgtMSw1LjYtMC4yYzAuOSwwLjQsMS43LDEsMi40LDEuOGMwLjMsMC40LDAuNywwLjgsMSwxLjNjMC4yLDAuNSwwLjQsMSwwLjYsMS42IGMxLjQsNC4zLDEuOSw4LjgsMS45LDEzLjMiPjwvcGF0aD4KICAgICAgICA8cGF0aCBmaWxsPSIjZmY3YmFjIiBkPSJNOTMuNiwzNS41YzAuMSwwLjQtMC4zLDAuOC0xLDFjLTAuNiwwLjItMS4yLDAuMS0xLjMtMC4zYy0wLjEtMC4zLDAuMy0wLjgsMC45LTFTOTMuNSwzNS4xLDkzLjYsMzUuNXoiPjwvcGF0aD4KICAgICAgICA8cGF0aCBmaWxsPSIjZmY3YmFjIiBkPSJNODIuMywzOS4zYzAuMSwwLjMsMC42LDAuMywxLjMsMC4xYzAuNi0wLjIsMS4xLTAuNiwxLTAuOWMtMC4xLTAuMy0wLjctMC4zLTEuMy0wLjEgQzgyLjYsMzguNiw4Mi4yLDM5LDgyLjMsMzkuM3oiPjwvcGF0aD4KICAgICAgICA8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNODguOSwzNy41YzAuMSwwLjMtMC4yLDAuNy0wLjcsMC44Yy0wLjUsMC4xLTAuOSwwLTEtMC4zYy0wLjEtMC4zLDAuMi0wLjcsMC43LTAuOEM4OC40LDM3LDg4LjksMzcuMiw4OC45LDM3LjV6Ij48L3BhdGg+CiAgICAgICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBkPSJNODYuMiwzOS42YzAuMiwwLjYsMC44LDAuOSwxLjQsMC43YzAuNi0wLjIsMC45LTAuOSwwLjYtMi4xYzAuMywxLjIsMSwxLjcsMS42LDEuNWMwLjYtMC4yLDEtMC44LDAuOC0xLjQiPjwvcGF0aD4KICAgICAgICA8cGF0aCBmaWxsPSIjZjJmMmYyIiBzdHJva2U9IiMwMDAwMDAiIGQ9Ik04Mi41LDQ1LjljMCwwLjUsMC4xLDAuOSwwLjUsMS4zYzAuNCwwLjQsMSwwLjYsMS42LDAuM2MwLjMtMC4xLDAuNS0wLjMsMC43LTAuNGMwLjUtMC4yLDEuMiwwLjEsMS41LDAuNiBjMC4zLDAuNSwwLjMsMSwwLjMsMS42YzAuNi0wLjYsMS0xLjQsMS4zLTIuMmMwLjItMC43LDAuNC0xLjUsMC4yLTIuMmMtMC4yLTAuNy0wLjgtMS4zLTEuNS0xLjVjLTAuOS0wLjItMS44LDAuMi0yLjUsMC43Ij48L3BhdGg+CiAgICAgICAgPHBhdGggZmlsbD0iI2YyZjJmMiIgc3Ryb2tlPSIjMDAwMDAwIiBkPSJNOTYuOCw0NC4xYzAuMSwwLjcsMC4xLDEuNC0wLjIsMmMtMC4zLDAuNi0wLjksMS0xLjUsMC43Yy0wLjMtMC4xLTAuNS0wLjQtMC44LTAuNGMtMC42LTAuMi0xLjIsMC4zLTEuNCwwLjkgYy0wLjIsMC42LTAuMSwxLjItMC4xLDEuOWMtMC42LTAuNy0xLjItMS41LTEuNi0yLjNjLTAuNC0wLjctMC42LTEuNS0wLjYtMi4yYzAtMC44LDAuMy0xLjYsMC45LTJjMC43LTAuNSwxLjctMC41LDIuNi0wLjEiPjwvcGF0aD4KICAgICAgICA8cGF0aCBmaWxsPSIjYjViNWI1IiBkPSJNODUuMywzNy4yYzAuMSwwLjMsMS4yLDAuMiwyLjUtMC4zYzEuMy0wLjQsMi4yLTEuMSwyLjEtMS40Yy0wLjEtMC4zLTEuMi0wLjItMi41LDAuMyBDODYuMSwzNi4zLDg1LjIsMzYuOSw4NS4zLDM3LjJ6Ij48L3BhdGg+CiAgICAgICAgPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTkxLjUsMzVjMC4zLDAuNywwLDEuNC0wLjcsMS42Yy0wLjYsMC4yLTEuMy0wLjEtMS42LTAuOGMtMC4yLTAuNiwwLjEtMS4zLDAuNy0xLjZDOTAuNiwzMy45LDkxLjMsMzQuMyw5MS41LDM1eiI+PC9wYXRoPgogICAgICAgIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik04NS45LDM3YzAuMiwwLjYtMC4xLDEuMi0wLjcsMS40Yy0wLjYsMC4yLTEuMy0wLjEtMS41LTAuNmMtMC4yLTAuNSwwLjEtMS4yLDAuNy0xLjRDODUsMzYuMiw4NS43LDM2LjQsODUuOSwzN3oiPjwvcGF0aD4KICAgICAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIGQ9Ik04OS43LDI5YzAuNCwwLjctMS40LDIuMi0zLjgsMy40Yy0yLjUsMS4yLTQuNywxLjctNC45LDEuMmMtMC4zLTAuNSwxLjQtMiwzLjgtMy40Uzg5LjQsMjguNCw4OS43LDI5eiI+PC9wYXRoPgoKICAgICAgPC9nPjwvc3ZnPg=="></img>
         <div id="craft-gl" tabindex="0"></div>
         <div id="craft-ui"></div>
         <a href="#blog" class="scroll-down"></a>

layouts/partials/nav.html

@@ -9,7 +9,7 @@
   <a href='/about'>{{ with .Site.Params.about }}{{ . }}{{ else }}About{{ end }}</a>
 </nav>
 {{ end }}
-<nav id="blog-nav" class="main-nav" >
+<nav id="blog-nav" class="main-nav">
   {{ if .IsHome }}
     <a href='#craft' class="nav-logo hide-on-mobile"> {{ with .Site.Title }}{{ . }}{{ else }}Logo{{ end }}</a>
 

static/css/home.css

@@ -1,6 +1,13 @@
 #craft {
-  height:100vh;
-  background-color: rgb(240,240,240);
+  height: 100vh;
+}
+
+#craft-loading {
+  position: absolute;
+  width: 10%;
+  margin-left: -5%;
+  height: 100vh;
+  left: 50%;
 }
 
 #craft-gl {
@@ -10,6 +17,7 @@
   right: 0px;
   bottom: 0px;
   user-select: none;
+  /* background-color: rgb(240, 240, 240); */
 }
 
 #craft-gl:focus {
@@ -36,7 +44,7 @@
 }
 
 .profile h2 {
-  color: #444
+  color: #444;
 }
 
 #post-list li > a {
@@ -67,33 +75,35 @@
 
 .scroll-down {
   opacity: 1;
-  transition: all .5s ease-in 3s;
+  transition: all 0.5s ease-in 3s;
 }
 
 .scroll-down {
   position: absolute;
   bottom: 30px;
   left: 50%;
-  margin-left: -16px;
+  margin-left: -1.5rem;
   display: block;
-  width: 3em;
-  height: 3em;
+  width: 3rem;
+  height: 3rem;
   border: 2px solid #555;
   background-size: 14px auto;
   border-radius: 50%;
   z-index: 2;
   animation: bounce 2s infinite;
-  transition: all .2s ease-in;
+  transition: all 0.2s ease-in;
 }
 
 .scroll-down:before {
   position: absolute;
-  top: calc(50% - 8px);
-  left: calc(50% - 6px);
+  left: 50%;
+  bottom: 30px;
+  margin-left: -0.5rem;
+  margin-bottom: -0.7rem;
   transform: rotate(-45deg);
   display: block;
-  width: 12px;
-  height: 12px;
+  width: 1rem;
+  height: 1rem;
   content: "";
   border: 2px solid #555;
   border-width: 0px 0 2px 2px;