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 {
font-family: var(--font-family-serif);
font-weight: 700;
font-size: var(--font-size-lg);
font-size: 1.5rem;
letter-spacing: -0.02em;
color: var(--color-primary);
}
@@ -48,8 +50,12 @@
flex-direction: column;
align-items: center;
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;
transition: transform 0.2s ease;
}
.sheet-music-container {

2
src/App.tsx
View File

@@ -342,7 +342,7 @@ function App() {
)}
<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">
<SheetMusic
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 {
/* HSL Colors for easy manipulation */
--hue-primary: 250;
/* Dark Red / Brownish Tone */
--hue-primary: 0;
--hue-success: 150;
--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-primary: hsl(var(--hue-primary), 60%, 50%);
--color-primary-dark: hsl(var(--hue-primary), 60%, 40%);
--color-text-main: hsl(var(--hue-text), 20%, 20%);
--color-text-muted: hsl(var(--hue-text), 10%, 60%);
/* Deep Classic Red */
--color-primary: hsl(var(--hue-primary), 65%, 40%);
--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-error: hsl(var(--hue-error), 70%, 55%);
@@ -26,6 +34,8 @@
/* Typography */
--font-family: 'Inter', system-ui, -apple-system, sans-serif;
--font-family-serif: 'Playfair Display', serif;
--font-size-base: 16px;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
@@ -44,10 +54,10 @@
@media (prefers-color-scheme: dark) {
:root {
--color-bg: hsl(220, 20%, 10%);
--color-surface: hsl(220, 20%, 15%);
--color-text-main: hsl(220, 10%, 90%);
--color-text-muted: hsl(220, 10%, 60%);
--color-bg: hsl(30, 20%, 10%);
--color-surface: hsl(30, 20%, 15%);
--color-text-main: hsl(30, 10%, 90%);
--color-text-muted: hsl(30, 10%, 60%);
}
}