moving to use weather as landing page

This commit is contained in:
2026-01-09 13:47:56 -07:00
parent 12bad4a437
commit 4f560c6df7
4 changed files with 89 additions and 13 deletions

View File

@@ -6,3 +6,66 @@
@theme inline {
--font-sans: Instrument Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
.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"
"weeklyReport";
}
.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: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"shortDescription"
"longDescription"
"currentTemp";
grid-area: forecast;
}
.shortDescription { grid-area: shortDescription; }
.longDescription { grid-area: longDescription; }
.currentTemp { grid-area: currentTemp; }
.secondaryInfo { display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"windContainer"
"solarClock";
grid-area: secondaryInfo;
}
.windContainer { grid-area: windContainer; }
.solarClock { grid-area: solarClock; }
.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;
}

View File

@@ -0,0 +1,25 @@
<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
</script>
<template>
<Head title="Weather">
</Head>
<div class="grid min-h-screen p-6 lg:p-8">
<div class="page-container">
<div class="currentForecast">
<div class="forecast">
<div class="shortDescription"></div>
<div class="longDescription"></div>
<div class="currentTemp"></div>
</div>
<div class="secondaryInfo">
<div class="windContainer"></div>
<div class="solarClock"></div>
</div>
</div>
<div class="weeklyReport"></div>
</div>
</div>
</template>

View File

@@ -1,12 +0,0 @@
<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
</script>
<template>
<Head title="Weather">
</Head>
<div class="grid min-h-screen p-6 lg:p-8">
</div>
</template>