fresh <PageTitle> look

components/Content/Content.module.css

@@ -1,12 +0,0 @@
-.content {
-  font-size: 0.9em;
-  line-height: 1.7;
-  color: var(--colors-text);
-}
-
-@media (max-width: 768px) {
-  .content {
-    font-size: 0.925em;
-    line-height: 1.85;
-  }
-}

components/Content/Content.tsx

@@ -1,10 +0,0 @@
-import clsx from "clsx";
-import type { ComponentPropsWithoutRef } from "react";
-
-import styles from "./Content.module.css";
-
-const Content = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => (
-  <div className={clsx(styles.content, className)} {...rest} />
-);
-
-export default Content;

components/Content/index.ts

@@ -1,2 +0,0 @@
-export * from "./Content";
-export { default } from "./Content";

components/PageTitle/PageTitle.module.css

@@ -1,17 +1,21 @@
 .title {
   margin-top: 0;
   margin-bottom: 0.6em;
-  font-size: 1.7em;
+  font-size: 1.9em;
   font-weight: 600;
-  text-align: center;
+  text-transform: lowercase;
+  letter-spacing: 0.02em;
 }
 
-.link {
-  color: var(--colors-text) !important;
+.slug::before {
+  content: "\002E\002F"; /* "./" */
+  letter-spacing: 0.1em;
+  color: var(--colors-mediumLight) !important;
+  margin-right: -0.1em;
 }
 
 @media (max-width: 768px) {
   .title {
-    font-size: 1.8em;
+    font-size: 2em;
   }
 }

components/PageTitle/PageTitle.tsx

@@ -1,6 +1,3 @@
-"use client";
-
-import { usePathname } from "next/navigation";
 import clsx from "clsx";
 import Link from "../Link";
 import type { ComponentPropsWithoutRef } from "react";
@@ -8,14 +5,14 @@ import type { Route } from "next";
 
 import styles from "./PageTitle.module.css";
 
-export type PageTitleProps = ComponentPropsWithoutRef<"h1">;
-
-const PageTitle = ({ className, children, ...rest }: PageTitleProps) => {
-  const pathname = usePathname() || "";
+export type PageTitleProps = ComponentPropsWithoutRef<"h1"> & {
+  canonical: string;
+};
 
+const PageTitle = ({ canonical, className, children, ...rest }: PageTitleProps) => {
   return (
     <h1 className={clsx(styles.title, className)} {...rest}>
-      <Link href={pathname as Route} plain className={styles.link}>
+      <Link href={canonical as Route} plain className={styles.slug}>
         {children}
       </Link>
     </h1>

components/YouTube/YouTube.module.css

@@ -1,3 +1,3 @@
-.wrapper :global(lite-youtube) {
+.wrapper lite-youtube {
   margin: 0 auto;
 }