jekyll-theme-louis 0.1.3 → 0.1.4

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c7425b0ee981319ec775af27e1c5dd92df0081c517be5a7e42d7beaeda2c5dbc
4
- data.tar.gz: 1fe6af5a8b80573eb94fa199a6f3ac9d341402e26334d36178627b4d9888f4cb
3
+ metadata.gz: ba35ee7a15c8c68e4494bc5e14ee2e16197a98d4842d93a8dc26a4b718707c0b
4
+ data.tar.gz: ed3a9f7162ed1d0983cb7f70874dc80a67f232b2c2461216d6b3ea41cca591da
5
5
  SHA512:
6
- metadata.gz: 0d9ddc2ea2479401f8ab0941918e19ea01c518c9531c3767ca177398e2045b841fb35534ac1da62bb39e68022bbf250abea2d0772844a9018bfd3582739e1f1f
7
- data.tar.gz: dbb7ed11be5952335e1c3bf734eaa9b8743108257a07617318b3c30245416a4978e36c50d734e6081a060eb6130228a0520fca6ec3b902448ec8eb03f38f1599
6
+ metadata.gz: 535d1f37052331a9cd8197f4c4546f8247e52809c5a404082563616a5cb8061e45e6978bc3a21761a13419fc063b2d6fc5f56770fe98d2df4eaa5c7c0f778792
7
+ data.tar.gz: 6d803eea89d58c28963bf1a0e97c7cb749a579a98b3dda8bacf55e09d0cb0f160bb73b9afff19eabf009db5ffe81170e9a847caf3ee0ed760092bbbdbd18982f
@@ -0,0 +1,16 @@
1
+ <div class="recent_articles">
2
+ <p class="recent_articles__title">最新の記事</p>
3
+ <ul class="recent_articles__list">
4
+ {% for post in site.posts %}
5
+ {% if forloop.index0 > 4 %}
6
+ {% break %}
7
+ {% else %}
8
+ <li class="recent_article__title">
9
+ <a class="recent_article__link" href={{ post.url | relative_url }}>
10
+ {{ post.title }}
11
+ </a>
12
+ </li>
13
+ {% endif %}
14
+ {% endfor %}
15
+ </ul>
16
+ </div>
@@ -0,0 +1,38 @@
1
+ <div class="sns-container">
2
+ <a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ page.url }}&via={{ site.author.twitter if site.author.twitter }}"
3
+ target="_blank"
4
+ rel="nofollow noopener noreferrer"
5
+ class="sns-container__button"
6
+ >
7
+ <p class="social-link__item--twitter">
8
+ <i class="fa fa-twitter"></i>
9
+ </p>
10
+ </a>
11
+ <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}"
12
+ target="_blank"
13
+ rel="nofollow noopener noreferrer"
14
+ class="sns-container__button"
15
+ >
16
+ <p class="social-link__item--facebook">
17
+ <i class="fa fa-facebook"></i>
18
+ </p>
19
+ </a>
20
+ <a href="http://b.hatena.ne.jp/add?&url={{ site.url }}{{ page.url }}"
21
+ target="_blank"
22
+ rel="nofollow noopener noreferrer"
23
+ class="sns-container__button"
24
+ >
25
+ <p class="social-link__item--hatena">
26
+ <i class="fa-hatena"></i>
27
+ </p>
28
+ </a>
29
+ <a href="https://getpocket.com/edit?url={{ site.url }}{{ page.url }}"
30
+ target="_blank"
31
+ rel="nofollow noopener noreferrer"
32
+ class="sns-container__button"
33
+ >
34
+ <p class="social-link__item--pocket">
35
+ <i class="fa fa-get-pocket"></i>
36
+ </p>
37
+ </a>
38
+ </div>
@@ -8,7 +8,7 @@
8
8
  <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
9
9
  <link rel="stylesheet" href="{{ '/assets/css/common.css' | relative_url }}">
10
10
  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
11
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+ <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
12
12
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
13
13
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
14
14
  {% include head/twitter-ogp.html %}
@@ -0,0 +1,5 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {% include posts.html %}
5
+ {% include posts-pager.html %}
@@ -1,25 +1,29 @@
1
1
  ---
2
2
  layout: default
3
3
  ---
