diff --git a/assets/css/screen.css b/assets/css/screen.css
index d12f3fa..f220217 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -475,6 +475,7 @@ margin on the iframe, cause it breaks stuff. */
text-align: center;
background: #222 no-repeat center center;
background-size: cover;
+ overflow: hidden;
}
.main-header .inner {
@@ -487,6 +488,57 @@ margin on the iframe, cause it breaks stuff. */
margin: 0 0 30px 0;
}
+/* Create a bouncing scroll-down arrow on homepage with cover image */
+.scroll-down {
+ display: block;
+ position: absolute;
+ z-index: 100;
+ bottom: 45px;
+ left: 50%;
+ margin-left: -16px;
+ width: 34px;
+ height: 34px;
+ font-size: 34px;
+ text-align: center;
+ color: rgba(255,255,255,0.6);
+ transform: rotate(-90deg);
+ -webkit-animation: bounce 4s 2s infinite;
+ animation: bounce 4s 2s infinite;
+}
+
+/* Stop it bouncing and increase contrast when hovered */
+.scroll-down:hover {
+ color: #fff;
+ -webkit-animation: none;
+ animation: none;
+}
+
+/* Put a semi-opaque radial gradient behind the icon to make it more visible
+ on photos which happen to have a light background. */
+.home-template .main-header:after {
+ display: block;
+ content: " ";
+ width: 300px;
+ height: 300px;
+ border-radius: 100%;
+ position: absolute;
+ bottom: -150px;
+ left: 50%;
+ margin-left: -150px;
+ background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.2)), color-stop(70%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
+ background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
+}
+
+/* Hide when there's no cover image or on page2+ */
+.no-cover .scroll-down,
+.no-cover.main-header:after,
+.archive-template .scroll-down,
+.archive-template .main-header:after {
+ display: none
+}
+
/* Appears in the top right corner of your home page */
.blog-logo {
display: block;
@@ -495,14 +547,13 @@ margin on the iframe, cause it breaks stuff. */
border: none !important;
}
-
.blog-logo img {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
height: 38px;
- padding: 2px 0 6px 0;
+ padding: 1px 0 5px 0;
width: auto;
}
@@ -559,12 +610,12 @@ margin on the iframe, cause it breaks stuff. */
top: 0;
left: 0;
right: 0;
- height: 60px;
+ height: 70px;
border: none;
- background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0)));
- background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
- background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
+ background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0)));
+ background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
+ background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
}
.no-cover .main-nav.overlay {
background: none;
@@ -1350,6 +1401,8 @@ body:not(.post-template) .post-title {
padding: 15% 0;
}
+ .scroll-down { display: none; }
+
.archive-template .main-header {
min-height: 180px;
padding: 10% 0;
@@ -1695,6 +1748,7 @@ body:not(.post-template) .post-title {
13. Animations
========================================================================== */
+/* Used to fade in title/desc on the home page */
@-webkit-keyframes fade-in-down {
0% {
opacity: 0;
@@ -1720,8 +1774,38 @@ body:not(.post-template) .post-title {
}
}
+/* Used to bounce .scroll-down on home page */
+@-webkit-keyframes bounce {
+ 0%, 10%, 25%, 40%, 50% {
+ -webkit-transform: translateY(0) rotate(-90deg);
+ transform: translateY(0) rotate(-90deg);
+ }
+ 20% {
+ -webkit-transform: translateY(-10px) rotate(-90deg);
+ transform: translateY(-10px) rotate(-90deg);
+ }
+ 30% {
+ -webkit-transform: translateY(-5px) rotate(-90deg);
+ transform: translateY(-5px) rotate(-90deg);
+ }
+}
+@keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% {
+ -webkit-transform: translateY(0) rotate(-90deg);
+ transform: translateY(0) rotate(-90deg);
+ }
+ 40% {
+ -webkit-transform: translateY(-10px) rotate(-90deg);
+ transform: translateY(-10px) rotate(-90deg);
+ }
+ 60% {
+ -webkit-transform: translateY(-5px) rotate(-90deg);
+ transform: translateY(-5px) rotate(-90deg);
+ }
+}
+
/* ==========================================================================
End of file. Animations should be the last thing here. Do not add stuff
below this point, or it will probably fuck everything up.
- ========================================================================== */
+ ========================================================================== */
\ No newline at end of file
diff --git a/assets/js/index.js b/assets/js/index.js
index 7ff84ba..e9fa9a3 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -26,6 +26,8 @@
casperFullImg();
$(window).smartresize(casperFullImg);
+ $(".scroll-down").arctic_scroll();
+
});
}(jQuery));
@@ -56,4 +58,33 @@
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
-})(jQuery,'smartresize');
\ No newline at end of file
+})(jQuery,'smartresize');
+
+// Arctic Scroll by Paul Adam Davis
+// https://github.com/PaulAdamDavis/Arctic-Scroll
+(function ($) {
+ $.fn.arctic_scroll = function (options) {
+
+ var defaults = {
+ elem: $(this),
+ speed: 500
+ };
+ var options = $.extend(defaults, options);
+
+ options.elem.click(function(event){
+ event.preventDefault();
+ var offset = ($(this).attr('data-offset')) ? $(this).attr('data-offset') : false,
+ position = ($(this).attr('data-position')) ? $(this).attr('data-position') : false;
+ if (offset) {
+ var toMove = parseInt(offset);
+ $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, options.speed);
+ } else if (position) {
+ var toMove = parseInt(position);
+ $('html,body').stop(true, false).animate({scrollTop: toMove }, options.speed);
+ } else {
+ $('html,body').stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, options.speed);
+ }
+ });
+
+ };
+})(jQuery);
\ No newline at end of file
diff --git a/index.hbs b/index.hbs
index e558830..80cf642 100644
--- a/index.hbs
+++ b/index.hbs
@@ -13,10 +13,11 @@
{{@blog.description}}
+ Scroll Down
{{! The main content area on the homepage }}
-
+
{{! The tag below includes the post loop - partials/loop.hbs }}
{{> "loop"}}