felipe/clima-cuida-care-weather
1
0
Fork 0
mirror of https://github.com/domfelipe/clima-cuida-care-weather.git synced 2026-08-07 06:16:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix responsive dashboard layout

Browse source
This commit is contained in:
Felipe Domingues 2026-05-20 19:30:41 -03:00
parent c490b175e1
commit 9b57320ff2
2 changed files with 30 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -7,3 +7,4 @@ coverage
*.tsbuildinfo *.tsbuildinfo
vite.config.js vite.config.js
vite.config.d.ts vite.config.d.ts
tmp-screens

30
src/styles.css
View file

@ -35,6 +35,7 @@ html {
body { body {
min-width: 320px; min-width: 320px;
margin: 0; margin: 0;
overflow-x: clip;
background: background:
linear-gradient(180deg, oklch(96% 0.017 174) 0, var(--bg) 360px), linear-gradient(180deg, oklch(96% 0.017 174) 0, var(--bg) 360px),
var(--bg); var(--bg);
@ -259,7 +260,9 @@ a {
} }
.profile-options label { .profile-options label {
position: relative;
display: inline-flex; display: inline-flex;
flex: 0 0 auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 38px; min-height: 38px;
@ -284,6 +287,10 @@ a {
.profile-options input { .profile-options input {
position: absolute; position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0; opacity: 0;
} }
@ -323,11 +330,13 @@ a {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 18px; gap: 18px;
min-width: 0;
} }
.primary-column, .primary-column,
.secondary-column { .secondary-column {
display: grid; display: grid;
min-width: 0;
gap: 18px; gap: 18px;
align-content: start; align-content: start;
} }
@ -347,6 +356,7 @@ a {
.semaforo-panel { .semaforo-panel {
--risk-color: var(--green); --risk-color: var(--green);
display: grid; display: grid;
min-width: 0;
gap: 24px; gap: 24px;
padding: clamp(20px, 4vw, 34px); padding: clamp(20px, 4vw, 34px);
overflow: hidden; overflow: hidden;
@ -386,6 +396,11 @@ a {
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
gap: clamp(18px, 4vw, 30px); gap: clamp(18px, 4vw, 30px);
align-items: center; align-items: center;
min-width: 0;
}
.semaforo-content > div {
min-width: 0;
} }
.risk-orb { .risk-orb {
@ -411,9 +426,10 @@ a {
.semaforo-content h1 { .semaforo-content h1 {
margin: 4px 0 0; margin: 4px 0 0;
font-family: var(--font-display); font-family: var(--font-display);
font-size: clamp(3.6rem, 13vw, 7.5rem); font-size: clamp(3.25rem, 8vw, 6.4rem);
line-height: 0.86; line-height: 0.86;
letter-spacing: 0; letter-spacing: 0;
overflow-wrap: anywhere;
} }
.risk-label { .risk-label {
@ -532,6 +548,7 @@ a {
.timeline-panel, .timeline-panel,
.forecast-panel, .forecast-panel,
.why-panel { .why-panel {
min-width: 0;
padding: clamp(18px, 3vw, 24px); padding: clamp(18px, 3vw, 24px);
} }
@ -577,7 +594,9 @@ a {
grid-auto-columns: minmax(172px, 1fr); grid-auto-columns: minmax(172px, 1fr);
grid-auto-flow: column; grid-auto-flow: column;
gap: 10px; gap: 10px;
max-width: 100%;
overflow-x: auto; overflow-x: auto;
overscroll-behavior-inline: contain;
padding-bottom: 4px; padding-bottom: 4px;
scroll-snap-type: x proximity; scroll-snap-type: x proximity;
} }
@ -883,6 +902,15 @@ a {
align-items: start; align-items: start;
} }
.secondary-column .forecast-day {
grid-template-columns: minmax(0, 1fr) auto;
}
.secondary-column .forecast-day dl {
grid-column: 1 / -1;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.semaforo-panel { .semaforo-panel {
min-height: 438px; min-height: 438px;
} }