f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 13:44:15 +00:00
Code Issues Packages Releases Activity

Improve code style

Browse Source 
- js/css
- markdown
- shell
This commit is contained in:
Cotes Chung
2021-01-27 20:06:31 +08:00
parent d8a42d9bb4
commit 8e84c6b9d6
14 changed files with 961 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1347
_sass/addon/commons.scss
View File

File diff suppressed because it is too large Load Diff

1
_sass/addon/module.scss
View File

@@ -100,6 +100,7 @@
@mixin panel-label {
@include label(inherit);
display: block;
line-height: 1.2;
padding-top: 0.5rem;

25
_sass/jekyll-theme-chirpy.scss
View File

@@ -6,17 +6,18 @@
* MIT Licensed
*/
@import "colors/light-typography";
@import "colors/dark-typography";
@import
"colors/light-typography",
"colors/dark-typography",
@import "addon/module";
@import "addon/variables";
@import 'addon/syntax';
@import "addon/commons";
"addon/module",
"addon/variables",
"addon/syntax",
"addon/commons",
@import "layout/home";
@import "layout/post";
@import "layout/tags";
@import "layout/archives";
@import "layout/categories";
@import "layout/category-tag";
"layout/home",
"layout/post",
"layout/tags",
"layout/archives",
"layout/categories",
"layout/category-tag";

106
_sass/layout/archives.scss
View File

@@ -14,34 +14,12 @@
#archives {
letter-spacing: 0.03rem;
li {
font-size: 1.1rem;
line-height: 3rem;
&:nth-child(odd) {
background-color: var(--main-wrapper-bg, #fff);
background-image: linear-gradient(
to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
}
> div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
span.lead {
font-size: 1.5rem;
position: relative;
left: 8px;
&:not(:first-child) {
position: relative;
left: 4px;
&::after {
left: 67px;
}
}
&::after { /* Year dot */
content: "";
display: block;
@@ -59,8 +37,64 @@
box-shadow: 0 0 2px 0 #c2c6cc;
z-index: 1;
}
&:not(:first-child) {
position: relative;
left: 4px;
&::after {
left: 67px;
}
}
} // #archives span.lead
ul {
li {
font-size: 1.1rem;
line-height: 3rem;
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
a {
/* post title in Archvies */
margin-left: 2.5rem;
position: relative;
top: 0.1rem;
}
}
&:nth-child(odd) {
background-color: var(--main-wrapper-bg, #fff);
background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
}
&::after {
@extend %date-timeline;
height: 2.8rem;
top: -1.3rem;
}
&:first-child::before {
@extend %date-timeline;
height: 3.06rem;
top: -1.61rem;
}
}
&:not(:last-child) > li:last-child::after {
height: 3.4rem;
}
&:last-child > li:last-child::after {
display: none;
}
} // #archives ul
.date {
white-space: nowrap;
display: inline-block;
@@ -97,36 +131,8 @@
}
} // #archives .date
ul {
> li {
> div > a {
/* post title in Archvies */
margin-left: 2.5rem;
position: relative;
top: 0.1rem;
}
&::after {
@extend %date-timeline;
height: 2.8rem;
top: -1.3rem;
}
&:first-child::before {
@extend %date-timeline;
height: 3.06rem;
top: -1.61rem;
}
}
&:not(:last-child) > li:last-child::after {
height: 3.4rem;
}
&:last-child > li:last-child::after {
display: none;
}
} // #archives ul
} // #archives
@media all and (max-width: 576px) {
#archives {
margin-top: -1rem;

16
_sass/layout/categories.scss
View File

@@ -11,6 +11,14 @@
.card-header {
padding-right: 12px;
}
i {
&.far,
&.fas {
font-size: 86%; // fontawesome icons
}
}
.list-group-item {
border-left: none;
border-right: none;
@@ -29,12 +37,6 @@
@extend %category-icon-color;
}
i {
&.far, &.fas {
font-size: 86%; // fontawesome icons
}
}
} // .categories
.category-trigger {
@@ -42,7 +44,7 @@
height: 1.7rem;
border-radius: 50%;
text-align: center;
color: #6c757d!important;
color: #6c757d !important;
> i.fas {
position: relative;
height: 0.7rem;

34
_sass/layout/category-tag.scss
View File

@@ -2,10 +2,17 @@
Style for page Category and Tag
*/
#page-category, #page-tag {
.dash {
margin: 0 .5rem .6rem .5rem;
border-bottom: 2px dotted var(--dash-color);
}
#page-category,
#page-tag {
ul > li {
line-height: 1.5rem;
padding: 0.6rem 0;
&::before { // dot
background: #999;
width: 5px;
@@ -17,14 +24,16 @@
top: 0.6rem;
margin-right: 0.5rem;
}
> a { /* post's title */
font-size: 1.1rem;
@extend %no-bottom-border;
font-size: 1.1rem;
}
> span:last-child {
white-space: nowrap;
}
/* post's date */
} /* post's date */
}
}
@@ -36,22 +45,19 @@
font-size: 1.25rem;
}
a:hover {
#page-category &,
#page-tag &,
#access-lastmod & {
#page-category,
#page-tag,
#access-lastmod {
a:hover {
@extend %link-hover;
margin-bottom: -1px; // Avoid jumping
}
}
.dash {
margin: 0 .5rem .6rem .5rem;
border-bottom: 2px dotted var(--dash-color);
}
@media all and (max-width: 576px) {
#page-category, #page-tag {
#page-category,
#page-tag {
ul > li {
&::before {
margin: 0 .5rem;

112
_sass/layout/home.scss
View File

@@ -2,6 +2,60 @@
Style for Homepage
*/
.pagination {
font-size: 1rem;
a:hover {
text-decoration: none;
}
.page-item {
.page-link {
color: var(--btn-patinator-text-color);
width: 2.5rem;
height: 2.5rem;
padding: 0;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border-radius: 50%;
border: 1px solid var(--btn-paginator-border-color);
font-family: 'Lato', sans-serif;
background-color: var(--button-bg);
&:hover {
background-color: var(--btn-paginator-hover-color);
}
}
&.active {
.page-link {
background-color: var(--btn-active-bg);
border-color: var(--btn-active-border-color);
box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
color: var(--btn-text-color);
}
}
&.disabled {
cursor: not-allowed;
.page-link {
color: rgba(108, 117, 125, 0.57);
border-color: var(--btn-paginator-border-color);
background-color: var(--button-bg);
}
}
&:first-child .page-link,
&:last-child .page-link {
border-radius: 50%;
}
&:not(:last-child) {
margin-right: 0.7rem;
}
} // .page-item
} // .pagination
#post-list {
margin-top: 1rem;
padding-right: 0.5rem;
@@ -11,6 +65,10 @@
padding-bottom: 1rem;
border-bottom: 1px solid var(--main-border-color);
a:hover {
@extend %link-hover;
}
h1 {
font-size: 1.4rem;
margin: 0;
@@ -55,60 +113,6 @@
} // #post-list
.pagination {
font-size: 1rem;
a:hover {
text-decoration: none;
}
.page-item {
.page-link {
color: var(--btn-patinator-text-color);
width: 2.5rem;
height: 2.5rem;
padding: 0;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border-radius: 50%;
border: 1px solid var(--btn-paginator-border-color);
font-family: 'Lato', sans-serif;
background-color: var(--button-bg);
&:hover {
background-color: var(--btn-paginator-hover-color)
}
}
&.active {
.page-link {
background-color: var(--btn-active-bg);
border-color: var(--btn-active-border-color);
box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
color: var(--btn-text-color);
}
}
&.disabled {
cursor: not-allowed;
.page-link {
color: rgba(108, 117, 125, 0.57);
border-color: var(--btn-paginator-border-color);
background-color: var(--button-bg);
}
}
&:first-child .page-link,
&:last-child .page-link {
border-radius: 50%;
}
&:not(:last-child) {
margin-right: 0.7rem;
}
} // .page-item
} // .pagination
/* Hide SideBar and TOC */
@media all and (max-width: 830px) {
.pagination {

54
_sass/layout/post.scss
View File

@@ -4,7 +4,7 @@
@mixin btn-sharing-color($light-color, $important: false) {
@if $important {
color: var(--btn-share-color, $light-color)!important;
color: var(--btn-share-color, $light-color) !important;
} @else {
color: var(--btn-share-color, $light-color);
}
@@ -41,9 +41,10 @@
.post-content {
.preview-img {
@include align-center;
margin-top: 0;
margin-bottom: 2.5rem;
@include align-center;
}
}
@@ -63,6 +64,7 @@
.btn {
@include btn-post-nav;
color: var(--link-color);
&:hover {
background: #2a408e;
@@ -71,6 +73,7 @@
}
&.disabled {
@include btn-post-nav;
pointer-events: auto;
cursor: not-allowed;
background: none;
@@ -139,17 +142,16 @@
}
}
#toc li>a {
#toc li > a {
line-height: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/*--- Related Posts ---*/
/* --- Related Posts --- */
#related-posts {
>h3 {
> h3 {
@include label(1.1rem, 600);
}
.card {
@@ -165,7 +167,7 @@
&:hover {
-webkit-transform: translate3d(0, -3px, 0);
transform: translate3d(0, -3px, 0);
box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15);
box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
}
}
@@ -190,7 +192,7 @@
ul {
list-style-type: none;
padding-inline-start: 1.5rem;
>li::before {
> li::before {
background: #c2c9d4;
width: 5px;
height: 5px;
@@ -216,12 +218,17 @@
}
%btn-share-hovor {
color: var(--btn-share-hover-color)!important;
color: var(--btn-share-hover-color) !important;
}
.share-wrapper {
vertical-align: middle;
user-select: none;
i {
font-weight: 400;
}
.share-icons {
font-size: 1.2rem;
a {
@@ -230,12 +237,12 @@
}
&:hover {
text-decoration: none;
>i {
> i {
@extend %btn-share-hovor;
}
}
}
>i {
> i {
padding-top: 0.35rem;
&:hover {
@extend %btn-share-hovor;
@@ -243,7 +250,7 @@
}
.fab {
&.fa-twitter {
@include btn-sharing-color(rgba(29, 161, 242, 1.00));
@include btn-sharing-color(rgba(29, 161, 242, 1));
}
&.fa-facebook-square {
@include btn-sharing-color(rgb(66, 95, 156));
@@ -264,9 +271,9 @@
} // .share-wrapper
.share-label {
@include label(inherit, 400, inherit);
&::after {
content: ":";
}
@@ -274,25 +281,22 @@
.license-wrapper {
line-height: 1.2rem;
>a {
> a {
font-weight: 600;
&:hover {
@extend %link-hover;
}
}
i {
font-weight: 400;
}
span:last-child {
font-size: 0.85rem;
}
} // .license-wrapper
@media all and (max-width: 576px) {
.post-tail-bottom {
-ms-flex-wrap: wrap-reverse!important;
flex-wrap: wrap-reverse!important;
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important;
>div:first-child {
width: 100%;
margin-top: 1rem;
@@ -301,8 +305,8 @@
.post-content > div[class^='language-'] {
@include ml-mr(-1.25rem);
border-radius: 0;
border-radius: 0;
&::before { // the lang badge
right: 1rem;
}
@@ -323,10 +327,10 @@
@include dot(0.5rem, 0.2rem);
}
&.flex-column {
-webkit-box-orient: horizontal!important;
-webkit-box-direction: normal!important;
-ms-flex-direction: row!important;
flex-direction: row!important;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}
}
} // .post