Skip to content

Commit 06ccd94

Browse files
cotes2020cotes2020
committed
Rewrite styles with SCSS.
1 parent ff7782c commit 06ccd94

10 files changed

Lines changed: 1160 additions & 1099 deletions

File tree

‎assets/css/_dark/dark-main.scss‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,19 @@
4747
--footnote-target-bg: rgb(63, 81, 181);
4848
--btn-sharing: #6c757d;
4949

50+
/* tags */
51+
--tag-border: rgb(59, 79, 88);
52+
--tag-shadow: rgb(32, 33, 33);
53+
54+
/* categories */
55+
--categories-hover-bg: rgb(73, 75, 76);
56+
57+
/* archives */
58+
--timeline-node-bg: rgb(150, 152, 156);
59+
60+
/* Footer */
61+
---footer-link: rgb(146, 146, 146);
62+
5063
hr {
5164
border-color: var(--main-border);
5265
}
@@ -68,40 +81,29 @@
6881
background-color: var(--card-bg);
6982
}
7083

71-
.categories .card-header {
72-
background-color: var(--card-header-bg);
84+
.categories {
85+
.card-header {
86+
background-color: var(--card-header-bg);
87+
}
88+
.list-group-item {
89+
// @extend %category-bg;
90+
border-left: none;
91+
border-right: none;
92+
padding-left: 2rem;
93+
border-color: var(--main-border);
94+
&:last-child {
95+
border-bottom-color: var(--card-bg);
96+
}
97+
}
7398
}
7499

75-
.categories .list-group-item {
76-
border-left: none;
77-
border-right: none;
78-
padding-left: 2rem;
79-
border-color: var(--main-border);
80-
}
81-
82-
.categories .list-group-item:last-child {
83-
border-bottom-color: var(--card-bg);
84-
}
85-
86-
/* tags */
87-
--tag-border: rgb(59, 79, 88);
88-
--tag-shadow: rgb(32, 33, 33);
89-
90-
/* categories */
91-
--categories-hover-bg: rgb(73, 75, 76);
92-
93-
/* archives */
94-
--timeline-node-bg: rgb(150, 152, 156);
95100

96101
#archives li:nth-child(odd) {
97102
background-image: linear-gradient(to left,
98103
rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
99104
}
100105

101-
/* Footer */
102-
---footer-link: rgb(146, 146, 146);
103-
104-
}
106+
} // dark-scheme
105107

106108

107109
@mixin light-mode-invisible {

‎assets/css/_module.scss‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/*
2+
* Mainly scss modules, only imported to `assets/css/main.scss`
3+
*
4+
* v2.1
5+
* https://github.com/cotes2020/jekyll-theme-chirpy
6+
* © 2020 Cotes Chung
7+
* MIT Licensed
8+
*/
9+
10+
/*---------- scss placeholder ---------*/
11+
12+
%tag-hover {
13+
background: var(--tag-hover, rgb(222, 226, 230));
14+
transition: background 0.35s ease-in-out;
15+
}
16+
17+
%table-cell {
18+
padding: .35rem .8rem;
19+
font-size: 95%;
20+
}
21+
22+
%link-hover {
23+
color: #d2603a!important;
24+
border-bottom: 1px solid #d2603a;
25+
text-decoration: none;
26+
}
27+
28+
%link-color {
29+
color: var(--link-color, #2a408e);
30+
}
31+
32+
%no-bottom-border {
33+
border-bottom: none;
34+
}
35+
36+
%section {
37+
line-height: 1.2;
38+
margin-bottom: 1rem;
39+
}
40+
41+
%anchor {
42+
padding-top: 3.5rem;
43+
margin-top: -2.5rem;
44+
}
45+
46+
%footer-content {
47+
font-weight: 600;
48+
color: var(---footer-link, inherit);
49+
}
50+
51+
52+
/*---------- scss mixin ---------*/
53+
54+
@mixin no-text-decoration {
55+
text-decoration: none;
56+
}
57+
58+
@mixin sidebar-icon {
59+
color: rgba(255, 255, 255, 0.5);
60+
transition: color 0.35s ease-in-out;
61+
user-select: none;
62+
margin: 0 .25rem;
63+
}
64+
65+
@mixin icon-round($diameter) {
66+
border: 1px solid;
67+
border-radius: 50%;
68+
width: $diameter;
69+
height: $diameter;
70+
}
71+
72+
@mixin ml-mr($value) {
73+
margin-left: $value;
74+
margin-right: $value;
75+
}
76+
77+
@mixin pl-pr($val) {
78+
padding-left: $val;
79+
padding-right: $val;
80+
}
81+
82+
@mixin input-placeholder {
83+
opacity: 0.6;
84+
}

0 commit comments

Comments
 (0)