Update font and color styles

IhsenBouallegue · Jan 23, 2024 · 8dfe52e · 8dfe52e
1 parent 015e4a7
commit 8dfe52e
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 52 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -4,47 +4,55 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 249 46% 8%;
-    --card: 0 0% 100%;
-    --card-foreground: 249 46% 8%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 249 46% 8%;
-    --primary: 250 100% 15%;
-    --primary-foreground: 0 0% 100%;
+    --background: 248 100% 97%;
+    --foreground: 249 37% 7%;
+    --card: 248 100% 97%;
+    --card-foreground: 249 37% 7%;
+    --popover: 248 100% 97%;
+    --popover-foreground: 249 37% 7%;
+    --primary: 216 76% 82%;
+    --primary-foreground: 249 37% 7%;
     --secondary: 311 46% 86%;
-    --secondary-foreground: 249 46% 8%;
-    --muted: 0 0% 20%;
-    --muted-foreground: 249 46% 70%;
-    --accent: 310 46% 46%;
-    --accent-foreground: 0 0% 100%;
+    --secondary-foreground: 249 37% 7%;
+    --muted: 248 100% 20%;
+    --muted-foreground: 249 37% 70%;
+    --accent: 219 48% 65%;
+    --accent-foreground: 249 37% 7%;
     --destructive: 0 85% 60%;
-    --destructive-foreground: 249 46% 8%;
-    --border: 0 0% 20%;
-    --input: 0 0% 20%;
-    --ring: 310 46% 40%;
+    --destructive-foreground: 249 37% 7%;
+    --border: 248 100% 20%;
+    --input: 248 100% 20%;
+    --ring: 219 48% 40%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 246 100% 3%;
-    --foreground: 249 46% 92%;
-    --card: 0 0% 0%;
-    --card-foreground: 249 46% 92%;
-    --popover: 0 0% 0%;
-    --popover-foreground: 249 46% 92%;
-    --primary: 249 100% 85%;
-    --primary-foreground: 0 0% 0%;
+    --background: 248 100% 3%;
+    --foreground: 249 37% 93%;
+    --card: 248 100% 3%;
+    --card-foreground: 249 37% 93%;
+    --popover: 248 100% 3%;
+    --popover-foreground: 249 37% 93%;
+    --primary: 216 76% 18%;
+    --primary-foreground: 249 37% 93%;
     --secondary: 311 46% 14%;
-    --secondary-foreground: 249 46% 92%;
-    --muted: 0 0% 80%;
-    --muted-foreground: 249 46% 92%;
-    --accent: 310 46% 54%;
-    --accent-foreground: 0 0% 0%;
+    --secondary-foreground: 249 37% 93%;
+    --muted: 248 100% 80%;
+    --muted-foreground: 249 37% 93%;
+    --accent: 219 48% 35%;
+    --accent-foreground: 249 37% 93%;
     --destructive: 0 62% 30%;
-    --destructive-foreground: 248 45% 10%;
-    --border: 0 0% 60%;
-    --input: 0 0% 80%;
-    --ring: 310 46% 60%;
+    --destructive-foreground: 249 37% 10%;
+    --border: 248 100% 60%;
+    --input: 248 100% 80%;
+    --ring: 219 48% 60%;
   }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-orbitron), sans-serif; 
+}
+
+body {
+  font-family: var(--font-plus-jakarta-sans), sans-serif; 
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import Header from "@/components/header";
 import { ThemeProvider } from "@/components/theme-provider";
 import { cn } from "@/lib/utils";
 import type { Metadata } from "next";
-import { Plus_Jakarta_Sans } from "next/font/google";
+import { Orbitron, Plus_Jakarta_Sans } from "next/font/google";
 import dynamic from "next/dynamic";
 import "./globals.css";
 
@@ -14,8 +14,8 @@ const StarrySkyCanvas = dynamic(
   },
 );
 
