98 lines
2.1 KiB
CSS
98 lines
2.1 KiB
CSS
#clock {
|
|
font-size: 2em;
|
|
padding-top: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.frosted {
|
|
backdrop-filter: blur(16px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
|
background-color: rgba(78, 86, 106, 0.75);
|
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
|
}
|
|
|
|
.page-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1.4fr 0.6fr;
|
|
gap: 2em 0em;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
"currentForecast"
|
|
"hourlyReport"
|
|
"weeklyReport";
|
|
max-width: 72em;
|
|
margin: 0 auto;
|
|
padding: 1.5em 0 2.5em;
|
|
}
|
|
|
|
.currentForecast {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
gap: 0px 0px;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
"forecast secondaryInfo";
|
|
grid-area: currentForecast;
|
|
}
|
|
|
|
.forecast {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: repeat(3, max-content);
|
|
gap: 0px 0px;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
"shortDescription"
|
|
"longDescription"
|
|
"currentTemp"
|
|
"waterConditions";
|
|
grid-area: forecast;
|
|
}
|
|
|
|
.shortDescription {
|
|
font-size: 3em;
|
|
grid-area: shortDescription;
|
|
}
|
|
|
|
.longDescription {
|
|
font-size: 1.35em;
|
|
grid-area: longDescription;
|
|
}
|
|
|
|
.currentTemp { grid-area: currentTemp; }
|
|
.currentTemp > .temperature { font-size: 6em; }
|
|
.currentTemp > .unit { font-size: 2em; }
|
|
|
|
.waterConditions { grid-area: waterConditions; }
|
|
|
|
.secondaryInfo {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 2em 0;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
"windContainer"
|
|
"solarClock";
|
|
grid-area: secondaryInfo;
|
|
}
|
|
|
|
.windContainer { grid-area: windContainer; }
|
|
|
|
.solarClock { grid-area: solarClock; }
|
|
|
|
.hourlyReport { grid-area: hourlyReport; }
|
|
|
|
.weeklyReport {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
gap: 0px 0px;
|
|
grid-auto-flow: row;
|
|
grid-template-areas:
|
|
". . . . . .";
|
|
grid-area: weeklyReport;
|
|
}
|