From 9e10228cbb2a82993231b6630b4afd326dcc1005 Mon Sep 17 00:00:00 2001
From: Maciej Jur <maciej@kamoshi.org>
Date: Thu, 13 Apr 2023 01:52:20 +0200
Subject: [PATCH] Extract search styles into SCSS

---
 src/components/search/Search.svelte | 53 ++++-------------------------
 src/styles/components/_search.scss  | 42 +++++++++++++++++++++++
 src/styles/styles.scss              |  1 +
 3 files changed, 49 insertions(+), 47 deletions(-)
 create mode 100644 src/styles/components/_search.scss

diff --git a/src/components/search/Search.svelte b/src/components/search/Search.svelte
index df23025..843d5ef 100644
--- a/src/components/search/Search.svelte
+++ b/src/components/search/Search.svelte
@@ -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>
diff --git a/src/styles/components/_search.scss b/src/styles/components/_search.scss
new file mode 100644
index 0000000..6770b35
--- /dev/null
+++ b/src/styles/components/_search.scss
@@ -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);
+  }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 149ba03..3ef6f02 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -7,6 +7,7 @@
 
 // Components
 @use 'components/map';
+@use 'components/search';
 
 // Partials
 @use 'partials/nav';