Add Navbar, refactor layour, further tailwind config

VinceKaj · May 29, 2024 · b4eca41 · b4eca41
1 parent c596e45
commit b4eca41
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 28 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -18,18 +18,12 @@
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
 }
+
+body {
+  @apply text-textPrimary;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,23 +1,31 @@
-import type { Metadata } from 'next'
+import type { Metadata, Viewport } from 'next'
 import './globals.css'
+import Navbar from '@/components/Navbar'
 
 export const metadata: Metadata = {
   title: 'CompSoc',
   description:
     "CompSoc is Edinburgh University's technology society! We're Scotland's best and largest of its kind, and form one of the largest societies within the university.",
   icons: {
-    icon: '/compsoc-icon.png',
+    icon: '/compsoc-mini.png',
   },
 }
 
+export const viewport: Viewport = {
+  themeColor: '#222222', // TODO: Should be fed from tailwind.config.ts
+}
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className="bg-background relative">
+        <Navbar />
+        <div className="container mx-auto max-w-screen-xl p-4">{children}</div>
+      </body>
     </html>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,14 +1,19 @@
+import { prefix } from '@/utils/prefix'
 import Image from 'next/image'
-import { prefix } from './utils/prefix'
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+    <main className="bg-background flex min-h-screen flex-col items-center justify-between p-24">
       <Image
-        src={`${prefix}/logo.png`}
-        alt="CompSoc logo"
-        width={252}
+        src={`${prefix}/compsoc-long.png`}
+        alt="Wide CompSoc logo"
+        width={512}
         height={126}
+        className="filter drop-shadow-white"
+        style={{
+          filter:
+            'drop-shadow(0px 0px 50px rgba(255, 255, 255, 0.1)) drop-shadow(0px 0px 197.8px rgba(255, 255, 255, 0.1))',
+        }}
       />
     </main>
   )

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -0,0 +1,30 @@
+import { prefix } from '@/utils/prefix'
+import Link from 'next/link'
+import Image from 'next/image'
+
+const NavBar = () => {
+  return (
+    <nav className="sticky top-0 z-50 container mx-auto max-w-screen-xl py-4">
+      <div className="container bg-foreground mx-auto flex justify-between items-center p-4 border-border border-2 rounded-sm">
+        <div className="text-white font-bold">
+          <Link href="/">
+            <Image
+              src={`${prefix}/compsoc-short.png`}
+              alt="Wide CompSoc logo"
+              width={64}
+              height={64}
+              priority
+            />
+          </Link>
+        </div>
+        <div className="flex space-x-8 px-4">
+          <Link href="/team">Team</Link>
+          <Link href="/events">Events</Link>
+          <Link href="/about">About</Link>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default NavBar
diff --git a/public/logo.png → public/compsoc-long.png b/public/logo.png → public/compsoc-long.png
diff --git a/public/compsoc-icon.png → public/compsoc-mini.png b/public/compsoc-icon.png → public/compsoc-mini.png
diff --git a/public/compsoc-short.png b/public/compsoc-short.png
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,27 +1,33 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss'
 
 const config: Config = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
       colors: {
         csred: '#CE3234',
         csgrey: '#222222',
+        background: '#222222',
+        foreground: '#353535',
+        border: '#484848',
+        textPrimary: '#FFFFFF',
+        textSecondary: '#A0A0A0',
       },
       fontFamily: {
         'space-mono': ['"Space Mono"', 'monospace'],
       },
     },
   },
   plugins: [],
-};
-export default config;
+}
+
+export default config
diff --git a/tsconfig.json b/tsconfig.json
@@ -17,8 +17,11 @@
         "name": "next"
       }
     ],
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@components/*": ["components/*"],
+      "@utils/*": ["utils/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

diff --git a/app/utils/prefix.ts → utils/prefix.ts b/app/utils/prefix.ts → utils/prefix.ts