feat(route): add name route

adds much needed route

fix https://github.com/zyachel/libremdb/issues/39, https://github.com/zyachel/libremdb/issues/36,
https://codeberg.org/zyachel/libremdb/issues/11

src/styles/modules/components/name/basic.module.scss

@@ -0,0 +1,54 @@
+@use '../../../abstracts' as helper;
+
+.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));
+}
+
+.heading {
+  font-weight: var(--fw-bold);
+}

src/styles/modules/components/name/credits.module.scss

@@ -0,0 +1,49 @@
+@use '../../../abstracts' as helper;
+
+.credits {
+  display: grid;
+  gap: var(--comp-whitespace);
+
+  & > section {
+    overflow-x: auto;
+    display: grid;
+    gap: var(--spacer-1);
+  }
+
+  details {
+    overflow-x: auto;
+  }
+
+  summary {
+    cursor: pointer;
+    font-size: var(--fs-4);
+    color: var(--clr-text-accent);
+    font-family: var(--ff-primary);
+  }
+}
+
+.container {
+  --max-width: 18rem;
+  --min-height: 40rem;
+
+  list-style: none;
+  overflow-x: auto;
+
+  display: grid;
+  grid-auto-flow: column;
+  // grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacer-4);
+  padding: var(--spacer-1) var(--spacer-2) var(--spacer-3) var(--spacer-2);
+
+  grid-auto-columns: var(--max-width);
+  min-height: var(--min-height);
+
+  > li {
+    list-style: none;
+  }
+
+  @include helper.bp('bp-700') {
+    grid-auto-columns: calc(var(--max-width) - 1rem);
+    min-height: calc(var(--min-height) - 5rem);
+  }
+}

src/styles/modules/components/name/did-you-know.module.scss

@@ -0,0 +1,4 @@
+.bio {
+  display: grid;
+  gap: var(--comp-whitespace);
+}

src/styles/modules/components/name/info.module.scss

@@ -0,0 +1,21 @@
+.info {
+  display: grid;
+
+  gap: var(--doc-whitespace);
+}
+
+.accolades, .details {
+  display: grid;
+  gap: var(--comp-whitespace);
+
+  &__container {
+    display: grid;
+    gap: var(--spacer-0);
+
+    // for span elements like these: 'release date:'
+    & > p > span:first-of-type {
+      font-weight: var(--fw-bold);
+    }
+  }
+}
+

src/styles/modules/components/name/known-for.module.scss

@@ -0,0 +1,32 @@
+@use '../../../abstracts' as helper;
+
+.knownFor {
+  display: grid;
+  gap: var(--comp-whitespace);
+}
+
+.container {
+  --max-width: 18rem;
+  --min-height: 40rem;
+
+  list-style: none;
+  overflow-x: auto;
+
+  display: grid;
+  grid-auto-flow: column;
+  // grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacer-4);
+  padding: 0 var(--spacer-2) var(--spacer-3) var(--spacer-2);
+
+  grid-auto-columns: var(--max-width);
+  min-height: var(--min-height);
+
+  > li {
+    list-style: none;
+  }
+
+  @include helper.bp('bp-700') {
+    grid-auto-columns: calc(var(--max-width) - 1rem);
+    min-height: calc(var(--min-height) - 5rem);
+  }
+}

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

@@ -0,0 +1,26 @@
+.reviews {
+  display: grid;
+  gap: var(--comp-whitespace);
+
+  &__reviewContainer {
+    // background-color: antiquewhite;
+  }
+
+  &__stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacer-2);
+  }
+}
+
+.review {
+  &__summary {
+    font-size: calc(var(--fs-5) * 1.1);
+    cursor: pointer;
+  }
+
+  &__text,
+  &__metadata {
+    padding-top: var(--spacer-2);
+  }
+}

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

@@ -0,0 +1,64 @@
+@use '../../../abstracts' as helper;
+
+.name {
+  --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(8, 1fr);
+  grid-template-areas:
+    'basic   basic   basic   basic   basic   basic   basic   basic'
+    'media   media   media   media   media   media   media   media'
+    'text    text    text    text    text    info    info    info'
+    'credits credits credits credits credits credits credits credits';
+
+  @include helper.bp('bp-1200') {
+    grid-template-columns: none;
+    grid-template-areas:
+      'basic'
+      'media'
+      'known'
+      'text'
+      'info'
+      'credits';
+  }
+
+  @include helper.bp('bp-700') {
+    --doc-whitespace: var(--spacer-5);
+  }
+
+  @include helper.bp('bp-450') {
+    padding: var(--spacer-3);
+  }
+}
+
+.basic {
+  grid-area: basic;
+}
+
+.media {
+  grid-area: media;
+}
+
+.credits {
+  grid-area: credits;
+}
+
+.textarea {
+  grid-area: text;
+  display: grid;
+
+  gap: var(--doc-whitespace);
+}
+
+.infoarea {
+  grid-area: info;
+  display: grid;
+
+  gap: var(--doc-whitespace);
+}