soconnor/pdf2md
1
0
Fork 0
mirror of https://github.com/soconnor0919/pdf2md.git synced 2026-02-04 15:56:36 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: update font to Playfair_Display, refine UI styling for navbar and upload form, and introduce new CSS hover effects.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-10 03:30:25 -05:00
parent 95d6bfa084
commit 53880bc8d5
5 changed files with 46 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/layout.tsx
View File

@@ -1,6 +1,6 @@
import "~/styles/globals.css"; import "~/styles/globals.css";
import { Inter, Outfit } from "next/font/google"; // Changed from Geist import { Inter, Playfair_Display } from "next/font/google";
import { type Metadata } from "next"; import { type Metadata } from "next";
const inter = Inter({ const inter = Inter({
@@ -8,7 +8,7 @@ const inter = Inter({
variable: "--font-sans", variable: "--font-sans",
}); });
const outfit = Outfit({ const playfair = Playfair_Display({
subsets: ["latin"], subsets: ["latin"],
variable: "--font-heading", variable: "--font-heading",
}); });
@@ -23,7 +23,7 @@ export default function RootLayout({
children, children,
}: Readonly<{ children: React.ReactNode }>) { }: Readonly<{ children: React.ReactNode }>) {
return ( return (
<html lang="en" className={`${inter.variable} ${outfit.variable} `} suppressHydrationWarning> <html lang="en" className={`${inter.variable} ${playfair.variable} `} suppressHydrationWarning>
<head> <head>
</head> </head>

2
src/app/page.tsx
View File

@@ -18,7 +18,7 @@ export default function HomePage() {
<div className="container mx-auto px-4 pt-32 pb-8"> <div className="container mx-auto px-4 pt-32 pb-8">
<div className="flex flex-col items-center justify-center gap-4"> <div className="flex flex-col items-center justify-center gap-4">
<div className="text-center space-y-4 max-w-5xl"> <div className="text-center space-y-4 max-w-5xl">
<h1 className="text-5xl font-extrabold tracking-tight lg:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-800 to-neutral-500 dark:from-neutral-100 dark:to-neutral-400"> <h1 className="font-heading text-5xl font-extrabold tracking-tight lg:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-800 to-neutral-500 dark:from-neutral-100 dark:to-neutral-400">
PDF to Markdown PDF to Markdown
</h1> </h1>
<p className="text-xl text-muted-foreground leading-relaxed"> <p className="text-xl text-muted-foreground leading-relaxed">

4
src/components/navbar.tsx
View File

@@ -5,10 +5,10 @@ import { Button } from "./ui/button";
export function Navbar() { export function Navbar() {
return ( return (
<div className="fixed top-4 left-0 right-0 z-50 flex justify-center px-4"> <div className="fixed top-4 left-0 right-0 z-50 flex justify-center px-4">
<nav className="flex items-center justify-between w-full max-w-4xl px-4 py-2 bg-background/80 backdrop-blur-md border border-border/50 rounded-full shadow-lg"> <nav className="flex items-center justify-between w-full max-w-4xl px-4 py-2 m-4 bg-background/80 backdrop-blur-md border border-border/60 rounded-2xl shadow-lg">
<Link href="/" className="flex items-center gap-2 px-2 hover:opacity-80 transition-opacity"> <Link href="/" className="flex items-center gap-2 px-2 hover:opacity-80 transition-opacity">
<FileText className="w-5 h-5 text-primary" /> <FileText className="w-5 h-5 text-primary" />
<span className="font-semibold tracking-tight">PDF2MD</span> <span className="font-heading font-semibold tracking-tight">PDF2MD</span>
</Link> </Link>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="ghost" size="icon" asChild className="rounded-full"> <Button variant="ghost" size="icon" asChild className="rounded-full">

12
src/components/upload-form.tsx
View File

@@ -80,8 +80,8 @@ export function UploadForm() {
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="upload"> <TabsContent value="upload" className="mt-0">
<Card className="bg-background/60 backdrop-blur-xl border-border/50 shadow-sm rounded-3xl"> <Card className="border-dashed border-2 bg-background/60 backdrop-blur-xl border-border/50 shadow-sm rounded-3xl card-hover">
<CardHeader> <CardHeader>
<CardTitle>Upload PDF</CardTitle> <CardTitle>Upload PDF</CardTitle>
<CardDescription>Select a PDF file to convert to Markdown</CardDescription> <CardDescription>Select a PDF file to convert to Markdown</CardDescription>
@@ -107,7 +107,7 @@ export function UploadForm() {
</div> </div>
<span className="font-medium truncate max-w-[200px] sm:max-w-md">{fileName}</span> <span className="font-medium truncate max-w-[200px] sm:max-w-md">{fileName}</span>
</div> </div>
<Button type="button" variant="ghost" size="icon" onClick={clearFile} aria-label="Remove file" className="rounded-full"> <Button type="button" variant="ghost" size="icon" onClick={clearFile} aria-label="Remove file" className="rounded-full button-hover">
<X className="w-4 h-4" /> <X className="w-4 h-4" />
</Button> </Button>
</div> </div>
@@ -128,7 +128,7 @@ export function UploadForm() {
type="submit" type="submit"
variant="outline" variant="outline"
disabled={isLoading || !fileName} disabled={isLoading || !fileName}
className="w-full sm:w-auto rounded-xl border-2 hover:bg-muted/50" className="w-full sm:w-auto rounded-xl border-2 hover:bg-muted/50 button-hover"
> >
{isLoading ? ( {isLoading ? (
<> <>
@@ -162,7 +162,7 @@ export function UploadForm() {
void navigator.clipboard.writeText(markdown); void navigator.clipboard.writeText(markdown);
setIsCopied(true); setIsCopied(true);
setTimeout(() => setIsCopied(false), 2000); setTimeout(() => setIsCopied(false), 2000);
}} className="min-w-[40px] rounded-xl"> }} className="min-w-[40px] rounded-xl button-hover">
{isCopied ? <Check className="w-4 h-4" /> : <Clipboard className="w-4 h-4" />} {isCopied ? <Check className="w-4 h-4" /> : <Clipboard className="w-4 h-4" />}
{!isCopied && <span className="ml-2">Copy</span>} {!isCopied && <span className="ml-2">Copy</span>}
</Button> </Button>
@@ -184,7 +184,7 @@ export function UploadForm() {
const input = document.getElementById('file') as HTMLInputElement; const input = document.getElementById('file') as HTMLInputElement;
if (input) input.value = ''; if (input) input.value = '';
}} }}
className="w-full rounded-xl border-2 hover:bg-muted/50" className="w-full rounded-xl border-2 hover:bg-muted/50 button-hover"
> >
<RotateCcw className="mr-2 h-4 w-4" /> <RotateCcw className="mr-2 h-4 w-4" />
Convert another file Convert another file

37
src/styles/globals.css
View File

@@ -4,29 +4,38 @@
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
/* #FFFFFF */
--foreground: 240 10% 3.9%; --foreground: 240 10% 3.9%;
/* #09090B */
--card: 0 0% 100%; --card: 0 0% 100%;
/* #FFFFFF */
--card-foreground: 240 10% 3.9%; --card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%; --popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%; --primary: 240 5.9% 10%;
/* #18181B */
--primary-foreground: 0 0% 98%; --primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%; /* #FAFAFA */
--secondary: 240 4.8% 90%;
/* #E4E4E7 (Darkened for contrast) */
--secondary-foreground: 240 5.9% 10%; --secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%; --muted: 240 4.8% 95.9%;
/* #F4F4F5 */
--muted-foreground: 240 3.8% 46.1%; --muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%; --accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%; --accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%; --border: 240 5.9% 90%;
/* #E4E4E7 */
--input: 240 5.9% 90%; --input: 240 5.9% 90%;
--ring: 240 10% 3.9%; --ring: 240 10% 3.9%;
--radius: 1rem;
/* 16px Global Radius */
--chart-1: 12 76% 61%; --chart-1: 12 76% 61%;
--chart-2: 173 58% 39%; --chart-2: 173 58% 39%;
--chart-3: 197 37% 24%; --chart-3: 197 37% 24%;
--chart-5: 27 87% 67%; --chart-5: 27 87% 67%;
--radius: 1rem;
--sidebar: 0 0% 98%; --sidebar: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%; --sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%; --sidebar-primary: 240 5.9% 10%;
@@ -40,14 +49,17 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background: 240 10% 3.9%; --background: 240 10% 3.9%;
/* #09090B */
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
/* #FAFAFA */
--card: 240 10% 3.9%; --card: 240 10% 3.9%;
--card-foreground: 0 0% 98%; --card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%; --popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%; --popover-foreground: 0 0% 98%;
--primary: 0 0% 98%; --primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%; --primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%; --secondary: 240 3.7% 20%;
/* #27272A */
--secondary-foreground: 0 0% 98%; --secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%; --muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%; --muted-foreground: 240 5% 64.9%;
@@ -56,6 +68,7 @@
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%; --destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%; --border: 240 3.7% 15.9%;
/* #27272A */
--input: 240 3.7% 15.9%; --input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%; --ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%; --chart-1: 220 70% 50%;
@@ -137,6 +150,24 @@
.animation-delay-4000 { .animation-delay-4000 {
animation-delay: 4s; animation-delay: 4s;
} }
.card-hover {
transition: all 0.3s ease-out;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -10px hsl(var(--foreground) / 0.1);
}
.button-hover {
transition: all 0.2s ease-out;
}
.button-hover:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px -4px hsl(var(--foreground) / 0.1);
}
} }
@keyframes blob { @keyframes blob {