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

Added nav bar and improved card look

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-03-27 14:13:04 -04:00
parent efcb6beb27
commit 491ed97b8e
7 changed files with 81 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/_default/li.html
View File

@@ -4,8 +4,8 @@
{{ end }} {{ end }}
<article class="card"> <article class="card">
<h2 class="card-title">{{ .Title }}</h2> <h2 class="card-title">{{ .Title }}</h2>
<p class="card-date post-date">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
<p class="card-text">{{ .Description }}</p> <p class="card-text">{{ .Description }}</p>
<p class="card-date post-date">Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time></p>
<!-- {{ if .Truncated }}<a class="moretag" href="{{ .Permalink }}">Continue reading</a>{{ end }} --> <!-- {{ if .Truncated }}<a class="moretag" href="{{ .Permalink }}">Continue reading</a>{{ end }} -->
</article> </article>
</a> </a>

6
layouts/_default/list.html
View File

@@ -2,16 +2,18 @@
<html lang="{{ .Site.LanguageCode }}" dir="ltr"> <html lang="{{ .Site.LanguageCode }}" dir="ltr">
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body style="background-color: #f3f3f3;"> <body style="background-color: #f3f3f3;">
<div class="content-container"> {{ partial "header.html" . }}
<div class="card-content-container">
<main class="card-container"> <main class="card-container">
{{.Content}} {{.Content}}
<section class="card-columns"> <section class="card-columns">
{{ range $index, $page := .Paginator.Pages }} {{ range .Paginator.Pages }}
{{ .Render "li" }} {{ .Render "li" }}
{{ end }} {{ end }}
</section> </section>
</main> </main>
</div> </div>
</body> </body>
{{ partial "footer.html" . }}
{{ partial "scripts.html" . }} {{ partial "scripts.html" . }}
</html> </html>

3
layouts/partials/footer.html
View File

@@ -0,0 +1,3 @@
<footer>
<hr />
</footer>

3
layouts/partials/header.html
View File

@@ -0,0 +1,3 @@
<nav class="nav-bar">
<p>MDD</p>
</nav>

1
layouts/partials/scripts.html
View File

@@ -1,4 +1,5 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/core.js"></script> <script type="text/javascript" src="js/core.js"></script>
<script> <script>
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();

36
static/css/style.css
View File

@@ -3,7 +3,7 @@ body {
color: #3A3B3C; color: #3A3B3C;
font-size: 1.1em; font-size: 1.1em;
margin: 0; margin: 0;
padding: 0; padding: 4em 0 0 0;
} }
p { p {
margin: 1em 0; margin: 1em 0;
@@ -13,6 +13,20 @@ strong {
font-family: 'LatoLatinWebHeavy'; font-family: 'LatoLatinWebHeavy';
font-weight: normal font-weight: normal
} }
.nav-bar {
position: fixed;
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);
}
.nav-bar-up {
top: -3em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.post { .post {
line-height: 1.5; line-height: 1.5;
} }
@@ -50,6 +64,11 @@ img {
justify-content: center; justify-content: center;
padding: 0 1em; padding: 0 1em;
} }
.card-content-container {
display: flex;
justify-content: center;
padding: 0 0.5em;
}
.content { .content {
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
@@ -60,7 +79,7 @@ img {
.card-columns { .card-columns {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: 1.5em; grid-gap: 1.2em;
justify-content: center; justify-content: center;
} }
.card-link-wrapper { .card-link-wrapper {
@@ -69,11 +88,11 @@ img {
background-color: white; background-color: white;
border-radius: 0.2em; border-radius: 0.2em;
transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 1em 1.6em 0 rgba(0, 0, 0, 0.12); 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);
} }
.card-link-wrapper-active { .card-link-wrapper-active {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0.8em 1.4em 0 rgba(0, 0, 0, 0.17); box-shadow: 0 0.23em 0.5em 0 rgba(0, 0, 0, 0.3);
} }
.card { .card {
padding: 1em; padding: 1em;
@@ -85,16 +104,18 @@ img {
object-fit: cover; object-fit: cover;
} }
.card-title { .card-title {
margin: 0.7em 0 0.7em 0; margin: 0.5em 0 0.7em 0;
line-height: 1.2;
/* text-align: center; */ /* text-align: center; */
} }
.card-date { .card-date {
margin: 0.7em 0 0 0;
display: block; display: block;
/* text-align: center; */ /* text-align: center; */
} }
.card-text { .card-text {
line-height: 1.5; line-height: 1.5;
margin: 1em 0 0.5em 0; margin: 0.7em 0;
} }
blockquote { blockquote {
border-left: 0.3em solid #D1D1D1; border-left: 0.3em solid #D1D1D1;
@@ -148,6 +169,9 @@ th {
tr:nth-child(even) td { tr:nth-child(even) td {
background: #f3f3f3; background: #f3f3f3;
} }
footer {
margin: 2em 0;
}
/* Medium devices (tablets, ~641px and up) */ /* Medium devices (tablets, ~641px and up) */
@media only screen and (min-width: 40.063em) { @media only screen and (min-width: 40.063em) {

39
static/js/core.js
View File

@@ -1,4 +1,43 @@
// 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');
} }