Skip to content

Commit ebcb1d4

Browse files
cotes2020cotes2020
committed
Split the CSS to save load time.
1 parent 6f5035e commit ebcb1d4

11 files changed

Lines changed: 555 additions & 493 deletions

File tree

‎_includes/head.html‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,28 @@
2828
integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ="
2929
crossorigin="anonymous">
3030

31-
<link rel="stylesheet"
32-
href="{{ site.baseurl }}/assets/css/styles.css">
31+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
32+
33+
{% if page.layout == 'home' %}
34+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/home.css">
35+
{% endif %}
36+
37+
{% if page.title == 'Categories' and page.layout == 'page' %}
38+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/categories.css">
39+
{% endif %}
40+
41+
{% if page.title == 'Tags' and page.layout == 'page' %}
42+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/tags.css">
43+
{% endif %}
44+
45+
{% if page.layout == 'category' or page.layout == 'tag' %}
46+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/category-tag.css">
47+
{% endif %}
48+
49+
{% if page.title == 'Archives' and page.layout == 'page' %}
50+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/archives.css">
51+
{% endif %}
52+
3353

3454
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"
3555
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
@@ -58,10 +78,13 @@
5878
{% endif %}
5979
{% endif %}
6080

61-
{% if page.layout == 'post' and site.toc and page.toc %}
62-
<link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
63-
<script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script>
64-
<script src="{{ site.baseurl }}/assets/js/dist/toc.min.js"></script>
81+
{% if page.layout == 'post' %}
82+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/post.css">
83+
{% if site.toc and page.toc %}
84+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
85+
<script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script>
86+
<script src="{{ site.baseurl }}/assets/js/dist/toc.min.js"></script>
87+
{% endif %}
6588
{% endif %}
6689

6790
</head>

assets/css/_src/fonts.scss renamed to assets/css/_typograph/fonts.scss

File renamed without changes.

assets/css/_src/syntax.scss renamed to assets/css/_typograph/syntax.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*!
1+
/*
22
* The syntax highlight.
33
* © 2018-2019 Cotes Chung
44
* MIT Licensed

‎assets/css/archives.scss‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
---
2+
---
3+
/*!
4+
Style for Archives
5+
© 2019 Cotes Chung
6+
MIT License
7+
*/
8+
9+
#archives {
10+
letter-spacing: 0.03rem;
11+
}
12+
13+
#archives li {
14+
font-size: 1.1rem;
15+
line-height: 3rem;
16+
}
17+
18+
#archives li:nth-child(odd) {
19+
background-color: #fff;
20+
background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
21+
}
22+
23+
#archives li>div {
24+
white-space: nowrap;
25+
overflow: hidden;
26+
text-overflow: ellipsis;
27+
}
28+
29+
#archives span.lead {
30+
font-size: 1.5rem;
31+
font-family: 'Oswald', sans-serif;
32+
position: relative;
33+
left: 8px;
34+
}
35+
36+
#archives span.lead:not(:first-child) {
37+
position: relative;
38+
left: 4px;
39+
}
40+
41+
#archives span.lead:not(:first-child)::after {
42+
left: 67px;
43+
}
44+
45+
#archives span.lead::after { /* Year dot */
46+
content: "";
47+
display: block;
48+
position: relative;
49+
-webkit-border-radius: 50%;
50+
-moz-border-radius: 50%;
51+
border-radius: 50%;
52+
width: 12px;
53+
height: 12px;
54+
top: -26px;
55+
left: 63px;
56+
border: 3px solid;
57+
background-color: #ffffff;
58+
border-color: #c2c6cc;
59+
box-shadow: 0 0 2px 0 #c2c6cc;
60+
z-index: 1;
61+
}
62+
63+
#archives .date {
64+
white-space: nowrap;
65+
display: inline-block;
66+
}
67+
68+
#archives .date.month {
69+
width: 1.4rem;
70+
text-align: center;
71+
font-family: 'Oswald', sans-serif;
72+
}
73+
74+
#archives .date.day {
75+
font-size: 85%;
76+
font-family: sans-serif;
77+
text-align: center;
78+
margin-right: -2px;
79+
width: 1.2rem;
80+
position: relative;
81+
left: -.15rem;
82+
}
83+
84+
#archives ul>li>div>a {
85+
/* post title in Archvies */
86+
margin-left: 2.5rem;
87+
position: relative;
88+
top: .1rem;
89+
}
90+
91+
#archives .date.month ~ a::before {
92+
/* A dot for Month and Day */
93+
content: "";
94+
display: inline-block;
95+
position: relative;
96+
-webkit-border-radius: 50%;
97+
-moz-border-radius: 50%;
98+
border-radius: 50%;
99+
width: 8px;
100+
height: 8px;
101+
float: left;
102+
top: 1.35rem;
103+
left: 69px;
104+
background-color: #c2c6cc;
105+
box-shadow: 0 0 3px 0 #c2c6cc;
106+
z-index: 1;
107+
}
108+
109+
/* timeline for date */
110+
#archives ul>li::after,
111+
#archives ul>li:first-child::before {
112+
content: "";
113+
width: 4px;
114+
left: 75px;
115+
display: inline-block;
116+
float: left;
117+
position: relative;
118+
background-color: rgba(0, 0, 0, 0.075);
119+
}
120+
121+
#archives ul>li::after {
122+
height: 2.8rem;
123+
top: -1.3rem;
124+
}
125+
126+
#archives ul>li:first-child::before {
127+
height: 3.06rem;
128+
top: -1.61rem;
129+
}
130+
131+
#archives ul:not(:last-child)>li:last-child::after {
132+
height: 3.4rem;
133+
}
134+
135+
#archives ul:last-child>li:last-child::after {
136+
display: none;
137+
}
138+
139+
@media all and (max-width: 576px) {
140+
141+
#archives {
142+
margin-top: -1rem;
143+
}
144+
145+
#archives ul {
146+
letter-spacing: 0;
147+
}
148+
}

