mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-15 20:20:09 +00:00
117 lines
3.1 KiB
CSS
117 lines
3.1 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=VT323&display=swap');
|
|
|
|
@layer theme, tailwind-base, tailwind-utilities;
|
|
|
|
@import "tailwindcss/theme.css" layer(theme);
|
|
@import "tailwindcss/preflight.css" layer(tailwind-base);
|
|
@import "tailwindcss/utilities.css" layer(tailwind-utilities);
|
|
|
|
@layer theme {
|
|
:root {
|
|
/* Font variables */
|
|
--font-terminal: 'JetBrains Mono', monospace;
|
|
--font-terminal-retro: 'VT323', monospace;
|
|
--font-terminal-nier: 'Major Mono Display', monospace;
|
|
|
|
/* Authentic NieR Automata UI colors from screenshot */
|
|
--color-nier-bg: #dcd8c0; /* Main parchment background */
|
|
--color-nier-dark: #5a5a50; /* Dark UI elements */
|
|
--color-nier-mid: #adaba0; /* Medium gray UI elements */
|
|
--color-nier-text-dark: #292925; /* Dark text */
|
|
--color-nier-text-light: #dcd8c0; /* Light text */
|
|
--color-nier-border: #a39e8c; /* Border color */
|
|
--color-nier-grid: #bfbcad; /* Grid lines */
|
|
--color-nier-accent: #292925; /* Dark accent */
|
|
--color-nier-highlight: #5a5a50; /* Highlight for selection */
|
|
}
|
|
}
|
|
|
|
@layer tailwind-utilities {
|
|
/* Font utilities */
|
|
.font-terminal {
|
|
font-family: var(--font-terminal);
|
|
}
|
|
|
|
.font-terminal-retro {
|
|
font-family: var(--font-terminal-retro);
|
|
}
|
|
|
|
.font-terminal-nier {
|
|
font-family: var(--font-terminal-nier);
|
|
}
|
|
|
|
/* Background utilities */
|
|
.bg-nier-bg {
|
|
background-color: var(--color-nier-bg);
|
|
}
|
|
|
|
.bg-nier-dark {
|
|
background-color: var(--color-nier-dark);
|
|
}
|
|
|
|
.bg-nier-mid {
|
|
background-color: var(--color-nier-mid);
|
|
}
|
|
|
|
/* Text utilities */
|
|
.text-nier-dark {
|
|
color: var(--color-nier-text-dark);
|
|
}
|
|
|
|
.text-nier-light {
|
|
color: var(--color-nier-text-light);
|
|
}
|
|
|
|
/* Border utilities */
|
|
.border-nier-border {
|
|
border-color: var(--color-nier-border);
|
|
}
|
|
|
|
.border-nier-accent {
|
|
border-color: var(--color-nier-accent);
|
|
}
|
|
|
|
/* Grid background utility */
|
|
.bg-nier-grid {
|
|
background-color: var(--color-nier-bg);
|
|
background-image: linear-gradient(var(--color-nier-grid) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--color-nier-grid) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
/* Button utilities */
|
|
.nier-button {
|
|
background-color: var(--color-nier-mid);
|
|
color: var(--color-nier-text-dark);
|
|
border: 1px solid var(--color-nier-border);
|
|
font-family: var(--font-terminal-retro);
|
|
text-transform: uppercase;
|
|
padding: 0.5rem 1rem;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.nier-button:hover {
|
|
background-color: var(--color-nier-dark);
|
|
color: var(--color-nier-text-light);
|
|
}
|
|
|
|
.nier-button-active {
|
|
background-color: var(--color-nier-dark);
|
|
color: var(--color-nier-text-light);
|
|
border: 1px solid var(--color-nier-border);
|
|
font-family: var(--font-terminal-retro);
|
|
text-transform: uppercase;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
/* Interactive element focus styles */
|
|
.nier-focus-ring {
|
|
outline: none;
|
|
}
|
|
|
|
.nier-focus-ring:focus-visible {
|
|
outline: 2px solid var(--color-nier-dark);
|
|
outline-offset: 1px;
|
|
}
|
|
}
|