4
- <div class="post-container">
5
- <div class="post-header">
6
- <h1 class="post__title">{{ page.title }}</h1>
7
- <div class="post-meta">
8
- <p class="post__date">{{ page.date | date: '%Y/%-m/%-d' }}</p>
9
- <div class="post-tags">
10
- {% for tag in page.tags %}
11
- <div class="post-tag">
12
- <a class="post-tag__link" href="{{ '/archives/tag/' | append: tag | relative_url }}">
13
- <i class="fa fa-tag post-tag__icon"></i>{{ tag }}
14
- </a>
15
- </div>
16
- {% endfor %}
4
+ <div class="additional-container">
5
+ {% include sns-share.html %}
6
+ <div class="post-container">
7
+ <div class="post-header">
8
+ <h1 class="post__title">{{ page.title }}</h1>
9
+ <div class="post-meta">
10
+ <p class="post__date">{{ page.date | date: '%Y/%-m/%-d' }}</p>
11
+ <div class="post-tags">
12
+ {% for tag in page.tags %}
13
+ <div class="post-tag">
14
+ <a class="post-tag__link" href="{{ '/archives/tag/' | append: tag | relative_url }}">
15
+ <i class="fa fa-tag post-tag__icon"></i>{{ tag }}
16
+ </a>
17
+ </div>
18
+ {% endfor %}
19
+ </div>
17
20
  </div>
18
21
  </div>
22
+ <div class="post-content">
23
+ {{ content }}
24
+ </div>
19
25
  </div>
20
- <div class="post-content">
21
- {{ content }}
22
- </div>
26
+ {% include recent-articles.html %}
23
27
  </div>
24
28
 
25
29
  {% include post-pager.html %}
@@ -1,7 +1,7 @@
1
1
  html {
2
+ min-height: 100vh;
2
3
  color: $color-font-main;
3
4
  font-size: $size-font-base;
4
- min-height: 100vh;
5
5
  }
6
6
 
