From 1969e08aa0514029435f782c6f08bd2e404dff0b Mon Sep 17 00:00:00 2001 From: MarcUs7i Date: Thu, 29 May 2025 00:16:04 +0200 Subject: [PATCH] Changed styles. Added error page. --- app.config.ts | 76 + assets/main.css | 462 ++- components/AppFooter.vue | 4 +- components/NavBar.vue | 19 +- content/about.md | 4 +- error.vue | 63 + nuxt.config.ts | 16 +- package-lock.json | 8411 ++++++++++++++++++++++++-------------- pages/contact.vue | 25 +- pages/discord.vue | 8 +- pages/games.vue | 48 +- pages/index.vue | 28 +- pages/maintenance.vue | 40 +- tailwind.config.js | 9 +- 14 files changed, 5995 insertions(+), 3218 deletions(-) create mode 100644 app.config.ts create mode 100644 error.vue diff --git a/app.config.ts b/app.config.ts new file mode 100644 index 0000000..cbd743f --- /dev/null +++ b/app.config.ts @@ -0,0 +1,76 @@ +export default defineAppConfig({ + ui: { + colors: { + pixelgreen: 'pixel-green', + }, + input: { + compoundVariants: [ + { + color: 'pixelgreen', + variant: [ + 'outline', + 'subtle' + ], + class: 'focus-visible:ring-2 focus-visible:ring-inset ring-pixelgreen focus-visible:ring-pixelgreen' + } + ], + variants: { + variant: { + outline: 'text-highlighted bg-black ring ring-inset ring-accented', + soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50', + subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented', + ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent', + none: 'text-highlighted bg-transparent' + }, + }, + defaultVariants: { + size: 'md', + color: 'pixelgreen', + variant: 'outline' + } + }, + textarea: { + compoundVariants: [ + { + color: 'pixelgreen', + variant: [ + 'outline', + 'subtle' + ], + class: 'focus-visible:ring-2 focus-visible:ring-inset ring-pixelgreen focus-visible:ring-pixelgreen' + } + ], + variants: { + variant: { + outline: 'text-highlighted bg-black ring ring-inset ring-accented', + soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50', + subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented', + ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent', + none: 'text-highlighted bg-transparent' + }, + }, + defaultVariants: { + size: 'md', + color: 'pixelgreen', + variant: 'outline' + } + }, + toast: { + slots: { + root: 'relative group overflow-hidden bg-black shadow-lg rounded-lg ring ring-default p-4 flex gap-2.5 focus:outline-none', + }, + variants: { + color: { + pixelgreen: { + root: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-pixelgreen', + icon: 'text-pixelgreen', + progress: 'bg-pixelgreen' + } + }, + }, + defaultVariants: { + color: 'pixelgreen' + } + } + } +}) diff --git a/assets/main.css b/assets/main.css index c516d8e..d30852d 100644 --- a/assets/main.css +++ b/assets/main.css @@ -1,88 +1,444 @@ +@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); @import "tailwindcss"; @import "@nuxt/ui"; -/* Global overrides for Nuxt UI components */ -/*.nuxt-ui-button, -.nuxt-ui-link, -[class*="nuxt-ui-button"], -[class*="nuxt-ui-link"] { - cursor: default !important; -}*/ - -/* For UButton and ULink without nuxt-ui classes */ -/*button, a { - cursor: default !important; -}*/ - -.prose { - max-width: 65ch; - margin: 0 auto; - padding: 1rem; +:root { + /* Color variables */ + --pixel-green: #00ff00; + --pixel-green-light: #55ff55; + --pixel-green-hover: #5f5; + --bg-color: #000; + --text-color: #fff; + --text-muted: #aaa; + + /* Spacing and sizing */ + --shadow-sm: 2px 2px 0 var(--pixel-green); + --shadow-md: 3px 3px 0 var(--pixel-green); + --shadow-lg: 4px 4px 0 var(--pixel-green); + --shadow-xl: 6px 6px 0 var(--pixel-green); + + /* Border styles */ + --border-sm: 1px solid var(--pixel-green); + --border-md: 2px solid var(--pixel-green); + + /* Typography */ + --base-font-size: 12px; + --pixel-font: 'Press Start 2P', monospace; } -.prose h1 { - font-size: 2.25rem; +@theme static { + --font-sans: var(--pixel-font); + --font-mono: var(--pixel-font); + --breakpoint-3xl: 1920px; + --color-pixel-green-50: #eaffea; + --color-pixel-green-100: #d1ffd1; + --color-pixel-green-200: #a3ffa3; + --color-pixel-green-300: #75ff75; + --color-pixel-green-400: var(--pixel-green); + --color-pixel-green-500: var(--pixel-green); + --color-pixel-green-600: #00cc00; + --color-pixel-green-700: #009900; + --color-pixel-green-800: #007700; + --color-pixel-green-900: #005500; + --color-pixel-green-950: #003300; + --radius: 0px; + --shadow-color: 0, 255, 0; + --shadow: var(--shadow-lg); + --ui-primary: var(--color-green-500); + --ui-on-primary: #000000; +} + +/* Base styles */ +body { + background-color: var(--bg-color); + color: var(--text-color); + font-family: var(--pixel-font); + image-rendering: pixelated; + letter-spacing: 0.05em; + font-size: var(--base-font-size); + line-height: 1.6; +} + +/* Responsive typography base */ +@media (min-width: 640px) { body { font-size: 13px; } } +@media (min-width: 768px) { body { font-size: 14px; } } +@media (min-width: 1024px) { body { font-size: 16px; } } + +/* Global transitions */ +a, button, .transition-element { + transition: all 0.15s steps(2) !important; +} + +/* Global UI component styling */ +.nuxt-ui-button, .nuxt-ui-link, button, a { + font-family: var(--pixel-font); +} + +/* Layout components */ +/* Navbar */ +header, .navbar, nav { + background-color: var(--bg-color); + border-bottom: var(--border-md); + padding: 0.4rem; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; +} + +@media (min-width: 640px) { header, .navbar, nav { padding: 0.5rem; } } +@media (min-width: 768px) { header, .navbar, nav { padding: 0.7rem; } } + +nav { + border-bottom: none; + width: 100%; +} + +nav ul { + display: flex; + justify-content: flex-end; + gap: 1rem; +} + +@media (max-width: 640px) { nav ul { gap: 0.75rem; } } + +/* Footer */ +footer { + background-color: var(--bg-color); + border-top: var(--border-sm); + padding: 0.5rem; + font-size: 0.5rem; + text-align: center; +} + +@media (min-width: 640px) { + footer { + border-top: 1.5px solid var(--pixel-green); + font-size: 0.55rem; + padding: 0.6rem; + text-align: left; + } +} + +@media (min-width: 768px) { + footer { + border-top: var(--border-md); + font-size: 0.6rem; + padding: 0.8rem; + } +} + +@media (min-width: 1024px) { footer { font-size: 0.7rem; padding: 1rem; } } + +/* Typography */ +/* Home title styling */ +.home-title { + font-size: 1.75rem; font-weight: bold; - margin-bottom: 1rem; + text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); + margin: 1rem 0; + text-align: center; + line-height: 1.4; } -.prose h2 { - font-size: 1.5rem; +@media (min-width: 640px) { .home-title { font-size: 2.25rem; margin: 1.5rem 0; } } +@media (min-width: 768px) { .home-title { font-size: 2.75rem; margin: 2rem 0; } } +@media (min-width: 1024px) { .home-title { font-size: 3.5rem; } } + +/* Content typography */ +.prose h1, .prose h2, .prose h3 { font-weight: bold; - margin-top: 2rem; - margin-bottom: 1rem; + color: var(--pixel-green); + line-height: 1.4; } -/* Remove link styling from headings in Markdown content */ -.prose h2 a, -.prose h3 a, -.prose h4 a, -.prose h5 a, -.prose h6 a { +.prose h1 { font-size: 1.25rem; margin-bottom: 0.75rem; } +.prose h2 { font-size: 1.1rem; margin-top: 1.25rem; margin-bottom: 0.6rem; } +.prose h3 { font-size: 1rem; margin-top: 1rem; margin-bottom: 0.5rem; } + +@media (min-width: 640px) { + .prose h1 { font-size: 1.5rem; margin-bottom: 1rem; } + .prose h2 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.8rem; } + .prose h3 { font-size: 1.1rem; } +} + +@media (min-width: 768px) { + .prose h1 { font-size: 2rem; margin-bottom: 1.25rem; line-height: 1.5; } + .prose h2 { font-size: 1.5rem; margin-top: 1.75rem; margin-bottom: 1rem; line-height: 1.5; } + .prose h3 { font-size: 1.25rem; margin-top: 1.25rem; } +} + +@media (min-width: 1024px) { + .prose h1 { font-size: 2.5rem; margin-bottom: 1.5rem; } + .prose h2 { font-size: 1.75rem; margin-top: 2rem; margin-bottom: 1.25rem; } + .prose h3 { font-size: 1.35rem; margin-top: 1.5rem; margin-bottom: 1rem; } +} + +/* Link styling in prose */ +.prose a, .dark a { + color: var(--pixel-green); + text-decoration: none; +} + +.prose a:hover, .dark a:hover, .dark .prose a:hover { + color: var(--pixel-green-hover); + text-decoration: none; +} + +/* Remove link styling from headings */ +.prose h2 a, .prose h3 a, .prose h4 a, .prose h5 a, .prose h6 a { color: inherit; text-decoration: none; } -.prose h2 a:hover, -.prose h3 a:hover, -.prose h4 a:hover, -.prose h5 a:hover, -.prose h6 a:hover { - color: inherit; +.prose h2 a:hover, .prose h3 a:hover, .prose h4 a:hover, .prose h5 a:hover, .prose h6 a:hover { text-decoration: none; } /* Hide the # link icon that might appear on hover */ -.prose h2 a::after, -.prose h3 a::after, -.prose h4 a::after, -.prose h5 a::after, -.prose h6 a::after { +.prose h2 a::after, .prose h3 a::after, .prose h4 a::after, .prose h5 a::after, .prose h6 a::after { display: none; } .prose p { margin-bottom: 1rem; - line-height: 1.6; + line-height: 1.8; } -.prose a { - color: #1d4ed8; - text-decoration: underline; +/* Dark mode */ +.dark .prose, .dark body, .dark nav, .dark header, .dark footer { + color: var(--text-color); + background-color: var(--bg-color); } -.prose a:hover { - color: #2563eb; +/* Pixel UI Components */ +/* Pixel bordered containers */ +.big-button, .card, .box, .pixel-border { + border: var(--border-md); + box-shadow: var(--shadow-sm); + transition: all 0.2s steps(2); + width: 100%; + position: relative; + margin: 0 0 0.75rem 0; + padding: 0.75rem; + display: flex; + flex-direction: column; + align-items: flex-start; } -.dark .prose { - color: #e5e7eb; +@media (min-width: 640px) { + .big-button, .card, .box, .pixel-border { + box-shadow: var(--shadow-md); + padding: 1rem; + } } -.dark .prose a { - color: #60a5fa; +@media (min-width: 768px) { + .big-button, .card, .box, .pixel-border { + box-shadow: var(--shadow-lg); + padding: 1.25rem; + } } -.dark .prose a:hover { - color: #93c5fd; +/* Hover effects */ +.big-button:hover, .card:hover, .box:hover, .pixel-border:hover { + transform: translate(-1px, -1px); + box-shadow: var(--shadow-md); +} + +@media (min-width: 640px) { + .big-button:hover, .card:hover, .box:hover, .pixel-border:hover { + transform: translate(-2px, -2px); + box-shadow: var(--shadow-lg); + } +} + +@media (min-width: 768px) { + .big-button:hover, .card:hover, .box:hover, .pixel-border:hover { + transform: translate(-3px, -3px); + box-shadow: var(--shadow-xl); + } +} + +/* Green button */ +.green-button { + background-color: var(--bg-color); + color: var(--pixel-green); + border: var(--border-sm); + transition: all 0.2s steps(2); + font-family: var(--pixel-font); + padding: 0.3rem 0.6rem; + text-align: center; + font-size: 0.6rem; + white-space: nowrap; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +@media (min-width: 640px) { + .green-button { + border: 1.5px solid var(--pixel-green); + padding: 0.4rem 0.7rem; + font-size: 0.65rem; + } +} + +@media (min-width: 768px) { + .green-button { + border: var(--border-md); + padding: 0.5rem 0.8rem; + font-size: 0.7rem; + } +} + +@media (min-width: 1024px) { + .green-button { + padding: 0.5rem 1rem; + font-size: 0.8rem; + } +} + +.green-button:hover { + transform: translate(-1px, -1px); + box-shadow: 1px 1px 0 var(--pixel-green); + color: var(--pixel-green-hover); +} + +@media (min-width: 768px) { + .green-button:hover { + transform: translate(-2px, -2px); + box-shadow: 2px 2px 0 var(--pixel-green); + } +} + +/* Layout Utilities */ +/* Grid system */ +.grid { + display: grid; + grid-template-columns: 1fr; /* Single column by default */ + gap: 0.75rem; /* Smaller gap on mobile */ +} + +@media (min-width: 480px) { .grid { gap: 1rem; } } +@media (min-width: 640px) { + .grid { + grid-template-columns: repeat(2, 1fr); /* Two columns on sm screens */ + gap: 1.25rem; + } +} +@media (min-width: 1024px) { .grid { gap: 1.5rem; } } + +/* UI Component Overrides */ +/* Button adjustments */ +.nuxt-ui-button.big-button { + height: auto; + min-height: 3rem; +} + +@media (min-width: 768px) { .nuxt-ui-button.big-button { min-height: 4rem; } } + +/* Button groups */ +.nuxt-ui-button-group { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: center; +} + +@media (min-width: 640px) { .nuxt-ui-button-group { flex-wrap: nowrap; } } + +/* Games grid styling */ +.games-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 1rem; + width: 100%; + margin: 0 auto; +} + +@media (min-width: 640px) { + .games-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1.25rem; + } +} + +@media (min-width: 1024px) { + .games-grid { + gap: 1.5rem; + padding: 0; + } +} + +.games-grid .big-button, +.games-grid .nuxt-ui-card { + max-width: 100%; + padding: 0.75rem; +} + +@media (min-width: 640px) { .games-grid .big-button, .games-grid .nuxt-ui-card { padding: 0.85rem; } } +@media (min-width: 768px) { .games-grid .big-button, .games-grid .nuxt-ui-card { padding: 1rem; } } + +/* Game cards */ +.games-grid .nuxt-ui-card { + border: var(--border-md); + box-shadow: var(--shadow-md); + background-color: var(--bg-color); + transition: all 0.2s steps(2); + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; +} + +.games-grid .nuxt-ui-card:hover { + transform: translate(-2px, -2px); + box-shadow: 5px 5px 0 var(--pixel-green); +} + +/* Card component parts */ +.games-grid .nuxt-ui-card-header { + padding: 1rem !important; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgba(0, 255, 0, 0.3); +} + +.games-grid .nuxt-ui-card-body { + padding: 1rem !important; + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.games-grid .nuxt-ui-card-footer { + padding: 1rem !important; + border-top: 1px solid rgba(0, 255, 0, 0.3); +} + +/* Game card content */ +.games-grid img { + width: 48px; + height: 48px; + object-fit: contain; +} + +.games-grid h2 { + font-size: 1rem; + margin-top: 0.5rem; + margin-bottom: 0.75rem; + color: var(--text-color); +} + +.games-grid p { + font-size: 0.75rem; + color: var(--text-muted); + margin-bottom: 0; + flex-grow: 1; +} + +.games-grid .flex.gap-4 { + gap: 1rem !important; } \ No newline at end of file diff --git a/components/AppFooter.vue b/components/AppFooter.vue index 20dc5d8..e906401 100644 --- a/components/AppFooter.vue +++ b/components/AppFooter.vue @@ -1,7 +1,7 @@