Make all pages MDX compliant + added logo back

components/Logo.module.css

@@ -0,0 +1,18 @@
+.logo {
+  border-radius: 5px;
+  margin-left: -0.5rem;
+  padding: 0.5rem;
+  transition: transform 100ms ease-in-out, background-color 100ms ease-in-out;
+}
+
+.logo > img {
+  height: 1.5rem;
+}
+
+.logo:hover {
+  background-color: rgba(var(--colors-bgLightest));
+}
+
+.logo:active {
+  transform: scale(1.05);
+}

components/Logo.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+import classes from "./Logo.module.css";
+
+export function Logo() {
+  return (
+    <Link
+      href="/"
+      className={classes.logo}
+    >
+      <img src="/icon-light.png" alt="Logo of movie-web" />
+    </Link>
+  );
+}

components/global/Logo.vue

@@ -1,16 +0,0 @@
-<template>
-  <img src="/icon-light.png" alt="Logo of movie-web" class="img-dark" />
-  <img src="/icon-dark.png" alt="Logo of movie-web" class="img-light" />
-</template>
-
-<style scoped>
-img {
-  height: 30px;
-}
-.light .img-dark {
-  display: none;
-}
-.dark .img-light {
-  display: none;
-}
-</style>