Skip to content

Commit cbaf895

Browse files
bashbash
committed
Start cleaning things up
1 parent ede62cd commit cbaf895

File tree

7 files changed

+153
-109
lines changed

7 files changed

+153
-109
lines changed

‎.editorconfig‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@ indent_style = space
44

55
[anchor-link.html]
66
insert_final_newline = false
7+
8+
[*.scss]
9+
trim_trailing_whitespace = true

‎sass/_layout.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
body {
2+
display: grid;
3+
grid-template-columns: 1fr minmax(0, $content-max-width) 1fr;
4+
grid-row-gap: var(--section-gap);
5+
}
6+
7+
.site-header {
8+
border-bottom: 2px solid var(--border-color);
9+
}
10+
11+
.site-header {
12+
grid-column: 1 / 4;
13+
display: grid;
14+
grid-template-columns: subgrid;
15+
16+
> .wrapper {
17+
grid-column: 2;
18+
padding: .5rem var(--content-padding);
19+
}
20+
}

‎sass/_post-content.scss‎

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,53 @@
11
.post-header {
22
margin-bottom: var(--section-gap);
3+
4+
h1 {
5+
// This should visually match up
6+
// with the gap between lines in the heading.
7+
margin-bottom: 0.2em;
8+
}
39
}
410

