ZachariahSharma/Simulation-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fit simulation header to reference width

Browse Source
This commit is contained in:
Zachariah K. Sharma
2026-06-21 19:47:13 -06:00
parent 09fd1512a6
commit 47f1ccf0a2
1 changed files with 16 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.css
+16 -23
View File
@@ -25,8 +25,8 @@
position: relative; position: relative;
z-index: 5; z-index: 5;
display: grid; display: grid;
grid-template-columns: 170px minmax(280px, 1fr) 170px auto; grid-template-columns: 150px minmax(220px, 1fr) 150px auto;
gap: 24px; gap: 18px;
align-items: center; align-items: center;
max-width: 1024px; max-width: 1024px;
margin: 0 auto 20px; margin: 0 auto 20px;
@@ -40,7 +40,7 @@
} }
.reference-brand img { .reference-brand img {
width: min(158px, 100%); width: min(146px, 100%);
height: auto; height: auto;
object-fit: contain; object-fit: contain;
mix-blend-mode: screen; mix-blend-mode: screen;
@@ -55,8 +55,8 @@
.temperature-control { .temperature-control {
display: grid; display: grid;
grid-template-columns: minmax(180px, 250px) auto; grid-template-columns: minmax(150px, 210px) auto;
gap: 34px; gap: 24px;
align-items: center; align-items: center;
} }
@@ -108,7 +108,7 @@
.outside-temp strong { .outside-temp strong {
display: block; display: block;
font-size: 37px; font-size: 32px;
line-height: 1; line-height: 1;
font-weight: 500; font-weight: 500;
letter-spacing: -0.04em; letter-spacing: -0.04em;
@@ -131,16 +131,16 @@
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
min-height: 36px; min-height: 36px;
padding: 0 14px; padding: 0 11px;
font-size: 13px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
} }
.control-cluster { .control-cluster {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
gap: 18px; gap: 14px;
padding: 14px; padding: 10px;
border: 1px solid rgba(188, 218, 239, 0.22); border: 1px solid rgba(188, 218, 239, 0.22);
border-radius: 9px; border-radius: 9px;
background: linear-gradient(135deg, rgba(54, 69, 87, 0.88), rgba(36, 47, 63, 0.92)); background: linear-gradient(135deg, rgba(54, 69, 87, 0.88), rgba(36, 47, 63, 0.92));
@@ -149,13 +149,13 @@
.speed-buttons { .speed-buttons {
display: flex; display: flex;
gap: 7px; gap: 6px;
} }
.speed-buttons button { .speed-buttons button {
min-width: 42px; min-width: 36px;
height: 38px; height: 32px;
font-size: 18px; font-size: 15px;
} }
.speed-buttons button.active { .speed-buttons button.active {
@@ -165,7 +165,7 @@
} }
.time-card { .time-card {
padding-left: 20px; padding-left: 14px;
border-left: 1px solid rgba(210, 231, 247, 0.17); border-left: 1px solid rgba(210, 231, 247, 0.17);
} }
@@ -173,7 +173,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 9px; gap: 9px;
font-size: 21px; font-size: 18px;
font-weight: 500; font-weight: 500;
} }
@@ -312,13 +312,6 @@
.vent { .vent {
position: absolute; position: absolute;
z-index: 1;
border-radius: 5px;
background: rgba(200, 218, 230, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.22);
}
.vent {
z-index: 3; z-index: 3;
width: 9%; width: 9%;
height: 2%; height: 2%;