Skip to content

Commit c1b6e7c

Browse files
stevenvachonstevenvachon
committed
More minor improvements
1 parent 57b5f14 commit c1b6e7c

File tree

14 files changed

+284
-205
lines changed

14 files changed

+284
-205
lines changed

‎eleventy.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ export default (config) => {
159159
collapseWhitespace: true,
160160
minifyCss: true,
161161
minifySvg: false, // No need
162+
sortAttributesWithLists: false,
162163
})
163164
).html;
164165
} else {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"private": true,
33
"name": "website-frontend",
44
"description": "My website's frontend.",
5-
"version": "3.0.6",
5+
"version": "3.0.7",
66
"license": "UNLICENSED",
77
"author": "Steven Vachon <[email protected]> (https://svachon.com)",
88
"repository": "github:stevenvachon/website-frontend",

‎src/content/blog/category.njk‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ pagination:
1010
- all
1111
- blog
1212
- blog-archives
13+
- blog-category
1314
- blog-page
1415
- blog-posts
1516
- categoryCounts
@@ -21,4 +22,5 @@ permalink: /blog/category/{{ tag }}/
2122
robots:
2223
- follow
2324
- noindex
25+
tags: blog-category
2426
---

‎src/images/arrow.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/layouts/main.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
{% if ('blog-post' or 'blog-archives') in (tags or []) %}
5+
{% if ('blog-archives' or 'blog-category' or 'blog-post') in (tags or []) %}
66
<title>{{ title }} • Steven Vachon's Blog</title>
77
{% elseif 'homepage' not in (tags or []) %}
88
<title>{{ title }} • Steven Vachon</title>

‎src/styles/blog-post.scss‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
%blog-post {
55
--margin-top: 1.7rem;
66

7+
padding-left: var(--site-padding);
8+
79
.-blog-post--comments {
810
margin-top: calc(var(--margin-top) * 2);
911
}
@@ -32,20 +34,22 @@
3234
a:any-link {
3335
text-decoration: underline;
3436

37+
&:is(:active, :focus, :hover) {
38+
text-decoration-color: var(--yellow);
39+
transition: var(--link-duration-in);
40+
}
41+
3542
&:not(:active, :focus, :hover) {
3643
text-decoration-color: transparent;
3744
transition: var(--link-duration-out);
3845
}
39-
40-
&:active,
41-
&:focus,
42-
&:hover {
43-
text-decoration-color: var(--yellow);
44-
transition: var(--link-duration-in);
45-
}
4646
}
4747
}
4848

49+
@container style(--is-at-least-tablet-size: false) {
50+
padding-right: calc(var(--site-padding));
51+
}
52+
4953
@container style(--is-at-least-tablet-size: true) {
5054
padding-right: calc(var(--site-padding) * 1.5);
5155
}

‎src/styles/blog-posts.scss‎

Lines changed: 49 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
%blog-posts {
44
.-blog-posts--item {
5+
position: relative; // For pseudo-element
6+
57
a:any-link {
68
&.-blog-posts--item-read-more {
79
background-color: var(--white-trans-subtler);
@@ -16,27 +18,66 @@
1618
content: ' »' / '';
1719
}
1820

19-
&:not(:active, :focus, :hover) {
20-
transition: var(--link-duration-out);
21-
}
22-
23-
&:active,
24-
&:focus,
25-
&:hover {
21+
&:is(:active, :focus, :hover) {
2622
color: #86a5d8;
2723
transition: var(--link-duration-in);
2824
}
25+
26+
&:not(:active, :focus, :hover) {
27+
transition: var(--link-duration-out);
28+
}
2929
}
3030
}
3131

32+
&::before {
33+
--bottom-glow: linear-gradient(
34+
to top,
35+
color-mix(in srgb, var(--blue-glow-on) 10%, transparent),
36+
transparent calc(var(--site-padding) * 1.5)
37+
);
38+
--top-glow: linear-gradient(
39+
to bottom,
40+
color-mix(in srgb, var(--blue-glow-on) 10%, transparent),
41+
transparent calc(var(--site-padding) * 1.5)
42+
);
43+
44+
content: '';
45+
inset: 0;
46+
pointer-events: none;
47+
position: absolute;
48+
z-index: -1; // Appear beneath subsequent siblings
49+
}
50+
51+
&:first-of-type::before {
52+
background: var(--bottom-glow);
53+
}
54+
55+
&:last-of-type::before {
56+
background: var(--top-glow);
57+
}
58+
59+
&:not(:first-of-type, :last-of-type)::before {
60+
background: var(--top-glow), var(--bottom-glow);
61+
}
62+
3263
&:not(:first-of-type) {
33-
margin-top: 2.8rem;
64+
padding-top: 2.8rem;
3465
}
3566

3667
&:not(:last-of-type) {
3768
border-bottom: 1px dashed var(--white-trans-subtle);
3869
padding-bottom: 0.8rem;
3970
}
71+
72+
&:is(:focus-within, :hover)::before {
73+
opacity: 1;
74+
transition: opacity var(--glow-duration-in);
75+
}
76+
77+
&:not(:focus-within, :hover)::before {
78+
opacity: 0;
79+
transition: opacity var(--glow-duration-out);
80+
}
4081
}
4182

4283
.-blog-posts--title {

‎src/styles/blog.scss‎

Lines changed: 81 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,14 @@
1010
flex-wrap: wrap; // To support `%pane` as a child
1111

1212
.-blog--primary {
13-
box-sizing: border-box;
1413
flex-grow: 1;
1514
font-style: normal;
1615
margin-top: 2rem;
1716
min-width: 0; // For articles with code blocks; https://medium.com/@hbarcelos/flexbox-gotchas-reloaded-ce92a18343d4
18-
padding-left: var(--site-padding);
1917

2018
@container style(--is-at-least-tablet-size: true) {
2119
width: calc(100% - var(--secondary-width));
2220
}
23-
24-
@container style(--is-at-least-tablet-size: false) {
25-
padding-right: var(--site-padding);
26-
}
2721
}
2822

2923
.-blog--secondary {
@@ -41,13 +35,12 @@
4135
color-mix(in srgb, var(--black) 25%, transparent)
4236
);
4337
border-bottom: 1px solid var(--white-trans-subtler);
44-
padding: 0 var(--site-padding) calc(var(--site-padding) / 2)
45-
var(--site-padding);
38+
padding-bottom: calc(var(--site-padding) / 2);
4639

4740
.-blog--secondary-organizing-title {
4841
font-family: var(--alternative-font);
4942
font-weight: 800;
50-
margin-bottom: 2rem;
43+
margin: 0 var(--site-padding) 2rem;
5144
text-transform: uppercase;
5245
}
5346

@@ -63,75 +56,117 @@
6356
font-size: 0.7rem;
6457
text-transform: uppercase;
6558

66-
&:not(:active, :focus, :hover) {
67-
transition: var(--link-duration-out);
68-
}
69-
70-
&:active,
71-
&:focus,
72-
&:hover {
59+
&:is(:active, :focus, :hover) {
7360
color: var(--light-grey);
7461
transition: var(--link-duration-in);
7562
}
63+
64+
&:not(:active, :focus, :hover) {
65+
transition: var(--link-duration-out);
66+
}
7667
}
7768
}
7869

7970
&.-blog--secondary-organizing-categories {
8071
li {
72+
--category-item-padding: 0.325rem;
73+
8174
color: var(--light-grey);
8275
filter: drop-shadow(
8376
var(--text-shadow-offset) var(--text-shadow-offset)
8477
var(--text-shadow-blur) var(--black)
8578
); // `text-shadow` is applied to transparent underlines
86-
margin-top: 0.65rem;
79+
padding: var(--category-item-padding) var(--site-padding);
80+
position: relative; // For pseudo-elements
8781
text-shadow: none;
8882

8983
a:any-link {
90-
color: var(--white);
9184
margin-left: 1rem;
92-
position: relative; // For pseudo-element
9385
text-decoration: underline;
9486

87+
&::after,
9588
&::before {
96-
background: radial-gradient(
97-
ellipse at center,
98-
#fedd7c,
99-
#ccaa44
100-
);
101-
background-position: 50% -100%;
102-
background-size: 100% 200%;
103-
border-radius: 50%;
104-
box-sizing: border-box;
10589
content: '';
106-
height: 0.5rem;
107-
left: -1rem;
108-
margin: 0 0.5rem 0.14rem 0;
10990
position: absolute;
110-
top: 0.3rem;
111-
width: 0.5rem;
91+
}
92+
93+
&::after {
94+
background: linear-gradient(
95+
to bottom,
96+
transparent,
97+
var(--white-trans-subtler) 20%,
98+
var(--white-trans-subtler) 80%,
99+
transparent
100+
);
101+
inset: 0;
102+
mask: linear-gradient(
103+
to right,
104+
#ffffff00,
105+
#ffffff var(--site-padding),
106+
#ffffff calc(100% - var(--site-padding) * 2),
107+
#ffffff00
108+
);
109+
pointer-events: none;
110+
z-index: -1; // Appear beneath subsequent siblings
111+
}
112+
113+
&:is(:active, :focus, :hover) {
114+
transition: var(--link-duration-in);
115+
116+
&::after {
117+
opacity: 1;
118+
transition: opacity var(--glow-duration-in),
119+
transform var(--glow-duration-in);
120+
}
112121
}
113122

114123
&:not(:active, :focus, :hover) {
115124
text-decoration-color: transparent;
116125
transition: var(--link-duration-out);
117-
}
118126

119-
&:active,
120-
&:focus,
121-
&:hover {
122-
transition: var(--link-duration-in);
127+
&::after {
128+
opacity: 0;
129+
transform: scaleX(50%);
130+
transform-origin: left;
131+
transition: opacity var(--glow-duration-out),
132+
transform var(--glow-duration-out);
133+
}
123134
}
124135
}
125136

126-
&.-blog--secondary-organizing-categories-selected {
137+
&:not(.-blog--secondary-organizing-categories-selected) {
127138
a:any-link {
128-
color: inherit;
139+
color: var(--white);
129140

130141
&::before {
131-
content: none;
142+
background: radial-gradient(
143+
ellipse at center,
144+
#fedd7c,
145+
#ccaa44
146+
);
147+
background-position: 50% -100%;
148+
background-size: 100% 200%;
149+
border-radius: 50%;
150+
height: 0.5rem;
151+
left: var(--site-padding);
152+
margin: 0 0.5rem 0.14rem 0;
153+
top: calc(var(--category-item-padding) + 0.3rem);
154+
width: 0.5rem;
132155
}
133156
}
134157
}
158+
159+
&.-blog--secondary-organizing-categories-selected {
160+
a:any-link::before {
161+
background-color: var(--dark-grey);
162+
height: 1rem;
163+
left: calc(var(--site-padding) - 0.5rem);
164+
mask: url(/images/arrow.svg) no-repeat center center / contain;
165+
top: calc(var(--category-item-padding) + 0.1rem);
166+
transform: rotate(180deg);
167+
width: 1rem;
168+
}
169+
}
135170
}
136171
}
137172
}
@@ -161,17 +196,15 @@
161196
width: 0.75rem;
162197
}
163198

164-
&:not(:active, :focus, :hover) {
165-
transition: var(--link-duration-out);
166-
}
167-
168-
&:active,
169-
&:focus,
170-
&:hover {
199+
&:is(:active, :focus, :hover) {
171200
color: var(--white);
172201
transition: var(--link-duration-in);
173202
}
174203

204+
&:not(:active, :focus, :hover) {
205+
transition: var(--link-duration-out);
206+
}
207+
175208
&.-blog--secondary-other-rss::before {
176209
mask-image: url(/images/rss.svg);
177210
}

0 commit comments

Comments
 (0)