update post layout

_layouts/post.html

@@ -5,20 +5,32 @@ layout: default
 <section>
   <article class="article">
     <hgroup class="article__metadata">
-      <h2 class="article__title">{{ page.title }}</h2>
+      {% if page.date %}
       <h3 class="article__pubdate">
-        <time pubdate>{{ page.date | date: '%B %d, %Y' }}</time>
+        <time pubdate>{{ page.date | date: '%B %d, %Y' | upcase }}</time>
       </h3>
+      {% endif %}
+      <h2 class="article__title">{{ page.title }}</h2>
     </hgroup>
-    <div class="article__content">
-      {{ content }}
-    </div>
+    <div class="article__content">{{ content }}</div>
 
     <!-- Social buttons -->
     <div id="fb-root"></div>
     <div class="article__social">
-      <a href="https://twitter.com/share" class="twitter-share-button" data-size="large">Tweet</a>
-      <div class="fb-like" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
+      <a
+        href="https://twitter.com/share"
+        class="twitter-share-button"
+        data-size="large"
+        >Tweet</a
+      >
+      <div
+        class="fb-like"
+        data-layout="button"
+        data-action="like"
+        data-size="large"
+        data-show-faces="false"
+        data-share="true"
+      ></div>
     </div>
   </article>
 </section>

_sass/post.scss

@@ -64,29 +64,38 @@ a.article-list__item__button {
 
 .article__metadata {
   text-align: center;
-  margin: 60px 0;
+  margin: 80px 0 70px;
 
   @media screen and (max-width: $break-small) {
-    margin: 15px 0 25px;
+    margin: 25px 0 25px;
     text-align: left;
   }
 }
 
 .article__title {
-  font-size: 45px;
+  font-size: 60px;
   letter-spacing: -0.5px;
 
   @media screen and (max-width: $break-small) {
-    font-size: 33px;
+    font-size: 40px;
     text-align: left;
   }
 }
 
 .article__pubdate {
   color: #989898;
-  font-size: 14pt;
+  font-size: 12pt;
   font-weight: normal;
-  margin-top: 10px;
+  font-family: sans-serif;
+  margin-bottom: 20px;
+  border: 1px solid #989898;
+  display: inline-block;
+  padding: 5px 20px;
+
+  @media screen and (max-width: $break-small) {
+    margin-bottom: 15px;
+    font-size: 10pt;
+  }
 }
 
 .article__content {
@@ -176,7 +185,6 @@ a.article-list__item__button {
   }
 }
 
-
 // Pay
 #pay {
   font-family: sans-serif;
@@ -212,4 +220,4 @@ a.article-list__item__button {
   section {
     margin: 50px 0;
   }
-}
+}

css/index.scss

@@ -5,7 +5,7 @@
 $break-small: 500px;
 $break-large: 840px;
 body {
-  width: 800px;
+  width: 900px;
   margin: 0 auto;
   padding: 0 20px;
   font-family: 'PT Serif', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
@@ -19,10 +19,14 @@ body {
     width: auto;
     margin: 0;
   }
-} // MathJax
+}
+
+// MathJax
 #MathJax_Message {
   display: none;
-} // Highlight.js
+}
+
+// Highlight.js
 .hljs {
   border: 1px solid #d7d7d7;
   border-radius: 3px;
@@ -71,7 +75,7 @@ hr {
   justify-content: space-between;
   align-items: center;
   padding: 5px 0;
-  border-bottom: 1px solid #efefef;
+  // border-bottom: 1px solid #efefef;
   @media screen and (max-width: $break-small) {
     justify-content: center;
   }
@@ -90,7 +94,7 @@ hr {
     }
     @media screen and (max-width: $break-small) {
       padding: 0;
-      margin: 10px 0;
+      margin: 5px 0;
     }
   }
 }