diff --git a/thoughts-frontend/app/frutiger-bold.woff b/thoughts-frontend/app/frutiger-bold.woff new file mode 100644 index 0000000..fcf723c Binary files /dev/null and b/thoughts-frontend/app/frutiger-bold.woff differ diff --git a/thoughts-frontend/app/frutiger.woff b/thoughts-frontend/app/frutiger.woff new file mode 100644 index 0000000..bbc17d6 Binary files /dev/null and b/thoughts-frontend/app/frutiger.woff differ diff --git a/thoughts-frontend/app/globals.css b/thoughts-frontend/app/globals.css index 8fa309e..2234b7d 100644 --- a/thoughts-frontend/app/globals.css +++ b/thoughts-frontend/app/globals.css @@ -42,6 +42,9 @@ --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); + --background-start: var(--color-sky-blue); + --background-end: var(--color-lime-300); + /* Frutiger Aero Gradients */ --gradient-fa-blue: 135deg, hsl(217 91% 60%) 0%, hsl(200 90% 70%) 100%; --gradient-fa-green: 135deg, hsl(155 70% 55%) 0%, hsl(170 80% 65%) 100%; @@ -59,6 +62,8 @@ --text-shadow-sm: 0 1px 0px rgba(255, 255, 255, 0.4); --text-shadow-md: 0 2px 2px rgba(0, 0, 0, 0.2); --text-shadow-lg: 0 4px 4px rgba(0, 0, 0, 0.2); + + --font-display: var(--font-frutiger), "Arial", "Helvetica", "sans-serif"; } :root { @@ -178,12 +183,11 @@ body { @apply bg-background text-foreground; - background: linear-gradient( - 135deg, - hsl(var(--background)) 0%, - hsl(var(--background)) 70%, - hsl(var(--primary) / 0.1) 100% - ); + background-image: url("/background.jpeg"); + background-size: cover; + background-position: center; + background-attachment: fixed; + background-repeat: no-repeat; } .glossy-effect::before { @@ -263,3 +267,48 @@ z-index: 1; } } + +@layer components { + .shadow-fa-sm { + box-shadow: var(--shadow-fa-sm), var(--fa-inner); + } + .shadow-fa-md { + box-shadow: var(--shadow-fa-md), var(--fa-inner); + } + .shadow-fa-lg { + box-shadow: var(--shadow-fa-lg), var(--fa-inner); + } + .text-shadow-default { + text-shadow: var(--text-shadow-default); + } + .text-shadow-sm { + text-shadow: var(--text-shadow-sm); + } + .text-shadow-md { + text-shadow: var(--text-shadow-md); + } + .text-shadow-lg { + text-shadow: var(--text-shadow-lg); + } + + .glass-effect { + @apply bg-card/70 backdrop-blur-lg border border-white/20 shadow-fa-lg; + } + + .gloss-highlight::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 60%; + border-radius: inherit; /* This is key for matching the parent's border radius */ + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.5) 0%, + rgba(255, 255, 255, 0) 100% + ); + pointer-events: none; + z-index: 1; + } +} diff --git a/thoughts-frontend/app/layout.tsx b/thoughts-frontend/app/layout.tsx index 8e9b0ed..cf75af0 100644 --- a/thoughts-frontend/app/layout.tsx +++ b/thoughts-frontend/app/layout.tsx @@ -4,22 +4,29 @@ import "./globals.css"; import { AuthProvider } from "@/hooks/use-auth"; import { Toaster } from "@/components/ui/sonner"; import { Header } from "@/components/header"; - -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); +import localFont from "next/font/local"; export const metadata: Metadata = { title: "Thoughts", description: "A social network for sharing thoughts", }; +const frutiger = localFont({ + src: [ + { + path: "./frutiger.woff", + weight: "normal", + style: "normal", + }, + { + path: "./frutiger-bold.woff", + weight: "bold", + style: "normal", + }, + ], + variable: "--font-frutiger", +}); + export default function RootLayout({ children, }: Readonly<{ @@ -27,9 +34,7 @@ export default function RootLayout({ }>) { return ( - +
{children}
diff --git a/thoughts-frontend/app/page.tsx b/thoughts-frontend/app/page.tsx index 219a1fd..a00fce5 100644 --- a/thoughts-frontend/app/page.tsx +++ b/thoughts-frontend/app/page.tsx @@ -51,7 +51,7 @@ async function FeedPage({ token }: { token: string }) {
-

Your Feed

+

Your Feed

diff --git a/thoughts-frontend/app/users/[username]/page.tsx b/thoughts-frontend/app/users/[username]/page.tsx index 4c51630..8104541 100644 --- a/thoughts-frontend/app/users/[username]/page.tsx +++ b/thoughts-frontend/app/users/[username]/page.tsx @@ -76,26 +76,36 @@ export default async function ProfilePage({ params }: ProfilePageProps) { authorDetails.set(user.username, { avatarUrl: user.avatarUrl }); return ( -
+
{user.customCss && (