Skip to content

Commit abc011b

Browse files
cotes2020cotes2020
committed
Rewrite post’s style as sass.
1 parent 368b676 commit abc011b

1 file changed

Lines changed: 106 additions & 93 deletions

File tree

‎assets/css/post.scss‎

Lines changed: 106 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
---
22
---
33
/*!
4-
Individual styles for Post
4+
Post-specific style
55
v2.0
66
https://github.com/cotes2020/jekyll-theme-chirpy
77
© 2019 Cotes Chung
88
MIT License
99
*/
1010

11+
$prompt-older: "{{ site.data.label.post.button.previous }}";
12+
$prompt-newer: "{{ site.data.label.post.button.next }}";
13+
1114
.post img {
1215
margin-top: .5rem;
1316
margin-bottom: 1.5rem;
@@ -27,32 +30,37 @@
2730
font-size: 0.85rem;
2831
}
2932

30-
$prompt-older: "{{ site.data.label.post.button.previous }}";
31-
$prompt-newer: "{{ site.data.label.post.button.next }}";
32-
3333
.post-navigation {
3434
padding-top: 3rem;
3535
padding-bottom: 2rem;
3636

37-
.btn, .btn.disabled {
37+
@mixin post-nav-btn {
3838
width: 50%;
3939
position: relative;
40-
color: var(--link-color, #2a408e);
4140
border-color: var(--main-border, #e9ecef);
4241
}
4342

43+
.btn {
44+
@include post-nav-btn;
45+
color: var(--link-color, #2a408e);
46+
}
47+
4448
.btn:hover {
4549
background: #2a408e;
4650
color: #fff;
4751
border-color: #2a408e;
4852
}
4953

5054
.btn.disabled {
55+
@include post-nav-btn;
5156
pointer-events: auto;
5257
cursor: not-allowed;
5358
background: none;
5459
color: gray;
55-
// border-color: var(--main-border, #e9ecef);
60+
}
61+
62+
.btn.disabled:hover {
63+
border-color: none;
5664
}
5765

5866
.btn.btn-outline-primary.disabled:focus {
@@ -146,58 +154,59 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
146154
font-family: 'Oswald', sans-serif;
147155
}
148156

149-
#related-posts .card {
150-
border: 1px solid var(--main-wrapper-bg, #f1f1f1);
151-
background-color: var(--card-bg);
152-
box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922));
153-
-webkit-transition: all .3s ease-in-out;;
154-
-moz-transition: all .3s ease-in-out;;
155-
transition: all .3s ease-in-out;
156-
}
157-
158-
#related-posts .card:hover {
159-
-webkit-transform: translate3d(0, -3px, 0);
160-
transform: translate3d(0, -3px, 0);
161-
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08));
162-
}
157+
#related-posts {
158+
.card {
159+
border: 1px solid var(--main-wrapper-bg, #f1f1f1);
160+
background-color: var(--card-bg);
161+
box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922));
162+
-webkit-transition: all .3s ease-in-out;
163+
-moz-transition: all .3s ease-in-out;
164+
transition: all .3s ease-in-out;
165+
h3 {
166+
color: var(--relate-post-title, #353a3d);
167+
}
168+
}
163169

164-
#related-posts .card h3 {
165-
color: var(--relate-post-title, #353a3d);
166-
}
170+
.card:hover {
171+
-webkit-transform: translate3d(0, -3px, 0);
172+
transform: translate3d(0, -3px, 0);
173+
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
174+
}
167175

168-
#related-posts .timeago {
169-
color: var(--text-muted-color, rgba(30,55,70,.4));
170-
}
176+
.timeago {
177+
color: var(--text-muted-color, rgba(30, 55, 70, .4));
178+
}
171179

172-
#related-posts p {
173-
font-size: .9rem;
174-
margin-bottom: .5rem;
175-
overflow: hidden;
176-
text-overflow: ellipsis;
177-
display: -webkit-box;
178-
-webkit-line-clamp: 2;
179-
-webkit-box-orient: vertical;
180-
}
180+
p {
181+
font-size: .9rem;
182+
margin-bottom: .5rem;
183+
overflow: hidden;
184+
text-overflow: ellipsis;
185+
display: -webkit-box;
186+
-webkit-line-clamp: 2;
187+
-webkit-box-orient: vertical;
188+
}
181189

182-
#related-posts a:hover {
183-
text-decoration: none;
184-
}
190+
a:hover {
191+
text-decoration: none;
192+
}
185193

