Post meta styles

fmatrixch · Oct 6, 2017 · 1b912ea · 1b912ea
1 parent 6d7b32b
commit 1b912ea
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 13 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -5,12 +5,24 @@
 <article class="post">
   <h1>{{ page.title }}</h1>
 
-  <div class="entry">
-    {{ content }}
+  <div clsss="meta">
+    <span class="date">
+      {{ page.date | date: "%Y-%m-%d" }}
+    </span>
+
+    <ul class="tag">
+      {% for tag in page.tags %}
+      <li>
+        <a href="{{ site.url }}{{ site.baseurl }}/tags#{{ tag }}">
+          {{ tag }}
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
   </div>
 
-  <div class="date">
-    Written on {{ page.date | date: "%B %e, %Y" }}
+  <div class="entry">
+    {{ content }}
   </div>
 
   <div class="pagination">

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -50,9 +50,9 @@ $selection-background-color: $oc-gray-1;
 $pagination-color: $oc-gray-6;
 $pagination-over-color: $oc-gray-7;
 
-$tag-index-label-color: $oc-white;
-$tag-index-label-background-color: $oc-gray-6;
-$tag-index-count-background-color: $oc-gray-7;
+$tag-index-label-color: $base-color;
+$tag-index-label-background-color: $oc-gray-2;
+$tag-index-count-background-color: $oc-gray-3;
 
 $footer-border-color: $oc-gray-2;
 $footer-background-color: $oc-gray-1;

diff --git a/style.scss b/style.scss
@@ -267,11 +267,6 @@ img {
   max-width: none;
 }
 
-.date {
-  font-style: italic;
-  color: $oc-gray-6;
-}
-
 // Specify the color of the selection
 ::-moz-selection {
   color: $selection-color;
@@ -418,6 +413,39 @@ nav {
 }
 
 .post {
+  h1 {
+    margin-bottom: .1em;
+  }
+
+  .date {
+    font-weight: 300;
+    font-size: $small-font-size;
+    color: $base-lighten-color;
+    margin-right: 3px;
+  }
+
+  .tag {
+    display: inline;
+    font-weight: 300;
+    font-size: $small-font-size;
+
+    li:before {
+      content: '';
+    }
+
+    li {
+      display: inline;
+      margin: 0;
+
+      > a {
+        margin: 3px 3px 3px 0;
+        padding: .5px 4px;
+        color: $tag-index-label-color;
+        background-color: $tag-index-label-background-color;
+        border-radius: 3px;
+      }
+    }
+  }
 
   .comments {
     margin-top: 10px;
@@ -484,6 +512,7 @@ nav {
   > li {
     margin: 0;
     font-size: $small-font-size;
+    font-weight: 300;
     display: inline;
 
     > a {
@@ -519,7 +548,6 @@ nav {
 }
 
 // Footer
-
 .wrapper-footer {
   margin-top: 50px;
   border-top: 1px solid $footer-border-color;