Provide 'Back to top' functionality

4 files changed, 103 insertions, 20 deletions

diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss
index 085bb6f..82cfcf4 100644
--- a/assets/sass/_customize.scss
+++ b/assets/sass/_customize.scss
@@ -163,7 +163,7 @@ ul.pager {
     color: #fff;
     text-decoration: none;
 
-    @include border-radius (0 4px 4px 0);
+    @include border-radius(0 4px 4px 0);
 
     &:before {
       content: "";
@@ -188,8 +188,8 @@ ul.pager {
       height: 4px;
       background: #fff;
 
-      @include border-radius (2px);
-      @include box-shadow (-1px -1px 2px $text-color);
+      @include border-radius(2px);
+      @include box-shadow(-1px -1px 2px $text-color);
     }
 
     &:hover {
@@ -211,8 +211,8 @@ a.external {
     margin-left: 4px;
     width: 10px;
 
-    @include mask-size (cover);
-    @include mask-image (url("/img/external-link.svg"));
+    @include mask-size(cover);
+    @include mask-image(url("/img/external-link.svg"));
   }
 }
 
@@ -238,3 +238,55 @@ ul.tags-cloud {
     @include transition(0.3s);
   }
 }
+
+#top-of-site-anchor {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  top: 500px;
+  left: 0;
+}
+
+@media (max-width: 800px){
+  #top-of-site-anchor {
+    top: 46px;
+  }
+}
+
+.top-of-site-link {
+  visibility: hidden;
+  opacity: 0;
+  text-decoration: none;
+  position: fixed;
+  bottom: 1.2rem;
+  right: 1.5rem;
+  z-index: 99;
+
+  @include transition(.2s);
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  svg {
+    @include filter(drop-shadow(0 2px 5px rgba(0, 0, 0, .3)));
+  }
+}
+
+.top-of-site-link[data-visible=true] {
+  opacity: 1;
+  visibility: visible;
+}
+
+.screen-reader-text {
+  position: absolute;
+  word-wrap: normal;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+
+  @include clip-path(inset(50%));
+}
diff --git a/assets/sass/_ed.scss b/assets/sass/_ed.scss
index 2f26ad1..b0870dc 100644
--- a/assets/sass/_ed.scss
+++ b/assets/sass/_ed.scss
@@ -25,7 +25,7 @@
 */
 
 * {
-  @include box-sizing (border-box);
+  @include box-sizing(border-box);
 }
 
 html,
diff --git a/assets/sass/_form-elements.scss b/assets/sass/_form-elements.scss
index 5948213..cbb6c08 100644
--- a/assets/sass/_form-elements.scss
+++ b/assets/sass/_form-elements.scss
@@ -24,7 +24,7 @@
   }
 
   &:focus {
-    @include box-shadow (none);
+    @include box-shadow(none);
     outline: none;
     border-color: #5e5e5e;
   }
@@ -73,13 +73,13 @@ form textarea:-moz-submit-invalid,
 form input[type="text"]:-moz-submit-invalid,
 form select:-moz-submit-invalid,
 form input:-moz-ui-invalid {
-  @include box-shadow (0 0 2px 1px #D64541!important);
+  @include box-shadow(0 0 2px 1px #D64541!important);
 }
 
 .form-item-error {
   .form-input,
   .form-textarea {
-    @include box-shadow (0 0 2px 1px #D64541!important);
+    @include box-shadow(0 0 2px 1px #D64541!important);
   }
 }
 
diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
index ae030d4..95e63e4 100644
--- a/assets/sass/_mixins.scss
+++ b/assets/sass/_mixins.scss
@@ -122,7 +122,7 @@ $break-desktop: 1600px;
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Sizing
 // Sets how the total width and height of an element is calculated.
 //
-// Usage: @include box-sizing (border-box);
+// Usage: @include box-sizing(border-box);
 
 @mixin box-sizing ($value) {
   -webkit-box-sizing: $value;
@@ -133,7 +133,7 @@ $break-desktop: 1600px;
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Shadow
 //
-// Usage: @include box-shadow (0 0 2px 1px #e21a23!important);
+// Usage: @include box-shadow(0 0 2px 1px #e21a23!important);
 
 @mixin box-shadow ($args...) {
   -webkit-box-shadow: $args;
@@ -143,7 +143,7 @@ $break-desktop: 1600px;
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Border Radius
 //
-// Usage: @include border-radius (10% 30% 50% 70%);
+// Usage: @include border-radius(10% 30% 50% 70%);
 
 @mixin border-radius ($args...) {
   -webkit-border-radius: $args;
@@ -155,7 +155,7 @@ $break-desktop: 1600px;
 // Sets whether flex items are forced onto one line or can wrap onto
 // multiple lines.
 //
-// Usage: @include flex-wrap (wrap);
+// Usage: @include flex-wrap(wrap);
 
 @mixin flex-wrap ($value) {
   -webkit-flex-wrap: $value;
@@ -167,7 +167,7 @@ $break-desktop: 1600px;
 // Specifies how an element's fragments should be rendered when broken across
 // multiple lines, columns, or pages.
 //
-// Usage: @include box-decoration-break (clone);
+// Usage: @include box-decoration-break(clone);
 
 @mixin box-decoration-break ($value) {
   -webkit-box-decoration-break: $value;
@@ -178,16 +178,47 @@ $break-desktop: 1600px;
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Mask
 
 
-// Usage: @include @include mask-image (url("/img/external-link.svg"));
+// Usage: @include mask-image(url("/img/external-link.svg"));
 
 @mixin mask-image($value) {
-  -webkit-mask-image: $value; // Chrome, iOS, Safari
-          mask-image: $value; // None yet / Non-standard
+  -webkit-mask-image: $value;
+          mask-image: $value;
 }
 
-// Usage: @include mask-size (cover);
+// Usage: @include mask-size(cover);
 
 @mixin mask-size($value) {
-  -webkit-mask-size: $value; // Chrome, iOS, Safari
-          mask-size: $value; // None yet / Non-standard
+  -webkit-mask-size: $value;
+          mask-size: $value;
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Filter
+// Applies graphical effects like blur or color shift to an element.
+//
+// Usage: @include filter(drop-shadow(0 2px 5px rgba(0, 0, 0, .3)));
+
+@mixin filter($value) {
+  -webkit-filter: $value;
+     -moz-filter: $value; // editorconfig-checker-disable-line
+       -o-filter: $value; // editorconfig-checker-disable-line
+          filter: $value;
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - clip-path
+// Create a clipping region that sets what part of an element should be shown.
+//
+// Usage: @include clip-path(
+//             padding-box,
+//             circle(50px at 0 100px),
+//             // ...
+//        );
+
+@mixin clip-path($clip-list...) {
+  // combine the passed transforms into a space separated list
+  $clip-list: join($clip-list, null, space);
+
+  -webkit-clip-path: $clip-list;
+     -moz-clip-path: $clip-list;
+      -ms-clip-path: $clip-list;
+          clip-path: $clip-list;
 }