Skip to content

Commit 285f22f

Browse files
Rich-HarrisRich-Harris
committed
Merge branch 'main' into better-search
2 parents cfa8d5c + 2712586 commit 285f22f

File tree

5 files changed

+134
-86
lines changed

5 files changed

+134
-86
lines changed

‎packages/site-kit/src/lib/components/Text.svelte‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,13 @@
116116
border: 1px solid var(--sk-back-5);
117117
border-radius: var(--sk-border-radius);
118118
overflow: hidden;
119-
margin: 2rem 0;
119+
margin: calc(0.5 * var(--sk-line-height-body)) 0;
120120
/* background: var(--sk-back-3); */
121121
122+
@media (min-width: 767px) {
123+
margin: var(--sk-line-height-body) 0;
124+
}
125+
122126
.controls {
123127
--height: 3.6rem;
124128
display: flex;
@@ -376,11 +380,11 @@
376380
li::before {
377381
content: '';
378382
position: absolute;
379-
top: 1.43rem;
383+
top: 0.65em;
380384
left: -1.8rem;
381385
background-color: var(--sk-text-4);
382-
width: 0.6rem;
383-
height: 0.6rem;
386+
width: 0.3em;
387+
height: 0.3em;
384388
border-radius: 50%;
385389
opacity: 0.7;
386390
}

‎packages/site-kit/src/lib/search/SearchBox.svelte‎

Lines changed: 108 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
7575
last_scroll_position = null;
7676
document.body.style.position = '';
7777
document.body.tabIndex = -1;
78-
document.body.focus();
78+
(document.activeElement as HTMLElement)?.blur();
7979
document.body.removeAttribute('tabindex');
8080
window.scrollTo(0, scroll);
8181
@@ -167,31 +167,37 @@ It appears when the user clicks on the `Search` component or presses the corresp
167167
use:trap
168168
>
169169
<div class="search-box">
170-
<div style="background: var(--background); padding: 0.5rem">
171-
<input
172-
use:forcefocus
173-
onkeydown={(e) => {
170+
<div class="controls">
171+
<div class="input-group">
172+
<input
173+
use:forcefocus
174+
onkeydown={(e) => {
174175
if (e.key === 'Enter' && !e.isComposing) {
175176
const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;
176177
element?.click();
177178
}
178179
}}
179-
oninput={(e) => {
180-
$search_query = e.currentTarget.value;
181-
}}
182-
value={$search_query}
183-
{placeholder}
184-
aria-describedby="search-description"
185-
aria-label={placeholder}
186-
spellcheck="false"
187-
/>
180+
oninput={(e) => {
181+
$search_query = e.currentTarget.value;
182+
}}
183+
value={$search_query}
184+
{placeholder}
185+
aria-describedby="search-description"
186+
aria-label={placeholder}
187+
spellcheck="false"
188+
/>
189+
190+
<button aria-label="Clear" onclick={() => ($search_query = '')}>
191+
<Icon name="close" />
192+
</button>
193+
</div>
194+
195+
<button class="raised" aria-label="Close" onclick={close}>
196+
<!-- <Icon name="close" /> -->
197+
<kbd>Esc</kbd>
198+
</button>
188199
</div>
189200

190-
<button aria-label="Close" onclick={close}>
191-
<!-- <Icon name="close" /> -->
192-
<kbd>Esc</kbd>
193-
</button>
194-
195201
<span id="search-description" class="visually-hidden">
196202
{#if search_description}
197203
{@render search_description()}
@@ -230,14 +236,15 @@ It appears when the user clicks on the `Search` component or presses the corresp
230236
</a>
231237

232238
<button
239+
class="raised icon"
233240
aria-label="Delete"
234241
onclick={(e) => {
235242
$search_recent = $search_recent.filter((href) => href !== search.href);
236243
e.stopPropagation();
237244
e.preventDefault();
238245
}}
239246
>
240-
<Icon name="delete" />
247+
<Icon name="delete" size={16} />
241248
</button>
242249
</li>
243250
{/each}
@@ -310,50 +317,85 @@ It appears when the user clicks on the `Search` component or presses the corresp
310317
}
311318
}
312319
313-
input {
314-
font: var(--sk-font-ui-large);
315-
width: 100%;
316-
padding: calc(var(--padding) - 0.5rem) 5rem calc(var(--padding) - 0.5rem) var(--padding);
317-
height: 6rem;
318-
border: none;
319-
border-bottom: 1px solid var(--sk-back-3);
320-
flex-shrink: 0;
321-
background: var(--sk-back-3);
322-
color: var(--sk-text-1);
323-
324-
&::selection {
325-
background-color: var(--sk-back-translucent);
326-
}
320+
.controls {
321+
background: var(--background);
322+
padding: 0.5rem;
323+
display: flex;
324+
gap: 1rem;
325+
}
327326
328-
&::placeholder {
329-
color: var(--sk-text-2);
330-
opacity: 0.3;
327+
.input-group {
328+
position: relative;
329+
flex: 1;
330+
331+
input {
332+
font: var(--sk-font-ui-large);
333+
width: 100%;
334+
padding: var(--padding) 6rem var(--padding) calc(var(--padding) - 0.5rem);
335+
height: 6rem;
336+
border: none;
337+
flex-shrink: 0;
338+
color: var(--sk-text-1);
339+
border-bottom: 1px solid var(--sk-back-6);
340+
background: inherit;
341+
342+
&::selection {
343+
background-color: var(--sk-back-translucent);
344+
}
345+
346+
&::placeholder {
347+
color: var(--sk-text-2);
348+
opacity: 0.3;
349+
}
350+
351+
&:focus-visible {
352+
outline-offset: -2px;
353+
}
331354
}
332355
333-
&:focus-visible {
334-
outline-offset: -3px;
356+
button {
357+
position: absolute;
358+
right: 0;
359+
top: 0;
360+
height: 100%;
361+
aspect-ratio: 1;
362+
color: var(--sk-text-4);
363+
364+
&:hover,
365+
&:focus {
366+
color: var(--sk-text-3);
367+
}
368+
369+
&:focus-visible {
370+
outline-offset: -2px;
371+
}
335372
}
336373
}
337374
338375
button[aria-label='Close'] {
339-
--size: 2rem;
340-
position: absolute;
341-
top: 0.5rem;
342-
right: 0;
343-
width: 5rem;
344-
height: 6rem;
376+
height: 100%;
377+
aspect-ratio: 1;
345378
background: none;
346-
color: var(--sk-text-2);
347-
opacity: 0.3;
379+
380+
&:hover,
381+
&:focus {
382+
color: var(--sk-text-3);
383+
}
348384
349385
&:focus-visible {
350-
opacity: 1;
351-
outline-offset: -3px;
386+
outline-offset: -2px;
352387
}
353388
354389
kbd {
390+
display: flex;
391+
align-items: center;
392+
justify-content: center;
355393
text-transform: uppercase;
356-
font: var(--sk-font-ui-small);
394+
background: none;
395+
font: var(--sk-font-ui-medium);
396+
color: var(--sk-text-4);
397+
width: 100%;
398+
height: 100%;
357399
}
358400
}
359401
@@ -373,38 +415,40 @@ It appears when the user clicks on the `Search` component or presses the corresp
373415
374416
li {
375417
position: relative;
418+
display: flex;
419+
padding: 0.2rem var(--padding);
420+
gap: 1rem;
421+
422+
&:hover {
423+
background: var(--sk-back-3);
424+
}
376425
377426
a {
378427
color: var(--sk-text-2);
379428
display: block;
380429
text-decoration: none;
381-
padding: 0.5rem calc(4rem + var(--padding)) 0.5rem var(--padding);
382-
383-
&:hover {
384-
background: rgba(0, 0, 0, 0.05);
385-
}
430+
margin: 0 -0.5rem;
431+
padding: 0.5rem;
432+
flex: 1;
386433
387434
&:focus {
388435
outline-offset: -3px;
389436
}
390437
}
391438
392439
button[aria-label='Delete'] {
393-
position: absolute;
394-
top: 0;
395-
right: 0;
396-
width: 5rem;
397-
height: 100%;
398-
color: var(--sk-text-2);
399-
opacity: 0.1;
440+
width: 3.2rem;
441+
height: 3.2rem;
442+
color: var(--sk-text-4);
443+
background-color: var(--sk-back-2);
400444
401445
&:hover {
402-
opacity: 1;
403446
outline: none;
447+
color: var(--sk-text-3);
404448
}
405449
406450
&:focus-visible {
407-
opacity: 1;
451+
color: var(--sk-text-3);
408452
outline-offset: -3px;
409453
}
410454
}

‎packages/site-kit/src/lib/search/SearchResultList.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@
149149
}
150150
151151
&:hover {
152-
--background: var(--sk-back-4);
152+
--background: var(--sk-back-3);
153153
text-decoration: none;
154154
}
155155

‎packages/site-kit/src/lib/styles/base.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ p,
4545
ul,
4646
ol {
4747
font: var(--sk-font-body);
48-
margin: 1lh 0;
48+
margin: 0.5lh 0;
4949

5050
&:first-child {
5151
margin-top: 0;
@@ -136,8 +136,7 @@ header {
136136
/* opinionated styles --------------------- */
137137
blockquote {
138138
position: relative;
139-
margin: 2.4rem 0;
140-
padding: 2rem 2.4rem 1.8rem 2.4rem;
139+
margin: var(--sk-line-height-body) 0;
141140
max-width: var(--sk-page-content-width);
142141
}
143142

‎packages/site-kit/src/lib/styles/tokens.css‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,16 @@
3232
--sk-font-size-h1: 3.6rem;
3333
--sk-font-size-h2: 3rem;
3434
--sk-font-size-h3: 2.4rem;
35-
--sk-font-size-body: 2rem;
36-
--sk-font-size-body-small: 1.8rem;
35+
--sk-font-size-body: 1.8rem;
36+
--sk-font-size-body-small: 1.6rem;
3737
--sk-font-size-ui-small: 1.3rem;
3838
--sk-font-size-ui-medium: 1.6rem;
3939
--sk-font-size-ui-large: 3rem;
4040
--sk-font-size-mono: 1.4rem;
4141

42-
--sk-line-height-body: 1.7;
42+
/* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */
43+
--sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
44+
--sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small));
4345

4446
--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
4547
--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);
@@ -125,7 +127,16 @@
125127
--sk-font-family-body: 'EB Garamond', Georgia, serif;
126128
--sk-font-size-body: 2.2rem;
127129
--sk-font-size-body-small: 2rem;
128-
--sk-line-height-body: 1.5;
130+
}
131+
132+
&.font-boring {
133+
--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
134+
--sk-font-size-body: 1.9rem;
135+
--sk-font-size-body-small: 1.7rem;
136+
137+
p code {
138+
font-size: 0.75em;
139+
}
129140
}
130141

131142
&.dark {
@@ -176,16 +187,6 @@
176187
--sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6);
177188
--sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3);
178189
}
179-
180-
&.font-boring {
181-
--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
182-
--sk-font-size-body: 2rem;
183-
--sk-font-size-body-small: 1.8rem;
184-
185-
p code {
186-
font-size: 0.75em;
187-
}
188-
}
189190
}
190191

191192
@media screen and (min-width: 480px) {

0 commit comments

Comments
 (0)