add scroll-top

Author: saschadiercks

src/assets/scss/1-settings/_colors.scss

@@ -58,3 +58,9 @@ $footer-color: $light !default;
 
 // Pseudo-Footer
 $pseudo-footer-bg: $brand-color !default;
+
+// Scroll Top
+$scroll-top-bg: $brand-color !default;
+$scroll-top-color: #fff !default;
+$scroll-top-hover-bg: $button-hover-bg !default;
+$scroll-top-hover-color: #fff !default;

src/assets/scss/1-settings/_settings.scss

@@ -61,3 +61,7 @@ $code-radius: $radius !default;
 $code-color: currentColor !default;
 $code-font-size: .75rem !default;
 $code-font-family: "Fira Code", courier, "Courier New", monospace !default;
+
+// Scroll top
+$scroll-top-radius: $radius !default;
+$scroll-top-size: 2rem !default;

src/assets/scss/6-components/_scroll-top.scss

@@ -0,0 +1,24 @@
+.#{$prefix}scroll-top {
+	align-items: center;
+	background-color: $scroll-top-bg;
+	border-radius: $scroll-top-radius;
+	bottom: $gutter;
+	color: $scroll-top-color;
+	display: flex;
+	height: $scroll-top-size;
+	position: fixed;
+	right: $gutter--50;
+	text-align: center;
+	text-decoration: none;
+	width: $scroll-top-size;
+	z-index: 1;
+}
+
+.#{$prefix}scroll-top__icon {
+	flex: 1;
+}
+
+.#{$prefix}scroll-top:hover {
+	background-color: $scroll-top-hover-bg;
+	color: $scroll-top-hover-color;
+}

src/assets/scss/site.scss

@@ -54,6 +54,7 @@
 @import "6-components/navigation";
 @import "6-components/post";
 @import "6-components/promo";
+@import "6-components/scroll-top";
 
 // utilities
 @import "7-utilities/block";

src/assets/scss/themes/_design-theme.scss

@@ -10,12 +10,15 @@ section {
 
 pre { font-size: .75rem !important; }
 
-.#{$prefix}code { margin-bottom: $gutter; }
+.#{$prefix}code {
+	margin-bottom: $gutter;
+}
 
 .#{$prefix}description p + p { margin-top: $gutter * -.75; }
 
 .#{$prefix}preview {
 	margin-bottom: $gutter;
+	position: relative;
 }
 
 .#{$prefix}preview ul + ul {

src/eleventy/includes/components/partials/scroll-top.njk

@@ -0,0 +1,3 @@
+<a href="#" class="sdi-scroll-top">
+	<span class="sdi-scroll-top__icon">⬆</span>
+</a>

src/eleventy/includes/layouts/base.njk

@@ -13,6 +13,8 @@
 		{% include "components/partials/footer.njk" %}
 	</div>
 
+	{% include "components/partials/scroll-top.njk" %}
+
 <script src="/assets/3rdparty/prism/prism.js" type="text/javascript"></script>
 </body>
 </html>

src/eleventy/pages/5-objects/container/code.html

@@ -1,4 +1,4 @@
-<!-- The deault container -->
+<!-- The default container -->
 <div class="sdi-container">
 	If container-max-width is set to none, it will occupy 100% of the available width.
 </div>

src/eleventy/pages/6-components/scroll-top/code.html

@@ -0,0 +1,3 @@
+<a href="#" class="sdi-scroll-top">
+	<span class="sdi-scroll-top__icon">⬆</span>
+</a>

src/eleventy/pages/6-components/scroll-top/description.md

@@ -0,0 +1,2 @@
+We're using `scroll-top` to let the user easily access the top of the page. Per default it is just an anchor that doesn't exist on the page, so the browser scrolls to top. The best place for this at the bottom of the page, so the user can reach this function with his thumbs instead of reaching for the top of the screen.
+You can easily toggle the visibility with some JavaScript and listening for the scroll depth.