記事の横幅など調整

4 files changed, 37 insertions, 4 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6e18a1e..71b9c66 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,6 +7,9 @@
     <main class="main main--single">
       <!-- post -->
       <article class="post"　itemscope itemtype="http://schema.org/BlogPosting">
+        {{ if ne .Params.image "" }}
+        <img class="post__catch" src="/{{ .Params.image }}" alt="">
+        {{ end }}
         <h1 class="post__title">{{ .Title }}</h1>
         <p class="post__date">
           <time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">{{ .Date.Format "2006.01.02" }}</time>
diff --git a/src/scss/modules/_single.scss b/src/scss/modules/_single.scss
index 43132ef..d26c26d 100644
--- a/src/scss/modules/_single.scss
+++ b/src/scss/modules/_single.scss
@@ -6,6 +6,26 @@
   padding: 0 5%;
 }
 
+.post {
+  color: #444;
+
+  // &__catch {
+  //   border: 1px solid #eee;
+  //   display: block;
+  //   margin-bottom: 10px;
+  //   width: 100%;
+  // }
+
+  &__title {
+    font-size: 1.6em;
+  }
+
+  &__date {
+    color: #c2c6cc;
+    text-align: right;
+  }
+}
+
 .post-content {
   margin-bottom: 3em;
 
@@ -17,7 +37,8 @@
   }
 
   p {
-    line-height: 1.8;
+    line-height: 2;
+    margin-bottom: 1.5em;
     // word-wrap: break-word;
   }
 
diff --git a/src/scss/style.scss b/src/scss/style.scss
index edc42e1..fef5f9a 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -28,7 +28,7 @@ a {
   max-width: 1080px;
 
   &.main--single {
-    max-width: 760px;
+    max-width: 620px;
   }
 }
 
diff --git a/static/css/style.css b/static/css/style.css
index 88448cb..166d5a8 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -23,7 +23,7 @@ a {
   margin: 0 auto;
   max-width: 1080px; }
   .main.main--single {
-    max-width: 760px; }
+    max-width: 620px; }
 
 .header {
   margin-bottom: 3em;
@@ -143,6 +143,14 @@ a {
 .post-nav {
   padding: 0 5%; }
 
+.post {
+  color: #444; }
+  .post__title {
+    font-size: 1.6em; }
+  .post__date {
+    color: #c2c6cc;
+    text-align: right; }
+
 .post-content {
   margin-bottom: 3em; }
   .post-content img {
@@ -151,7 +159,8 @@ a {
     margin: 2em auto 3em;
     max-width: 100%; }
   .post-content p {
-    line-height: 1.8; }
+    line-height: 2;
+    margin-bottom: 1.5em; }
   .post-content h2,
   .post-content h3,
   .post-content h4 {