feat/base-layout

Adds a base layout for the public pages.
rikhall1515 · Apr 21, 2024 · 3fe6a51 · 3fe6a51
2 parents d4a67a2 + b458002
commit 3fe6a51
Show file tree

Hide file tree

Showing 5 changed files with 242 additions and 37 deletions.
diff --git a/app/(public)/layout.tsx b/app/(public)/layout.tsx
@@ -0,0 +1,18 @@
+import CookieBanner from "@/components/cookies";
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+
+export default function PublicLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      <main className="">{children}</main>
+      <Footer />
+      <CookieBanner />
+    </>
+  );
+}
diff --git a/app/page.tsx → app/(public)/page.tsx b/app/page.tsx → app/(public)/page.tsx
diff --git a/app/globals.css b/app/globals.css
@@ -4,48 +4,124 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    /* hsl(0 0% 98%) */
+    --background: 0 0% 98%;
+
+    /* hsl(274 84% 5%) */
+    --foreground: 274 84% 5%;
+
+    /* hsl(0 0% 100%) */
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+
+    /* hsl(274 84% 5%) */
+    --card-foreground: 274 84% 5%;
+
+    /* hsl(0 0% 100%) */
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+
+    /* hsl(274 84% 5%) */
+    --popover-foreground: 274 84% 5%;
+
+    /* hsl(274 90% 47%) */
+    --primary: 274 90% 47%;
+
+    /* hsl(270 40% 98%) */
+    --primary-foreground: 270 40% 98%;
+
+    /* hsl(238 82% 38%) */
+    --secondary: 238 82% 38%;
+
+    /* hsl(0 0% 98%) */
+    --secondary-foreground: 0 0% 98%;
+
+    /* hsl(270 40% 96%) */
+    --muted: 270 40% 96%;
+
+    /* hsl(250 16% 47%) */
+    --muted-foreground: 250 16% 47%;
+
+    /* hsl(169 90% 61%) */
+    --accent: 169 90% 61%;
+
+    /* hsl(274 47% 11%) */
+    --accent-foreground: 274 47% 11%;
+
+    /* hsl(0 84% 60%) */
+    --destructive: 0 84% 60%;
+
+    /* hsl(270 40% 98%) */
+    --destructive-foreground: 270 40% 98%;
+
+    /* hsl(270 32% 91%) */
+    --border: 270 32% 91%;
+
+    /* hsl(270 32% 91%) */
+    --input: 270 32% 91%;
+
+    /* hsl(274 84% 5%) */
+    --ring: 274 84% 5%;
     --radius: 0.5rem;
+    --page-x-spacing: 3rem;
+    --page-x-spacing2: 2rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    /* hsl(274 84% 5%) */
+    --background: 274 84% 5%;
+
+    /* hsl(270 40% 98%) */
+    --foreground: 270 40% 98%;
+
+    /* hsl(274 84% 10%) */
+    --card: 274 84% 10%;
+
+    /* hsl(270 40% 98%) */
+    --card-foreground: 270 40% 98%;
+
+    /* hsl(274 84% 10%) */
+    --popover: 274 84% 10%;
+
+    /* hsl(270 40% 98%) */
+    --popover-foreground: 270 40% 98%;
+
+    /* hsl(274 70% 61%) */
+    --primary: 274 70% 61%;
+
+    /* hsl(274 47% 11%) */
+    --primary-foreground: 274 47% 11%;
+
+    /* hsl(238 72% 58%) */
+    --secondary: 238 72% 58%;
+
+    /* hsl(270 40% 98%) */
+    --secondary-foreground: 270 40% 98%;
+
+    /* hsl(260 33% 18%) */
+    --muted: 260 33% 18%;
+
+    /* hsl(250 20% 65%) */
+    --muted-foreground: 250 20% 65%;
+
+    /* hsl(169 70% 41%) */
+    --accent: 169 70% 41%;
+
+    /* hsl(270 40% 98%) */
+    --accent-foreground: 270 40% 98%;
+
+    /* hsl(0 63% 33%) */
+    --destructive: 0 63% 33%;
+
+    /* hsl(270 40% 98%) */
+    --destructive-foreground: 270 40% 98%;
+
+    /* hsl(260 33% 18%) */
+    --border: 260 33% 18%;
+
+    /* hsl(260 33% 18%) */
+    --input: 260 33% 18%;
+
+    /* hsl(213 27% 84%) */
+    --ring: 270 27% 84%;
   }
 }
 
@@ -54,7 +130,115 @@
     @apply border-border;
   }
 
+  h1 {
+    @apply text-5xl;
+  }
+
+  h2 {
+    @apply text-4xl;
+  }
+
+  h3 {
+    @apply text-3xl;
+  }
+
+  h4 {
+    @apply text-2xl;
+  }
+
+  h5,
+  h6 {
+    @apply text-xl;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-bold
+      text-foreground;
+  }
+
+  p {
+    @apply text-foreground;
+  }
+
   body {
     @apply bg-background text-foreground;
   }
+
+  @media (width >= 64rem) {
+    :root {
+      --page-x-spacing: 8rem;
+      --page-x-spacing2: 7rem;
+    }
+  }
+}
+
+@layer utilities {
+  .pxPage {
+    @apply px-6 m:px-[--page-x-spacing];
+  }
+
+  .pxPageTwo {
+    @apply px-6 m:px-[--page-x-spacing2];
+  }
+
+  .checkBox + span {
+    animation: check-bounce 250ms;
+
+    @apply border-[1rem] border-primary;
+  }
+
+  .checkBox + span::before {
+    @apply absolute left-2 top-2 content-[""];
+
+    animation: checked 125ms 250ms forwards;
+    border-bottom: 4px solid transparent;
+    border-right: 4px solid transparent;
+    transform: rotate(45deg);
+    transform-origin: 0% 100%;
+  }
+
+  @keyframes checked {
+    0% {
+      height: 0;
+      transform: translate(0, 0) rotate(45deg);
+      width: 0;
+
+      @apply border-white;
+    }
+
+    33% {
+      height: 0;
+      transform: translate(0, 0) rotate(45deg);
+      width: 8px;
+
+      @apply border-white;
+    }
+
+    100% {
+      height: 16px;
+      transform: translate(0, -8px) rotate(45deg);
+      width: 8px;
+
+      @apply border-white;
+    }
+  }
+
+  @keyframes check-bounce {
+    0% {
+      transform: scale(1);
+    }
+
+    33% {
+      transform: scale(0.7);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
 }
diff --git a/components/footer/index.tsx b/components/footer/index.tsx
@@ -9,7 +9,7 @@ export default function Footer() {
           <span className="mb-6 block text-2xl font-extrabold">
             {env.NEXT_PUBLIC_SITE_NAME}
           </span>
-          <div className="m:flex-row flex w-full flex-col items-start justify-between gap-6">
+          <div className="flex w-full flex-col items-start justify-between gap-6 m:flex-row">
             <div className="!w-[10rem] flex-shrink-0 text-sm text-black">
               @ {year}{" "}
               <a href="/" className="ml-1 hover:underline">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -18,6 +18,9 @@ const config = {
       },
     },
     extend: {
+      screens: {
+        m: "420px",
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",