Skip to content

Commit f01160b

Browse files
sylharesylhare
committed
Update category page
1 parent a22e709 commit f01160b

File tree

2 files changed

+199
-51
lines changed

2 files changed

+199
-51
lines changed

‎_layouts/categories.liquid‎

Lines changed: 88 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,33 @@ layout: page
55
<div class="home">
66
<div id="categories">
77
<section class="bg"></section>
8-
<ul class="category-clouds">
9-
{% for category in site.categories %}
10-
<a href="#{{ category | first | cgi_escape }}" class="category-anchor">
11-
<li>
12-
{{ category | first }}
13-
<!-- {{ category | last | size | times: 100 | divided_by: site.tags.size | plus: 50 | divided_by: 100.0 }} -->
14-
<!-- <span class="category-number">{{ category | last | size }}</span> -->
15-
</li>
16-
</a>
17-
{% endfor %}
18-
</ul>
8+
<div class="category-list">
9+
<ul>
10+
{% if site.categories.size == 1 %}
11+
<li class="meta">Category</li>
12+
{% else %}
13+
<li class="meta">Categories</li>
14+
{% endif %}
15+
16+
{% for category in site.categories %}
17+
<li><a class="button" href="#{{ category | first | cgi_escape }}">
18+
<p>{{ category | first }} <span class="category-count">{{ category | last | size }}</span></p>
19+
</a></li>
20+
{% endfor %}
21+
22+
{% assign uncategorized_count = 0 %}
23+
{% for post in site.posts %}
24+
{% if post.categories.size == 0 %}
25+
{% assign uncategorized_count = uncategorized_count | plus: 1 %}
26+
{% endif %}
27+
{% endfor %}
28+
{% if uncategorized_count > 0 %}
29+
<li><a class="button" href="#uncategorized">
30+
<p>Uncategorized <span class="category-count">{{ uncategorized_count }}</span></p>
31+
</a></li>
32+
{% endif %}
33+
</ul>
34+
</div>
1935
<div class="category-groups">
2036
{% for category in site.categories %}
2137
<div class="category-group">
@@ -28,16 +44,71 @@ layout: page
2844
</h4>
2945
<div class="items">
3046
{% for post in site.categories[group] %}
31-
<a href="{{ post.url | relative_url }}" class="category-post-link">
32-
<div class="item">
33-
<p class="meta">{{ post.date | date: site.data.language.str_date_format | default: '%B %-d, %Y' }}</p>
34-
<p class="title">{{ post.title }}</p>
35-
</div>
36-
</a>
47+
<div class="item-wrapper">
48+
<a href="{{ post.url | relative_url }}" class="category-post-link">
49+
<div class="item">
50+
<div class="item-content">
51+
<p class="meta">{{ post.date | date: site.data.language.str_date_format | default: '%B %-d, %Y' }}</p>
52+
<p class="title">{{ post.title }}</p>
53+
</div>
54+
</div>
55+
</a>
56+
{% if post.tags.size > 0 %}
57+
<div class="item-tags">
58+
{% for tag in post.tags %}
59+
<a href="{{ site.baseurl }}/tags#{{ tag | cgi_escape }}" class="tag-link">
60+
<span class="tag">{{ tag }}</span>
61+
</a>
62+
{% endfor %}
63+
</div>
64+
{% endif %}
65+
</div>
3766
{% endfor %}
3867
</div>
3968
</div>
4069
{% endfor %}
70+
71+
<!-- Uncategorized posts -->
72+
{% assign uncategorized_posts = "" | split: "" %}
73+
{% for post in site.posts %}
74+
{% if post.categories.size == 0 %}
75+
{% assign uncategorized_posts = uncategorized_posts | push: post %}
76+
{% endif %}
77+
{% endfor %}
78+
79+
{% if uncategorized_posts.size > 0 %}
80+
<div class="category-group">
81+
<h4 id="uncategorized" class="title">
82+
Uncategorized
83+
{% if page.showCounts %}
84+
({{uncategorized_posts.size}})
85+
{% endif %}
86+
</h4>
87+
<div class="items">
88+
{% for post in uncategorized_posts %}
89+
<div class="item-wrapper">
90+
<a href="{{ post.url | relative_url }}" class="category-post-link">
91+
<div class="item">
92+
<div class="item-content">
93+
<p class="meta">{{ post.date | date: site.data.language.str_date_format | default: '%B %-d, %Y' }}</p>
94+
<p class="title">{{ post.title }}</p>
95+
</div>
96+
</div>
97+
</a>
98+
{% if post.tags.size > 0 %}
99+
<div class="item-tags">
100+
{% for tag in post.tags %}
101+
<a href="{{ site.baseurl }}/tags#{{ tag | cgi_escape }}" class="tag-link">
102+
<span class="tag">{{ tag }}</span>
103+
</a>
104+
{% endfor %}
105+
</div>
106+
{% endif %}
107+
</div>
108+
{% endfor %}
109+
</div>
110+
</div>
111+
{% endif %}
41112
</div>
42113
</div>
43114
</div>