7
7
  body {
@@ -10,3 +10,18 @@ body {
10
10
  flex-direction: column;
11
11
  min-height: 100vh;
12
12
  }
13
+
14
+ @media screen and (max-width: 479px) {
15
+ html {
16
+ min-height: 100vh;
17
+ color: $color-font-main;
18
+ font-size: $size-font-base;
19
+ }
20
+
21
+ body {
22
+ display: flex;
23
+ align-items: center;
24
+ flex-direction: column;
25
+ min-height: 100vh;
26
+ }
27
+ }
@@ -10,7 +10,7 @@
10
10
  .footer-container {
11
11
  align-items: center;
12
12
  flex-direction: column;
13
- padding: 1.5rem 0 2rem;
13
+ padding: 3.5rem 0 2rem;
14
14
  height: 100%;
15
15
  border-top: 1px solid $color-border;
16
16
 
@@ -29,6 +29,9 @@
29
29
  .footer-profile {
30
30
  &__name {
31
31
  font-size: 1rem;
32
+ &:hover {
33
+ opacity: 0.6;
34
+ }
32
35
  }
33
36
 
34
37
  &__icon {
@@ -36,6 +39,9 @@
36
39
  height: $size-footer-profile-icon;
37
40
  border-radius: $size-footer-profile-icon / 2;
38
41
  box-shadow: 0.25rem 0.25rem 0.25rem $color-shadow;
42
+ &:hover {
43
+ opacity: 0.6;
44
+ }
39
45
  }
40
46
  }
41
47
 
@@ -7,18 +7,39 @@
7
7
  height: $size-header-height;
8
8
 
9
9
  @include shadow-bottom();
10
+
11
+ @media screen and (max-width: 479px) {
12
+ width: $size-additional-container-width-sp;
13
+ height: $size-header-height-sp;
14
+ }
10
15
  }
11
16
 
12
17
  .header-container {
13
- @include container();
14
-
18
+ display: flex;
19
+ width: $size-additional-container-width;
20
+ @media screen and (max-width: 479px) {
21
+ justify-content: center;
22
+ width: $size-additional-container-width-sp;
23
+ }
15
24
  &__link {
16
25
  text-decoration: none;
26
+ @media screen and (max-width: 479px) {
27
+ display: flex;
28
+ align-content: center;
29
+ justify-content: center;
30
+ width: $size-additional-container-width-sp;
31
+ }
17
32
  }
18
33
 
19
34
  &__title {
35
+ padding-left: 5rem;
20
36
  width: 100%;
21
37
  color: $color-font-main;
22
38
  font-size: $size-font-header;
39
+ @media screen and (max-width: 479px) {
40
+ padding-left: 0;
41
+ width: 90%;
42
+ font-size: $size-font-header-sp;
43
+ }
23
44
  }
24
45
  }
@@ -1,8 +1,8 @@
1
1
  .post-pager {
2
2
  align-items: center;
3
3
  flex-direction: row;
4
- padding-bottom: 2rem;
5
- height: 2rem;
4
+ margin: 0 0 4rem;
5
+ height: auto;
6
6
 
7
7
  @include container();
8
8
 
@@ -1,6 +1,22 @@
1
+ .additional-container{
2
+ display: flex;
3
+ flex-direction: row;
4
+ flex-wrap: wrap;
5
+ margin-bottom: 2rem;
6
+ width: $size-additional-container-width;
7
+
8
+ @media screen and (max-width: 479px) {
9
+ align-content: center;
10
+ align-items: center;
11
+ flex-direction: column;
12
+ justify-content: center;
13
+ width: 100%;
14
+ }
15
+ }
16
+
1
17
  .post {
2
18
  &__title {
3
- margin-bottom: 0.5rem;
19
+ margin-bottom: 1rem;
4
20
  width: 100%;
5
21
  font-size: 2.125rem;
6
22
  }
@@ -10,12 +26,25 @@
10
26
  width: 15%;
11
27
  color: $color-font-sub;
12
28
  font-size: 1rem;
29
+ @media screen and (max-width: 479px) {
30
+ margin-bottom: .25rem !important;
31
+ width: 100%;
32
+ font-size: 0.875rem;
33
+ }
13
34
  }
14
35
  }
15
36
 
16
37
  .post-container {
38
+ box-sizing: border-box;
39
+ margin-left: 5rem;
17
40
  padding: 2rem 0 0;
18
41
  width: 50rem;
42
+
43
+ @media screen and (max-width: 479px) {
44
+ margin-left: 0;
45
+ padding: 0;
46
+ width: 90%;
47
+ }
19
48
  }
20
49
 
21
50
  .post-header {
@@ -32,6 +61,10 @@
32
61
  margin-bottom: 2rem;
33
62
  width: 100%;
34
63
  height: 1.5rem;
64
+ @media screen and (max-width: 479px) {
65
+ margin-bottom: 1rem;
66
+ height: auto;
67
+ }
35
68
  }
36
69
 
37
70
  .post-tags {
@@ -42,6 +75,10 @@
42
75
  justify-content: right;
43
76
  width: 85%;
44
77
  height: 100%;
78
+ @media screen and (max-width: 479px) {
79
+ width: 100%;
80
+ height: auto;
81
+ }
45
82
  }
46
83
 
47
84
  .post-tag {
@@ -54,6 +91,10 @@
54
91
  border: 1px solid $color-border;
55
92
  border-radius: 0.75rem;
56
93
 
94
+ @media screen and (max-width: 479px) {
95
+ height: 1.5rem;
96
+ }
97
+
57
98
  &__icon {
58
99
  margin-right: 0.25rem;
59
100
  }
@@ -82,8 +123,18 @@
82
123
 
83
124
  @include container();
84
125
 
126
+ @media screen and (max-width: 479px) {
127
+ padding: 0 0 0rem;
128
+ width: 100%;
129
+ height: auto;
130
+ line-height: 1.5rem;
131
+ }
132
+
85
133
  h1 {
86
134
  font-size: 1.75rem;
135
+ @media screen and (max-width: 479px) {
136
+ font-size: 1.375rem;
137
+ }
87
138
  }
88
139
 
89
140
  h2 {
@@ -192,6 +243,19 @@
192
243
  }
193
244
  }
194
245
 
246
+ .post-content {
247
+ width: $size-post-container-width !important;
248
+
249
+ @media screen and (max-width: 479px) {
250
+ width: 100% !important;
251
+ }
252
+ }
253
+
195
254
  .posts-content {
196
255
  padding-bottom: 2rem !important;
256
+ width: $size-post-container-width !important;
257
+ @media screen and (max-width: 479px) {
258
+ padding-bottom: 0rem !important;
259
+ width: 100% !important;
260
+ }
197
261
  }
@@ -1,7 +1,7 @@
1
1
  .posts-pager {
2
2
  align-items: center;
3
3
  flex-direction: row;
4
- padding-bottom: 2rem;
4
+ margin-bottom: 2rem;
5
5
  height: 2rem;
6
6
 
7
7
  @include container();
@@ -3,4 +3,8 @@
3
3
  padding: 2rem 0 0;
4
4
 
5
5
  @include container();
6
+ @media screen and (max-width: 479px) {
7
+ padding: 1rem 0 0;
8
+ width: 90%;
9
+ }
6
10
  }
@@ -0,0 +1,32 @@
1
+ .recent_articles {
2
+ display: flex;
3
+ flex-direction: column;
4
+ padding: 2.5rem 0 0 2rem;
5
+ width: 15rem;
6
+ &__title {
7
+ margin-bottom: 0.5rem;
8
+ color: $color-font-main;
9
+ }
10
+ &__list {
11
+ list-style-type: none;
12
+ }
13
+
14
+ @media screen and (max-width: 479px) {
15
+ width: 100%;
16
+ }
17
+ }
18
+
19
+ .recent_article{
20
+ &__link {
21
+ color: $color-font-sub;
22
+ text-decoration: none;
23
+ &:hover {
24
+ opacity: .7;
25
+ }
26
+ }
27
+ &__title{
28
+ margin-bottom: .75rem;
29
+ color: $color-font-sub;
30
+ font-size: 0.875rem;
31
+ }
32
+ }
@@ -0,0 +1,30 @@
1
+ .sns-container {
2
+ position: fixed;
3
+ display: flex;
4
+ align-items: center;
5
+ flex-direction: column;
6
+ padding: 2.5rem 0 0;
7
+ width: 5rem;
8
+
9
+ @media screen and (max-width: 479px) {
10
+ position: relative;
11
+ display: flex;
12
+ align-content: center;
13
+ align-items: center;
14
+ flex-direction: row;
15
+ justify-content: space-around;
16
+ padding: .75rem 0 0;
17
+ width: 70%;
18
+ }
19
+ &__button {
20
+ display: flex;
21
+ align-items: center;
22
+ flex-direction: column;
23
+ justify-content: center;
24
+ margin-bottom: .625rem;
25
+ text-decoration: none;
26
+ &:hover {
27
+ opacity: 0.6;
28
+ }
29
+ }
30
+ }
@@ -6,7 +6,7 @@
6
6
  margin-bottom: 0.5rem;
7
7
 
8
8
  > :not(:last-child) {
9
- margin-right: 0.5rem;
9
+ margin-right: .625rem;
10
10
  }
11
11
 
12
12
  a {
@@ -61,14 +61,28 @@
61
61
 
62
62
  @extend .social-link__item;
63
63
  }
64
+
65
+ &--hatena {
66
+ background-color: $color-hatena;
67
+
68
+ @extend .social-link__item;
69
+ }
70
+
71
+ &--pocket {
72
+ background-color: $color-pocket;
73
+
74
+ @extend .social-link__item;
75
+ }
64
76
  }
