feat(reviews): add reviews route

allows seeing all reviews with optional filters.
works sans JS as well

closes https://github.com/zyachel/libremdb/issues/25
closes https://codeberg.org/zyachel/libremdb/issues/19

src/styles/modules/components/card/card-title-reviews.module.scss

@@ -0,0 +1,80 @@
+@use '../../../abstracts' as helper;
+
+.title {
+  line-height: 1;
+}
+
+.meta {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+
+  & * + *::before {
+    content: '\00b7';
+    padding-inline: var(--spacer-0);
+    font-weight: 900;
+    line-height: 0;
+    font-size: var(--fs-5);
+  }
+
+  @include helper.bp('bp-900') {
+    justify-content: center;
+  }
+}
+
+.ratings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacer-0) var(--spacer-3);
+
+  @include helper.bp('bp-900') {
+    justify-content: center;
+  }
+}
+
+.rating {
+  font-size: var(--fs-5);
+
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+  place-items: center;
+  gap: 0 var(--spacer-0);
+
+  &__num {
+    grid-column: 1 / 2;
+    font-size: 1.8em;
+    font-weight: var(--fw-medium);
+    // line-height: 1;
+  }
+
+  &__icon {
+    --dim: 1.8em;
+    grid-column: -2 / -1;
+    line-height: 1;
+    height: var(--dim);
+    width: var(--dim);
+    display: grid;
+    place-content: center;
+    fill: var(--clr-fill);
+  }
+
+  &__text {
+    grid-column: 1 / -1;
+    font-size: 0.9em;
+    line-height: 1;
+
+    color: var(--clr-text-muted);
+  }
+}
+
+.link {
+  @include helper.prettify-link(var(--clr-link));
+}
+
+.genres,
+.overview,
+.crewType {
+  &__heading {
+    font-weight: var(--fw-bold);
+  }
+}

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

@@ -0,0 +1,111 @@
+@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);
+}
+
+.fieldset {
+  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);
+    }
+  }
+}
+
+.radio {
+  --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/components/titleReviews/pagination.module.scss

@@ -0,0 +1,22 @@
+@use '../../../abstracts' as helper;
+
+.button, .link {
+  --text: var(--clr-link);
+
+  padding: var(--spacer-1) var(--spacer-2);
+  font: inherit;
+  text-decoration: none;
+
+  background: transparent;
+  color: var(--text);
+  border: 2px solid currentColor;
+  border-radius: 5px;
+  cursor: pointer;
+
+}
+
+:root {
+  &:not([data-js]) .button, &[data-js] .link {
+    display: none;
+  }
+}

src/styles/modules/components/titleReviews/reviews.module.scss

@@ -0,0 +1,120 @@
+@use '../../../abstracts' as helper;
+
+.reviews {
+  display: grid;
+  // gap: var(--spacer-5);
+
+  > * + * {
+    border-top: .5px solid var(--clr-fill-muted);
+  }
+  > * {
+    --padding: var(--spacer-5);
+    padding-block: var(--padding);
+
+    @include helper.bp('bp-700') {
+      --padding: var(--spacer-3);
+    }
+  
+  }
+
+  :first-child {
+    padding-top: 0;
+  }
+}
+
+.review {
+  &__summary {
+    font-size: calc(var(--fs-5) * 1.1);
+    cursor: pointer;
+
+    display: grid;
+    grid-template-areas: 'name rating' 'date rating' 'summary summary';
+    align-items: stretch;
+    justify-items: start;
+
+
+
+    a {
+      grid-area: name;
+    }
+    time {
+      grid-area: date;
+      font-size: .8em;
+      color: var(--clr-text-muted);
+    }
+
+    strong {
+      grid-area: summary;
+      margin-top: var(--spacer-21);
+    }
+
+    &_chevron {
+      --dim: 1.2em;
+    }
+
+    // @include helper.bp('bp-700') {
+    //   grid-template-areas: 'name' 'date' 'rating' 'summary';
+    // }
+  }
+
+  &__misc {
+    grid-area: rating;
+    align-self: center;
+    justify-self: self-end;
+    // background-color: red;
+    
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--spacer-2);
+
+    span {
+      display: flex;
+      gap: var(--spacer-0);
+      align-items: center;
+      @include helper.bp('bp-700') {
+        font-size: .9em;
+       
+      }
+    }
+
+    &_spoilers {
+      color: var(--clr-link-muted);
+      @include helper.bp('bp-700') {
+       
+      }
+    }
+
+    @include helper.bp('bp-700') {
+      // justify-self: stretch;
+      // padding-block: var(--spacer-0);
+      grid-auto-flow: row;
+      grid-template-columns: repeat(2, max-content);
+      gap: 0;
+    }
+  }
+
+  &__text,
+  &__metadata {
+    padding-top: var(--spacer-2);
+  }
+
+  &__summary_chevron {
+    @include helper.bp('bp-700') {
+     grid-column: -2 / -1;
+     grid-row: 1 / 3;
+     place-self: center;
+    }
+  }
+
+  &[open] &__summary_chevron {
+    transform: rotate(180deg);
+    
+  }
+}
+
+:where(.icon) {
+  --dim: 1em;
+  height: var(--dim);
+  width: var(--dim);
+  fill: var(--clr-fill);
+}

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

@@ -0,0 +1,43 @@
+@use '../../../abstracts' as helper;
+
+.container {
+  // 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:
+    'card card card form form'
+    'results results results form form';
+
+  @include helper.bp('bp-900') {
+    grid-template-columns: none;
+    grid-template-areas: 'card' 'results' 'form';
+  }
+
+  @include helper.bp('bp-700') {
+    --doc-whitespace: var(--spacer-5);
+  }
+
+  @include helper.bp('bp-450') {
+    --doc-whitespace: var(--spacer-3);
+  }
+}
+
+.card {
+  grid-area: card;
+}
+
+.results {
+  grid-area: results;
+}
+
+.form {
+  grid-area: form;
+}