511
.post-content {
12+
// Block level elements get some space after
613
h1, h2, h3, h4, p, ul, ol, blockquote {
714
margin-bottom: var(--block-gap);
815
}
9-
16+
17+
// Headings create a new "section" so we want space between the sections
18+
// ... but not between a section and a direct subsection
19+
:is(h1, h2, h3, h4):not(:is(h1 + h2, h2 + h3, h3 + h4)) {
20+
margin-top: var(--section-gap);
21+
}
22+
1023
figure {
1124
margin-bottom: calc(1.5 * var(--block-gap));
1225
}
13-
14-
blockquote :last-child {
15-
margin-bottom: 0;
26+
27+
hr {
28+
margin: var(--section-gap) 0;
1629
}
17-
30+
31+
.footnote-definition {
32+
margin-top: var(--section-gap);
33+
--block-gap: .5rem;
34+
}
35+
36+
.footnote-definition + .footnote-definition {
37+
margin-top: 0;
38+
}
39+
40+
blockquote :last-child,
1841
:is(ol, ul) :is(ol, ul) {
1942
margin-bottom: 0;
2043
}
21-
22-
// Headings create a new "section" so we want space between the sections
23-
// ... but not between a section and a direct subsection
24-
:is(h1, h2, h3, h4):not(:is(h1 + h2, h2 + h3, h3 + h4)) {
25-
margin-top: var(--section-gap);
44+
45+
// We only want the anchor hanging off to the left side
46+
// if there's enough room available.
47+
@media (width > ($content-max-width + 2rem)) {
48+
:is(h1, h2, h3, h4) .anchor {
49+
position: absolute;
50+
transform: translateX(-100%) translateX(-0.5ch);
51+
}
2652
}
27-
28-
hr {
29-
margin: var(--section-gap) 0;
30-
}
3153
}

‎sass/_reset.scss‎

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,49 @@
1-
*, *::before, *::after {
2-
font: inherit;
1+
// This is partially based on <https://piccalil.li/blog/a-more-modern-css-reset/>.
2+
3+
*,
4+
*::before,
5+
*::after {
6+
box-sizing: border-box;
7+
}
8+
9+
// Prevent font size inflation
10+
:root {
11+
-moz-text-size-adjust: none;
12+
-webkit-text-size-adjust: none;
13+
text-size-adjust: none;
14+
}
15+
16+
// More sensible line heights
17+
:root {
18+
line-height: 1.5;
19+
}
20+
21+
h1, h2, h3, h4 {
22+
line-height: 1.3;
23+
}
24+
25+
// Remove default margin in favour of better control in authored CSS
26+
body, h1, h2, h3, h4, p,
27+
figure, blockquote, dl, dd {
28+
margin: 0;
29+
}
30+
31+
// Inherit fonts for inputs and buttons
32+
input,
33+
button,
34+
textarea,
35+
select {
36+
font-family: inherit;
37+
font-size: inherit;
38+
}
39+
40+
// Remove border in favour of custom styling
41+
hr {
342
color: inherit;
443
border: none;
5-
margin: 0;
6-
padding: 0;
7-
box-sizing: border-box;
44+
}
45+
46+
// Make images and videos easier to work with
47+
img, picture, video {
48+
max-width: 100%;
849
}

‎sass/_typography.scss‎

Lines changed: 29 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,20 @@
33

44
h1, h2, h3, h4 {
55
font-weight: bold;
6+
text-wrap: balance;
7+
text-wrap: pretty; // relatively new, so we have balance as fallback.
8+
9+
.anchor {
10+
margin-right: 0.5ch;
11+
12+
@media (prefers-contrast: no-preference) and (hover: hover) {
13+
transition: opacity 125ms;
14+
15+
&:not(:focus):not(:hover) {
16+
opacity: .1;
17+
}
18+
}
19+
}
620
}
721

822
h1 {
@@ -17,15 +31,6 @@ h3 {
1731
font-size: 1.2em;
1832
}
1933

20-
:is(h1, h2, h3, h4):has(.anchor) {
21-
position: relative;
22-
23-
.anchor {
24-
position: absolute;
25-
transform: translateX(-100%) translateX(-0.5ch);
26-
}
27-
}
28-
2934
a {
3035
color: var(--fg-color);
3136
text-decoration: none;
@@ -40,19 +45,26 @@ pre {
4045
}
4146

4247
hr {
48+
--ferris-height: 1em;
49+
--ferris-width: calc(var(--ferris-height) * var(--ferris-aspect-ratio));
50+
--line-width: 2em;
51+
--line-thickness: 2px;
52+
--line-gap: 1em;
53+
--line-offset: calc(var(--ferris-width) + var(--line-gap));
54+
4355
background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
44-
background-position: calc(50% - 2.5em) 50%, calc(50% + 2.5em) 50%;
45-
background-size: 2em 2px, 2em 2px;
56+
background-position: calc(50% - var(--line-offset)) 50%, calc(50% + var(--line-offset)) 50%;
57+
background-size: var(--line-width) var(--line-thickness), var(--line-width) var(--line-thickness);
4658
background-repeat: no-repeat;
4759

4860
&::before {
4961
content: "";
5062
margin: auto;
5163
display: block;
52-
height: 1em;
53-
aspect-ratio: 1.5;
64+
height: var(--ferris-height);
65+
aspect-ratio: var(--ferris-aspect-ratio);
5466
background-color: currentColor;
55-
mask-image: url(./8bit-ferris.svg);
67+
mask-image: var(--ferris-image);
5668
mask-size: contain;
5769
}
5870
}
@@ -63,26 +75,10 @@ time {
6375

6476
code {
6577
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
66-
67-
// We don't want long identifiers such as 'package.metadata.playdate.options'
68-
// introducing a scroll bar on small screens.
69-
overflow-wrap: break-word;
70-
}
71-
72-
sup {
73-
font-variant-position: super;
74-
}
75-
76-
strong {
77-
font-weight: bold;
78-
}
7978

80-
em {
81-
font-style: italic;
82-
}
83-
84-
img, video {
85-
max-width: 100%;
79+
// We don't want long identifiers such as 'package.metadata.playdate.options'
80+
// introducing a scroll bar on small screens.
81+
overflow-wrap: break-word;
8682
}
8783

8884
ul {
@@ -121,10 +117,6 @@ td, th {
121117
padding: 6px 12px;
122118
}
123119

124-
th {
125-
font-weight: 700;
126-
}
127-
128120
tr:nth-child(2n) td {
129121
background-color: var(--bg-1-color);
130122
}

‎sass/style.scss‎

Lines changed: 13 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
@import '_reset.scss';
22
@import '_palette.scss';
33

4+
$content-max-width: 50rem;
5+
46
:root {
57
--block-gap: 1rem;
68
--section-gap: 2.4rem;
79
--box-rounding: 1rem;
8-
--content-padding: 2rem; // This padding has to make room for the anchor links
10+
--content-padding: 1rem;
11+
--ferris-image: url(./8bit-ferris.svg);
12+
--ferris-aspect-ratio: 1.5;
913
}
1014

1115
:root {
12-
font-size: 1.125em;
13-
line-height: 1.5;
1416
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
1517
accent-color: var(--accent-color);
1618
color-scheme: light dark;
17-
-webkit-text-size-adjust: none; // Stop iOS Safari from adjusting the font size in landscape.
1819
color: var(--text-color);
1920
background-color: var(--bg-0-color);
2021

@@ -35,12 +36,13 @@
3536
}
3637

3738
@import '_typography.scss';
38-
@import '_form.scss';
39+
@import '_layout.scss';
3940
@import '_post-content.scss';
41+
@import '_form.scss';
4042

4143
body {
4244
display: grid;
43-
grid-template-columns: 1fr minmax(0, 50em) 1fr;
45+
grid-template-columns: 1fr minmax(0, $content-max-width) 1fr;
4446
}
4547

4648
.skip-link {
@@ -57,19 +59,6 @@ body {
5759
}
5860
}
5961

60-
.site-header {
61-
display: grid;
62-
grid-template-columns: subgrid;
63-
grid-column: 1 / 4;
64-
border-bottom: 2px solid var(--border-color);
65-
margin-bottom: var(--section-gap);
66-
67-
> .wrapper {
68-
grid-column: 2;
69-
padding: .5rem var(--content-padding);
70-
}
71-
}
72-
7362
.site-title {
7463
--fg-color: var(--text-color);
7564
font-size: 1.2em;
@@ -111,21 +100,20 @@ figure {
111100
}
112101

113102
footer {
114-
margin-top: 4rem;
115-
background-color: var(--bg-1-color);
103+
// margin-top: 4rem;
116104
position: relative;
117105
padding-top: 1.5em; // TODO: variable / share with ferris icon
118-
106+
119107
&:before {
120108
position: absolute;
121109
top: -0.8em;
122110
left: calc(50% - 1.125em);
123111
content: "";
124112
display: inline-block;
125113
height: 1.5em;
126-
aspect-ratio: 1.5;
114+
aspect-ratio: var(--ferris-aspect-ratio);
127115
background-color: color-mix(in oklab, var(--accent-color), currentColor 20%);
128-
mask-image: url(./8bit-ferris.svg);
116+
mask-image: var(--ferris-image);
129117
mask-size: contain;
130118
}
131119

@@ -144,15 +132,6 @@ footer {
144132
vertical-align: middle;
145133
}
146134

147-
.anchor {
148-
@media (prefers-contrast: no-preference) and (hover: hover) {
149-
transition: opacity 125ms;
150-
&:not(:focus):not(:hover) {
151-
opacity: .1;
152-
}
153-
}
154-
}
155-
156135
.social-links {
157136
list-style: none;
158137
padding-inline-start: 0; // TODO: only style lists in content
@@ -166,6 +145,7 @@ footer {
166145
}
167146

168147
.site-footer {
148+
background-color: var(--bg-1-color);
169149
font-size: .9em;
170150
--block-gap: .5rem;
171151

@@ -179,12 +159,3 @@ footer {
179159
margin-bottom: var(--block-gap);
180160
}
181161
}
182-
183-
.footnote-definition {
184-
--block-gap: .5rem;
185-
margin-top: var(--section-gap);
186-
}
187-
188-
.footnote-definition + .footnote-definition {
189-
margin-top: 0;
190-
}

0 commit comments

Comments
 (0)