65
77
  }
66
78
 
67
79
  .fa {
68
80
  &-social-link {
81
+ display: flex;
82
+ align-content: center;
83
+ justify-content: center;
69
84
  color: white;
70
85
  font-size: 1.5rem;
71
-
72
86
  }
73
87
 
74
88
  &-github {
@@ -82,4 +96,21 @@
82
96
  &-facebook {
83
97
  @extend .fa-social-link;
84
98
  }
99
+
100
+ &-hatena {
101
+ @extend .fa-social-link;
102
+ &:before {
103
+ content: "B!";
104
+ font-weight: bold;
105
+ font-style: normal;
106
+ font-size: 1.125rem;
107
+ font-family: Verdana;
108
+ }
109
+ }
110
+
111
+ &-get-pocket {
112
+ font-size: 1.125rem;
113
+
114
+ @extend .fa-social-link;
115
+ }
85
116
  }
@@ -6,17 +6,23 @@
6
6
  padding-bottom: 1.5rem;
7
7
  width: 50rem;
8
8
 
9
+ @media screen and (max-width: 479px) {
10
+ width: 100%;
11
+ }
12
+
9
13
  &__title {
10
14
  display: flex;
11
15
  align-items: center;
12
16
  flex-direction: column;
13
17
  justify-content: center;
14
- margin-bottom: 1rem;
18
+ margin-bottom: 1.25rem;
15
19
  padding-bottom: 0.25rem;
16
20
  width: 5rem;
17
- border-bottom: 1px solid $color-border;
18
21
  color: $color-font-sub;
19
22
  font-size: 1rem;
23
+ @media screen and (max-width: 479px) {
24
+ margin-bottom: .875rem;
25
+ }
20
26
  }
21
27
  }
