moving to use weather as landing page
This commit is contained in:
@@ -6,3 +6,66 @@
|
|||||||
@theme inline {
|
@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';
|
--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;
|
||||||
|
}
|
||||||
|
|||||||
25
resources/js/pages/Weather.vue
Normal file
25
resources/js/pages/Weather.vue
Normal 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>
|
||||||
@@ -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>
|
|
||||||
@@ -4,5 +4,5 @@ use Illuminate\Support\Facades\Route;
|
|||||||
use Inertia\Inertia;
|
use Inertia\Inertia;
|
||||||
|
|
||||||
Route::get('/', function () {
|
Route::get('/', function () {
|
||||||
return Inertia::render('Welcome');
|
return Inertia::render('Weather');
|
||||||
})->name('home');
|
})->name('home');
|
||||||
|
|||||||
Reference in New Issue
Block a user