fix: improve abacus sizing across all components with CSS transforms
- Add 2.2x scale to single-digit abaci in guide page for better visibility - Add 1.8x scale to multi-digit abaci in guide page - Add 2.5x scale to arithmetic example abaci in guide page - Add 1.8x scale to live preview abaci with proper overflow handling - Add 2.0x scale to main display abaci in memory quiz - Add 2.8x scale to results grid abaci in memory quiz - Ensure all abaci are proportional to their containers instead of tiny specs 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
@@ -346,7 +346,7 @@
|
||||
background: var(--colors-red-700)
|
||||
}
|
||||
@media screen and (min-width: 64em) {
|
||||
.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\),.lg\:grid-cols_repeat\(3\,_minmax\(0\,_1fr\)\) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr))
|
||||
}
|
||||
|
||||
|
||||
@@ -1,161 +1,5 @@
|
||||
@layer utilities {
|
||||
|
||||
.min-h_100vh {
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.top_-20px {
|
||||
top: -20px
|
||||
}
|
||||
|
||||
.right_20px {
|
||||
right: 20px
|
||||
}
|
||||
|
||||
.w_min\(85vw\,_700px\) {
|
||||
width: min(85vw, 700px)
|
||||
}
|
||||
|
||||
.h_min\(50vh\,_400px\) {
|
||||
height: min(50vh, 400px)
|
||||
}
|
||||
|
||||
.mt_32px {
|
||||
margin-top: 32px
|
||||
}
|
||||
|
||||
.h_180px {
|
||||
height: 180px
|
||||
}
|
||||
|
||||
.m_40px_0 {
|
||||
margin: 40px 0
|
||||
}
|
||||
|
||||
.mb_15px {
|
||||
margin-bottom: 15px
|
||||
}
|
||||
|
||||
.font_normal {
|
||||
font-weight: var(--font-weights-normal)
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#f8f9fa\,_\#e9ecef\) {
|
||||
background: linear-gradient(135deg, #f8f9fa, #e9ecef)
|
||||
}
|
||||
|
||||
.border_2px_solid_\#6c757d {
|
||||
border: 2px solid #6c757d
|
||||
}
|
||||
|
||||
.border_3px_solid_\#adb5bd {
|
||||
border: 3px solid #adb5bd
|
||||
}
|
||||
|
||||
.border_2px_solid_\#dc3545 {
|
||||
border: 2px solid #dc3545
|
||||
}
|
||||
|
||||
.border_2px_solid_\#28a745 {
|
||||
border: 2px solid #28a745
|
||||
}
|
||||
|
||||
.shadow_0_0_20px_rgba\(220\,_53\,_69\,_0\.3\) {
|
||||
box-shadow: 0 0 20px rgba(220, 53, 69, 0.3)
|
||||
}
|
||||
|
||||
.shadow_0_4px_6px_rgba\(0\,_0\,_0\,_0\.1\) {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.shadow_0_0_20px_rgba\(40\,_167\,_69\,_0\.3\) {
|
||||
box-shadow: 0 0 20px rgba(40, 167, 69, 0.3)
|
||||
}
|
||||
|
||||
.cursor_default {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.min-h_80px {
|
||||
min-height: 80px
|
||||
}
|
||||
|
||||
.p_24px {
|
||||
padding: 24px
|
||||
}
|
||||
|
||||
.fs_36px {
|
||||
font-size: 36px
|
||||
}
|
||||
|
||||
.font_Courier_New\,_Monaco\,_monospace {
|
||||
font-family: Courier New, Monaco, monospace
|
||||
}
|
||||
|
||||
.tracking_4px {
|
||||
letter-spacing: 4px
|
||||
}
|
||||
|
||||
.p_15px {
|
||||
padding: 15px
|
||||
}
|
||||
|
||||
.rounded_20px {
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.p_40px_20px {
|
||||
padding: 40px 20px
|
||||
}
|
||||
|
||||
.max-w_700px {
|
||||
max-width: 700px
|
||||
}
|
||||
|
||||
.max-w_6xl {
|
||||
max-width: var(--sizes-6xl)
|
||||
}
|
||||
|
||||
.px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.mb_6 {
|
||||
margin-bottom: var(--spacing-6)
|
||||
}
|
||||
|
||||
.w_120 {
|
||||
width: 120px
|
||||
}
|
||||
|
||||
.h_160 {
|
||||
height: 160px
|
||||
}
|
||||
|
||||
.gap_8px {
|
||||
gap: 8px
|
||||
}
|
||||
|
||||
.m_16px_0 {
|
||||
margin: 16px 0
|
||||
}
|
||||
|
||||
.min-h_40px {
|
||||
min-height: 40px
|
||||
}
|
||||
|
||||
.p_10px {
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.p_6px_12px {
|
||||
padding: 6px 12px
|
||||
}
|
||||
|
||||
.animation_fadeInScale_0\.3s_ease {
|
||||
animation: fadeInScale 0.3s ease
|
||||
}
|
||||
|
||||
.max-w_600px {
|
||||
max-width: 600px
|
||||
}
|
||||
@@ -171,6 +15,9 @@
|
||||
.gap_4px {
|
||||
gap: 4px
|
||||
}
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.fs_11px {
|
||||
font-size: 11px
|
||||
@@ -187,6 +34,9 @@
|
||||
.border_gray\.300 {
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.border_2px_solid {
|
||||
border: 2px solid
|
||||
@@ -195,6 +45,9 @@
|
||||
.p_10px_20px {
|
||||
padding: 10px 20px
|
||||
}
|
||||
.hover\:border_blue\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-blue-400)
|
||||
}
|
||||
|
||||
.d_block {
|
||||
display: block
|
||||
@@ -263,6 +116,9 @@
|
||||
.transition_background_0\.2s_ease {
|
||||
transition: background 0.2s ease
|
||||
}
|
||||
.hover\:bg_red\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.text_green\.500 {
|
||||
color: var(--colors-green-500)
|
||||
@@ -605,6 +461,9 @@
|
||||
.bg_blue\.500 {
|
||||
background: var(--colors-blue-500)
|
||||
}
|
||||
.hover\:bg_blue\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.max-w_800px {
|
||||
max-width: 800px
|
||||
@@ -737,6 +596,9 @@
|
||||
.bg_green\.500 {
|
||||
background: var(--colors-green-500)
|
||||
}
|
||||
.hover\:bg_green\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.p_12px_24px {
|
||||
padding: 12px 24px
|
||||
@@ -773,6 +635,9 @@
|
||||
.text_white {
|
||||
color: var(--colors-white)
|
||||
}
|
||||
.hover\:bg_gray\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.min-h_screen {
|
||||
min-height: 100vh
|
||||
@@ -841,6 +706,9 @@
|
||||
.mb_4 {
|
||||
margin-bottom: var(--spacing-4)
|
||||
}
|
||||
.hover\:text_gray\.800:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
|
||||
.bg_white {
|
||||
background: var(--colors-white)
|
||||
@@ -886,64 +754,25 @@
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
.w_280 {
|
||||
width: 280px
|
||||
.w_280pt {
|
||||
width: 280pt
|
||||
}
|
||||
|
||||
.h_360 {
|
||||
height: 360px
|
||||
.h_360pt {
|
||||
height: 360pt
|
||||
}
|
||||
|
||||
.w_100 {
|
||||
width: 100px
|
||||
.w_100pt {
|
||||
width: 100pt
|
||||
}
|
||||
|
||||
.h_130 {
|
||||
height: 130px
|
||||
.h_130pt {
|
||||
height: 130pt
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
|
||||
.hover\:transform_translateY\(-1px\):is(:hover, [data-hover]) {
|
||||
transform: translateY(-1px)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.50:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-50)
|
||||
}
|
||||
|
||||
.hover\:border_blue\.400:is(:hover, [data-hover]) {
|
||||
border-color: var(--colors-blue-400)
|
||||
}
|
||||
|
||||
.hover\:bg_red\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-red-600)
|
||||
}
|
||||
|
||||
.hover\:bg_blue\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-blue-600)
|
||||
}
|
||||
|
||||
.hover\:bg_green\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-green-600)
|
||||
}
|
||||
|
||||
.hover\:bg_gray\.600:is(:hover, [data-hover]) {
|
||||
background: var(--colors-gray-600)
|
||||
}
|
||||
|
||||
.hover\:text_gray\.800:is(:hover, [data-hover]) {
|
||||
color: var(--colors-gray-800)
|
||||
}
|
||||
@media screen and (min-width: 48em) {
|
||||
.md\:px_4,.md\:px_4,.md\:px_4,.md\:px_4,.md\:px_4,.md\:px_4,.md\:px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
|
||||
.md\:px_6 {
|
||||
padding-inline: var(--spacing-6)
|
||||
.md\:px_4 {
|
||||
padding-inline: var(--spacing-4)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -40,6 +40,46 @@
|
||||
gap: var(--spacing-3)
|
||||
}
|
||||
|
||||
.w_120 {
|
||||
width: 120px
|
||||
}
|
||||
|
||||
.h_336 {
|
||||
height: 336px
|
||||
}
|
||||
|
||||
.w_180 {
|
||||
width: 180px
|
||||
}
|
||||
|
||||
.h_240 {
|
||||
height: 240px
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
}
|
||||
|
||||
.w_80 {
|
||||
width: var(--sizes-80)
|
||||
}
|
||||
|
||||
.h_120 {
|
||||
height: 120px
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
}
|
||||
|
||||
.\[\&_svg\]\:object_contain svg {
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.bg_linear-gradient\(135deg\,_\#667eea_0\%\,_\#764ba2_100\%\) {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
|
||||
}
|
||||
@@ -152,6 +192,10 @@
|
||||
border-color: var(--colors-gray-300)
|
||||
}
|
||||
|
||||
.transform_scale\(2\.2\) {
|
||||
transform: scale(2.2)
|
||||
}
|
||||
|
||||
.fs_2xs {
|
||||
font-size: var(--font-sizes-2xs)
|
||||
}
|
||||
@@ -212,12 +256,8 @@
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.w_full {
|
||||
width: var(--sizes-full)
|
||||
}
|
||||
|
||||
.h_full {
|
||||
height: var(--sizes-full)
|
||||
.transform_scale\(1\.8\) {
|
||||
transform: scale(1.8)
|
||||
}
|
||||
.\[\&_svg\]\:w_100\% svg {
|
||||
width: 100%
|
||||
@@ -225,8 +265,8 @@
|
||||
.\[\&_svg\]\:h_100\% svg {
|
||||
height: 100%
|
||||
}
|
||||
.\[\&_svg\]\:object_contain svg {
|
||||
object-fit: contain
|
||||
.\[\&_svg\]\:d_block svg {
|
||||
display: block
|
||||
}
|
||||
|
||||
.fs_xs {
|
||||
@@ -353,6 +393,14 @@
|
||||
color: var(--colors-red-700)
|
||||
}
|
||||
|
||||
.transform_scale\(2\.5\) {
|
||||
transform: scale(2.5)
|
||||
}
|
||||
|
||||
.origin_center {
|
||||
transform-origin: center
|
||||
}
|
||||
|
||||
.shadow_sm {
|
||||
box-shadow: var(--shadows-sm)
|
||||
}
|
||||
@@ -515,32 +563,28 @@
|
||||
transition-duration: var(--transition-duration, 150ms)
|
||||
}
|
||||
|
||||
.w_120 {
|
||||
width: 120px
|
||||
.w_120pt {
|
||||
width: 120pt
|
||||
}
|
||||
|
||||
.h_336 {
|
||||
height: 336px
|
||||
.h_200pt {
|
||||
height: 200pt
|
||||
}
|
||||
|
||||
.w_180 {
|
||||
width: 180px
|
||||
.w_180pt {
|
||||
width: 180pt
|
||||
}
|
||||
|
||||
.h_240 {
|
||||
height: 240px
|
||||
.h_240pt {
|
||||
height: 240pt
|
||||
}
|
||||
|
||||
.color-scheme_place-value {
|
||||
color-scheme: place-value
|
||||
.w_80pt {
|
||||
width: 80pt
|
||||
}
|
||||
|
||||
.w_80 {
|
||||
width: var(--sizes-80)
|
||||
}
|
||||
|
||||
.h_120 {
|
||||
height: 120px
|
||||
.h_120pt {
|
||||
height: 120pt
|
||||
}
|
||||
|
||||
.max-w_4xl {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user