69 lines
1.5 KiB
CSS
69 lines
1.5 KiB
CSS
/* Page layout. Mobile first: one column, then 2 and 3 columns as space allows. */
|
|
|
|
.topbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--gap);
|
|
padding: var(--gap) 1rem;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.topbar__title {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.topbar__controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.game {
|
|
display: grid;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-areas:
|
|
'stats'
|
|
'production'
|
|
'market'
|
|
'generators'
|
|
'upgrades';
|
|
}
|
|
|
|
.panel--stats { grid-area: stats; }
|
|
.panel--production { grid-area: production; }
|
|
.panel--market { grid-area: market; }
|
|
.panel--generators { grid-area: generators; }
|
|
.panel--upgrades { grid-area: upgrades; }
|
|
|
|
/* Tablet */
|
|
@media (min-width: 760px) {
|
|
.game {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-template-areas:
|
|
'stats stats'
|
|
'production market'
|
|
'generators upgrades';
|
|
align-items: start;
|
|
}
|
|
}
|
|
|
|
/* Desktop */
|
|
@media (min-width: 1200px) {
|
|
.game {
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
|
|
grid-template-rows: auto auto 1fr; /* spare height goes below the left column, not between its panels */
|
|
grid-template-areas:
|
|
'stats stats stats'
|
|
'production generators upgrades'
|
|
'market generators upgrades';
|
|
}
|
|
}
|