186-
#related-posts ul {
187-
list-style-type: none;
188-
padding-inline-start: 1.5rem;
189-
}
194+
ul {
195+
list-style-type: none;
196+
padding-inline-start: 1.5rem;
197+
}
190198

191-
#related-posts ul > li::before {
192-
background: #c2c9d4;
193-
width: 5px;
194-
height: 5px;
195-
border-radius: 1px;
196-
display: block;
197-
content: "";
198-
position: relative;
199-
top: 1rem;
200-
right: 1rem;
199+
ul>li::before {
200+
background: #c2c9d4;
201+
width: 5px;
202+
height: 5px;
203+
border-radius: 1px;
204+
display: block;
205+
content: "";
206+
position: relative;
207+
top: 1rem;
208+
right: 1rem;
209+
}
201210
}
202211

203212
#post-extend-wrapper {
@@ -208,64 +217,67 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
208217
color: inherit;
209218
}
210219

211-
.share-wrapper a:hover,
212-
.share-wrapper i:hover {
213-
text-decoration: none;
214-
color: var(--link-color, #2a408e)!important;
215-
}
216-
217220
.share-wrapper {
218221
vertical-align: middle;
219222
user-select: none;
220-
}
221223

222-
.share-label {
223-
font-family: 'Oswald', sans-serif;
224-
}
224+
a:hover,
225+
i:hover {
226+
text-decoration: none;
227+
color: var(--link-color, #2a408e)!important;
228+
}
225229

226-
.share-label::after {
227-
content: ":";
228-
}
230+
.share-icon {
231+
font-size: 1.2rem;
229232

230-
.share-wrapper .share-icon {
231-
font-size: 1.2rem;
232-
}
233+
.fab.fa-twitter {
234+
color: var(--btn-sharing, rgba(29, 161, 242, 1.00));
235+
}
233236

234-
.share-wrapper .share-icon .fab.fa-twitter {
235-
color: var(--btn-sharing, rgba(29,161,242,1.00));
236-
}
237+
.fab.fa-facebook-square {
238+
color: var(--btn-sharing, rgb(66, 95, 156));
239+
}
240+
.fab.fa-telegram {
241+
color: var(--btn-sharing, rgb(39, 159, 217));
242+
}
237243

238-
.share-wrapper .share-icon .fab.fa-facebook-square {
239-
color: var(--btn-sharing, rgb(66, 95, 156));
240-
}
244+
.fab.fa-weibo {
245+
color: var(--btn-sharing, rgb(229, 20, 43));
246+
}
241247

242-
.share-wrapper .share-icon .fab.fa-telegram {
243-
color: var(--btn-sharing, rgb(39, 159, 217));
244-
}
248+
} // .share-icon
245249

246-
.share-wrapper .share-icon .fab.fa-weibo {
247-
color: var(--btn-sharing, rgb(229, 20, 43));
248-
}
250+
.fas.fa-link {
251+
color: var(--btn-sharing, rgb(171, 171, 171));
252+
}
249253

250-
.share-wrapper .fas.fa-link {
251-
color: var(--btn-sharing, rgb(171, 171, 171));
254+
} // .share-wrapper
255+
256+
257+
.share-label {
258+
font-family: 'Oswald', sans-serif;
252259
}
253260

254-
.license-wrapper .license-text>a {
255-
font-weight: 600;
261+
.share-label::after {
262+
content: ":";
256263
}
257264

258265
.license-wrapper {
259266
line-height: 1.2rem;
260-
}
261267

262-
.license-wrapper i {
263-
font-weight: 400;
264-
}
268+
.license-text>a {
269+
font-weight: 600;
270+
}
271+
272+
i {
273+
font-weight: 400;
274+
}
275+
276+
span:last-child {
277+
font-size: .85rem;
278+
}
279+
} // .license-wrapper
265280

266-
.license-wrapper span:last-child {
267-
font-size: .85rem;
268-
}
269281

270282
@media all and (max-width: 576px) {
271283
.post-tail-bottom {
@@ -327,7 +339,8 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
327339
}
328340

329341
/*
330-
The following resposive design aim to make #post-extend-wrapper margin-right same as pannel's width
342+
The following resposive design aim to
343+
make #post-extend-wrapper margin-right same as pannel's width
331344
*/
332345
@media all and (min-width: 1200px) {
333346
#post-extend-wrapper {

0 commit comments

Comments
 (0)