Enable much larger task images - almost fill the window

Enhanced image scaling for maximum visual impact:

##  Massive Image Scaling Upgrade:

### Dramatically Increased Size Limits:
- **Base Size**: Now 70vh height (was 45vh), 90vw width (was 85vw)
- **Ultra-wide Screens**: Up to 1500px wide, 1000px tall (was 900x700)
- **Large Screens**: Up to 1200px wide, 800px tall (was 700x550)
- **Medium Screens**: Up to 800px wide, 600px tall (was 500x400)
- **Small Screens**: Up to 500px wide, 400px tall (was 400x300)

### Window Size Optimizations:
- **window-xl**: 80vh height, 85vw width - nearly full screen
- **window-large**: 75vh height, 88vw width - most of the screen
- **window-medium**: 65vh height, 90vw width - large portion
- **window-small**: 55vh height, 95vw width - efficient use of space

### Enhanced Container Support:
- Container max-height increased to 85vh (was 70vh)
- Better vertical space utilization
- Full width containers for optimal centering
- Dynamic minimum heights scale with window size

### Responsive Breakpoint Updates:
- **1400px+**: 75vh max height, 85vw width - huge images
- **1000-1399px**: 65vh max height, 88vw width - very large
- **800-999px**: 55vh max height, 92vw width - substantial size
- **<800px**: 50vh max height, 95vw width - fills small windows

##  User Experience:
- **Immersive Viewing**: Images now dominate the screen appropriately
- **Better Detail Visibility**: Much easier to see image details
- **Scalable Impact**: Larger windows = dramatically larger images
- **Maintains Quality**: Aspect ratios and sharpness preserved
- **Space Efficient**: Takes full advantage of available screen real estate

**Images now fill most of the window for maximum visual impact! **
This commit is contained in:
fritzsenpai 2025-09-26 05:16:23 -05:00
parent 5af7d449e5
commit 6963250361
1 changed files with 29 additions and 27 deletions

View File

@ -738,13 +738,14 @@ body {
justify-content: center;
align-items: center;
min-height: max(200px, 25vh); /* Dynamic minimum height based on viewport */
max-height: 70vh; /* Don't take up more than 70% of viewport height */
max-height: 85vh; /* Allow container to take up most of screen */
width: 100%; /* Full width for centering */
}
.task-image {
/* Hybrid responsive sizing - scales with viewport but has reasonable limits */
max-width: min(85vw, 700px); /* 85% of viewport width, capped at 700px */
max-height: min(45vh, 500px); /* 45% of viewport height, capped at 500px */
max-width: min(90vw, 1200px); /* 90% of viewport width, capped at 1200px */
max-height: min(70vh, 800px); /* 70% of viewport height, capped at 800px */
min-height: max(200px, 20vh); /* Minimum 200px or 20% of viewport height */
min-width: 250px; /* Prevent images from being too narrow */
@ -1879,36 +1880,37 @@ body.theme-monochrome {
/* Ensure game screen task display scales well */
@media (min-width: 1400px) {
.task-display {
max-width: 700px;
max-width: 900px;
margin: 0 auto;
}
.task-image {
max-height: min(40vh, 600px); /* Larger images on very large screens */
max-width: min(80vw, 800px); /* Can be wider on large screens */
max-height: min(75vh, 900px); /* Much larger images on very large screens */
max-width: min(85vw, 1400px); /* Can be much wider on large screens */
}
.task-image-container {
min-height: max(250px, 30vh); /* Taller container for larger images */
min-height: max(300px, 35vh); /* Taller container for larger images */
}
}
@media (min-width: 1000px) and (max-width: 1399px) {
.task-display {
max-width: 600px;
max-width: 700px;
margin: 0 auto;
}
.task-image {
max-height: min(45vh, 500px); /* Standard size for medium-large screens */
max-height: min(65vh, 700px); /* Bigger images for medium-large screens */
max-width: min(88vw, 1000px); /* More width utilization */
}
}
/* Compact sizing for smaller windows */
@media (max-width: 999px) {
.task-image {
max-height: min(35vh, 400px); /* Smaller images on compact screens */
max-width: min(90vw, 500px); /* Take up more width percentage */
max-height: min(55vh, 500px); /* Still quite large on compact screens */
max-width: min(92vw, 600px); /* Take up most of the width */
min-height: max(180px, 18vh); /* Smaller minimum height */
}
@ -1918,11 +1920,11 @@ body.theme-monochrome {
}
}
/* Very small windows - mobile-like experience */
/* Very small windows - still allow decent image size */
@media (max-width: 800px) {
.task-image {
max-height: min(30vh, 300px); /* Even smaller for very compact windows */
max-width: min(95vw, 400px); /* Nearly full width */
max-height: min(50vh, 400px); /* Half the viewport height on small windows */
max-width: min(95vw, 500px); /* Nearly full width */
min-height: max(150px, 15vh); /* Smaller minimum */
min-width: 200px; /* Smaller minimum width */
}
@ -1950,27 +1952,27 @@ body.theme-monochrome {
/* Extra fine-tuning based on JavaScript window size detection */
.game-container.window-xl .task-image {
max-width: min(75vw, 900px);
max-height: min(50vh, 700px);
min-height: max(300px, 25vh);
max-width: min(85vw, 1500px); /* Huge images on ultra-wide screens */
max-height: min(80vh, 1000px); /* Take up most of the vertical space */
min-height: max(400px, 30vh); /* Large minimum size */
}
.game-container.window-large .task-image {
max-width: min(80vw, 700px);
max-height: min(45vh, 550px);
min-height: max(250px, 22vh);
max-width: min(88vw, 1200px); /* Very large images */
max-height: min(75vh, 800px); /* Most of the screen height */
min-height: max(300px, 25vh); /* Good minimum size */
}
.game-container.window-medium .task-image {
max-width: min(85vw, 500px);
max-height: min(40vh, 400px);
min-height: max(200px, 20vh);
max-width: min(90vw, 800px); /* Large images on medium screens */
max-height: min(65vh, 600px); /* Good portion of screen height */
min-height: max(250px, 22vh); /* Reasonable minimum */
}
.game-container.window-small .task-image {
max-width: min(95vw, 400px);
max-height: min(35vh, 300px);
min-height: max(150px, 18vh);
max-width: min(95vw, 500px); /* Nearly full width on small screens */
max-height: min(55vh, 400px); /* More than half the screen height */
min-height: max(200px, 20vh); /* Decent minimum size */
min-width: 180px;
}