CavyDev/my_portfolio
1
0
Fork 0
mirror of https://github.com/adam-benyekkou/my_portfolio.git synced 2026-01-15 20:20:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added extra fonts, started button reusable component

Browse Source
This commit is contained in:
AdamBtech
2025-05-20 15:55:02 +02:00
parent 9a5f91685e
commit 2b2397e8a5
15 changed files with 49 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/styles.css
View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&family=Major+Mono+Display&family=Noto+Sans+JP:wght@300;400;500&family=VT323&display=swap');
@layer theme, tailwind-base, tailwind-utilities;
@@ -12,6 +12,7 @@
--font-terminal: 'JetBrains Mono', monospace;
--font-terminal-retro: 'VT323', monospace;
--font-terminal-nier: 'Major Mono Display', monospace;
--font-noto-jp: 'Noto Sans JP', sans-serif;
/* Authentic NieR Automata UI colors from screenshot */
--color-nier-bg: #dcd8c0; /* Main parchment background */
@@ -40,6 +41,11 @@
font-family: var(--font-terminal-nier);
}
.font-noto-jp {
font-family: var(--font-noto-jp);
letter-spacing: -0.02em; /* Slight adjustment to mimic NieR style */
}
/* Background utilities */
.bg-nier-bg {
background-color: var(--color-nier-bg);
@@ -72,45 +78,5 @@
}
/* 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;
}
}