22
28
 
@@ -8,4 +8,6 @@ $color-border: #ccc;
8
8
  //social
9
9
  $color-github:#161614;
10
10
  $color-twitter:#55acee;
11
- $color-facebook:#3b5998;
11
+ $color-facebook:#3b5998;
12
+ $color-hatena:#00a4de;
13
+ $color-pocket:#EF4056;
@@ -13,5 +13,7 @@
13
13
  @import "block/posts-pager";
14
14
  @import "block/prettier";
15
15
  @import "block/profile-page";
16
+ @import "block/recent-articles";
17
+ @import "block/sns-container";
16
18
  @import "block/social-link";
17
- @import "block/tag-cloud";
19
+ @import "block/tag-cloud";
@@ -1,4 +1,8 @@
1
1
  @mixin container() {
2
2
  display: flex;
3
3
  width: $size-container-width;
4
+ @media screen and (max-width: 479px) {
5
+ display: flex;
6
+ width: $size-container-width-sp;
7
+ }
4
8
  }
@@ -1,6 +1,11 @@
1
- $size-container-width: 50rem;
1
+ $size-container-width: 60rem;
2
+ $size-post-container-width: 50rem;
3
+ $size-container-width-sp: 90%;
4
+ $size-additional-container-width: 70rem;
5
+ $size-additional-container-width-sp: 100%;
2
6
 
3
7
  $size-header-height: 3rem;
8
+ $size-header-height-sp: 2rem;
4
9
  $size-footer-height: 3rem;
5
10
 
6
11
  $size-footer-profile-icon: 4rem;
@@ -8,4 +13,5 @@ $size-profile-page-icon: 6rem;
8
13
 
9
14
  // font
10
15
  $size-font-base: 16px;
11
- $size-font-header: 1.5rem;
16
+ $size-font-header: 1.5rem;
17
+ $size-font-header-sp: 1.125rem;
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-louis
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.3
4
+ version: 0.1.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - ShimeWataru
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-02-16 00:00:00.000000000 Z
11
+ date: 2020-08-29 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -70,10 +70,13 @@ files:
70
70
  - _includes/post-pager.html
71
71
  - _includes/posts-pager.html
72
72
  - _includes/posts.html
73
+ - _includes/recent-articles.html
74
+ - _includes/sns-share.html
73
75
  - _includes/social-link.html
74
76
  - _includes/tag-cloud.html
75
77
  - _layouts/archive.html
76
78
  - _layouts/default.html
79
+ - _layouts/index.html
77
80
  - _layouts/page.html
78
81
  - _layouts/post.html
79
82
  - _layouts/profile.html
@@ -87,6 +90,8 @@ files:
87
90
  - _sass/block/posts.scss
88
91
  - _sass/block/prettier.scss
89
92
  - _sass/block/profile-page.scss
93
+ - _sass/block/recent-articles.scss
94
+ - _sass/block/sns-container.scss
90
95
  - _sass/block/social-link.scss
91
96
  - _sass/block/tag-cloud.scss
92
97
  - _sass/color.scss
@@ -130,7 +135,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
130
135
  - !ruby/object:Gem::Version
131
136
  version: '0'
132
137
  requirements: []
133
- rubygems_version: 3.0.3
138
+ rubygems_version: 3.1.4
134
139
  signing_key:
135
140
  specification_version: 4
136
141
  summary: Louis is a Jekyll theme for Blog