jekyll-theme-louis 0.1.1 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7dd14f3a1c26ff8deb26358e12c77ea59994f6ef3cc10bb9af3cb5b95515b3b1
-  data.tar.gz: 77978b0d27bf8ab2ce87b6b3d0fbbeb917b26dc10dbf2976427f16cb046aba5c
+  metadata.gz: 9c4595288142c5c07a0e76a1e6d242d7ba5742d3646c2816caf400facd87913b
+  data.tar.gz: d20bd2236591ab4c9009bd93ded67c6daf6c6d4dc1ca288281f18dcbe9e0615e
 SHA512:
-  metadata.gz: 9f53687920e6590e8a2e624849420a9335783560968fa90da3fc44a71c7fffc75a58c6eed612b7a49f130ae24a52f55bd774b3dc10860dc10c0c247906a366d3
-  data.tar.gz: 515707e0535937ba60f368f220b182bfad5bd869ecc3e3a0ea5934993709c9a36e524b07edd0a97e8582d5f7502bae27dff77a2831650b5b0efef4269be682f6
+  metadata.gz: 5b6dc012957368f7c4be556a8335c40c7db7fe8ad544946bbfe0898c9af747a5b66d6e6f4082691f9d205459f82d3d814861a3bcbaa079ee2d5ad613ade3ff3d
+  data.tar.gz: 5cb501be0d428c06b9330d1852d7e662b84d366436e5be6df19c094e28008437eaafa75d712177dbf01d1cf08a1686960c4bab4c2a51dfae51626a07d792d661

data/README.md