-const plusJakartaSans = Plus_Jakarta_Sans({ subsets: ["latin"] });
-// const orbitron = Orbitron({ subsets: ["latin"] });
+const plusJakartaSans = Plus_Jakarta_Sans({ subsets: ["latin"], variable:"--font-plus-jakarta-sans" });
+const orbitron = Orbitron({ subsets: ["latin"], variable:"--font-orbitron" });
 
 export const metadata: Metadata = {
   title: "TUDSaT",
@@ -30,7 +30,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <ThemeProvider attribute="class" defaultTheme="dark">
-        <body className={cn(plusJakartaSans.className, "bg-background")}>
+        <body className={cn( orbitron.variable, plusJakartaSans.variable, "bg-background")}>
           <StarrySkyCanvas />
           <Header />
           {children}

diff --git a/src/components/call-to-action.tsx b/src/components/call-to-action.tsx
@@ -6,7 +6,7 @@ import { buttonVariants } from "./ui/button";
 export default function Example() {
   return (
     <section className="sm:px-6 lg:px-8">
-      <div className="relative isolate backdrop-blur-sm backdrop-saturate-200 shadow-xl shadow-primary/10 ring-2 ring-secondary/90 overflow-hidden px-6 pt-16 flex flex-col rounded-3xl sm:px-64 md:pt-64 lg:gap-x-60 lg:px-24 lg:pt-0 lg:flex-row">
+      <div className="relative isolate backdrop-blur-sm backdrop-saturate-200 shadow-xl shadow-primary/10 ring-2 ring-accent/90 overflow-hidden px-6 pt-16 flex flex-col rounded-3xl sm:px-64 md:pt-64 lg:gap-x-60 lg:px-24 lg:pt-0 lg:flex-row">
         <svg
           viewBox="0 0 1024 1024"
           className="bg-gradient-to-r from-accent to-transparent absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 
 export default function Footer() {
   return (
-    <div className="bg-secondary mt-16 text-secondary-foreground p-4 flex items-center justify-between">
+    <div className="bg-primary mt-16 text-secondary-foreground p-4 flex items-center justify-between">
       <Image src="tudsat_logo.svg" alt="logo" width={52} height={52} />
       <div className="flex">
         <Link

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -13,11 +13,11 @@ export default function Header() {
           <Link
             href="/membership"
             className={cn(
-              buttonVariants({ variant: "secondary", size: "sm" }),
+              buttonVariants({ variant: "outline", size: "sm" }),
               "px-4",
             )}
           >
-            Join Now
+            Membership
           </Link>
         </nav>
       </div>

diff --git a/src/components/hero.tsx b/src/components/hero.tsx
@@ -9,15 +9,15 @@ export default function Hero() {
         aria-hidden="true"
       >
         <div
-          className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary/80 to-secondary opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+          className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#BA45A7]/80 to-[#BA45A7]/40 opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
           style={{
             clipPath:
               "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
           }}
         />
       </div>
 
-      <div className="absolute left-[10%] top-[30%] saturate-0 hover:saturate-100 transition-all duration-1000">
+      <div className="absolute left-[10%] top-[30%] transition-all duration-1000">
         <Image
           className="animate-float"
           src="/frodo.png"
@@ -27,7 +27,7 @@ export default function Hero() {
         />
       </div>
 
-      <div className="absolute right-[10%] top-[50%] saturate-0 hover:saturate-100 transition-all duration-1000">
+      <div className="absolute right-[10%] top-[50%] transition-all duration-1000">
         <Image
           className="animate-float"
           src="/trace.png"
@@ -59,7 +59,7 @@ export default function Hero() {
         aria-hidden="true"
       >
         <div
-          className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-accent to-accent/10 opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+          className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-accent to-accent/10 opacity-40 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
           style={{
             clipPath:
               "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",

diff --git a/src/components/projects.tsx b/src/components/projects.tsx
@@ -11,15 +11,15 @@ export default function Projects() {
           description="CubeSat Development for Space Safety Research."
           image="/trace-bg.png"
           link="/trace"
-          color="bg-[#327227]/30"
+          color="bg-[#327227]"
         />
         <ProjectCard
           title="RAPID"
           subTitle="Rocketry and Propulsion in Darmstadt"
           description="Pushing the boundaries of rocketry. Together we want to reimage rockets and explore new possibilites."
           image="/frodo-bg.png"
           link="/rapid"
-          color="bg-[#930D16]/70"
+          color="bg-[#930D16]"
         />
       </div>
     </section>

diff --git a/src/components/testimonials.tsx b/src/components/testimonials.tsx
@@ -48,8 +48,8 @@ export default function Testimonials() {
 
   return (
     <section className="relative isolatepx-6 py-24 sm:py-32 lg:px-8">
-      <div className="backdrop-blur-sm backdrop-saturate-200 absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] rounded-xl shadow-xl shadow-primary/10 ring-2 ring-secondary/90 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center" />
-      <div className="absolute bg-gradient-to-l from-accent to-transparent to-60% inset-0 -z-10 opacity-20" />
+      <div className="backdrop-blur-sm backdrop-saturate-200 absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] rounded-xl shadow-xl shadow-primary/10 ring-2 ring-accent/90 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center" />
+      <div className="absolute bg-gradient-to-l from-primary to-transparent to-60% inset-0 -z-10 opacity-60" />
       <Carousel
         setApi={setApi}
         plugins={[

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -13,11 +13,11 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input border-accent border-2 bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary-foreground underline-offset-4 hover:underline",
       },
       size: {
         default: "h-10 px-4 py-2",

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,6 +8,10 @@ module.exports = {
     './src/**/*.{ts,tsx}',
   ],
   theme: {
+    fontFamily: {
+      'display': ['Orbitron'],
+      'body': ['"Jakarta Plus Sans"'],
+    },
     container: {
       center: true,
       padding: "2rem",