Layout improvements

- Tagline
- Share buttons
- JSON LD
- Tags
- Style Fixes

1 files changed, 64 insertions, 9 deletions

diff --git a/static/css/hyde.css b/static/css/hyde.css
index 3692a71..963a318 100644
--- a/static/css/hyde.css
+++ b/static/css/hyde.css
@@ -69,7 +69,7 @@ html {
   }
 
   footer {
-    padding-left: 18rem;
+    margin-left: 19rem !important;
   }
 }
 
@@ -125,12 +125,15 @@ footer {
   font-size: .7rem;
   text-align: center;
   height: 40px;
+  margin: 2rem 1rem 0 1rem;
+  padding: 1rem 0;
+  border-top: 1px solid #e0e0e0;
 }
 
 
 @media (min-width: 48em) {
   .content {
-    max-width: 38rem;
+    max-width: 40rem;
     margin-left: 20rem;
     margin-right: 2rem;
     margin-bottom: -40px;
@@ -138,13 +141,6 @@ footer {
   }
 }
 
-@media (min-width: 64em) {
-  .content {
-    margin-left: 22rem;
-    margin-right: 4rem;
-  }
-}
-
 .img-circle {
   border-radius: 50%;
 }
@@ -274,3 +270,62 @@ ul.posts {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
+
+.share-buttons {
+  text-align: center;
+  font-size: 1.5rem;
+  margin-top: 2rem;
+}
+
+.share-buttons a {
+  padding: 0 0.6rem;
+}
+
+.share-buttons a:hover {
+  opacity: 0.75;
+}
+
+ul.tags {
+  list-style: none;
+  padding: 0;
+  margin: 2rem 0 1rem 0;
+}
+
+ul.tags li {
+  display: inline-block;
+  margin: 0.25rem 0;
+}
+
+a.tag-link {
+  background-color: #f2f2f2;
+  padding: 5px 10px;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  text-decoration: none;
+  color: #757575;
+}
+
+a.tag-link:hover {
+  text-decoration: none;
+}
+
+figure {
+  padding: 0;
+  margin: 0;
+}
+
+figure > img {
+  margin: 0 auto;
+}
+
+figcaption {
+  text-align: center;
+  font-size: 80%;
+}
+
+.tagline {
+  display: block;
+  font-size: 1.2rem;
+  margin-bottom: .5rem;
+  font-weight: 400;
+}