Merge pull request #124 from BenJetson/develop

Deploy to production.

Author: BenJetson

.editorconfig

@@ -33,3 +33,8 @@ indent_size = 2
 [{*.css,*.scss}]
 indent_style = space
 indent_size = 2
+
+[*.js]
+block_comment_start = /*
+block_comment_end = */
+block_comment = *

.prettierignore

@@ -5,3 +5,4 @@ _site
 _sass/vendor
 runtime.txt
 css/main.scss
+*.gen.md

404.html

@@ -3,7 +3,7 @@
 title: 404
 ---
 
-<div class="bg-gradient-danger notfound-container">
+<div class="bg-danger bg-gradient notfound-container">
   <div class="container pb-3">
     <div class="py-4 text-light">
       <h1 class="mb-1">404</h1>

Gemfile.lock

@@ -27,20 +27,24 @@ GEM
       ffi (>= 1.15.0)
     eventmachine (1.2.7)
     execjs (2.8.1)
-    faraday (1.4.1)
+    faraday (1.4.2)
+      faraday-em_http (~> 1.0)
+      faraday-em_synchrony (~> 1.0)
       faraday-excon (~> 1.1)
       faraday-net_http (~> 1.0)
       faraday-net_http_persistent (~> 1.1)
       multipart-post (>= 1.2, < 3)
       ruby2_keywords (>= 0.0.4)
+    faraday-em_http (1.0.0)
+    faraday-em_synchrony (1.0.0)
     faraday-excon (1.1.0)
     faraday-net_http (1.0.1)
     faraday-net_http_persistent (1.1.0)
-    ffi (1.15.0)
+    ffi (1.15.1)
     forwardable-extended (2.6.0)
     gemoji (3.0.1)
-    github-pages (214)
-      github-pages-health-check (= 1.17.0)
+    github-pages (215)
+      github-pages-health-check (= 1.17.2)
       jekyll (= 3.9.0)
       jekyll-avatar (= 0.7.0)
       jekyll-coffeescript (= 1.1.1)
@@ -83,7 +87,7 @@ GEM
       nokogiri (>= 1.10.4, < 2.0)
       rouge (= 3.26.0)
       terminal-table (~> 1.4)
-    github-pages-health-check (1.17.0)
+    github-pages-health-check (1.17.2)
       addressable (~> 2.3)
       dnsruby (~> 1.60)
       octokit (~> 4.0)
@@ -222,7 +226,7 @@ GEM
     minitest (5.14.4)
     multi_json (1.15.0)
     multipart-post (2.1.1)
-    nokogiri (1.11.4)
+    nokogiri (1.11.5)
       mini_portile2 (~> 2.5.0)
       racc (~> 1.4)
     octokit (4.21.0)

_includes/footer.html

@@ -24,7 +24,26 @@ <h5>Follow me!</h5>
       </div>
       <div class="col-sm-12 col-md-3 d-print-none">
         <h5>Pageviews</h5>
-        <div id="counter"></div>
+        <div id="counter">
+          <div class="digits placeholder">
+            <div class="digit" aria-hidden="true">
+              <span class="current">.</span>
+            </div>
+            <div class="digit" aria-hidden="true">
+              <span class="current">.</span>
+            </div>
+            <div class="digit" aria-hidden="true">
+              <span class="current">.</span>
+            </div>
+            <div class="digit" aria-hidden="true">
+              <span class="current">.</span>
+            </div>
+            <div class="digit" aria-hidden="true">
+              <span class="current">.</span>
+            </div>
+          </div>
+          <p class="visually-hidden">Pageview count is still loading.</p>
+        </div>
       </div>
     </div>
     <div class="row pt-4 pb-3">

_includes/scripts.html

@@ -19,10 +19,9 @@
 <script async defer src="https://www.google.com/recaptcha/api.js"></script>
 {% endif %}
 <script>
-  window.counter = {
+  window.counterInfo = {
     namespace: "{{site.counter.namespace}}",
     key: "{{site.counter.key}}",
-    value: null,
   };
 </script>
 <script async defer src="{{site.url}}/js/counts.js"></script>

_sass/custom/styles/_footer.scss

@@ -22,30 +22,104 @@ footer {
   }
 
   #counter {
-    margin: 1em 0;
+    font-family: $font-family-monospace;
+    font-size: 28px;
+    line-height: 1;
 
-    span.digit {
-      background-color: $black;
-      font-family: monospace;
-      font-size: 28px;
-      font-style: italic;
+    text-align: left;
+
+    margin: 1rem 0;
+
+    div.digits {
+      display: flex;
+      flex-direction: row;
+    }
+
+    div.digit {
+      $digit-numeral-height: 1em;
+      $digit-vertical-padding: 0.5rem;
+      $digit-border-size: 2px;
 
-      border: 2px solid $gray-700;
+      background-color: $black;
+      border: $digit-border-size solid $gray-800;
       border-radius: 7px;
 
       position: relative;
 
-      padding: 0.25em;
-      padding-right: 0.35em;
-      margin-right: 1px;
+      padding: $digit-vertical-padding 0.4rem;
+
+      margin-right: 1px; // to separate the digits.
+
+      // prettier-ignore
+      height: calc(
+        #{$digit-numeral-height} +
+        (#{$digit-vertical-padding} * 2) +
+        (#{$digit-border-size} * 2)
+      );
+      width: calc(
+        5px + 1em
+      ); // approximately the width of one monospace character.
+
+      $flip-opacity: 0.3;
+      $flip-speed: 0.05s;
+      $flip-distance: 10px;
+
+      span.current {
+        animation: none;
+      }
+
+      span.previous {
+        animation: slideAway ($flip-speed / 2);
+      }
+
+      span.next {
+        animation: slideInto ($flip-speed / 2);
+      }
+
+      span.previous,
+      span.next {
+        position: absolute;
+      }
+
+      &.mutating span {
+        opacity: $flip-opacity;
+      }
+
+      @keyframes slideAway {
+        0% {
+          opacity: $flip-opacity;
+          bottom: 0;
+        }
+
+        100% {
+          opacity: 0;
+          bottom: $flip-distance;
+        }
+      }
+
+      @keyframes slideInto {
+        0% {
+          opacity: 0;
+          top: $flip-distance;
+        }
+
+        100% {
+          opacity: $flip-opacity;
+          top: 0;
+        }
+      }
     }
 
-    span.digit::before {
-      content: "";
+    // This renders the little border line in the center of the digit.
+    div.digit::before {
+      content: ""; // must be present for this to render.
+
       position: absolute;
-      z-index: 0;
       bottom: 50%;
       left: 0;
+
+      z-index: 0;
+
       border-bottom: 2px solid rgba($gray-600, 50%);
       width: 100%;
     }

_sass/custom/styles/_notfound.scss

@@ -13,4 +13,6 @@
 
 .notfound-container h1 {
   font-size: 30vmin;
+  font-family: $font-family-monospace;
+  font-weight: bolder;
 }

_sass/custom/styles/_preview.scss

@@ -0,0 +1,20 @@
+//
+// _preview.scss
+//
+// Styles that fix that stupid Deploy Preview box that Netlify injects
+// without user consent or opt-in.
+//
+
+div[data-netlify-deploy-id] {
+  display: none !important;
+  visibility: hidden !important;
+
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+
+  height: 0 !important;
+  width: 0 !important;
+
+  overflow: hidden !important;
+}

_sass/custom/styles/styles.scss

@@ -14,6 +14,7 @@
 @import "layout";
 @import "notfound";
 @import "octicons";
+@import "preview";
 @import "projects";
 @import "usercontent";
 @import "utilities";