hydn 0.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (79) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +208 -0
  4. data/_config.yml +87 -0
  5. data/_includes/aboutme.html +27 -0
  6. data/_includes/comment.html +19 -0
  7. data/_includes/editior.html +35 -0
  8. data/_includes/footer.html +12 -0
  9. data/_includes/header.html +15 -0
  10. data/_includes/navigation.html +14 -0
  11. data/_includes/post-author-list.html +13 -0
  12. data/_includes/postlist-item.html +17 -0
  13. data/_includes/profile.html +0 -0
  14. data/_includes/search.html +16 -0
  15. data/_layouts/all-categories.html +25 -0
  16. data/_layouts/all-posts.html +38 -0
  17. data/_layouts/all-series.html +27 -0
  18. data/_layouts/all-tags.html +22 -0
  19. data/_layouts/author-page.html +55 -0
  20. data/_layouts/category-page.html +19 -0
  21. data/_layouts/default.html +45 -0
  22. data/_layouts/home.html +34 -0
  23. data/_layouts/page.html +5 -0
  24. data/_layouts/post.html +60 -0
  25. data/_layouts/search.html +37 -0
  26. data/_layouts/series-page.html +25 -0
  27. data/_sass/hydn/about_layout.scss +66 -0
  28. data/_sass/hydn/code.scss +194 -0
  29. data/_sass/hydn/footer.scss +33 -0
  30. data/_sass/hydn/header.scss +104 -0
  31. data/_sass/hydn/layout.scss +29 -0
  32. data/_sass/hydn/main.scss +48 -0
  33. data/_sass/hydn/nav.scss +0 -0
  34. data/_sass/hydn/postlist-item.scss +9 -0
  35. data/_sass/hydn/tagpost.scss +7 -0
  36. data/_sass/hydn/typo.scss +209 -0
  37. data/_sass/hydn/variables.scss +89 -0
  38. data/assets/css/style.scss +4 -0
  39. data/assets/img/hydn/about.webp +0 -0
  40. data/assets/img/hydn/about_aboutme.png +0 -0
  41. data/assets/img/hydn/about_all.png +0 -0
  42. data/assets/img/hydn/about_category.png +0 -0
  43. data/assets/img/hydn/about_disqus.jpg +0 -0
  44. data/assets/img/hydn/about_disqus_screen.jpg +0 -0
  45. data/assets/img/hydn/about_editior.png +0 -0
  46. data/assets/img/hydn/about_editior_2.png +0 -0
  47. data/assets/img/hydn/about_help.png +0 -0
  48. data/assets/img/hydn/about_help_icon.png +0 -0
  49. data/assets/img/hydn/about_home.png +0 -0
  50. data/assets/img/hydn/about_hydn_logo.png +0 -0
  51. data/assets/img/hydn/about_menu.png +0 -0
  52. data/assets/img/hydn/about_readme.png +0 -0
  53. data/assets/img/hydn/about_search.png +0 -0
  54. data/assets/img/hydn/about_search_console.png +0 -0
  55. data/assets/img/hydn/about_search_console.screen_01.png +0 -0
  56. data/assets/img/hydn/about_search_console.screen_02.png +0 -0
  57. data/assets/img/hydn/about_search_screen.png +0 -0
  58. data/assets/img/hydn/about_series.png +0 -0
  59. data/assets/img/hydn/about_series_screen.png +0 -0
  60. data/assets/img/hydn/about_tag.png +0 -0
  61. data/assets/img/hydn/about_top_image.png +0 -0
  62. data/assets/img/hydn/about_whoami.jpg +0 -0
  63. data/assets/img/hydn/author_text.png +0 -0
  64. data/assets/img/hydn/default-profile.png +0 -0
  65. data/assets/img/hydn/forest.jpg +0 -0
  66. data/assets/img/hydn/lake.jpg +0 -0
  67. data/assets/img/hydn/menu_white_24dp.svg +1 -0
  68. data/assets/img/hydn/scarlet.jpg +0 -0
  69. data/assets/img/hydn/search.png +0 -0
  70. data/assets/img/hydn/snow.jpg +0 -0
  71. data/assets/img/hydn/title.webp +0 -0
  72. data/assets/img/hydn/work.jpg +0 -0
  73. data/assets/tipuesearch/css/normalize.css +461 -0
  74. data/assets/tipuesearch/css/tipuesearch.css +251 -0
  75. data/assets/tipuesearch/search.png +0 -0
  76. data/assets/tipuesearch/tipuesearch.min.js +178 -0
  77. data/assets/tipuesearch/tipuesearch_content.js +83 -0
  78. data/assets/tipuesearch/tipuesearch_set.js +80 -0
  79. metadata +192 -0
