Apply sidebar hack only on aspect pages

villasv · Jul 9, 2024 · f05af49 · f05af49
1 parent df7235d
commit f05af49
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 57 deletions.
diff --git a/app/(aspects)/layout.tsx b/app/(aspects)/layout.tsx
@@ -0,0 +1,20 @@
+import styles from "./styles.module.css";
+import { Sidebar } from "@/components/sidebar";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className={styles["aspect-wrapper"]}>
+      <div className={styles["sidebar-floater"]}>
+        <div className={styles["sidebar"]}>
+          <Sidebar />
+        </div>
+      </div>
+      <div className={styles["content"]}>
+        <a className={styles["home-link"]} href="/">
+          🔙 Homepage
+        </a>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/app/(aspects)/styles.module.css b/app/(aspects)/styles.module.css
@@ -0,0 +1,42 @@
+/* centered content with responsive sidebar */
+.aspect-wrapper {
+  display: flex;
+  justify-content: center;
+  max-width: 960px;
+  margin: 40px auto 80px auto;
+}
+
+.sidebar-floater {
+  position: absolute;
+  justify-content: center;
+  width: calc(30%);
+  left: 0;
+}
+.sidebar {
+  width: 240px;
+  font-size: 16px;
+  margin: 28px auto 0 auto;
+}
+
+.content {
+  max-width: 680px;
+  margin: 0 auto 0 auto;
+}
+.home-link {
+  font-size: 26px;
+}
+.content a {
+  text-decoration: underline;
+}
+
+/* replace sidebar with home link on narrow screen */
+@media (min-width: 1281px) {
+  .home-link {
+    display: none;
+  }
+}
+@media (max-width: 1280px) {
+  .sidebar {
+    display: none;
+  }
+}
diff --git a/app/globals.css b/app/globals.css
@@ -94,45 +94,3 @@ a:active {
 a:visited {
   color: var(--color-chocolate);
 }
-
-/* centered content with responsive sidebar */
-body {
-  display: flex;
-  justify-content: center;
-  max-width: 960px;
-  margin: 40px auto 80px auto;
-  #sidebar {
-    position: absolute;
-    justify-content: center;
-    width: calc(30%);
-    left: 0;
-    div {
-      width: 240px;
-      font-size: 16px;
-      margin: 28px auto 0 auto;
-    }
-  }
-  #content {
-    max-width: 680px;
-    margin: 0 auto 0 auto;
-    .home-link {
-      font-size: 26px;
-    }
-    a {
-      text-decoration: underline;
-    }
-  }
-}
-/* replace sidebar with home link on narrow screen */
-@media (min-width: 1281px) {
-  #content {
-    .home-link {
-      display: none;
-    }
-  }
-}
-@media (max-width: 1280px) {
-  #sidebar {
-    display: none;
-  }
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,22 +1,9 @@
 import "./globals.css";
-import { Sidebar } from "@/components/sidebar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body>
-        <div id="sidebar">
-          <div>
-            <Sidebar />
-          </div>
-        </div>
-        <div id="content">
-          <a className="home-link" href="/">
-            🔙 Homepage
-          </a>
-          <div className="children">{children}</div>
-        </div>
-      </body>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,3 +1,5 @@
+import { Sidebar } from "@/components/sidebar";
+
 export const metadata = {
   title: "Victor's Website",
   description: "on the independent web",
@@ -10,5 +12,5 @@ export const metadata = {
 };
 
 export default function Page() {
-  return <div></div>;
+  return <Sidebar />;
 }