@@ -6,7 +6,6 @@
 
 Louis is a [Jekyll](https://github.com/jekyll/jekyll/) theme for Blog. It provides very simple blog theme for Jekyll sites that includes a profile, post and other pages.
 
-
 ![Louisイメージ](https://github.com/wawawatataru/louis/blob/master/assets/images/usage_image.png?raw=true,"Louisイメージ")
 
 ## Usage
@@ -50,6 +49,12 @@ author:
   facebook: [Author facebook account (optinal)]
 ```
 
+If you want to analyze with Google Analytics, add Google Analytics ID to config.yml.
+
+```yml
+google_analytics_id: [google analytics id (optinal)]
+```
+
 ## License
 
 The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_includes/amazon-associate.html

@@ -0,0 +1,6 @@
+<div class="amazon-associate">
+  <a class="amazon-associate__link" href="{{ include.url }}">
+    <img class="amazon-associate__image" src="{{ include.image-url }}" >
+    <p class="amazon-associate__title">{{ include.title }}</p>
+  </a>
+</div>

data/_includes/footer.html

@@ -1,4 +1,5 @@
 <footer class="footer">
+  {% include tag-cloud.html %}
   <div class="footer-container">
     <a href="{{ "/profile.html" | relative_url }}" class="footer-container__link">
       <img src="{{ '/assets/images/profile_icon.png' | relative_url }}" class="footer-profile__icon" alt="">

data/_includes/head/favicon.html

@@ -1,7 +1,6 @@
 <link rel="apple-touch-icon" sizes="180x180" href="{{ "assets/images/favicon/apple-touch-icon.png" | absolute_url }}">
 <link rel="icon" type="image/png" sizes="32x32" href="{{ "assets/images/favicon/favicon-32x32.png" | absolute_url }}">
 <link rel="icon" type="image/png" sizes="16x16" href="{{ "assets/images/favicon/favicon-16x16.png" | absolute_url }}">
-<link rel="manifest" href="{{ "assets/images/favicon/site.webmanifest" | absolute_url }}">
 <link rel="mask-icon" href="{{ "assets/images/favicon/safari-pinned-tab.svg" | absolute_url }}" color="#707070">
 <meta name="msapplication-TileColor" content="#707070">
 <meta name="theme-color" content="#ffffff">

data/_includes/head/google_analytics.html

@@ -0,0 +1,11 @@
+{% if site.google_analytics_id %}
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics_id }}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', '{{ site.google_analytics_id }}');
+  </script>
+{% endif %}

data/_includes/head/twitter-ogp.html

@@ -12,5 +12,9 @@
   <meta name="twitter:description" content="{{ site.description }}">
 {% endif %}
 
-<meta name="twitter:image" content="{{ "assets/images/default_ogp.png" | absolute_url }}">
-<meta name="twitter:url" content="{{ page.url | replace:'index.html','' | absolute_url }}">
+{% if page.ogp %}
+  <meta name="twitter:image" content="{{ "assets/ogp/" | absolute_url }}{{page.ogp}}">
+{% else %}
+  <meta name="twitter:image" content="{{ "assets/images/default_ogp.png" | absolute_url }}">
+{% endif %}
+<meta name="twitter:url" content="{{ page.url | replace:'index.html','' | absolute_url }}">

data/_includes/posts.html

@@ -1,11 +1,22 @@
+
 <div class="posts">
   {% for post in paginator.posts %}
-    <div class="post-container">
+    <div class="posts-content">
       <a href="{{ post.url | relative_url }}">
-        <h1 class="post__title">{{ post.title }}</h1>
+        <h2 class="post__title">{{ post.title }}</h2>
       </a>
-      <p class="post__date">{{ post.date | date: '%Y/%-m/%-d' }}</p>
-      {{ post.excerpt }}
+      <div class="post-meta">
+        <p class="post__date">{{ post.date | date: '%Y/%-m/%-d' }}</p>
+        <div class="post-tags">
+          {% for tag in post.tags %}
+            <div class="post-tag">
+              <a class="post-tag__link" href="{{ '/archives/tag/' | append: tag | relative_url }}">
+                <i class="fa fa-tag post-tag__icon"></i>{{ tag }}
+              </a>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
     </div>
   {% endfor %}
 </div>

data/_includes/recent-articles.html

@@ -0,0 +1,16 @@
+<div class="recent_articles">
+  <p class="recent_articles__title">最新の記事</p>
+  <ul class="recent_articles__list">
+    {% for post in site.posts %}
+      {% if forloop.index0 > 4 %}
+        {% break %}
+      {% else %}
+      <li class="recent_article__title">
+        <a class="recent_article__link" href={{ post.url | relative_url }}>
+          {{ post.title }}
+        </a>
+      </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+</div>

data/_includes/sns-share.html

@@ -0,0 +1,38 @@
+<div class="sns-container">
+  <a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ page.url }}&via={{ site.author.twitter if site.author.twitter }}"
+     target="_blank"
+     rel="nofollow noopener noreferrer"
+     class="sns-container__button"
+  >
+    <p class="social-link__item--twitter">
+      <i class="fa fa-twitter"></i>
+    </p>
+  </a>
+  <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}"
+     target="_blank"
+     rel="nofollow noopener noreferrer"
+     class="sns-container__button"
+  >
+    <p class="social-link__item--facebook">
+      <i class="fa fa-facebook"></i>
+    </p>
+  </a>
+  <a href="http://b.hatena.ne.jp/add?&url={{ site.url }}{{ page.url }}"
+     target="_blank"
+     rel="nofollow noopener noreferrer"
+     class="sns-container__button"
+  >
+    <p class="social-link__item--hatena">
+      <i class="fa-hatena"></i>
+    </p>
+  </a>
+  <a href="https://getpocket.com/edit?url={{ site.url }}{{ page.url }}"
+     target="_blank"
+     rel="nofollow noopener noreferrer"
+     class="sns-container__button"
+  >
+    <p class="social-link__item--pocket">
+      <i class="fa fa-get-pocket"></i>
+    </p>
+  </a>
+</div>

data/_includes/social-link.html

@@ -1,21 +1,21 @@
 {% if site.author.github || site.author.twitter || site.author.facebook %}
   <div class="social-link{{ include.suffix }}">
     {% if site.author.github %}
-      <a href="https://github.com/{{ site.author.github }}" target="blank">
+      <a href="https://github.com/{{ site.author.github }}" class="social-link__text" target="blank">
         <p class="social-link__item--github">
           <i class="fa fa-github"></i>
         </p>
       </a>
     {% endif %}
     {% if site.author.twitter %}
-      <a href="https://twitter.com/{{ site.author.twitter }}" target="blank">
+      <a href="https://twitter.com/{{ site.author.twitter }}" class="social-link__text" target="blank">
         <p class="social-link__item--twitter">
           <i class="fa fa-twitter"></i>
         </p>
       </a>
     {% endif %}
     {% if site.author.facebook %}
-      <a href="https://facebook.com/{{ site.author.facebook }}" target="blank">
+      <a href="https://facebook.com/{{ site.author.facebook }}" class="social-link__text" target="blank">
         <p class="social-link__item--facebook">
           <i class="fa fa-facebook"></i>
         </p>

data/_includes/tag-cloud.html

@@ -0,0 +1,15 @@
+{% if site.tags.first %}
+  <div class="tag-cloud">
+    <p class="tag-cloud__title">Tags</p>
+    <div class="cloud-tags">
+      {% for tag in site.tags %}
+        <div class="cloud-tag">
+          {% capture cat %}{{ tag | first }}{% endcapture %}
+          <a class="cloud-tag__link" href="{{ '/archives/tag/' | append: cat | relative_url }}">
+            <i class="fa fa-tag cloud-tag__icon"></i>{{ cat }}
+          </a>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+{% endif %}

data/_layouts/archive.html

@@ -0,0 +1,25 @@
+---
+layout: default
+---
+<ul class="posts">
+  <p class="posts-title">Tag: {{page.title}}</p>
+  {% for post in page.posts %}
+    <div class="posts-content">
+      <a href="{{ post.url | relative_url }}">
+        <h1 class="post__title">{{ post.title }}</h1>
+      </a>
+      <div class="post-meta">
+        <p class="post__date">{{ post.date | date: '%Y/%-m/%-d' }}</p>
+        <div class="post-tags">
+          {% for tag in post.tags %}
+            <div class="post-tag">
+              <a class="post-tag__link" href="{{ '/archives/tag/' | append: tag | relative_url }}">
+                <i class="fa fa-tag post-tag__icon"></i>{{ tag }}
+              </a>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</ul>

data/_layouts/default.html

@@ -5,13 +5,15 @@
   <meta charset="UTF-8">
   <title>{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="{{ '/assets/css/common.css' | relative_url }}">
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   {% include head/twitter-ogp.html %}
   {% include head/favicon.html %}
+  {% include head/google_analytics.html %}
 </head>
 
 <body>

data/_layouts/index.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+{% include posts.html %}
+{% include posts-pager.html %}

data/_layouts/page.html

@@ -1,6 +1,6 @@
 ---
 layout: default
 ---
-<div class="page-container">
+<div class="page-content">
   {{ content }}
-</div>
+</div>

data/_layouts/post.html

@@ -1,10 +1,29 @@
 ---
 layout: default
 ---
-<div class="post-container">
-  <h1 class="post__title">{{ page.title }}</h1>
-  <p class="post__date">{{ page.date | date: '%Y/%-m/%-d' }}</p>
-  {{ content }}
+<div class="additional-container">
+  {% include sns-share.html %}
+  <div class="post-container">
+    <div class="post-header">
+      <h1 class="post__title">{{ page.title }}</h1>
+      <div class="post-meta">
+        <p class="post__date">{{ page.date | date: '%Y/%-m/%-d' }}</p>
+        <div class="post-tags">
+          {% for tag in page.tags %}
+            <div class="post-tag">
+              <a class="post-tag__link" href="{{ '/archives/tag/' | append: tag | relative_url }}">
+                <i class="fa fa-tag post-tag__icon"></i>{{ tag }}
+              </a>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+    <div class="post-content">
+      {{ content }}
+    </div>
+  </div>
+  {% include recent-articles.html %}
 </div>
 
 {% include post-pager.html %}

data/_layouts/profile.html

@@ -12,5 +12,7 @@ layout: default
 </div>
 
 <div class="profile-container">
+<div class="profile-content">
   {{ content }}
 </div>
+</div>

data/_sass/base.scss

@@ -1,7 +1,14 @@
 html {
+  min-width: 70rem;
+  min-height: 100vh;
   color: $color-font-main;
   font-size: $size-font-base;
-  min-height: 100vh;
+  @media screen and (max-width: 479px) {
+    min-width: 100%;
+    min-height: 100vh;
+    color: $color-font-main;
+    font-size: $size-font-base;
+  }
 }
 
 body {
@@ -9,4 +16,11 @@ body {
   align-items: center;
   flex-direction: column;
   min-height: 100vh;
+  width: auto;
+  @media screen and (max-width: 479px) {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    min-height: 100vh;
+  }
 }

data/_sass/block/amazon-associate.scss

@@ -0,0 +1,22 @@
+.amazon-associate {
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  width: 100%;
+  border: 1px solid $color-border;
+
+  &__link {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  &__image {
+    margin-right: 1rem;
+    margin-bottom: 0 !important;
+    width: 9rem;
+  }
+
+  &__title {
+    font-size: 1rem;
+  }
+}

data/_sass/block/footer.scss

@@ -10,7 +10,7 @@
 .footer-container {
   align-items: center;
   flex-direction: column;
-  padding: 1.5rem 0 2rem;
+  padding: 3.5rem 0 2rem;
   height: 100%;
   border-top: 1px solid $color-border;
 
@@ -29,6 +29,9 @@
 .footer-profile {
   &__name {
     font-size: 1rem;
+    &:hover {
+      opacity: 0.6;
+    }
   }
 
   &__icon {
@@ -36,6 +39,9 @@
     height: $size-footer-profile-icon;
     border-radius: $size-footer-profile-icon / 2;
     box-shadow: 0.25rem 0.25rem 0.25rem $color-shadow;
+    &:hover {
+      opacity: 0.6;
+    }
   }
 }
 
@@ -46,4 +52,4 @@
   &__link {
     color: $color-font-main;
   }
-}
+}

data/_sass/block/header.scss

@@ -3,22 +3,50 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
+  min-width: 70rem;
   width: 100%;
   height: $size-header-height;
 
   @include shadow-bottom();
+
+  @media screen and (max-width: 479px) {
+    min-width: 100%;
+    width: $size-additional-container-width-sp;
+    height: $size-header-height-sp;
+  }
 }
 
 .header-container {
-  @include container();
-
+  display: flex;
+  width: $size-additional-container-width;
+  @media screen and (max-width: 479px) {
+    justify-content: center;
+    width: $size-additional-container-width-sp;
+  }
   &__link {
+    margin-left: 5rem;
     text-decoration: none;
+
+    &:hover {
+      opacity: 0.6;
+    }
+
+    @media screen and (max-width: 479px) {
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      margin-left: 0;
+      width: $size-additional-container-width-sp;
+    }
   }
 
   &__title {
     width: 100%;
     color: $color-font-main;
     font-size: $size-font-header;
+    @media screen and (max-width: 479px) {
+      width: 90%;
+      font-size: $size-font-header-sp;
+    }
   }
-}
+}

data/_sass/block/not-found.scss

@@ -0,0 +1,24 @@
+.not-found {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  height: 20rem;
+
+  &__title{
+    margin-bottom: 2rem;
+    font-weight: bold;
+    font-size: 4.5rem;
+    line-height: 4.5rem;
+  }
+
+  &__text{
+    text-align: center;
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    @media screen and (max-width: 479px) {
+      font-size: 0.875rem;
+    }
+  }
+}

data/_sass/block/post-pager.scss

@@ -1,8 +1,8 @@
 .post-pager {
   align-items: center;
   flex-direction: row;
-  padding-bottom: 2rem;
-  height: 2rem;
+  margin: 0 0 4rem;
+  height: auto;
 
   @include container();
 
@@ -33,4 +33,4 @@
     color: $color-font-sub;
     font-size: 1rem;
   }
-}
+}

data/_sass/block/post.scss

@@ -1,22 +1,140 @@
+.additional-container{
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+  width: $size-additional-container-width;
+
+  @media screen and (max-width: 479px) {
+    align-content: center;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+  }
+}
+
 .post {
+  &__title {
+    margin-bottom: 1rem;
+    width: 100%;
+    font-size: 2.125rem;
+  }
+
   &__date {
+    margin-bottom: 0 !important;
+    width: 15%;
     color: $color-font-sub;
-    font-size: 0.875rem;
+    font-size: 1rem;
+    @media screen and (max-width: 479px) {
+      margin-bottom: .25rem !important;
+      width: 100%;
+      font-size: 0.875rem;
+    }
+  }
+}
+
+.post-container {
+  box-sizing: border-box;
+  padding: 2rem 0 0;
+  width: 50rem;
+
+  @media screen and (max-width: 479px) {
+    margin-left: 0;
+    padding: 0;
+    width: 90%;
+  }
+}
+
+.post-header {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.post-meta {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+  width: 100%;
+  height: 1.5rem;
+  @media screen and (max-width: 479px) {
+  margin-bottom: 1rem;
+  height: auto;
   }
 }
 
-.page-container,
-.post-container,
-.profile-container {
+.post-tags {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: right;
+  width: 85%;
+  height: 100%;
+  @media screen and (max-width: 479px) {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.post-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.375rem;
+  margin-bottom: 0.375rem;
+  height: 100%;
+  border: 1px solid $color-border;
+  border-radius: 0.75rem;
+
+  @media screen and (max-width: 479px) {
+    height: 1.5rem;
+  }
+
+  &__icon {
+    margin-right: 0.25rem;
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    margin-right: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    height: 100%;
+    color: $color-font-sub;
+    text-decoration: none;
+    font-size: 0.75rem;
+  }
+}
+
+.page-content,
+.post-content,
+.posts-content,
+.profile-content {
   flex-direction: column;
-  padding: 2rem 0 5rem;
+  padding: 0 0 5rem;
   color: $color-font-sub;
   line-height: 1.875rem;
 
   @include container();
 
+  @media screen and (max-width: 479px) {
+    padding: 0 0 0rem;
+    width: 100%;
+    height: auto;
+    line-height: 1.5rem;
+  }
+
   h1 {
     font-size: 1.75rem;
+    @media screen and (max-width: 479px) {
+      font-size: 1.375rem;
+    }
   }
 
   h2 {
@@ -64,7 +182,9 @@
   >ol,
   img,
   pre,
-  p {
+  p,
+  table,
+  blockquote {
     margin-bottom: 1.5rem;
   }
 
@@ -106,10 +226,36 @@
     background-color: #eee;
   }
 
+  blockquote {
+    padding: 0.25rem 0 0.25rem 0.5rem;
+    border-left: 0.25rem solid $color-border;
+
+    >p {
+      margin-bottom: 0;
+    }
+  }
+
   .highlighter-rouge {
     padding: 0 0.25rem;
     border: 1px solid $color-border;
     border-radius: 0.25rem;
     background-color: rgba($color-border, 0.25);
   }
-}
+}
+
+.post-content {
+  width: $size-post-container-width !important;
+
+  @media screen and (max-width: 479px) {
+    width: 100% !important;
+  }
+}
+
+.posts-content {
+  padding-bottom: 2rem !important;
+  width: $size-post-container-width !important;
+  @media screen and (max-width: 479px) {
+    padding-bottom: 0.5rem !important;
+    width: 100% !important;
+  }
+}

data/_sass/block/posts-pager.scss

@@ -1,7 +1,7 @@
 .posts-pager {
   align-items: center;
   flex-direction: row;
-  padding-bottom: 2rem;
+  margin-bottom: 2rem;
   height: 2rem;
 
   @include container();
@@ -40,4 +40,4 @@
     color: $color-font-sub;
     font-size: 1rem;
   }
-}
+}

data/_sass/block/posts.scss

@@ -3,4 +3,8 @@
   padding: 2rem 0 0;
 
   @include container();
+  @media screen and (max-width: 479px) {
+    padding: 1rem 0 0;
+    width: 90%;
+  }
 }

data/_sass/block/profile-page.scss

@@ -1,3 +1,14 @@
+.profile-container {
+  box-sizing: border-box;
+  padding: 2rem 0 0;
+
+  @media screen and (max-width: 479px) {
+    margin-left: 0;
+    padding: 0;
+    width: 90%;
+  }
+}
+
 .profile-page {
   &__name {
     margin-bottom: 0.5rem;
@@ -9,13 +20,17 @@
     height: $size-profile-page-icon;
     border-radius: $size-profile-page-icon / 2;
     box-shadow: 0.25rem 0.25rem 0.25rem $color-shadow;
+    @media screen and (max-width: 479px) {
+      width: $size-profile-page-icon * 0.85;
+      height: $size-profile-page-icon * 0.85;
+    }
   }
 }
 
 .profile-info {
   flex-direction: row;
   justify-content: flex-start;
-  padding: 2rem 0 0;
+  padding: 2rem 0 1.5rem;
 
   @include container();
 
@@ -28,4 +43,4 @@
     flex-direction: column;
     justify-content: center;
   }
-}
+}

data/_sass/block/recent-articles.scss

@@ -0,0 +1,34 @@
+.recent_articles {
+  position: sticky;
+  top: 3rem;
+  display: flex;
+  flex-direction: column;
+  padding: 2.5rem 0 0 2rem;
+  width: 15rem;
+  &__title {
+    margin-bottom: 0.5rem;
+    color: $color-font-main;
+  }
+  &__list {
+    list-style-type: none;
+  }
+
+  @media screen and (max-width: 479px) {
+    width: 100%;
+  }
+}
+
+.recent_article{
+  &__link {
+    color: $color-font-sub;
+    text-decoration: none;
+    &:hover {
+      opacity: .7;
+    }
+  }
+  &__title{
+    margin-bottom: .75rem;
+    color: $color-font-sub;
+    font-size: 0.875rem;
+  }
+}

data/_sass/block/sns-container.scss

@@ -0,0 +1,31 @@
+.sns-container {
+  position: sticky;
+  top: 3rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 2.5rem 0 0;
+  width: 5rem;
+  @media screen and (max-width: 479px) {
+    position: relative;
+    top: 0;
+    display: flex;
+    align-content: center;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-around;
+    padding: .75rem 0 0;
+    width: 70%;
+  }
+  &__button {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: .625rem;
+    text-decoration: none;
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+}

data/_sass/block/social-link.scss

@@ -6,7 +6,7 @@
   margin-bottom: 0.5rem;
 
   > :not(:last-child) {
-    margin-right: 0.5rem;
+    margin-right: .625rem;
   }
 
   a {
@@ -61,10 +61,56 @@
 
       @extend .social-link__item;
     }
+
+    &--hatena {
+      background-color: $color-hatena;
+
+      @extend .social-link__item;
+    }
+
+    &--pocket {
+      background-color: $color-pocket;
+
+      @extend .social-link__item;
+    }
   }
 }
 
 .fa {
-  color: white;
-  font-size: 1.5rem;
-}
+  &-social-link {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.5rem;
+  }
+
+  &-github {
+    @extend .fa-social-link;
+  }
+
+  &-twitter {
+    @extend .fa-social-link;
+  }
+
+  &-facebook {
+    @extend .fa-social-link;
+  }
+
+  &-hatena {
+    @extend .fa-social-link;
+    &:before {
+      content: "B!";
+      font-weight: bold;
+      font-style: normal;
+      font-size: 1.125rem;
+      font-family: Verdana;
+    }
+  }
+
+  &-get-pocket {
+    font-size: 1.125rem;
+
+    @extend .fa-social-link;
+  }
+}

data/_sass/block/tag-cloud.scss

@@ -0,0 +1,58 @@
+.tag-cloud {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  padding-bottom: 1.5rem;
+  width: 50rem;
+
+  @media screen and (max-width: 479px) {
+    width: 100%;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 1.25rem;
+    padding-bottom: 0.25rem;
+    width: 5rem;
+    color: $color-font-sub;
+    font-size: 1rem;
+    @media screen and (max-width: 479px) {
+      margin-bottom: .875rem;
+    }
+  }
+}
+
+.cloud-tags {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.cloud-tag {
+  display: flex;
+  align-items: center;
+  margin-right: 0.375rem;
+  margin-bottom: 0.375rem;
+  height: 100%;
+  border: 1px solid $color-border;
+  border-radius: 0.75rem;
+
+  &__icon {
+    margin-right: 0.25rem;
+  }
+
+  &__link {
+    margin-right: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    height: 100%;
+    color: $color-font-sub;
+    text-decoration: none;
+    font-size: 0.75rem;
+  }
+}

data/_sass/color.scss

@@ -8,4 +8,6 @@ $color-border: #ccc;
 //social
 $color-github:#161614;
 $color-twitter:#55acee;
-$color-facebook:#3b5998;
+$color-facebook:#3b5998;
+$color-hatena:#00a4de;
+$color-pocket:#EF4056;

data/_sass/import.scss

@@ -4,12 +4,17 @@
 @import "mixin/container";
 @import "mixin/shadow";
 @import "base";
-@import "block/header";
+@import "block/amazon-associate";
 @import "block/footer";
+@import "block/header";
+@import "block/not-found";
 @import "block/post";
+@import "block/post-pager";
 @import "block/posts";
+@import "block/posts-pager";
 @import "block/prettier";
+@import "block/profile-page";
+@import "block/recent-articles";
+@import "block/sns-container";
 @import "block/social-link";
-@import "block/post-pager";
-@import "block/posts-pager";
-@import "block/profile-page";
+@import "block/tag-cloud";

data/_sass/mixin/container.scss

@@ -1,4 +1,8 @@
 @mixin container() {
   display: flex;
   width: $size-container-width;
-}
+  @media screen and (max-width: 479px) {
+    display: flex;
+    width: $size-container-width-sp;
+  }
+}

data/_sass/mixin/shadow.scss

@@ -1,3 +1,3 @@
 @mixin shadow-bottom() {
   box-shadow: 0 0.15rem 0.15rem $color-shadow;
-}
+}

data/_sass/reset.scss

@@ -204,3 +204,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   height: 100%;
   opacity: 0;
 }
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box
+}

data/_sass/variable.scss

@@ -1,6 +1,11 @@
-$size-container-width: 50rem;
+$size-container-width: 60rem;
+$size-post-container-width: 50rem;
+$size-container-width-sp: 90%;
+$size-additional-container-width: 70rem;
+$size-additional-container-width-sp: 100%;
 
 $size-header-height: 3rem;
+$size-header-height-sp: 2rem;
 $size-footer-height: 3rem;
 
 $size-footer-profile-icon: 4rem;
@@ -8,4 +13,5 @@ $size-profile-page-icon: 6rem;
 
 // font
 $size-font-base: 16px;
-$size-font-header: 1.5rem;
+$size-font-header: 1.5rem;
+$size-font-header-sp: 1.125rem;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-louis
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.6
 platform: ruby
 authors:
 - ShimeWataru
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-01-09 00:00:00.000000000 Z
+date: 2020-09-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -24,6 +24,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: jekyll-paginate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: jekyll-archives
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -61,28 +89,40 @@ extra_rdoc_files: []
 files:
 - LICENSE.txt
 - README.md
+- _includes/amazon-associate.html
 - _includes/footer.html
 - _includes/head/favicon.html
+- _includes/head/google_analytics.html
 - _includes/head/twitter-ogp.html
 - _includes/header.html
 - _includes/post-pager.html
 - _includes/posts-pager.html
 - _includes/posts.html
+- _includes/recent-articles.html
+- _includes/sns-share.html
 - _includes/social-link.html
+- _includes/tag-cloud.html
+- _layouts/archive.html
 - _layouts/default.html
+- _layouts/index.html
 - _layouts/page.html
 - _layouts/post.html
 - _layouts/profile.html
 - _sass/base.scss
+- _sass/block/amazon-associate.scss
 - _sass/block/footer.scss
 - _sass/block/header.scss
+- _sass/block/not-found.scss
 - _sass/block/post-pager.scss
 - _sass/block/post.scss
 - _sass/block/posts-pager.scss
 - _sass/block/posts.scss
 - _sass/block/prettier.scss
 - _sass/block/profile-page.scss
+- _sass/block/recent-articles.scss
+- _sass/block/sns-container.scss
 - _sass/block/social-link.scss
+- _sass/block/tag-cloud.scss
 - _sass/color.scss
 - _sass/import.scss
 - _sass/mixin/container.scss
@@ -105,6 +145,7 @@ files:
 - assets/images/favicon/site.webmanifest
 - assets/images/profile_icon.png
 - assets/images/usage_image.png
+- assets/ogp/ogp.png
 homepage: https://github.com/wawawatataru/louis
 licenses:
 - MIT