Skip to content

Commit 3dfbb19

Browse files
WangSimiao2000WangSimiao2000
committed
refactor(archives): simplify HTML structure and improve styling for better readability
Signed-off-by: wangsimiao1 <wangsimiao1@xiaomi.com>
1 parent 70e3a47 commit 3dfbb19

3 files changed

Lines changed: 73 additions & 125 deletions

File tree

‎_layouts/browse.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -149,23 +149,23 @@
149149
{% assign df_strftime_m = site.data.locales[lang].df.archives.strftime | default: '/ %m' %}
150150
{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
151151

152-
<div id="archives" class="pl-xl-3">
152+
<div id="archives">
153153
{% for post in site.posts %}
154154
{% assign cur_year = post.date | date: '%Y' %}
155155

156156
{% if cur_year != last_year %}
157157
{% unless forloop.first %}</ul>{% endunless %}
158158

159-
<time class="year lead d-block">{{ cur_year }}</time>
160-
{{ '<ul class="list-unstyled">' }}
159+
<time class="year">{{ cur_year }}</time>
160+
{{ '<ul>' }}
161161

162162
{% assign last_year = cur_year %}
163163
{% endif %}
164164

165165
<li>
166166
{% assign ts = post.date | date: '%s' %}
167-
<span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
168-
<span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
167+
<span class="date" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
168+
<span class="date" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
169169
{{ post.date | date: df_strftime_m }}
170170
</span>
171171
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>

‎_sass/pages/_archives.scss‎

Lines changed: 68 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,99 @@
11
@use '../abstracts/breakpoints' as bp;
2-
@use '../abstracts/placeholders';
32

4-
#archives {
5-
letter-spacing: 0.03rem;
6-
7-
@include bp.lt(bp.get(sm)) {
8-
margin-top: -1rem;
9-
10-
ul {
11-
letter-spacing: 0;
12-
}
13-
}
3+
$tl-offset: 1.75rem;
4+
$tl-line-w: 2px;
5+
$tl-year-dot: 10px;
6+
$tl-post-dot: 6px;
147

15-
$timeline-width: 4px;
8+
#archives {
9+
--tl-line: var(--timeline-color);
10+
--tl-node: var(--timeline-node-bg);
11+
--tl-dot: var(--timeline-year-dot-color, var(--main-bg));
1612

17-
%timeline {
18-
content: '';
19-
width: $timeline-width;
20-
position: relative;
21-
float: left;
22-
background-color: var(--timeline-color);
23-
}
13+
border-left: $tl-line-w solid var(--tl-line);
14+
margin-left: calc(#{$tl-year-dot} / 2);
15+
padding-left: $tl-offset;
2416

2517
.year {
26-
height: 3.5rem;
27-
font-size: 1.5rem;
2818
position: relative;
29-
left: 2px;
30-
margin-left: -$timeline-width;
31-
32-
&::before {
33-
@extend %timeline;
34-
35-
height: 72px;
36-
left: 79px;
37-
bottom: 16px;
38-
}
39-
40-
&:first-child::before {
41-
@extend %timeline;
42-
43-
height: 32px;
44-
top: 24px;
19+
font-size: 1.35rem;
20+
font-weight: 700;
21+
color: var(--heading-color);
22+
margin: 1.5rem 0 0.5rem;
23+
display: block;
24+
25+
&:first-child {
26+
margin-top: 0;
4527
}
4628

47-
/* Year dot */
48-
&::after {
29+
&::before {
4930
content: '';
50-
display: inline-block;
51-
position: relative;
31+
position: absolute;
32+
left: calc(-#{$tl-offset} - #{$tl-line-w} / 2);
33+
top: 50%;
34+
transform: translate(-50%, -50%);
35+
width: $tl-year-dot;
36+
height: $tl-year-dot;
5237
border-radius: 50%;
53-
width: 12px;
54-
height: 12px;
55-
left: 21.5px;
56-
border: 3px solid;
57-
background-color: var(--timeline-year-dot-color);
58-
border-color: var(--timeline-node-bg);
59-
box-shadow: 0 0 2px 0 #c2c6cc;
60-
z-index: 1;
38+
background: var(--tl-dot);
39+
border: $tl-line-w solid var(--tl-node);
6140
}
6241
}
6342

6443
ul {
65-
li {
66-
font-size: 1.1rem;
67-
line-height: 3rem;
68-
69-
@extend %text-ellipsis;
70-
71-
&:nth-child(odd) {
72-
background-color: var(--main-bg, #ffffff);
73-
background-image: linear-gradient(
74-
to left,
75-
#ffffff,
76-
#fbfbfb,
77-
#fbfbfb,
78-
#fbfbfb,
79-
#ffffff
80-
);
81-
}
82-
83-
&::before {
84-
@extend %timeline;
44+
list-style: none;
45+
padding: 0;
46+
margin: 0;
47+
}
8548

86-
top: 0;
87-
left: 77px;
88-
height: 3.1rem;
89-
}
90-
}
49+
li {
50+
position: relative;
51+
padding: 0.4rem 0;
52+
line-height: 1.6;
53+
display: flex;
54+
align-items: baseline;
55+
gap: 0.75rem;
9156

92-
&:last-child li:last-child::before {
93-
height: 1.5rem;
57+
&::before {
58+
content: '';
59+
position: absolute;
60+
left: calc(-#{$tl-offset} - #{$tl-line-w} / 2);
61+
top: 50%;
62+
transform: translate(-50%, -50%);
63+
width: $tl-post-dot;
64+
height: $tl-post-dot;
65+
border-radius: 50%;
66+
background: var(--tl-node);
9467
}
95-
} /* #archives ul */
68+
}
9669

9770
.date {
9871
white-space: nowrap;
99-
display: inline-block;
100-
position: relative;
101-
right: 0.5rem;
72+
color: var(--text-muted-color);
73+
font-size: 0.8rem;
74+
font-family: Lato, 'Microsoft Yahei', sans-serif;
75+
flex-shrink: 0;
76+
}
10277

103-
&.month {
104-
width: 1.4rem;
105-
text-align: center;
106-
}
78+
a {
79+
color: var(--text-color);
80+
transition: color 0.2s ease;
10781

108-
&.day {
109-
font-size: 85%;
110-
font-family: Lato, sans-serif;
82+
&:hover {
83+
color: var(--link-color);
84+
text-decoration: none;
11185
}
11286
}
11387

114-
a {
115-
/* post title in Archvies */
116-
margin-left: 2.5rem;
117-
position: relative;
118-
top: 0.1rem;
88+
@include bp.lt(bp.get(sm)) {
89+
padding-left: 1.25rem;
11990

120-
&:hover {
121-
border-bottom: none;
91+
.year::before {
92+
left: calc(-1.25rem - #{$tl-line-w} / 2);
12293
}
12394

124-
&::before {
125-
/* the dot before post title */
126-
content: '';
127-
display: inline-block;
128-
position: relative;
129-
border-radius: 50%;
130-
width: 8px;
131-
height: 8px;
132-
float: left;
133-
top: 1.35rem;
134-
left: 71px;
135-
background-color: var(--timeline-node-bg);
136-
box-shadow: 0 0 3px 0 #c2c6cc;
137-
z-index: 1;
95+
li::before {
96+
left: calc(-1.25rem - #{$tl-line-w} / 2);
13897
}
13998
}
140-
} /* #archives */
99+
}

‎_sass/themes/_dark.scss‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -140,17 +140,6 @@
140140
}
141141
}
142142

143-
#archives li:nth-child(odd) {
144-
background-image: linear-gradient(
145-
to left,
146-
rgb(30 29 27),
147-
rgb(42 40 38),
148-
rgb(42 40 38),
149-
rgb(42 40 38),
150-
rgb(30 29 27)
151-
);
152-
}
153-
154143
/* stylelint-disable-next-line selector-id-pattern */
155144
#disqus_thread {
156145
color-scheme: none;

0 commit comments

Comments
 (0)