Rewrite post’s style as sass.

This commit is contained in:
Cotes Chung 2020-02-22 03:15:13 +08:00
parent 6102d79e6e
commit b7ffc43d8d

View file

@ -1,13 +1,16 @@
--- ---
--- ---
/*! /*!
Individual styles for Post Post-specific style
v2.0 v2.0
https://github.com/cotes2020/jekyll-theme-chirpy https://github.com/cotes2020/jekyll-theme-chirpy
© 2019 Cotes Chung © 2019 Cotes Chung
MIT License MIT License
*/ */
$prompt-older: "{{ site.data.label.post.button.previous }}";
$prompt-newer: "{{ site.data.label.post.button.next }}";
.post img { .post img {
margin-top: .5rem; margin-top: .5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -27,20 +30,21 @@
font-size: 0.85rem; font-size: 0.85rem;
} }
$prompt-older: "{{ site.data.label.post.button.previous }}";
$prompt-newer: "{{ site.data.label.post.button.next }}";
.post-navigation { .post-navigation {
padding-top: 3rem; padding-top: 3rem;
padding-bottom: 2rem; padding-bottom: 2rem;
.btn, .btn.disabled { @mixin post-nav-btn {
width: 50%; width: 50%;
position: relative; position: relative;
color: var(--link-color, #2a408e);
border-color: var(--main-border, #e9ecef); border-color: var(--main-border, #e9ecef);
} }
.btn {
@include post-nav-btn;
color: var(--link-color, #2a408e);
}
.btn:hover { .btn:hover {
background: #2a408e; background: #2a408e;
color: #fff; color: #fff;
@ -48,11 +52,15 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
} }
.btn.disabled { .btn.disabled {
@include post-nav-btn;
pointer-events: auto; pointer-events: auto;
cursor: not-allowed; cursor: not-allowed;
background: none; background: none;
color: gray; color: gray;
// border-color: var(--main-border, #e9ecef); }
.btn.disabled:hover {
border-color: none;
} }
.btn.btn-outline-primary.disabled:focus { .btn.btn-outline-primary.disabled:focus {
@ -146,30 +154,30 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
font-family: 'Oswald', sans-serif; font-family: 'Oswald', sans-serif;
} }
#related-posts .card { #related-posts {
.card {
border: 1px solid var(--main-wrapper-bg, #f1f1f1); border: 1px solid var(--main-wrapper-bg, #f1f1f1);
background-color: var(--card-bg); background-color: var(--card-bg);
box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922)); box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922));
-webkit-transition: all .3s ease-in-out;; -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;; -moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; transition: all .3s ease-in-out;
h3 {
color: var(--relate-post-title, #353a3d);
}
} }
#related-posts .card:hover { .card:hover {
-webkit-transform: translate3d(0, -3px, 0); -webkit-transform: translate3d(0, -3px, 0);
transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0);
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
} }
#related-posts .card h3 { .timeago {
color: var(--relate-post-title, #353a3d);
}
#related-posts .timeago {
color: var(--text-muted-color, rgba(30, 55, 70, .4)); color: var(--text-muted-color, rgba(30, 55, 70, .4));
} }
#related-posts p { p {
font-size: .9rem; font-size: .9rem;
margin-bottom: .5rem; margin-bottom: .5rem;
overflow: hidden; overflow: hidden;
@ -179,16 +187,16 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
#related-posts a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
#related-posts ul { ul {
list-style-type: none; list-style-type: none;
padding-inline-start: 1.5rem; padding-inline-start: 1.5rem;
} }
#related-posts ul > li::before { ul>li::before {
background: #c2c9d4; background: #c2c9d4;
width: 5px; width: 5px;
height: 5px; height: 5px;
@ -199,6 +207,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
} }
}
#post-extend-wrapper { #post-extend-wrapper {
min-height: 2rem; min-height: 2rem;
@ -208,17 +217,43 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
color: inherit; color: inherit;
} }
.share-wrapper a:hover, .share-wrapper {
.share-wrapper i:hover { vertical-align: middle;
user-select: none;
a:hover,
i:hover {
text-decoration: none; text-decoration: none;
color: var(--link-color, #2a408e)!important; color: var(--link-color, #2a408e)!important;
} }
.share-wrapper { .share-icon {
vertical-align: middle; font-size: 1.2rem;
user-select: none;
.fab.fa-twitter {
color: var(--btn-sharing, rgba(29, 161, 242, 1.00));
} }
.fab.fa-facebook-square {
color: var(--btn-sharing, rgb(66, 95, 156));
}
.fab.fa-telegram {
color: var(--btn-sharing, rgb(39, 159, 217));
}
.fab.fa-weibo {
color: var(--btn-sharing, rgb(229, 20, 43));
}
} // .share-icon
.fas.fa-link {
color: var(--btn-sharing, rgb(171, 171, 171));
}
} // .share-wrapper
.share-label { .share-label {
font-family: 'Oswald', sans-serif; font-family: 'Oswald', sans-serif;
} }
@ -227,45 +262,22 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
content: ":"; content: ":";
} }
.share-wrapper .share-icon { .license-wrapper {
font-size: 1.2rem; line-height: 1.2rem;
}
.share-wrapper .share-icon .fab.fa-twitter { .license-text>a {
color: var(--btn-sharing, rgba(29,161,242,1.00));
}
.share-wrapper .share-icon .fab.fa-facebook-square {
color: var(--btn-sharing, rgb(66, 95, 156));
}
.share-wrapper .share-icon .fab.fa-telegram {
color: var(--btn-sharing, rgb(39, 159, 217));
}
.share-wrapper .share-icon .fab.fa-weibo {
color: var(--btn-sharing, rgb(229, 20, 43));
}
.share-wrapper .fas.fa-link {
color: var(--btn-sharing, rgb(171, 171, 171));
}
.license-wrapper .license-text>a {
font-weight: 600; font-weight: 600;
} }
.license-wrapper { i {
line-height: 1.2rem;
}
.license-wrapper i {
font-weight: 400; font-weight: 400;
} }
.license-wrapper span:last-child { span:last-child {
font-size: .85rem; font-size: .85rem;
} }
} // .license-wrapper
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
.post-tail-bottom { .post-tail-bottom {
@ -327,7 +339,8 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
} }
/* /*
The following resposive design aim to make #post-extend-wrapper margin-right same as pannel's width The following resposive design aim to
make #post-extend-wrapper margin-right same as pannel's width
*/ */
@media all and (min-width: 1200px) { @media all and (min-width: 1200px) {
#post-extend-wrapper { #post-extend-wrapper {