‎assets/css/categories.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
---
3+
/*!
4+
Style for Tab Categories
5+
© 2019 Cotes Chung
6+
MIT License
7+
*/
8+
9+
.categories {
10+
margin-bottom: 2rem;
11+
}
12+
13+
.categories .card-header {
14+
padding-right: 12px;
15+
}
16+
17+
.categories .card-header>span>i:first-child,
18+
.categories .list-group-item>i {
19+
color: gray;
20+
}
21+
22+
.categories .list-group-item {
23+
border-left: none;
24+
border-right: none;
25+
padding-left: 2rem;
26+
}
27+
28+
.categories .collapsing .list-group-item:first-child,
29+
.categories .collapse .list-group-item:first-child {
30+
border-top-left-radius: 0;
31+
border-top-right-radius: 0;
32+
}
33+
34+
.categories i.far,
35+
.categories i.fas { // fontawesome icons
36+
font-size: 86%;
37+
}
38+
39+
.category-trigger {
40+
width: 1.7rem;
41+
height: 1.7rem;
42+
border-radius: 50%;
43+
text-align: center;
44+
color: #6c757d!important;
45+
}
46+
47+
@media (hover: hover) { // only works on desktop
48+
.category-trigger:hover {
49+
background-color: #e9ecef;
50+
}
51+
}
52+
53+
.category-trigger>i.fas.fa-angle-up {
54+
position: relative;
55+
bottom: 8%;
56+
transition: 300ms ease all;
57+
}

‎assets/css/category-tag.scss‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
---
3+
/*!
4+
Style for page Category and Tag
5+
© 2019 Cotes Chung
6+
MIT License
7+
*/
8+
9+
#page-category ul>li,
10+
#page-tag ul>li {
11+
line-height: 1.5rem;
12+
padding: .6rem 0;
13+
}
14+
15+
#page-category ul>li::before,
16+
#page-tag ul>li::before {
17+
background: #999;
18+
width: 5px;
19+
height: 5px;
20+
border-radius: 50%;
21+
display: block;
22+
content: "";
23+
position: relative;
24+
top: .6rem;
25+
margin-right: .5rem;
26+
}
27+
28+
#page-tag ul>li>a,
29+
#page-category ul>li>a, { /* post's title */
30+
font-size: 1.1rem;
31+
}
32+
33+
#page-category ul>li>span:last-child,
34+
#page-tag ul>li>span:last-child { /* post's date */
35+
white-space: nowrap;
36+
}
37+
38+
#page-tag h1>i { // tag icon
39+
font-size: 1.2rem;
40+
}
41+
42+
#page-category h1>i {
43+
font-size: 1.25rem;
44+
}
45+
46+
#page-category a:hover,
47+
#page-tag a:hover,
48+
#access-lastmod a:hover {
49+
margin-bottom: -1px; // Avoid jumping
50+
}
51+
52+
.dash {
53+
margin: 0 .5rem .6rem .5rem;
54+
border-bottom: 2px dotted silver;
55+
}
56+
57+
@media all and (max-width: 576px) {
58+
#page-tag ul>li>a,
59+
#page-category ul>li>a {
60+
white-space: nowrap;
61+
overflow: hidden;
62+
text-overflow: ellipsis;
63+
}
64+
}

0 commit comments

Comments
 (0)