mirror of
https://github.com/kyantech/Palmr.git
synced 2025-10-23 06:11:58 +00:00
feat: update global styles and layout for improved typography and card interaction
- Replaced Geist font with Outfit for both sans-serif and mono styles in globals.css and layout.tsx. - Enhanced card hover effect in quick-access-cards.tsx to improve user interaction feedback. - Adjusted card component structure in card.tsx for better styling and layout consistency.
This commit is contained in:
@@ -37,7 +37,7 @@ export function QuickAccessCards() {
|
||||
{QUICK_ACCESS_ITEMS.map((card) => (
|
||||
<Card
|
||||
key={card.title}
|
||||
className="cursor-pointer transform transition-all hover:scale-102"
|
||||
className="cursor-pointer transform transition-all hover:bg-card/80"
|
||||
onClick={() => router.push(card.path)}
|
||||
>
|
||||
<CardContent>
|
||||
|
@@ -6,8 +6,8 @@
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-sans: Outfit, sans-serif;
|
||||
--font-mono: monospace;
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
@@ -41,6 +41,9 @@
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--font-sans: Outfit, sans-serif;
|
||||
--font-mono: monospace;
|
||||
--font-serif: Outfit, sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -76,6 +79,9 @@
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.5927 0.1767 142.49);
|
||||
--font-sans: Outfit, sans-serif;
|
||||
--font-mono: monospace;
|
||||
--font-serif: Outfit, sans-serif;
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
@@ -1,4 +1,4 @@
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Outfit } from "next/font/google";
|
||||
import { NextIntlClientProvider } from "next-intl";
|
||||
import { getLocale } from "next-intl/server";
|
||||
|
||||
@@ -12,14 +12,11 @@ import { AuthProvider } from "@/contexts/auth-context";
|
||||
import { ShareProvider } from "@/contexts/share-context";
|
||||
import { ThemeProvider } from "../providers/theme-provider";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const outfit = Outfit({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-outfit",
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export default async function RootLayout({
|
||||
@@ -39,7 +36,7 @@ export default async function RootLayout({
|
||||
<head>
|
||||
<Favicon />
|
||||
</head>
|
||||
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
||||
<body className={`${outfit.variable} antialiased`}>
|
||||
<NextIntlClientProvider>
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
|
||||
<AuthProvider>
|
||||
|
@@ -4,14 +4,16 @@ import { cn } from "@/lib/utils";
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div className="border p-1.5 rounded-xl text-card-foreground shadow-lg dark:shadow-sm">
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border dark:border-none shadow-lg py-6 dark:shadow-sm",
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border dark:border-none py-6 ",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user