Skip to content

Commit 30c6a5b

Browse files
mbbischoffmbbischoff
committed
Happy with things so far
1 parent 3f04478 commit 30c6a5b

File tree

7 files changed

+81
-49
lines changed

7 files changed

+81
-49
lines changed

‎_includes/head.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
{% if page.url != '/' %} · {{ site.title }} {% endif %}
77
</title>
88

9+
10+
911
<script type="application/ld+json">
1012
{
1113
"@context" : "https://schema.org",

‎_sass/abstracts/_variables.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use 'sass:color';
22

3-
$text-font-stack: "halyard-text-variable", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
4-
$display-font-stack: "halyard-display-variable", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
3+
$text-font-stack: "halyard-text-variable";
4+
$display-font-stack: "halyard-display-variable";
55
$line-height: 24px;
66
$border-thickness: 1px;
77

@@ -12,6 +12,7 @@ $light-mode-color-gridlines: color(display-p3 0.9 0.09 0.2 / 0.25);
1212
$dark-mode-color-gridlines: color(display-p3 0.9 0.09 0.2 / 0.3);
1313

1414
$light-mode-background: color(display-p3 0.998 0.982 0.984);
15+
$light-mode-background-secondary: color(display-p3 0.9 0.09 0.2 / 0.1);
1516
$light-mode-text: color(display-p3 0.273 0.027 0.06);
1617
$light-mode-text-secondary: color(display-p3 0.364 0.036 0.08 / 0.7);
1718
$light-mode-text-emphasized: color(display-p3 0.036 0.004 0.008);
@@ -21,6 +22,7 @@ $light-mode-highlight: color(display-p3 0.9 0.09 0.2 / 0.2);
2122

2223

2324
$dark-mode-background: color(display-p3 0.018 0.002 0.004);
25+
$dark-mode-background-secondary: color(display-p3 .9 0.3 0.4 / 0.1);
2426
$dark-mode-text: color(display-p3 0.988 0.892 0.903);
2527
$dark-mode-text-secondary: color(display-p3 0.988 0.892 0.903 / 0.7);
2628
$dark-mode-text-emphasized: color(display-p3 0.998 0.982 0.984);

‎_sass/base/_body.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ body:has(input[id="toggle-grid"]:checked) {
1818
// Make headers one level smaller when they’re in the `main`.
1919
main {
2020
h1 {
21-
//@include vr.set($font-size: 3);
21+
// font-size: var(--s2);
22+
// line-height: 2rlh;
2223
}
2324

2425
h2 {

‎_sass/base/_typography.scss‎

Lines changed: 62 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,89 @@
11
@use 'vendors/vertical-rhythm-reset' as vr;
22
@use 'abstracts/variables' as *;
33

4+
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
}
10+
411
:root {
5-
font-size: 100%;
6-
// font-family: $text-font-stack;
12+
font-size: 16px;
13+
line-height: 1.5;
14+
15+
font-family: $text-font-stack;
716
hanging-punctuation: first allow-end last; // https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/
17+
18+
--ratio: 1.333;
19+
--s-5: calc(var(--s-4) / var(--ratio));
20+
--s-4: calc(var(--s-3) / var(--ratio));
21+
--s-3: calc(var(--s-2) / var(--ratio));
22+
--s-2: calc(var(--s-1) / var(--ratio));
23+
--s-1: calc(var(--s0) / var(--ratio));
24+
--s0: 1rem;
25+
--s1: calc(var(--s0) * var(--ratio));
26+
--s2: calc(var(--s1) * var(--ratio));
27+
--s3: calc(var(--s2) * var(--ratio));
28+
--s4: calc(var(--s3) * var(--ratio));
29+
--s5: calc(var(--s4) * var(--ratio));
830
}
931

32+
1033
body {
11-
background-image: linear-gradient(to bottom, #0ff 0, transparent 1px);
12-
background-repeat: repeat-y;
13-
background-size: 100% 1rem;
34+
display: grid;
35+
grid-template-columns: 1fr;
36+
grid-template-rows: repeat(3, auto);
37+
gap: 1rlh;
38+
padding: 1rlh;
39+
40+
// GRID
41+
background-image: linear-gradient(rgba(50, 50, 50, 0.2) 1px, transparent 1px);
42+
background-size: 100% 1rlh;
1443

1544
}
1645

46+
header {
47+
// margin-block-end: 1rlh;
48+
}
49+
1750
h1,
1851
h2,
19-
h3 {
20-
// font-family: $display-font-stack; // Big headers use the display version of the font.
21-
22-
--baselines: 2.8;
23-
--beneath: 1;
24-
--baseline-shift: calc(calc(calc(var(--baselines) * 1rem) - 1cap) / 2);
25-
--baseline-push: calc(calc(var(--beneath) * 1rem) - var(--baseline-shift));
26-
27-
line-height: calc(var(--baselines) * 1rem);
28-
29-
margin: 0;
30-
padding: 0;
31-
32-
padding-top: var(--baseline-shift);
33-
margin-bottom: var(--baseline-push);
52+
h3,
53+
h4,
54+
h5,
55+
h6 {
56+
font-family: $display-font-stack;
3457
}
3558

3659
h1 {
37-
// @include vr.set($font-size: 4);
60+
font-size: var(--s4);
61+
line-height: 2rlh;
62+
margin-block: 1rlh;
63+
3864
}
3965

4066
h2 {
41-
// @include vr.set($font-size: 3);
67+
font-size: var(--s3);
68+
line-height: 2rlh;
69+
margin-block: 1rlh;
4270
}
4371

4472
h3 {
45-
// @include vr.set($font-size: 2);
73+
font-size: var(--s2);
74+
line-height: 1rlh;
75+
margin-block: 1rlh;
4676
}
4777

4878
h4 {
49-
// @include vr.set($font-size: 1);
79+
font-size: var(--s1);
80+
line-height: 1rlh;
81+
margin-block: 1rlh;
5082
}
5183

5284
h5,
5385
h6 {
54-
// @include vr.set($font-size: 0);
86+
font-size: var(--s0);
5587
}
5688

5789
// Hang top-level ordered and unordered lists. https://markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-2/
@@ -66,8 +98,8 @@ address {
6698
}
6799

68100
blockquote {
69-
//@include vr.set($margin-left: -1, $padding-left: 1);
70-
101+
margin-left: -1rlh;
102+
padding-left: 1rlh;
71103
border-left: $border-thickness solid;
72104
}
73105

@@ -81,7 +113,6 @@ hr {
81113
details {
82114

83115
summary {
84-
85116
list-style: none; // Hide default list marker
86117
cursor: pointer;
87118
position: relative; // Establishes position context for pseudo-element
@@ -91,7 +122,7 @@ details {
91122
}
92123

93124
&::before {
94-
// @include vr.set($margin-left: -1);
125+
margin-left: -1rlh;
95126

96127
content: '';
97128
position: absolute;
@@ -104,12 +135,12 @@ details {
104135

105136
time {
106137
font-variant-numeric: tabular-nums;
107-
// @include vr.set($font-size: -1, $margin-right: 0.5);
138+
margin-inline-end: 1rlh;
108139
}
109140
}
110141

111142
&[open] {
112-
//@include vr.set($margin-bottom: 1);
143+
margin-block-end: 1rlh;
113144
}
114145

115146
&[open] summary::before {

‎_sass/layout/article.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@use 'vendors/vertical-rhythm-reset' as vr;
22

33
article {
4-
//@include vr.set($margin-top: 1);
5-
64
header {
75
display: grid;
86

97
h1 {
8+
margin-block-start: 0; // Post title don’t need a top margin because of the time.
9+
1010
justify-self: start;
1111

1212
a {
@@ -15,7 +15,8 @@ article {
1515
}
1616

1717
time {
18-
//@include vr.set($font-size: -1);
18+
font-size: var(--s-1);
19+
line-height: 1lh;
1920

2021
justify-self: end;
2122

‎_sass/layout/header.scss‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44
header#masthead {
55
text-transform: lowercase;
66

7-
//@include vr.set($margin: 1 0);
8-
97
nav {
10-
//@include vr.set($padding-bottom: 1);
8+
margin-block-end: 1rlh;
119
border-bottom: $border-thickness solid;
1210
display: flex;
1311
justify-content: space-between;
@@ -19,12 +17,4 @@ header#masthead {
1917
}
2018

2119
}
22-
23-
h1 {
24-
//@include vr.set($margin-bottom: 0, $margin-top: 1);
25-
}
26-
27-
p {
28-
//@include vr.set($margin-top: 0);
29-
}
3020
}

‎_sass/themes/_themes.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33

44
$themes: (
55
light: (background: $light-mode-background,
6+
background-secondary: $light-mode-background-secondary,
67
text: $light-mode-text,
78
text-emphasized: $light-mode-text-emphasized,
89
accent: $light-mode-accent,
910
link-underline: $light-mode-link-underline,
1011
text-secondary: $light-mode-text-secondary,
1112
highlight: $light-mode-highlight),
1213
dark: (background: $dark-mode-background,
14+
background-secondary: $dark-mode-background-secondary,
1315
text: $dark-mode-text,
1416
text-emphasized: $dark-mode-text-emphasized,
1517
accent: $dark-mode-accent,
@@ -124,7 +126,10 @@ $themes: (
124126
}
125127

126128
blockquote {
127-
color: map.get($colors, accent);
129+
background: map.get($colors, background-secondary);
130+
;
131+
border-radius: 4px;
132+
128133
border-color: map.get($colors, accent);
129134
}
130135

0 commit comments

Comments
 (0)