@@ -0,0 +1,55 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <img src="{{ page.image | relative_url }}"
6
+ alt="{{ page.name }}'s profile image"
7
+ alt="편집자 커버 이미지"
8
+ class="post-head-image"
9
+ />
10
+ <br />
11
+ <section>
12
+ <div class = "information">
13
+ <h1> 편집자 정보 &nbsp </h1>
14
+ <img src = "{{ 'assets/img/hydn/about_help.png' | relative_url }}"
15
+ width="5%"
16
+ height="5%"
17
+ alt="편집자 정보"
18
+ />
19
+ </div>
20
+ <br />
21
+ {% include editior.html %}
22
+ <hr />
23
+ <div class = "information">
24
+ <h1>자기소개 &nbsp; </h1>
25
+ <img src = "{{ 'assets/img/hydn/about_whoami.jpg' | relative_url }}"
26
+ width="17%"
27
+ height="17%"
28
+ alt="자기소개"
29
+ />
30
+ </div>
31
+ <br />
32
+ <h5> {{ content }} </h5>
33
+ <hr />
34
+ <div class = "information">
35
+ <h1>작성한 글 &nbsp; </h1>
36
+ <img src = "{{ 'assets/img/hydn/author_text.png' | relative_url }}"
37
+ width="7%"
38
+ height="7%"
39
+ alt="작성한 글"
40
+ />
41
+ </div>
42
+ <br />
43
+ <div>
44
+ <ul>
45
+ {% for post in site.posts %}
46
+ {% if post.author == page.short_name or post.authors contains page.short_name %}
47
+ {% include postlist-item.html %}
48
+ {% endif %}
49
+ {% endfor %}
50
+ </ul>
51
+ </div>
52
+ <hr/>
53
+ </section>
54
+
55
+
@@ -0,0 +1,19 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <section class="typo-margin">
6
+ <h1>{{ page.title | upcase }} 카테고리</h1>
7
+
8
+ {{ content }}
9
+
10
+ <h2>포스트 목록</h2>
11
+
12
+ <ul>
13
+ {% for post in site.posts %}
14
+ {% if post.categories contains page.title or post.category == page.title %}
15
+ {% include postlist-item.html %}
16
+ {% endif %}
17
+ {% endfor %}
18
+ </ul>
19
+ </section>
@@ -0,0 +1,45 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+
8
+ <link
9
+ rel="stylesheet"
10
+ href="{{ '/assets/css/style.css' | relative_url }}"
11
+ />
12
+ <!-- Embed web fonts at here. -->
13
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
14
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15
+ <link
16
+ href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap"
17
+ rel="stylesheet"
18
+ />
19
+ <link
20
+ rel="stylesheet"
21
+ type="text/css"
22
+ href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css"
23
+ />
24
+ <!-- tipuesearch -->
25
+ <link rel="stylesheet" href="{{ '/assets/tipuesearch/css/tipuesearch.css' | relative_url }}" />
26
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
27
+ <script src="{{ '/assets/tipuesearch/tipuesearch_content.js' | relative_url }}"></script>
28
+ <script src="{{ '/assets/tipuesearch/tipuesearch_set.js' | relative_url }}"></script>
29
+ <script src="{{ '/assets/tipuesearch/tipuesearch.min.js' | relative_url }}"></script>
30
+
31
+ <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
32
+ <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
33
+ <meta name="theme-color" content="#ffffff" />
34
+
35
+ {% seo %}
36
+ <title>{{ site.title }}</title>
37
+ </head>
38
+ <body>
39
+ {% include header.html %}
40
+ <main>
41
+ {{ content }}
42
+ </main>
43
+ {% include footer.html %}
44
+ </body>
45
+ </html>
@@ -0,0 +1,34 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {% if page.cover %}
6
+ <img
7
+ class="post-head-image"
8
+ src="{{ page.cover | relative_url }}"
9
+ height="300px"
10
+ alt="배경 사진"
11
+ />
12
+ {% endif %}
13
+
14
+ <section class="typo-margin">
15
+ <!-- <h1>{{ site.title }}</h1> -->
16
+ <h2>추천 포스트</h2>
17
+
18
+ <ul>
19
+ {% for post in site.posts %}
20
+ {% if post.featured %}
21
+ {% include postlist-item.html %}
22
+ {% endif %}
23
+ {% endfor %}
24
+ </ul>
25
+
26
+ <h2>최신 포스트</h2>
27
+
28
+ <ul>
29
+ {% for post in site.posts %}
30
+ {% include postlist-item.html %}
31
+ {% endfor %}
32
+ {% include search.html %}
33
+ </ul>
34
+ </section>
@@ -0,0 +1,5 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ {{ content }}
@@ -0,0 +1,60 @@
1
+ ---
2
+ layout: default
3
+ current: post
4
+ ---
5
+
6
+ {% include post-author-list.html target=page %}
7
+
8
+ {% if page.cover %}
9
+ <img
10
+ src="{{ page.cover | relative_url }}"
11
+ alt="Title image of {{ page.title }}"
12
+ class="post-head-image"
13
+ />
14
+ {% endif %}
15
+
16
+ <article>
17
+
18
+ <h1>{{ page.title }}</h1>
19
+
20
+ <p class="meta">
21
+ {{ page.date | date: site.date_format }} ·
22
+ Written by {{ post_author_list | join: ", " }}
23
+ </p>
24
+
25
+ {{ content }}
26
+ </article>
27
+
28
+ <section>
29
+ <div class="neighbor">
30
+ <p class="meta">이전 글</p>
31
+
32
+ {% if page.previous %}
33
+ <p>
34
+ <a href="{{ page.previous.url | relative_url }}">
35
+ {{page.previous.title}}
36
+ </a>
37
+ </p>
38
+ {% else %}
39
+ <p>이전 글이 없습니다.</p>
40
+ {% endif %}
41
+
42
+ <p class="meta">다음 글</p>
43
+
44
+ {% if page.next %}
45
+ <p>
46
+ <a href="{{ page.next.url | relative_url }}"> {{page.next.title}} </a>
47
+ </p>
48
+ {% else %}
49
+ <p>다음 글이 없습니다.</p>
50
+ {% endif %}
51
+ </div>
52
+ </section>
53
+ <section>
54
+ <script
55
+ id="dsq-count-scr"
56
+ src="//hydn-blog-1.disqus.com/count.js"
57
+ async
58
+ ></script>
59
+ {% include comment.html %}
60
+ </section>
@@ -0,0 +1,37 @@
1
+ ---
2
+ layout: page
3
+ tipue_search_active: true
4
+ exclude_from_search: true
5
+ ---
6
+
7
+ <section class="typo-margin">
8
+ <form action="{{ page.url | relative_url }}">
9
+ <div class="tipue_search_left">
10
+ <img src="{{ '/assets/tipuesearch/search.png' | relative_url }}"
11
+ class="tipue_search_icon">
12
+ </div>
13
+ <div class="tipue_search_right">
14
+ <input
15
+ type="text"
16
+ name="q"
17
+ id="tipue_search_input"
18
+ pattern=".{3,}"
19
+ title="At least 3 characters"
20
+ required
21
+ />
22
+ </div>
23
+ <div style="clear: both"></div>
24
+ </form>
25
+
26
+ <div id="tipue_search_content"></div>
27
+
28
+ <script>
29
+ $(document).ready(function () {
30
+ $("#tipue_search_input").tipuesearch({
31
+ wholeWords: false,
32
+ showTime: false,
33
+ minimumLength: 1,
34
+ });
35
+ });
36
+ </script>
37
+ </section>
@@ -0,0 +1,25 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <section class="typo-margin">
6
+ <h1>{{ page.title | upcase }} 시리즈</h1>
7
+
8
+ {{ content }}
9
+
10
+ <h2>포스트 목록</h2>
11
+
12
+ <ul>
13
+ {% for post in site.posts %}
14
+ {% if post.series contains page.short_name or post.series == page.short_name %}
15
+ <li>
16
+ <div>
17
+ <h3><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h3>
18
+ <p>{{ post.excerpt }}</p>
19
+ <p>{{ post.date | date: "%Y/%m/%d" }}</p>
20
+ </div>
21
+ </li>
22
+ {% endif %}
23
+ {% endfor %}
24
+ </ul>
25
+ </section>
@@ -0,0 +1,66 @@
1
+ .about_introduction {
2
+ display: flex;
3
+ align-content: flex-start;
4
+ display : flex;
5
+ font-size: larger;
6
+ }
7
+
8
+ .information {
9
+ display: flex;
10
+ }
11
+
12
+ .about_supervisor {
13
+ text-align: start;
14
+ border: 2px solid gray;
15
+ margin: 10px 30px 30px 5px;
16
+ border-radius: 10px;
17
+ background: white;
18
+ width: 250px;
19
+ }
20
+
21
+ .about_page_body {
22
+ align-items: start;
23
+ margin-top: 10px;
24
+ display: flex;
25
+ }
26
+
27
+ .about_list {
28
+ display: flex;
29
+ color: #025291;
30
+ margin : 0px 0px 0px 80px;
31
+ }
32
+
33
+ strong {
34
+ display: flex;
35
+ font-size: 18px;
36
+ color: darkblue;
37
+ margin: 10px 10px 10px 10px;
38
+ }
39
+
40
+ #item {
41
+ width: 50%;
42
+ margin: 0 auto;
43
+ }
44
+
45
+ img {
46
+ display: flex;
47
+ align-items: baseline;
48
+ align-content: center;
49
+ }
50
+
51
+ hr {
52
+ display: block;
53
+ margin : 30px 0px 30px 0px;
54
+ border-width: 2px;
55
+ }
56
+
57
+ .maintext{
58
+ line-height: 200%;
59
+ }
60
+
61
+ a[href = "https://developers.google.com/search/docs/advanced/robots/create-robots-txt?hl=ko&ref_topic=6061961&visit_id=637740100065122931-238226223&rd=1"],
62
+ a[href = "https://developers.google.com/search#?modal_active=none"],
63
+ a[href = "http://jnwhome.iptime.org/redmine/projects/open-board/wiki/%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%84_%EC%82%AC%EC%9A%A9%ED%95%9C_Jerkyll_Sitemap_%EB%A7%8C%EB%93%A4%EA%B8%B0"]
64
+ {
65
+ color : #737373;
66
+ }
@@ -0,0 +1,194 @@
1
+ .highlight pre {
2
+ background-color: #272822;
3
+ }
4
+ .highlight .hll {
5
+ background-color: #272822;
6
+ }
7
+ .highlight .c {
8
+ color: #75715e;
9
+ }
10
+ .highlight .err {
11
+ color: #960050;
12
+ background-color: #1e0010;
13
+ }
14
+ .highlight .k {
15
+ color: #66d9ef;
16
+ }
17
+ .highlight .l {
18
+ color: #ae81ff;
19
+ }
20
+ .highlight .n {
21
+ color: #f8f8f2;
22
+ }
23
+ .highlight .o {
24
+ color: #f92672;
25
+ }
26
+ .highlight .p {
27
+ color: #f8f8f2;
28
+ }
29
+ .highlight .cm {
30
+ color: #75715e;
31
+ }
32
+ .highlight .cp {
33
+ color: #75715e;
34
+ }
35
+ .highlight .c1 {
36
+ color: #75715e;
37
+ }
38
+ .highlight .cs {
39
+ color: #75715e;
40
+ }
41
+ .highlight .ge {
42
+ font-style: italic;
43
+ }
44
+ .highlight .gs {
45
+ font-weight: bold;
46
+ }
47
+ .highlight .kc {
48
+ color: #66d9ef;
49
+ }
50
+ .highlight .kd {
51
+ color: #66d9ef;
52
+ }
53
+ .highlight .kn {
54
+ color: #f92672;
55
+ }
56
+ .highlight .kp {
57
+ color: #66d9ef;
58
+ }
59
+ .highlight .kr {
60
+ color: #66d9ef;
61
+ }
62
+ .highlight .kt {
63
+ color: #66d9ef;
64
+ }
65
+ .highlight .ld {
66
+ color: #e6db74;
67
+ }
68
+ .highlight .m {
69
+ color: #ae81ff;
70
+ }
71
+ .highlight .s {
72
+ color: #e6db74;
73
+ }
74
+ .highlight .na {
75
+ color: #a6e22e;
76
+ }
77
+ .highlight .nb {
78
+ color: #f8f8f2;
79
+ }
80
+ .highlight .nc {
81
+ color: #a6e22e;
82
+ }
83
+ .highlight .no {
84
+ color: #66d9ef;
85
+ }
86
+ .highlight .nd {
87
+ color: #a6e22e;
88
+ }
89
+ .highlight .ni {
90
+ color: #f8f8f2;
91
+ }
92
+ .highlight .ne {
93
+ color: #a6e22e;
94
+ }
95
+ .highlight .nf {
96
+ color: #a6e22e;
97
+ }
98
+ .highlight .nl {
99
+ color: #f8f8f2;
100
+ }
101
+ .highlight .nn {
102
+ color: #f8f8f2;
103
+ }
104
+ .highlight .nx {
105
+ color: #a6e22e;
106
+ }
107
+ .highlight .py {
108
+ color: #f8f8f2;
109
+ }
110
+ .highlight .nt {
111
+ color: #f92672;
112
+ }
113
+ .highlight .nv {
114
+ color: #f8f8f2;
115
+ }
116
+ .highlight .ow {
117
+ color: #f92672;
118
+ }
119
+ .highlight .w {
120
+ color: #f8f8f2;
121
+ }
122
+ .highlight .mf {
123
+ color: #ae81ff;
124
+ }
125
+ .highlight .mh {
126
+ color: #ae81ff;
127
+ }
128
+ .highlight .mi {
129
+ color: #ae81ff;
130
+ }
131
+ .highlight .mo {
132
+ color: #ae81ff;
133
+ }
134
+ .highlight .sb {
135
+ color: #e6db74;
136
+ }
137
+ .highlight .sc {
138
+ color: #e6db74;
139
+ }
140
+ .highlight .sd {
141
+ color: #e6db74;
142
+ }
143
+ .highlight .s2 {
144
+ color: #e6db74;
145
+ }
146
+ .highlight .se {
147
+ color: #ae81ff;
148
+ }
149
+ .highlight .sh {
150
+ color: #e6db74;
151
+ }
152
+ .highlight .si {
153
+ color: #e6db74;
154
+ }
155
+ .highlight .sx {
156
+ color: #e6db74;
157
+ }
158
+ .highlight .sr {
159
+ color: #e6db74;
160
+ }
161
+ .highlight .s1 {
162
+ color: #e6db74;
163
+ }
164
+ .highlight .ss {
165
+ color: #e6db74;
166
+ }
167
+ .highlight .bp {
168
+ color: #f8f8f2;
169
+ }
170
+ .highlight .vc {
171
+ color: #f8f8f2;
172
+ }
173
+ .highlight .vg {
174
+ color: #f8f8f2;
175
+ }
176
+ .highlight .vi {
177
+ color: #f8f8f2;
178
+ }
179
+ .highlight .il {
180
+ color: #ae81ff;
181
+ }
182
+
183
+ .highlight .gh {
184
+ }
185
+ .highlight .gu {
186
+ color: #75715e;
187
+ }
188
+ .highlight .gd {
189
+ color: #f92672;
190
+ }
191
+ .highlight .gi {
192
+ color: #a6e22e;
193
+ }
194
+
@@ -0,0 +1,33 @@
1
+ $color-footer-background: #444;
2
+ $color-footer-text: $color-dark-text;
3
+
4
+ footer {
5
+ background-color: $color-footer-background;
6
+ min-height: 160px;
7
+
8
+ section {
9
+ > div.flex-container {
10
+ display: flex;
11
+ gap: $gap;
12
+
13
+ > * {
14
+ flex: 1;
15
+
16
+ * {
17
+ color: $color-footer-text;
18
+ }
19
+ }
20
+ }
21
+ }
22
+ }
23
+
24
+ @media (max-width: $breakpoint-tablet) {
25
+ footer {
26
+
27
+ section {
28
+ > div.flex-container {
29
+ flex-direction: column;
30
+ }
31
+ }
32
+ }
33
+ }
@@ -0,0 +1,104 @@
1
+ $header-background-color:#333;
2
+ $header-background-color-hover:#111;
3
+ $header-font-color:white;
4
+ $header-height: 60px;
5
+
6
+ header {
7
+ background-color: $header-background-color;
8
+ height: $header-height;
9
+
10
+ .title {
11
+ font: 400 24px "Outfit";
12
+ color: $header-font-color;
13
+ }
14
+
15
+ section {
16
+ display: flex;
17
+ justify-content: space-between;
18
+ align-items: center;
19
+ height: 100%;
20
+ }
21
+
22
+ nav#nav-in-header {
23
+ height: 100%;
24
+
25
+ ul {
26
+ list-style-type: none;
27
+ margin: 0;
28
+ padding: 0;
29
+ height: 100%;
30
+ }
31
+
32
+ li {
33
+ height: 100%;
34
+ float: left;
35
+
36
+ a {
37
+ @extend %flex-center;
38
+ color: $header-font-color;
39
+ height: 100%;
40
+ padding: 0 12px;
41
+ text-decoration: none;
42
+ font-family: "Outfit";
43
+ font-weight: 700;
44
+ }
45
+
46
+ a:hover:not(.active) {
47
+ background-color: $header-background-color-hover;
48
+ }
49
+ }
50
+ }
51
+
52
+ input#dropdown-nav-in-header {
53
+ display: none;
54
+ }
55
+
56
+ label#checkbox-nav-in-header {
57
+ display: none;
58
+ }
59
+ }
60
+
61
+ @media (max-width: $breakpoint-tablet) {
62
+ header {
63
+ nav#nav-in-header {
64
+ display: none;
65
+ }
66
+
67
+ label#checkbox-nav-in-header {
68
+ display: flex;
69
+ justify-content: center;
70
+ align-items: center;
71
+ padding: 0;
72
+ width: $header-height;
73
+ height: 100%;
74
+ }
75
+
76
+ label#checkbox-nav-in-header:hover {
77
+ background-color: $header-background-color-hover;
78
+ }
79
+
80
+ input#dropdown-nav-in-header:checked ~ nav#nav-in-header {
81
+ display: block;
82
+ position: absolute;
83
+ background-color: $header-background-color;
84
+ height: auto;
85
+ top: $header-height;
86
+ right: 0;
87
+ padding: 0;
88
+
89
+ ul {
90
+ list-style-type: none;
91
+ margin: 0;
92
+ padding: 0;
93
+ }
94
+
95
+ li {
96
+ height: $header-height;
97
+ float: none;
98
+ a {
99
+ padding: 0 24px;
100
+ }
101
+ }
102
+ }
103
+ }
104
+ }
@@ -0,0 +1,29 @@
1
+ $max-width: 1000px;
2
+ $gap: 20px;
3
+
4
+ $breakpoint-tablet: 800px;
5
+
6
+ section,
7
+ article {
8
+ margin: auto;
9
+ max-width: $max-width;
10
+ > * {
11
+ padding-left: $gap;
12
+ padding-right: $gap;
13
+ }
14
+ }
15
+
16
+ body {
17
+ min-height: 100vh;
18
+ display: flex;
19
+ flex-direction: column;
20
+ main {
21
+ flex: 1 0 auto;
22
+ }
23
+ }
24
+
25
+ .post-head-image {
26
+ height: 300px;
27
+ width: 100%;
28
+ object-fit: cover;
29
+ }