feat(search): add basic search functionality

this commit adds basic search feature.

fix: https://codeberg.org/zyachel/libremdb/issues/9, https://github.com/zyachel/libremdb/issues/10

src/styles/modules/components/find/company.module.scss

@@ -0,0 +1,13 @@
+.company {
+  background: var(--clr-bg-accent);
+  box-shadow: var(--clr-shadow);
+  border-radius: 5px;
+  display: grid;
+  padding: var(--spacer-3);
+  gap: var(--spacer-0);
+}
+
+.heading {
+  font-size: var(--fs-4);
+  text-decoration: none;
+}

src/styles/modules/components/find/keyword.module.scss

@@ -0,0 +1,13 @@
+.keyword {
+  background: var(--clr-bg-accent);
+  box-shadow: var(--clr-shadow);
+  border-radius: 5px;
+  display: grid;
+  padding: var(--spacer-3);
+  gap: var(--spacer-0);
+}
+
+.heading {
+  font-size: var(--fs-4);
+  text-decoration: none;
+}

src/styles/modules/components/find/person.module.scss

@@ -0,0 +1,74 @@
+@use '../../../abstracts' as helper;
+
+.person {
+  --width: 10rem;
+  --height: var(--width);
+
+  background: var(--clr-bg-accent);
+  box-shadow: var(--clr-shadow);
+  border-radius: 5px;
+  overflow: hidden; // for background image
+  display: grid;
+  grid-template-columns: var(--width) auto;
+  
+  @include helper.bp('bp-450') {
+    --height: 15rem;
+    grid-template-columns: auto;
+  }
+}
+
+.imgContainer {
+  display: grid;
+  place-items: center;
+  min-height: var(--height);
+}
+
+.img {
+  object-fit: cover;
+  object-position: center 25%; // most of the time, person's face is visible at 1/4 of height in a potrait image.
+
+}
+
+.imgNA {
+  width: 80%;
+  fill: var(--clr-fill-muted);
+}
+
+.info {
+  display: grid;
+  padding: var(--spacer-3);
+  gap: var(--spacer-0);
+
+  @include helper.bp('bp-450') {
+    padding: var(--spacer-1);
+  }
+}
+
+.heading {
+  font-size: var(--fs-4);
+  text-decoration: none;
+}
+
+
+
+.basicInfo, .seriesInfo {
+  display: flex;
+  list-style: none;
+  flex-wrap: wrap;
+
+  & * + ::before {
+    content: '\00b7';
+    padding-inline: var(--spacer-1);
+    font-weight: 900;
+    line-height: 0;
+    font-size: var(--fs-5);
+  }
+}
+
+
+.stars  {
+
+  span {
+   font-weight: var(--fw-bold); 
+  }
+}

src/styles/modules/components/find/results.module.scss

@@ -0,0 +1,25 @@
+@use '../../../abstracts' as helper;
+
+.results {
+  display: grid;
+  gap: var(--spacer-2);
+
+  &__list {
+    display: grid;
+    gap: var(--spacer-5);
+  }
+}
+
+.titles, .people, .companies, .keywords {
+  display: grid;
+  gap: var(--spacer-2);
+
+  &__list {
+    padding: var(--spacer-2);
+    display: grid;
+    gap: var(--spacer-4);
+    // justify-self: start;
+
+
+  }
+}

src/styles/modules/components/find/title.module.scss

@@ -0,0 +1,75 @@
+@use '../../../abstracts' as helper;
+
+.title {
+  --width: 10rem;
+  --height: 10rem;
+
+  background: var(--clr-bg-accent);
+  box-shadow: var(--clr-shadow);
+  border-radius: 5px;
+  overflow: hidden; // for background image
+  display: grid;
+  grid-template-columns: var(--width) auto;
+
+  @include helper.bp('bp-450') {
+    --height: 15rem;
+    grid-template-columns: auto;
+  }
+}
+
+.imgContainer {
+  min-height: var(--height);
+
+  display: grid;
+  place-items: center;
+  position: relative;
+}
+
+.img {
+  object-fit: cover;
+
+  @include helper.bp('bp-450') {
+    object-position: center 25%;
+  }
+}
+
+.imgNA {
+  width: 80%;
+  fill: var(--clr-fill-muted);
+}
+
+.info {
+  display: grid;
+  gap: var(--spacer-0);
+  padding: var(--spacer-3);
+
+  @include helper.bp('bp-450') {
+    padding: var(--spacer-1);
+  }
+}
+
+.heading {
+  font-size: var(--fs-4);
+  text-decoration: none;
+}
+
+.basicInfo,
+.seriesInfo {
+  display: flex;
+  list-style: none;
+  flex-wrap: wrap;
+
+  & * + ::before {
+    content: '\00b7';
+    padding-inline: var(--spacer-1);
+    font-weight: 900;
+    line-height: 0;
+    font-size: var(--fs-5);
+  }
+}
+
+.stars {
+  span {
+    font-weight: var(--fw-bold);
+  }
+}

