mirror of
https://github.com/Kizuren/kizuren.dev.git
synced 2025-12-21 21:16:12 +01:00
Changed styles. Added error page.
This commit is contained in:
MarcUs7i
parent
c3735e4716
commit
1969e08aa0
14 changed files with 5995 additions and 3218 deletions
76
app.config.ts
Normal file
76
app.config.ts
Normal file
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
458
assets/main.css
458
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;
|
||||
}*/
|
||||
:root {
|
||||
/* Color variables */
|
||||
--pixel-green: #00ff00;
|
||||
--pixel-green-light: #55ff55;
|
||||
--pixel-green-hover: #5f5;
|
||||
--bg-color: #000;
|
||||
--text-color: #fff;
|
||||
--text-muted: #aaa;
|
||||
|
||||
/* For UButton and ULink without nuxt-ui classes */
|
||||
/*button, a {
|
||||
cursor: default !important;
|
||||
}*/
|
||||
/* 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);
|
||||
|
||||
.prose {
|
||||
max-width: 65ch;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
/* 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;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<footer class="bg-gray-800 text-white p-4">
|
||||
<footer class="p-4">
|
||||
<div class="flex justify-between items-center px-4 sm:px-6 md:px-8">
|
||||
<div>© {{ new Date().getFullYear() }} <ULink to="/" class="text-white cursor-default">MarcUs7i.Net</ULink>. All rights reserved.</div>
|
||||
<div>© {{ new Date().getFullYear() }} <ULink to="/" class="cursor-default">MarcUs7i.Net</ULink>. All rights reserved.</div>
|
||||
<div class="flex gap-4">
|
||||
<ULink to="/discord" target="_blank">Discord</ULink>
|
||||
<ULink v-if="config.siteLinks.github" :to="config.siteLinks.github" target="_blank">GitHub</ULink>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<header class="bg-gray-800 text-white p-4">
|
||||
<header class="p-4">
|
||||
<nav class="flex justify-between items-center">
|
||||
<div class="logo">
|
||||
<ULink as="button" to="/" class="text-xl text-white cursor-default">MarcUs7i.Net</ULink>
|
||||
<ULink as="button" to="/" class="cursor-default">MarcUs7i.Net</ULink>
|
||||
</div>
|
||||
<ul class="flex gap-4">
|
||||
<ul class="flex gap-4 md:gap-6">
|
||||
<li><ULink to="/about">About</ULink></li>
|
||||
<li><ULink to="/contact">Contact</ULink></li>
|
||||
<li v-if="config.siteLinks.github"><ULink :to="config.siteLinks.github" target="_blank"><UIcon name="i-simple-icons-github" class="size-5" /></ULink></li>
|
||||
<li><ULink to="/discord" target="_blank"><UIcon name="i-simple-icons-discord" class="size-5" /></ULink></li>
|
||||
<!--<li v-if="config.siteLinks.github"><ULink :to="config.siteLinks.github" target="_blank"><UIcon name="i-simple-icons-github" class="size-5" /></ULink></li>
|
||||
<li><ULink to="/discord" target="_blank"><UIcon name="i-simple-icons-discord" class="size-5" /></ULink></li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -17,3 +17,10 @@
|
|||
<script setup>
|
||||
const { config } = useSiteConfig()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
a {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
transition: all 0.2s steps(2);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,11 +5,11 @@ description: 'about page of marcus7i.net'
|
|||
|
||||
# About MarcUs7i.Net
|
||||
|
||||
This site hosts multiple services and applications, mostly self-created, some improved by MarcUs7i
|
||||
This site hosts multiple services and applications, mostly self-made, some improved by me (MarcUs7i)
|
||||
|
||||
## Donations
|
||||
|
||||
You can support me by donating to my [Ko-fi](https://ko-fi.com/marcus7i).
|
||||
You can support me by donating to my [Patreon](https://patreon.com/marcus7i).
|
||||
|
||||
## Contact
|
||||
|
||||
|
|
|
|||
63
error.vue
Normal file
63
error.vue
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<script setup lang="ts">
|
||||
import type { NuxtError } from '#app'
|
||||
|
||||
const props = defineProps({
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
error: Object as () => NuxtError
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<NuxtLayout>
|
||||
<div class="flex flex-col items-center justify-center gap-30 pt-20">
|
||||
<h1 class="font-bold mt-10 heading-title">
|
||||
{{ error?.statusCode == 404 ? "Only you and the void are here..." : "There is nothing to see here!"}}
|
||||
</h1>
|
||||
|
||||
<div class="flex items-center gap-2 mt-10">
|
||||
<UButton
|
||||
label="Return Home"
|
||||
variant="outline"
|
||||
color="pixelgreen"
|
||||
to="/"
|
||||
size="xl"
|
||||
class="green-button px-8 text-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.heading-title {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
transition: all 0.2s steps(2);
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5;
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.heading-title {
|
||||
font-size: 1.5rem;
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.heading-title {
|
||||
font-size: 1.8rem;
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.heading-title {
|
||||
font-size: 2.2rem;
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -35,5 +35,19 @@ export default defineNuxtConfig({
|
|||
}
|
||||
},
|
||||
|
||||
compatibilityDate: '2025-03-22',
|
||||
ui: {
|
||||
theme: {
|
||||
colors: [
|
||||
'primary',
|
||||
'pixelgreen',
|
||||
'secondary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'error'
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
compatibilityDate: '2025-05-29',
|
||||
})
|
||||
8411
package-lock.json
generated
8411
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="flex flex-col items-center justify-center py-12 px-4">
|
||||
<h1 class="text-3xl font-bold mb-12">Contact Me</h1>
|
||||
<div class="flex flex-col items-center justify-center py-10 px-4">
|
||||
<h1 class="text-3xl font-bold mb-9">Contact Me</h1>
|
||||
|
||||
<div class="w-full max-w-2xl">
|
||||
<UForm
|
||||
:schema="schema"
|
||||
:state="state"
|
||||
class="space-y-8 bg-gray-800 p-8 rounded-lg shadow-lg"
|
||||
class="space-y-8 p-8 rounded-lg shadow-lg"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<UFormField
|
||||
|
|
@ -57,8 +57,7 @@
|
|||
type="submit"
|
||||
:loading="isSubmitting"
|
||||
size="lg"
|
||||
color="primary"
|
||||
class="px-8 py-2"
|
||||
class="green-button px-8 py-2"
|
||||
>
|
||||
Send Message
|
||||
</UButton>
|
||||
|
|
@ -69,21 +68,18 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { z } from 'zod'
|
||||
|
||||
useHead({
|
||||
title: 'Contact'
|
||||
})
|
||||
|
||||
import { z } from 'zod'
|
||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email({ message: 'Please enter a valid email address' }).min(1, { message: 'Email is required' }),
|
||||
subject: z.string().min(3, { message: 'Subject must be at least 3 characters' }),
|
||||
message: z.string().min(10, { message: 'Message must be at least 10 characters' })
|
||||
})
|
||||
|
||||
type Schema = z.infer<typeof schema>
|
||||
|
||||
const state = reactive({
|
||||
email: '',
|
||||
subject: '',
|
||||
|
|
@ -93,7 +89,7 @@ const state = reactive({
|
|||
const isSubmitting = ref(false)
|
||||
const toast = useToast()
|
||||
|
||||
async function onSubmit(event: FormSubmitEvent<Schema>) {
|
||||
async function onSubmit() {
|
||||
try {
|
||||
isSubmitting.value = true
|
||||
|
||||
|
|
@ -123,14 +119,17 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
|
|||
title: 'Message Sent!',
|
||||
description: 'Your message has been sent successfully.',
|
||||
icon: 'i-heroicons-check-circle',
|
||||
color: 'success'
|
||||
color: 'pixelgreen',
|
||||
ui: {
|
||||
root: '',
|
||||
}
|
||||
})
|
||||
|
||||
state.email = ''
|
||||
state.subject = ''
|
||||
state.message = ''
|
||||
|
||||
} catch (error) {
|
||||
} catch {
|
||||
toast.add({
|
||||
title: 'Error',
|
||||
description: 'Something went wrong. Please try again.',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="flex flex-col items-center justify-center min-h-screen px-4">
|
||||
<div class="flex flex-col items-center justify-center min-h-[80vh] px-4">
|
||||
<!-- Title -->
|
||||
<h1 class="text-2xl font-bold mb-8">Redirecting to Discord...</h1>
|
||||
|
||||
<!-- Progress bar -->
|
||||
<div class="w-full max-w-md mb-12">
|
||||
<UProgress v-model="progress" color="primary" size="lg" />
|
||||
<UProgress v-model="progress" color="pixelgreen" size="lg"/>
|
||||
<p class="text-center mt-2 text-sm text-gray-500">
|
||||
Redirecting in {{ Math.ceil(remainingTime) }} seconds...
|
||||
</p>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<UButton
|
||||
size="xl"
|
||||
:to="discordLink"
|
||||
class="mt-4 text-lg px-8 py-4"
|
||||
class="green-button mt-4 text-lg px-8 py-4"
|
||||
icon="i-simple-icons-discord"
|
||||
>
|
||||
Don't wait - Join Now
|
||||
|
|
@ -29,7 +29,7 @@ useHead({
|
|||
|
||||
const { config } = useSiteConfig()
|
||||
|
||||
const discordLink = ref(config.siteLinks['discord-invite'] || 'https://discord.gg/e37aq2wc66')
|
||||
const discordLink = computed(() => config.siteLinks?.['discord-invite'] || '/maintenance')
|
||||
|
||||
// Progress state
|
||||
const progress = ref(0)
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div class="flex flex-col items-center justify-center gap-8 pt-8">
|
||||
<h1 class="font-bold text-5xl text-[--ui-primary] mt-10">
|
||||
<h1 class="font-bold text-5xl mt-10">
|
||||
Games
|
||||
</h1>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
|
||||
<div class="games-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl">
|
||||
<UCard
|
||||
v-for="game in games"
|
||||
:key="game.title"
|
||||
class="bg-gray-900 text-white shadow-lg"
|
||||
class="big-button shadow-lg"
|
||||
:ui="{
|
||||
root: 'bg-gray-900 text-white flex flex-col h-full shadow-lg rounded-lg ring-1 ring-gray-700',
|
||||
root: 'flex flex-col shadow-lg rounded-lg ring-1',
|
||||
header: 'p-4 pb-0',
|
||||
body: 'flex-grow p-4 pt-2',
|
||||
footer: 'p-4 pt-0'
|
||||
|
|
@ -34,27 +34,25 @@
|
|||
</UBadge>
|
||||
</div>
|
||||
|
||||
<!-- Game Title -->
|
||||
<h2 class="text-xl font-bold mt-4">{{ game.title }}</h2>
|
||||
<div class="card-content">
|
||||
<h2 class="text-xl mt-4">{{ game.title }}</h2>
|
||||
<p class="mt-2">{{ game.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Game Description -->
|
||||
<p class="text-gray-400 mt-2">{{ game.description }}</p>
|
||||
|
||||
<!-- Separator -->
|
||||
<USeparator class="my-3" />
|
||||
|
||||
<!-- Game Links -->
|
||||
<div class="flex gap-4 mt-2">
|
||||
<a
|
||||
v-for="link in game.url || []"
|
||||
:key="link.url"
|
||||
:href="link.url"
|
||||
target="_blank"
|
||||
class="text-blue-400 hover:text-blue-300 flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<UIcon :name="link.logo" class="text-lg" />
|
||||
<span class="text-sm">{{ link.host }}</span>
|
||||
</a>
|
||||
<div class="card-footer">
|
||||
<USeparator class="my-3" />
|
||||
<div class="flex gap-4 mt-2">
|
||||
<a
|
||||
v-for="link in game.url || []"
|
||||
:key="link.url"
|
||||
:href="link.url"
|
||||
target="_blank"
|
||||
class="flex items-center gap-2 transition-colors"
|
||||
>
|
||||
<UIcon :name="link.logo" class="text-lg" />
|
||||
<span class="text-sm">{{ link.host }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
|
@ -69,7 +67,7 @@ const games = siteConfig.games
|
|||
const imageCache = ref(new Map())
|
||||
|
||||
function getBadgeColor(status: string) {
|
||||
if (status === 'Released') return 'success'
|
||||
if (status === 'Released') return 'pixelgreen'
|
||||
if (status === 'Abandoned') return 'error'
|
||||
return 'warning'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="flex flex-col items-center justify-center gap-8 pt-8">
|
||||
<h1 class="font-bold text-5xl text-(--ui-primary) mt-10">
|
||||
<h1 class="mt-10 home-title">
|
||||
MarcUs7i.Net
|
||||
</h1>
|
||||
|
||||
|
|
@ -11,31 +11,32 @@
|
|||
icon="i-simple-icons-discord"
|
||||
to="/discord"
|
||||
target="_blank"
|
||||
class="green-button"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
v-if="config.siteLinks.github"
|
||||
label="GitHub"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
icon="i-simple-icons-github"
|
||||
:to="config.siteLinks.github"
|
||||
target="_blank"
|
||||
class="green-button"
|
||||
/>
|
||||
|
||||
<UButton
|
||||
v-if="config.siteLinks['status-page']"
|
||||
label="Status"
|
||||
color="neutral"
|
||||
icon="i-simple-icons-statuspage"
|
||||
:to="config.siteLinks['status-page']"
|
||||
target="_blank"
|
||||
class="green-button"
|
||||
/>
|
||||
</UButtonGroup>
|
||||
</div>
|
||||
|
||||
<!-- 2x2 Grid of Smaller Buttons -->
|
||||
<div class="grid grid-cols-2 gap-4 pt-16 max-w-3xl">
|
||||
<!-- Responsive Grid - 1 column on mobile, 2 columns on larger screens -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-10 sm:pt-16 max-w-3xl px-4 sm:px-0">
|
||||
<UButton
|
||||
v-for="button in config.buttons"
|
||||
:key="button.url"
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<UIcon :name="button.icon" class="w-5 h-5 text-green-500" />
|
||||
<UIcon :name="button.icon" class="w-5 h-5" />
|
||||
<span class="label">{{ button.title }}</span>
|
||||
</div>
|
||||
<span v-if="button.description" class="description">
|
||||
|
|
@ -75,19 +76,14 @@ const { config } = useSiteConfig()
|
|||
min-height: 3.5rem; /* h-48 */
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
box-shadow: 4px 4px 0 #0f0;
|
||||
border-radius: 0.5rem; /* rounded-lg */
|
||||
border: 1px solid rgb(55, 65, 81); /* border border-gray-700 */
|
||||
background-color: rgb(31, 41, 55); /* bg-gray-800 */
|
||||
border: 2px solid #0f0;
|
||||
background-color: #000;
|
||||
color: white;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.big-button:hover {
|
||||
border-color: rgb(34, 197, 94); /* border-green-500 */
|
||||
background-color: rgb(17, 24, 39); /* bg-gray-900 */
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.125rem; /* text-lg */
|
||||
font-weight: 600; /* font-semibold */
|
||||
|
|
@ -95,7 +91,7 @@ const { config } = useSiteConfig()
|
|||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
color: rgb(156, 163, 175); /* text-gray-400 */
|
||||
font-size: 0.75rem;
|
||||
color: rgb(156, 163, 175);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<div class="flex flex-col items-center justify-center gap-30 pt-20">
|
||||
<h1 class="font-bold text-5xl text-(--ui-primary) mt-10">
|
||||
This site is in maintenance!
|
||||
<h1 class="font-bold heading-title mt-10">
|
||||
This page is in maintenance!
|
||||
</h1>
|
||||
|
||||
<div class="flex items-center gap-2 mt-16">
|
||||
<UButton
|
||||
label="Return Home"
|
||||
variant="outline"
|
||||
color="neutral"
|
||||
color="pixelgreen"
|
||||
to="/"
|
||||
size="xl"
|
||||
class="px-8 text-lg"
|
||||
class="green-button px-8 text-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,3 +22,33 @@ useHead({
|
|||
title: 'Maintenance'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.heading-title {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
transition: all 0.2s steps(2);
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.heading-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.heading-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.heading-title {
|
||||
font-size: 3rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,9 +10,10 @@ export default {
|
|||
"./content/**/*.md",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
pixel: ['"Press Start 2P"', 'monospace'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue