yukkop/learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reading

Browse Source
This commit is contained in:
yukkop
2026-09-15 20:57:30 +00:00
parent 2937d257d6
commit 02f112fb39
3 changed files with 41 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/style.css
+10 -2
View File
@@ -64,6 +64,8 @@ h2 { font-family: var(--serif); font-size: var(--type-heading); font-weight: 400
.section-heading, .dictionary-heading { align-items: flex-start; display: flex; gap: var(--space-4); }
.section-heading > div, .dictionary-heading > div { flex: 1; }
.section-heading p:not(.section-number), .dictionary-heading p:not(.section-number) { color: var(--ink-muted); line-height: 1.5; }
.fullscreen-button { align-items: center; background: transparent; border: var(--border-width) solid var(--forest); border-radius: var(--radius-sm); color: var(--forest); display: inline-flex; flex: 0 0 auto; font-size: var(--type-caption); font-weight: 800; justify-content: center; padding: var(--space-2) var(--space-3); text-align: center; }
.fullscreen-button:hover, .fullscreen-button:focus-visible { background: var(--forest); color: var(--paper); outline: var(--border-emphasis) solid var(--coral); outline-offset: var(--space-1); }
.word-count { background: var(--sun); border-radius: 999px; font-size: var(--type-meta); font-weight: 800; margin: 0; padding: var(--space-2) var(--space-3); white-space: nowrap; }
.reading-text { font-family: var(--serif); font-size: var(--type-word); line-height: 2; margin: var(--space-6) 0 0; }
.reading-word { background: transparent; border: 0; border-bottom: var(--border-emphasis) solid transparent; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
@@ -86,10 +88,10 @@ dd { font-family: var(--serif); font-size: var(--type-detail); margin: 0; }
.detail-empty { max-width: 32rem; }
.rules-panel { background: var(--mist); display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; padding: var(--space-4); }
.rules-heading { align-items: flex-start; display: flex; flex: 0 0 auto; gap: var(--space-3); }
.rules-heading > div { flex: 1; }
.rules-heading > div { flex: 1; min-width: 0; }
.rules-heading h2 { font-size: var(--type-detail); }
.rules-heading p:not(.section-number) { color: var(--ink-muted); font-size: var(--type-caption); line-height: 1.5; }
.rules-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-2) var(--space-2) 0; scroll-padding: var(--space-4); }
.rules-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-2) var(--space-2) 0; scroll-padding: var(--space-4); }
.rules-caveat { background: var(--surface); border-left: var(--border-emphasis) solid var(--coral); font-size: var(--type-rule-copy); line-height: 1.55; margin: 0; padding: var(--space-3); }
.rule-section { border-top: var(--border-width) solid var(--line); padding: var(--space-4) 0; }
.rule-section:last-child { padding-bottom: 0; }
@@ -122,3 +124,9 @@ th { color: var(--forest); font-size: var(--type-overline); letter-spacing: 0.08
@media (min-width: 80rem) { .lesson-shell { width: calc(100% - clamp(4rem, 5vw, 12rem)); } }
@media (max-width: 58rem) { .reader-workspace { display: flex; flex-direction: column; height: auto; } .reader-workspace .reading-card { order: -1; overflow: visible; } .rules-panel { flex: initial; } .rules-scroll { overflow: visible; } }
@media (max-width: 38rem) { .lesson-shell { width: min(100% - var(--space-4), 76rem); padding: var(--space-5) 0; } .reading-card, .detail-panel, .rules-panel, .dictionary-section { padding: var(--space-4); } .section-heading, .dictionary-heading { gap: var(--space-3); } .word-count { display: none; } .pronunciation-grid { grid-template-columns: 1fr; } }
.rules-panel:fullscreen, .reading-card:fullscreen { border-radius: 0; box-shadow: none; height: 100%; margin: 0; max-width: none; overflow: hidden; padding: var(--space-6); width: 100%; }
.rules-panel:fullscreen { display: flex; flex-direction: column; }
.rules-panel:fullscreen .rules-scroll { overflow-y: auto; }
.reading-card:fullscreen { display: flex; flex-direction: column; }
.reading-card:fullscreen .reading-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-2) var(--space-2) 0; scroll-padding: var(--space-4); }