Added nav bar and improved card look
This commit is contained in:
Joseph Hutchinson
@@ -4,8 +4,8 @@
|
||||
{{ end }}
|
||||
<article class="card">
|
||||
<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-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 }} -->
|
||||
</article>
|
||||
</a>
|
||||
@@ -2,16 +2,18 @@
|
||||
<html lang="{{ .Site.LanguageCode }}" dir="ltr">
|
||||
{{ partial "head.html" . }}
|
||||
<body style="background-color: #f3f3f3;">
|
||||
<div class="content-container">
|
||||
{{ partial "header.html" . }}
|
||||
<div class="card-content-container">
|
||||
<main class="card-container">
|
||||
{{.Content}}
|
||||
<section class="card-columns">
|
||||
{{ range $index, $page := .Paginator.Pages }}
|
||||
{{ range .Paginator.Pages }}
|
||||
{{ .Render "li" }}
|
||||
{{ end }}
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ partial "scripts.html" . }}
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
<footer>
|
||||
<hr />
|
||||
</footer>
|
||||
@@ -0,0 +1,3 @@
|
||||
<nav class="nav-bar">
|
||||
<p>MDD</p>
|
||||
</nav>
|
||||
@@ -1,4 +1,5 @@
|
||||
<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>
|
||||
hljs.initHighlightingOnLoad();
|
||||
|
||||
@@ -3,7 +3,7 @@ body {
|
||||
color: #3A3B3C;
|
||||
font-size: 1.1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 4em 0 0 0;
|
||||
}
|
||||
p {
|
||||
margin: 1em 0;
|
||||
@@ -13,6 +13,20 @@ strong {
|
||||
font-family: 'LatoLatinWebHeavy';
|
||||
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 {
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -50,6 +64,11 @@ img {
|
||||
justify-content: center;
|
||||
padding: 0 1em;
|
||||
}
|
||||
.card-content-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
.content {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
@@ -60,7 +79,7 @@ img {
|
||||
.card-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 1.5em;
|
||||
grid-gap: 1.2em;
|
||||
justify-content: center;
|
||||
}
|
||||
.card-link-wrapper {
|
||||
@@ -69,11 +88,11 @@ img {
|
||||
background-color: white;
|
||||
border-radius: 0.2em;
|
||||
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 {
|
||||
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 {
|
||||
padding: 1em;
|
||||
@@ -85,16 +104,18 @@ img {
|
||||
object-fit: cover;
|
||||
}
|
||||
.card-title {
|
||||
margin: 0.7em 0 0.7em 0;
|
||||
margin: 0.5em 0 0.7em 0;
|
||||
line-height: 1.2;
|
||||
/* text-align: center; */
|
||||
}
|
||||
.card-date {
|
||||
margin: 0.7em 0 0 0;
|
||||
display: block;
|
||||
/* text-align: center; */
|
||||
}
|
||||
.card-text {
|
||||
line-height: 1.5;
|
||||
margin: 1em 0 0.5em 0;
|
||||
margin: 0.7em 0;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 0.3em solid #D1D1D1;
|
||||
@@ -148,6 +169,9 @@ th {
|
||||
tr:nth-child(even) td {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
footer {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, ~641px and up) */
|
||||
@media only screen and (min-width: 40.063em) {
|
||||
|
||||
@@ -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() {
|
||||
this.classList.add('card-link-wrapper-active');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user