From 3890b12a6c509d3b573e59f2b354437f27f72fee Mon Sep 17 00:00:00 2001 From: Joseph Hutchinson Date: Tue, 27 Mar 2018 15:28:14 -0400 Subject: [PATCH] Tweak header and improve card design --- layouts/_default/single.html | 1 + layouts/partials/header.html | 2 +- static/css/style.css | 22 +++++++++++--------- static/js/core.js | 39 ------------------------------------ 4 files changed, 15 insertions(+), 49 deletions(-) diff --git a/layouts/_default/single.html b/layouts/_default/single.html index c0c6957..5828bf4 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,6 +2,7 @@ {{ partial "head.html" . }} + {{ partial "header.html" . }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index aa964bd..ba201cb 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index ee22ec2..7cc929d 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -18,14 +18,15 @@ strong { top: 0; z-index: 3; width: 100%; - height: 3em; - transition: top 0.2s ease-in-out; - background-color: lightseagreen; - box-shadow: 0 0.3em 0.6em 0 rgba(0, 0, 0, 0.2), 0 0 0.2em 0 rgba(0, 0, 0, 0.1); + padding: 0.45em 0; + text-align: center; + background-color: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(1.5em); + -webkit-backdrop-filter: blur(1.5em); + box-shadow: 0 0 0.3em 0 rgba(0, 0, 0, 0.05); } -.nav-bar-up { - top: -3em; - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); +.nav-header { + margin: 0 0; } .post { line-height: 1.5; @@ -87,12 +88,14 @@ img { display: block; background-color: white; border-radius: 0.2em; + text-decoration: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: transform 0.3s, box-shadow 0.3s; - box-shadow: 0 0.3em 0.6em 0 rgba(0, 0, 0, 0.2), 0 0 0.2em 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 0.3em 0.6em 0 rgba(0, 0, 0, 0.1), 0 0 0.2em 0 rgba(0, 0, 0, 0.05); } .card-link-wrapper-active { transform: scale(0.95); - box-shadow: 0 0.23em 0.5em 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 0.20em 0.5em 0 rgba(0, 0, 0, 0.15); } .card { padding: 1em; @@ -150,6 +153,7 @@ hr { } a { text-decoration: none; + color: #3A3B3C; } table { color: #3A3B3C; diff --git a/static/js/core.js b/static/js/core.js index 2067759..00c0ee7 100644 --- a/static/js/core.js +++ b/static/js/core.js @@ -1,43 +1,4 @@ -// Hide Header on on scroll down -var didScroll; -var lastScrollTop = 0; -var delta = 5; -var navbarHeight = $('nav-bar').outerHeight(); - -$(window).scroll(function(event){ - didScroll = true; -}); - -setInterval(function() { - if (didScroll) { - hasScrolled(); - didScroll = false; - } -}, 250); - -function hasScrolled() { - var st = $(this).scrollTop(); - - // Make sure they scroll more than delta - if(Math.abs(lastScrollTop - st) <= delta) - return; - - // If they scrolled down and are past the navbar, add class .nav-up. - // This is necessary so you never see what is "behind" the navbar. - if (st > lastScrollTop && st > navbarHeight){ - // Scroll Down - $('nav').addClass('nav-bar-up'); - } else { - // Scroll Up - if(st + $(window).height() < $(document).height()) { - $('nav').removeClass('nav-bar-up'); - } - } - - lastScrollTop = st; -} - function cardPressed() { this.classList.add('card-link-wrapper-active'); }