‎_sass/layouts/_categories.scss‎

Lines changed: 111 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,65 @@
11
#archive,
22
#categories {
3-
.archive-clouds,
4-
.category-clouds {
5-
margin: 30px 0 30px;
3+
.category-list {
4+
width: 100%;
5+
padding-bottom: $padding-x-small;
66

7-
li {
8-
background-color: var(--link);
9-
display: inline-block;
10-
margin-bottom: 10px;
11-
margin-right: 3px;
12-
padding: 0 15px;
13-
border-radius: 20px;
14-
color: var(--header-text);
15-
font-weight: 600;
16-
font-size: 0.8rem;
17-
line-height: 35px;
18-
letter-spacing: -0.03rem;
7+
a.button {
8+
margin: 0.1em;
9+
padding: 0.2em 0.4em;
10+
font-size: 0.9em;
11+
background: var(--link);
12+
border: 1px solid var(--link);
13+
color: var(--background);
14+
transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
1915

20-
.category-number {
21-
vertical-align: super;
22-
font-size: 0.625rem;
23-
}
16+
&:hover {
17+
background: transparent;
18+
border: 1px solid var(--link);
19+
color: var(--link);
2420

25-
.p {
26-
opacity: 1;
21+
.category-count {
22+
background-color: var(--link);
23+
color: var(--header-text);
24+
}
2725
}
2826
}
2927

30-
li:hover {
31-
background-color: var(--header-background) !important;
32-
color: var(--header-text);
28+
p {
29+
margin: 0;
30+
padding: 0 0.2em 0 0;
31+
display: flex;
32+
align-items: center;
33+
gap: 0.4em;
3334
}
3435

35-
.archive-anchor:hover,
36-
.category-anchor:hover {
37-
text-decoration: none !important;
38-
filter: none;
36+
.category-count {
37+
display: inline-flex;
38+
align-items: center;
39+
justify-content: center;
40+
background-color: var(--header-text);
41+
color: var(--link);
42+
border-radius: 50%;
43+
min-width: 1.5em;
44+
height: 1.5em;
45+
padding: 0.2em;
46+
font-size: 0.85em;
47+
font-weight: 600;
48+
line-height: 1;
49+
transition: background-color 0.1s ease, color 0.1s ease;
50+
}
51+
52+
ul {
53+
text-align: center;
54+
list-style: none;
55+
56+
li, div {
57+
display: inline;
58+
}
59+
60+
div.meta {
61+
margin-right: 0.5em;
62+
}
3963
}
4064
}
4165

@@ -50,9 +74,26 @@
5074
.items {
5175
padding-left: $padding-medium;
5276

53-
.item {
77+
.item-wrapper {
5478
position: relative;
5579
margin: 25px 0;
80+
display: flex;
81+
justify-content: space-between;
82+
align-items: center;
83+
gap: 15px;
84+
}
85+
86+
.category-post-link {
87+
flex: 1;
88+
min-width: 0;
89+
text-decoration: none;
90+
}
91+
92+
.item {
93+
.item-content {
94+
flex: 1;
95+
min-width: 0;
96+
}
5697

5798
.meta {
5899
color: var(--meta);
@@ -65,7 +106,32 @@
65106
}
66107
}
67108

68-
.item::before {
109+
.item-tags {
110+
display: flex;
111+
flex-wrap: wrap;
112+
gap: 5px;
113+
align-items: center;
114+
justify-content: flex-end;
115+
116+
.tag-link {
117+
text-decoration: none;
118+
}
119+
120+
.tag {
121+
background-color: var(--selection);
122+
color: var(--text);
123+
padding: 3px 10px;
124+
border-radius: 12px;
125+
font-size: 0.75rem;
126+
font-weight: 500;
127+
white-space: nowrap;
128+
transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;
129+
cursor: pointer;
130+
border: 1px solid transparent;
131+
}
132+
}
133+
134+
.item-wrapper::before {
69135
content: "";
70136
position: absolute;
71137
left: -5%;
@@ -75,17 +141,28 @@
75141
height: 100%;
76142
}
77143

78-
.archive-post-link:hover,
144+
.item-wrapper:hover::before {
145+
background-color: var(--link);
146+
}
147+
79148
.category-post-link:hover {
80149
text-decoration: none;
81150

82151
.meta, .title {
83152
color: var(--header-background);
84153
}
154+
}
85155

86-
.item::before {
87-
background-color: var(--link);
88-
}
156+
.item-wrapper:hover .tag {
157+
background-color: var(--link);
158+
color: var(--header-text);
159+
border-color: transparent;
160+
}
161+
162+
.item-wrapper:hover .tag:hover {
163+
background-color: var(--page-background);
164+
color: var(--link);
165+
border-color: var(--link);
89166
}
90167
}
91168
}

0 commit comments

Comments
 (0)