From 1f9f7dd7ebe25b2b0d400b372c8dd38ed9e91258 Mon Sep 17 00:00:00 2001 From: v0 Date: Sun, 24 May 2026 06:09:16 +0000 Subject: [PATCH 1/2] feat: overhaul UI styling with Tailwind and custom properties Revamp typography, card/panel, button, header/nav, and accessibility styles Co-authored-by: LCSOGthb <185141600+LCSOGthb@users.noreply.github.com> --- app/globals.css | 241 ++++++++++++++++++++++++++++++++-------- app/layout.tsx | 26 +++-- app/page.tsx | 101 +++++++++-------- components/GameCard.tsx | 50 +++++---- 4 files changed, 296 insertions(+), 122 deletions(-) diff --git a/app/globals.css b/app/globals.css index 089abbf..18dadc3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,19 +1,19 @@ -@import "tailwindcss"; - -@theme inline { - --color-background: #0a0a14; - --color-surface: #12121f; - --color-surface-light: #1e1e30; - --color-foreground: #ffffff; - --color-foreground-muted: #a0a0b8; - --color-primary: #3b82f6; - --color-primary-hover: #2563eb; - --color-accent: #8b5cf6; - --color-border: #2a2a40; - --color-border-hover: #3b3b55; - --radius-sm: 0.375rem; - --radius-md: 0.5rem; - --radius-lg: 0.75rem; +@import 'tailwindcss'; + +:root { + --bg-base: #09090b; + --bg-surface: #18181b; + --bg-elevated: #27272a; + --text-primary: #fafafa; + --text-secondary: #a1a1aa; + --text-muted: #71717a; + --border-default: #3f3f46; + --border-subtle: #27272a; + --accent-blue: #3b82f6; + --accent-blue-hover: #2563eb; + --accent-blue-active: #1d4ed8; + --accent-violet: #8b5cf6; + --focus-ring: #60a5fa; } * { @@ -23,60 +23,207 @@ } html { - background-color: var(--color-background); + background-color: var(--bg-base); color-scheme: dark; + scroll-behavior: smooth; } body { - color: var(--color-foreground); - background-color: var(--color-background); - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - Roboto, - sans-serif; + color: var(--text-primary); + background-color: var(--bg-base); + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -/* Typography */ -h1, -h2, -h3, -h4, -h5, -h6 { - color: var(--color-foreground); +/* ======================================== + TYPOGRAPHY HIERARCHY + ======================================== */ + +h1 { + font-size: 2rem; font-weight: 700; + letter-spacing: -0.025em; line-height: 1.2; + color: var(--text-primary); } -h1 { - font-size: 2.5rem; - font-weight: 800; - letter-spacing: -0.025em; +@media (min-width: 640px) { + h1 { + font-size: 2.5rem; + } } h2 { font-size: 1.25rem; font-weight: 600; + letter-spacing: -0.01em; + line-height: 1.3; + color: var(--text-primary); +} + +h3 { + font-size: 1.125rem; + font-weight: 600; + line-height: 1.4; + color: var(--text-primary); } p { - color: var(--color-foreground-muted); - line-height: 1.6; + color: var(--text-secondary); + line-height: 1.65; } -/* Transitions */ -button, -a { - transition: all 0.2s ease-in-out; +/* ======================================== + FOCUS & ACCESSIBILITY + ======================================== */ + +:focus-visible { + outline: 2px solid var(--focus-ring); + outline-offset: 2px; } -/* Focus styles for accessibility */ button:focus-visible, -a:focus-visible { - outline: 2px solid var(--color-primary); +a:focus-visible, +input:focus-visible, +select:focus-visible, +textarea:focus-visible { + outline: 2px solid var(--focus-ring); + outline-offset: 2px; +} + +/* ======================================== + INTERACTIVE ELEMENTS + ======================================== */ + +button, a, input, select, textarea { + transition: all 0.15s ease-in-out; +} + +/* Primary Button Base */ +.btn-primary { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.625rem 1rem; + font-size: 0.875rem; + font-weight: 600; + color: white; + background-color: var(--accent-blue); + border: none; + border-radius: 0.5rem; + cursor: pointer; + transition: all 0.15s ease-in-out; +} + +.btn-primary:hover { + background-color: var(--accent-blue-hover); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); +} + +.btn-primary:active { + background-color: var(--accent-blue-active); + transform: translateY(0); + box-shadow: none; +} + +.btn-primary:focus-visible { + outline: 2px solid var(--focus-ring); outline-offset: 2px; } + +/* ======================================== + CARD / PANEL STYLING + ======================================== */ + +.card { + background-color: var(--bg-surface); + border: 1px solid var(--border-subtle); + border-radius: 0.75rem; + overflow: hidden; + transition: all 0.2s ease-in-out; +} + +.card:hover { + border-color: var(--border-default); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05); + transform: translateY(-2px); +} + +/* ======================================== + HEADER / NAVIGATION + ======================================== */ + +.site-header { + background-color: rgba(24, 24, 27, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--border-subtle); + position: sticky; + top: 0; + z-index: 50; +} + +/* ======================================== + BADGE / TAG STYLING + ======================================== */ + +.badge { + display: inline-flex; + align-items: center; + padding: 0.25rem 0.625rem; + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.01em; + border-radius: 0.375rem; + background-color: var(--accent-violet); + color: white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} + +/* ======================================== + SKIP LINK (Accessibility) + ======================================== */ + +.skip-link { + position: absolute; + top: -100%; + left: 1rem; + z-index: 100; + padding: 0.75rem 1rem; + font-weight: 600; + color: white; + background-color: var(--accent-blue); + border-radius: 0.5rem; + text-decoration: none; +} + +.skip-link:focus { + top: 1rem; +} + +/* ======================================== + UTILITY CLASSES + ======================================== */ + +.text-muted { + color: var(--text-secondary); +} + +.text-subtle { + color: var(--text-muted); +} + +.bg-base { + background-color: var(--bg-base); +} + +.bg-surface { + background-color: var(--bg-surface); +} + +.bg-elevated { + background-color: var(--bg-elevated); +} diff --git a/app/layout.tsx b/app/layout.tsx index b2dda05..0452c14 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,21 +1,25 @@ -import type { Metadata } from "next"; -import "./globals.css"; +import type { Metadata, Viewport } from 'next' +import './globals.css' export const metadata: Metadata = { - title: "Games", - description: "A collection of games", -}; + title: 'Game Collection', + description: 'Discover our selection of fun and challenging games to play', +} + +export const viewport: Viewport = { + themeColor: '#09090b', + width: 'device-width', + initialScale: 1, +} export default function RootLayout({ children, }: { - children: React.ReactNode; + children: React.ReactNode }) { return ( - - - {children} - + + {children} - ); + ) } diff --git a/app/page.tsx b/app/page.tsx index fadf4f5..3299612 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,82 +1,84 @@ -import GameCard from "@/components/GameCard"; +import GameCard from '@/components/GameCard' const games = [ { id: 1, - title: "Chess Master", - description: "Play chess against AI or friends online in real time.", - image: "/placeholder.svg?height=200&width=300", - category: "Strategy", + title: 'Chess Master', + description: 'Play chess against AI or friends online in real time.', + image: '/placeholder.svg?height=200&width=300', + category: 'Strategy', }, { id: 2, - title: "Quick Quiz", - description: "Test your knowledge with fun trivia questions.", - image: "/placeholder.svg?height=200&width=300", - category: "Trivia", + title: 'Quick Quiz', + description: 'Test your knowledge with fun trivia questions.', + image: '/placeholder.svg?height=200&width=300', + category: 'Trivia', }, { id: 3, - title: "Memory Match", - description: "Challenge your memory with this classic card-matching game.", - image: "/placeholder.svg?height=200&width=300", - category: "Puzzle", + title: 'Memory Match', + description: 'Challenge your memory with this classic card-matching game.', + image: '/placeholder.svg?height=200&width=300', + category: 'Puzzle', }, { id: 4, - title: "Snake Game", - description: "Eat food, grow longer, and avoid running into yourself.", - image: "/placeholder.svg?height=200&width=300", - category: "Arcade", + title: 'Snake Game', + description: 'Eat food, grow longer, and avoid running into yourself.', + image: '/placeholder.svg?height=200&width=300', + category: 'Arcade', }, { id: 5, - title: "Word Builder", - description: "Create as many words as you can from scrambled letters.", - image: "/placeholder.svg?height=200&width=300", - category: "Word", + title: 'Word Builder', + description: 'Create as many words as you can from scrambled letters.', + image: '/placeholder.svg?height=200&width=300', + category: 'Word', }, { id: 6, - title: "Puzzle Solver", - description: "Solve challenging jigsaw puzzles of increasing difficulty.", - image: "/placeholder.svg?height=200&width=300", - category: "Puzzle", + title: 'Puzzle Solver', + description: 'Solve challenging jigsaw puzzles of increasing difficulty.', + image: '/placeholder.svg?height=200&width=300', + category: 'Puzzle', }, -]; +] export default function Home() { return ( <> - + Skip to game list -
-
-

- Game Collection -

-

- Discover our selection of fun and challenging games +

+
+

Game Collection

+

+ Discover our selection of fun and challenging games to play

-
-
-
-

- Available Games -

+
+
+
+
+

+ All Games +

+ + {games.length} games available + +
+
    {games.map((game) => (
  • @@ -85,8 +87,17 @@ export default function Home() { ))}
+
+ +
+
+

+ Game Collection - Built with Next.js +

+
+
- ); + ) } diff --git a/components/GameCard.tsx b/components/GameCard.tsx index dcbd683..ddafdca 100644 --- a/components/GameCard.tsx +++ b/components/GameCard.tsx @@ -1,51 +1,63 @@ -"use client"; +'use client' interface GameCardProps { game: { - id: number; - title: string; - description: string; - image: string; - category: string; - }; + id: number + title: string + description: string + image: string + category: string + } } export default function GameCard({ game }: GameCardProps) { return (
- {/* Image */} -
+ {/* Image Container */} +
{`Preview - + {/* Category badge */}
{/* Content */} -
-

{game.title}

+
+

+ {game.title} +

Category: {game.category}

-

+

{game.description}

- ); + ) } From 723a9a1733f5884ef51d01581453352c86091ad6 Mon Sep 17 00:00:00 2001 From: "deepsource-autofix[bot]" <62050782+deepsource-autofix[bot]@users.noreply.github.com> Date: Sun, 24 May 2026 06:46:14 +0000 Subject: [PATCH 2/2] style: format code with Autopep8, Black, ClangFormat, dotnet-format, isort, Prettier, RuboCop, Ruff Formatter, Rustfmt, Scalafmt, StandardJS, StandardRB, swift-format and Yapf This commit fixes the style issues introduced in 1f9f7dd according to the output from Autopep8, Black, ClangFormat, dotnet-format, isort, Prettier, RuboCop, Ruff Formatter, Rustfmt, Scalafmt, StandardJS, StandardRB, swift-format and Yapf. Details: https://github.com/LCSOGthb/Games/pull/48 --- app/globals.css | 21 ++++++++++--- app/layout.tsx | 20 ++++++------- app/page.tsx | 65 +++++++++++++++++++++-------------------- components/GameCard.tsx | 34 ++++++++++----------- 4 files changed, 77 insertions(+), 63 deletions(-) diff --git a/app/globals.css b/app/globals.css index 18dadc3..d740fcc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,4 +1,4 @@ -@import 'tailwindcss'; +@import "tailwindcss"; :root { --bg-base: #09090b; @@ -31,7 +31,14 @@ html { body { color: var(--text-primary); background-color: var(--bg-base); - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + "Helvetica Neue", + sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -97,7 +104,11 @@ textarea:focus-visible { INTERACTIVE ELEMENTS ======================================== */ -button, a, input, select, textarea { +button, +a, +input, +select, +textarea { transition: all 0.15s ease-in-out; } @@ -148,7 +159,9 @@ button, a, input, select, textarea { .card:hover { border-color: var(--border-default); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05); + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(255, 255, 255, 0.05); transform: translateY(-2px); } diff --git a/app/layout.tsx b/app/layout.tsx index 0452c14..d628f0d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,25 +1,25 @@ -import type { Metadata, Viewport } from 'next' -import './globals.css' +import type { Metadata, Viewport } from "next"; +import "./globals.css"; export const metadata: Metadata = { - title: 'Game Collection', - description: 'Discover our selection of fun and challenging games to play', -} + title: "Game Collection", + description: "Discover our selection of fun and challenging games to play", +}; export const viewport: Viewport = { - themeColor: '#09090b', - width: 'device-width', + themeColor: "#09090b", + width: "device-width", initialScale: 1, -} +}; export default function RootLayout({ children, }: { - children: React.ReactNode + children: React.ReactNode; }) { return ( {children} - ) + ); } diff --git a/app/page.tsx b/app/page.tsx index 3299612..9420343 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,49 +1,49 @@ -import GameCard from '@/components/GameCard' +import GameCard from "@/components/GameCard"; const games = [ { id: 1, - title: 'Chess Master', - description: 'Play chess against AI or friends online in real time.', - image: '/placeholder.svg?height=200&width=300', - category: 'Strategy', + title: "Chess Master", + description: "Play chess against AI or friends online in real time.", + image: "/placeholder.svg?height=200&width=300", + category: "Strategy", }, { id: 2, - title: 'Quick Quiz', - description: 'Test your knowledge with fun trivia questions.', - image: '/placeholder.svg?height=200&width=300', - category: 'Trivia', + title: "Quick Quiz", + description: "Test your knowledge with fun trivia questions.", + image: "/placeholder.svg?height=200&width=300", + category: "Trivia", }, { id: 3, - title: 'Memory Match', - description: 'Challenge your memory with this classic card-matching game.', - image: '/placeholder.svg?height=200&width=300', - category: 'Puzzle', + title: "Memory Match", + description: "Challenge your memory with this classic card-matching game.", + image: "/placeholder.svg?height=200&width=300", + category: "Puzzle", }, { id: 4, - title: 'Snake Game', - description: 'Eat food, grow longer, and avoid running into yourself.', - image: '/placeholder.svg?height=200&width=300', - category: 'Arcade', + title: "Snake Game", + description: "Eat food, grow longer, and avoid running into yourself.", + image: "/placeholder.svg?height=200&width=300", + category: "Arcade", }, { id: 5, - title: 'Word Builder', - description: 'Create as many words as you can from scrambled letters.', - image: '/placeholder.svg?height=200&width=300', - category: 'Word', + title: "Word Builder", + description: "Create as many words as you can from scrambled letters.", + image: "/placeholder.svg?height=200&width=300", + category: "Word", }, { id: 6, - title: 'Puzzle Solver', - description: 'Solve challenging jigsaw puzzles of increasing difficulty.', - image: '/placeholder.svg?height=200&width=300', - category: 'Puzzle', + title: "Puzzle Solver", + description: "Solve challenging jigsaw puzzles of increasing difficulty.", + image: "/placeholder.svg?height=200&width=300", + category: "Puzzle", }, -] +]; export default function Home() { return ( @@ -63,7 +63,6 @@ export default function Home() {
-

@@ -73,12 +72,12 @@ export default function Home() { {games.length} games available

- +
    {games.map((game) => (
  • @@ -87,11 +86,13 @@ export default function Home() { ))}
-
-