jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-09-02 09:34:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

resize frame when hint is enabled

Browse Source
This commit is contained in:
Jens Mohrmann
2025-12-26 19:13:19 +01:00
parent 1650eb4824
commit 4f247c086a
3 changed files with 30 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.css
View File

@@ -16,8 +16,10 @@
} }
.logo { .logo {
font-family: var(--font-family-serif);
font-weight: 700; font-weight: 700;
font-size: var(--font-size-lg); font-size: 1.5rem;
letter-spacing: -0.02em;
color: var(--color-primary); color: var(--color-primary);
} }
@@ -48,8 +50,12 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%; width: 100%;
max-width: 600px;
transition: max-width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.2s ease;
}
.card.has-hint {
max-width: 850px; max-width: 850px;
transition: transform 0.2s ease;
} }
.sheet-music-container { .sheet-music-container {

2
src/App.tsx
View File

@@ -342,7 +342,7 @@ function App() {
)} )}
<main className="main-stage"> <main className="main-stage">
<div className="card sheet-music-card"> <div className={`card sheet-music-card ${settings.showHint ? 'has-hint' : ''}`}>
<div className="sheet-music-container"> <div className="sheet-music-container">
<SheetMusic <SheetMusic
targetMidi={targetMidi} targetMidi={targetMidi}

32
src/styles/variables.css
View File

@@ -1,16 +1,24 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
:root { :root {
/* HSL Colors for easy manipulation */ /* HSL Colors for easy manipulation */
--hue-primary: 250; /* Dark Red / Brownish Tone */
--hue-primary: 0;
--hue-success: 150; --hue-success: 150;
--hue-error: 10; --hue-error: 10;
--hue-text: 220; --hue-text: 30;
/* Warmer text */
--color-bg: hsl(220, 20%, 97%); --color-bg: hsl(30, 20%, 97%);
/* Warm paper-like bg */
--color-surface: hsl(0, 0%, 100%); --color-surface: hsl(0, 0%, 100%);
--color-primary: hsl(var(--hue-primary), 60%, 50%);
--color-primary-dark: hsl(var(--hue-primary), 60%, 40%); /* Deep Classic Red */
--color-text-main: hsl(var(--hue-text), 20%, 20%); --color-primary: hsl(var(--hue-primary), 65%, 40%);
--color-text-muted: hsl(var(--hue-text), 10%, 60%); --color-primary-dark: hsl(var(--hue-primary), 65%, 30%);
--color-text-main: hsl(var(--hue-text), 10%, 20%);
--color-text-muted: hsl(var(--hue-text), 5%, 60%);
--color-success: hsl(var(--hue-success), 60%, 45%); --color-success: hsl(var(--hue-success), 60%, 45%);
--color-error: hsl(var(--hue-error), 70%, 55%); --color-error: hsl(var(--hue-error), 70%, 55%);
@@ -26,6 +34,8 @@
/* Typography */ /* Typography */
--font-family: 'Inter', system-ui, -apple-system, sans-serif; --font-family: 'Inter', system-ui, -apple-system, sans-serif;
--font-family-serif: 'Playfair Display', serif;
--font-size-base: 16px; --font-size-base: 16px;
--font-size-lg: 1.25rem; --font-size-lg: 1.25rem;
--font-size-xl: 1.5rem; --font-size-xl: 1.5rem;
@@ -44,10 +54,10 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-bg: hsl(220, 20%, 10%); --color-bg: hsl(30, 20%, 10%);
--color-surface: hsl(220, 20%, 15%); --color-surface: hsl(30, 20%, 15%);
--color-text-main: hsl(220, 10%, 90%); --color-text-main: hsl(30, 10%, 90%);
--color-text-muted: hsl(220, 10%, 60%); --color-text-muted: hsl(30, 10%, 60%);
} }
} }