heimoshuiyu/aether
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Tweak header and improve card design

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-03-27 15:28:14 -04:00
parent 491ed97b8e
commit 3890b12a6c
4 changed files with 15 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
layouts/_default/single.html
View File

@@ -2,6 +2,7 @@
<html lang="{{ .Site.LanguageCode }}" dir="ltr">
{{ partial "head.html" . }}
<body>
{{ partial "header.html" . }}
<div class="content-container">
<main class="content">
<article class="post">

2
layouts/partials/header.html
View File

@@ -1,3 +1,3 @@
<nav class="nav-bar">
<p>MDD</p>
<h1 class="nav-header"><a href="/">mdd</a></h1>
</nav>

22
static/css/style.css
View File

@@ -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;

39
static/js/core.js
View File

@@ -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');
}