kamov/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Extract search styles into SCSS

Browse source
This commit is contained in:
Maciej Jur 2023-04-13 01:52:20 +02:00
parent e5c20f7eeb
commit 9e10228cbb
3 changed files with 49 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/components/search/Search.svelte
View file

@ -43,20 +43,20 @@
</script>
<article class="search">
<article class="c-search">
<h1>Search</h1>
<input class="search-input" bind:value on:input={search} placeholder="Start typing here!"/>
<input class="c-search__input" bind:value on:input={search} placeholder="Start typing here!"/>
{#if value}
<section class="results">
<section class="c-search__results">
<div>Showing results for "{value}" ({results.length})</div>
{#each results as result}
{@const meta = metadata[result.ref]}
{@const date = dayjs(meta.date)}
<a class="result" href={result.ref}>
<span class="name">{meta.title}</span>
<time class="date" datetime={date.toISOString()}>{date.format("MMM DD, YYYY")}</time>
<a class="c-search__result" href={result.ref}>
<span class="c-search__name">{meta.title}</span>
<time class="c-search__date" datetime={date.toISOString()}>{date.format("MMM DD, YYYY")}</time>
</a>
{/each}
</section>
@ -66,44 +66,3 @@
</article>
<svelte:window on:popstate={sync} />
<style lang="scss">
.search {
margin: 2em auto;
padding: 0 4em;
max-width: 52em;
.search-input {
width: 100%;
padding: 0.5em 1em;
margin-bottom: 0.5em;
box-sizing: border-box;
}
.results {
display: grid;
row-gap: 0.5em;
}
.result {
display: flex;
flex-direction: row;
padding: 0.5em;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
transition: box-shadow linear 100ms;
text-decoration: none;
.date {
margin-left: auto;
color: rgb(65, 65, 65);
}
&:focus-within,
&:hover {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
}
}
</style>

42
src/styles/components/_search.scss Normal file
View file

@ -0,0 +1,42 @@
.c-search {
max-width: 52em;
margin: 0.5em auto;
padding: 0 1em;
@media (min-width: 40em) {
margin: 2em auto;
padding: 0 4em;
}
&__input {
width: 100%;
padding: 0.5em 1em;
margin-bottom: 0.5em;
box-sizing: border-box;
}
&__results {
display: grid;
row-gap: 0.5em;
}
&__result {
display: flex;
flex-direction: row;
padding: 0.5em;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
transition: box-shadow linear 100ms;
text-decoration: none;
&:focus-within,
&:hover {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
}
&__date {
margin-left: auto;
color: rgb(65, 65, 65);
}
}

1
src/styles/styles.scss
View file

@ -7,6 +7,7 @@
// Components
@use 'components/map';
@use 'components/search';
// Partials
@use 'partials/nav';