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"> <html lang="{{ .Site.LanguageCode }}" dir="ltr">
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body> <body>
{{ partial "header.html" . }}
<div class="content-container"> <div class="content-container">
<main class="content"> <main class="content">
<article class="post"> <article class="post">

2
layouts/partials/header.html
View File

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

22
static/css/style.css
View File

@@ -18,14 +18,15 @@ strong {
top: 0; top: 0;
z-index: 3; z-index: 3;
width: 100%; width: 100%;
height: 3em; padding: 0.45em 0;
transition: top 0.2s ease-in-out; text-align: center;
background-color: lightseagreen; background-color: rgba(255, 255, 255, 0.98);
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); 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 { .nav-header {
top: -3em; margin: 0 0;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
} }
.post { .post {
line-height: 1.5; line-height: 1.5;
@@ -87,12 +88,14 @@ img {
display: block; display: block;
background-color: white; background-color: white;
border-radius: 0.2em; border-radius: 0.2em;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: transform 0.3s, box-shadow 0.3s; 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 { .card-link-wrapper-active {
transform: scale(0.95); 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 { .card {
padding: 1em; padding: 1em;
@@ -150,6 +153,7 @@ hr {
} }
a { a {
text-decoration: none; text-decoration: none;
color: #3A3B3C;
} }
table { table {
color: #3A3B3C; 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() { function cardPressed() {
this.classList.add('card-link-wrapper-active'); this.classList.add('card-link-wrapper-active');
} }