src/styles/modules/components/form/find.module.scss

@@ -0,0 +1,148 @@
+@use '../../../abstracts' as helper;
+
+.form {
+  display: grid;
+  gap: var(--spacer-2);
+
+  position: sticky;
+  top: var(--spacer-2);
+
+  @include helper.bp('bp-1200') {
+    position: initial;
+  }
+}
+
+%border-styles {
+  border-radius: var(--spacer-1);
+  border: 2px solid var(--clr-fill-muted);
+}
+
+.searchbar {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: var(--spacer-1);
+  padding: var(--spacer-1);
+
+  @extend %border-styles;
+
+  --dim: 3rem;
+
+  &__icon {
+    height: var(--dim);
+    width: var(--dim);
+
+    fill: var(--clr-fill-muted);
+  }
+
+  &__input {
+    font: inherit;
+    border: none;
+    outline: none;
+    caret-color: var(--clr-fill);
+    background: transparent;
+    color: var(--clr-text-accent);
+
+    -webkit-appearance: none; // webkit sucks!
+  }
+
+  // accessibility
+  &:focus-within {
+    background: var(--clr-bg-muted);
+  }
+
+}
+
+.types,
+.titleTypes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacer-2);
+  padding: var(--spacer-2);
+
+  @extend %border-styles;
+
+  &__heading {
+    font-size: var(--fs-4);
+    padding-inline: var(--spacer-1);
+    flex: 100%;
+    line-height: 1;
+    color: var(--clr-text-muted);
+  }
+
+  &:disabled {
+    &,  * {
+      cursor: not-allowed;
+      filter: brightness(.95);
+    }
+  }
+}
+
+.type,
+.titleType {
+  --border-color: transparent;
+  position: relative;
+  display: inline-flex;
+
+  label {
+    cursor: pointer;
+    padding: var(--spacer-1) var(--spacer-2);
+    border-radius: 5px;
+    color: var(--clr-text-accent);
+    background-color: var(--clr-bg-accent);
+    border: 2px solid var(--border-color);
+  }
+  
+  input:checked + label {
+    --border-color: var(--clr-text-accent);
+  }
+
+  // for keyboard navigation
+  input:focus + label {
+    @include helper.focus-rules;
+  }
+
+  @supports selector(:focus-visible) {
+    input:focus + label {
+      outline: none;
+    }
+
+    input:focus-visible + label {
+      @include helper.focus-rules;
+    }
+  }
+}
+
+.exact {
+  display: flex;
+  gap: var(--spacer-1);
+  justify-self: start;
+  align-items: center;
+  
+  label, input {
+    cursor: pointer;
+  }
+}
+
+.buttons {
+  display: flex;
+  gap: var(--spacer-2);
+}
+
+.button {
+
+  --text: var(--clr-link);
+
+  padding: var(--spacer-1) var(--spacer-2);
+  font: inherit;
+
+  background: transparent;
+  color: var(--text);
+  border: 2px solid currentColor;
+  border-radius: 5px;
+  cursor: pointer;
+
+  &[type='reset'] {
+    --text: var(--clr-text-muted)
+
+  }
+}

src/styles/modules/layout/header.module.scss

@@ -1,7 +1,7 @@
 @use '../../abstracts' as helper;
 
 .header {
-  --dimension: 1.5em; // will be used for icons
+  --dimension: 1.6em; // will be used for icons
 
   font-size: 1.1em;
 
@@ -67,9 +67,20 @@
   }
 }
 
-.themeToggler {
+.misc {
   justify-self: end;
   grid-column: -2 / -1;
+
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-2);
+  position: relative;
+
+  svg {
+    height: var(--dimension);
+    width: var(--dimension);
+    fill: var(--clr-fill);
+  }
 }
 
 .hero {

src/styles/modules/pages/find/find.module.scss

@@ -0,0 +1,44 @@
+@use '../../../abstracts' as helper;
+
+.find {
+  // major whitespace properties used on title page
+  --doc-whitespace: var(--spacer-8);
+  --comp-whitespace: var(--spacer-3);
+
+  display: grid;
+
+  gap: var(--doc-whitespace);
+  padding: var(--doc-whitespace);
+  align-items: start;
+
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-areas: 'results results results form form';
+
+  @include helper.bp('bp-900') {
+    grid-template-columns: none;
+    grid-template-areas: 'results' 'form';
+  }
+
+  @include helper.bp('bp-700') {
+    --doc-whitespace: var(--spacer-5);
+  }
+
+  @include helper.bp('bp-450') {
+    padding: var(--spacer-3);
+  }
+
+  &__home {
+    grid-template-columns: unset;
+    grid-template-areas: 'form';
+
+    justify-content: center;
+  }
+}
+
+.results {
+  grid-area: results;
+}
+
+.form {
+  grid-area: form;
+}