jekyll-theme-louis 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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