chriskrycho.com
The (very WIP) home of the next versions of my web presences
1.content {
2 line-height: var(--text-lh);
3 font-weight: var(--text-weight);
4 orphans: 3;
5 hyphens: auto;
6}
7
8.content {
9 h1,
10 h2,
11 h3,
12 h4,
13 h5,
14 h6 {
15 font-family: var(--heading);
16 }
17}
18
19.content h1 {
20 font-size: var(--fs3);
21 font-weight: 600;
22}
23
24.content h2 {
25 font-size: var(--fs2);
26 font-weight: 500;
27 margin-top: 1lh;
28 margin-bottom: var(--fs-3);
29}
30
31.content h1 + h2 {
32 margin-top: var(--fs-2);
33}
34
35.content h3 {
36 font-size: var(--fs1);
37 font-weight: 600;
38 margin-top: 1lh;
39 margin-bottom: var(--fs-3);
40}
41
42.content h4 {
43 font-size: var(--fs0);
44 font-style: italic;
45 font-weight: 600;
46 margin-top: 1lh;
47 margin-bottom: var(--fs-3);
48}
49
50.content p {
51 margin-block: 1lh;
52}
53
54.content p:first-child,
55.content :not(p) + p {
56 margin-top: 0;
57}
58
59.content p:last-child {
60 margin-bottom: 0;
61}
62
63.content .item-subtitle {
64 font-family: var(--text-alt);
65 font-size: var(--fs1);
66 font-weight: 300;
67 letter-spacing: -0.5px;
68}
69
70.content blockquote,
71.content .note,
72.content aside,
73.content .qualifiers {
74 font-family: var(--text-alt);
75 line-height: var(--text-alt-lh);
76 font-weight: var(--text-alt-weight);
77}
78
79.content blockquote {
80 margin-inline: 1em;
81}
82
83.content .note,
84.content aside,
85.content .qualifiers {
86 margin-block: var(--grid-base);
87 /* margin: 1em -1em; */
88 padding: 1em;
89 background: var(--light-blue-0);
90}
91
92.content a {
93 color: inherit;
94 transition: all 0.2s ease-in-out;
95 text-decoration: none;
96 padding: 0 0.12em 1.5pt;
97 margin-inline: -0.06em;
98 border-radius: 2pt;
99 line-height: 0;
100}
101
102.content a:hover {
103 background: var(--blue);
104 color: var(--gold);
105}
106
107.content :is(h1, h2, h3, h4, h5, h6) a[href] {
108 text-decoration: none;
109 color: inherit;
110 text-decoration: none;
111
112 &::after {
113 padding-left: 0.2em;
114 color: transparent;
115 }
116
117 &:hover {
118 background: transparent;
119 }
120
121 &:hover::after {
122 color: var(--gold-darker);
123 }
124}
125
126.content hr {
127 visibility: hidden;
128 margin: 2em;
129}
130
131.content img {
132 margin-block: var(--grid-base);
133}
134
135/*
136 Fancy links!
137
138 When I actually do this, do it by pre-processing the links! The CSS to do it
139 may technically be *possible*, but… so many hoops to jump through. Whereas if
140 I just preprocess the links, it is trivial. I can simply select on:
141
142 - `.fnref`
143 - `.xref`
144 - `.xref .v3
145 - `.xref .v4`
146 - `.xref .v5`
147
148 Then normal links can just be, well, normal links!
149 */
150
151.content a[href]::after {
152 content: '∞';
153 font-family: var(--text-alt);
154 font-weight: 600;
155 font-style: normal;
156 vertical-align: baseline;
157 line-height: 0;
158 font-size: 0.9em;
159 /* margin: 0 1pt; */
160 padding: 0 1pt;
161 color: var(--gold-darker);
162}
163
164.content a[href]:hover::after {
165 color: var(--light-blue);
166}
167
168.content a[href^='https://v3.chriskrycho.com']::after,
169.content a[href^='https://v4.chriskrycho.com']::after,
170.content a[href^='https://v5.chriskrycho.com']::after
171{
172 font-size: 0.8em;
173 vertical-align: super;
174 font-family: var(--heading);
175 font-style: italic;
176 font-weight: 500;
177}
178
179/* Previous version links */
180.content a[href^='https://v3.chriskrycho.com']::after
181{
182 content: 'v3';
183}
184
185.content a[href^='https://v4.chriskrycho.com']::after
186{
187 content: 'v4';
188}
189
190.content a[href^='https://v5.chriskrycho.com']::after
191{
192 content: 'v5';
193}
194
195/* on-site links */
196.content a[href^='/']:not([id*='fnref'])::after {
197 content: '✢';
198}
199
200/* on-page links */
201.content a[href^='#']:not([id*='fnref'])::after {
202 content: '\FEFF#';
203}
204
205.content a[href^='#'][id*='fnref'] {
206 &::before {
207 content: '[';
208 }
209
210 &::after {
211 content: ']';
212 }
213}