Added nav bar and improved card look

static/css/style.css

@@ -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) {

static/js/core.js

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