Weather Dial is a SvelteKit weather web application that displays information in a circular barplot. It is currently a demo that does not fetch real data from any API.
View the production website or learn more about the projectβs design.
Weahter Dial is built using SvelteKit and styled with Dart Sass. The production site is deployed using Vercel.
Commit messages are prefixed with the following labels to make them easier to read:
This repository is separated into the designs, src, and static folders, along with a few top-level files. Top-level files such as this README.md
file are usually configuration or documentation files.
designs
βββ WeatherDial-GitHub-banner.png GitHub banner image
βββ WeatherDial-GitHub-mockup.jpg GitHub mockup image
βββ WeatherDial-GitHub-socialPreview.png GitHub social preview image
βββ MachinistsEdge-UIconcepts-1.ai Illustrator file with all assets (v1)
βββ MachinistsEdge-UIconcepts-2.ai Illustrator file with all assets (v2)
src
βββ lib libaray of all Svelte components
β βββ SVGs all illustration and icon SVGs
β
βββ routes all Svelte file for different pages of the web app
β βββ cloud
β β βββ +page.svelte Cloud Cover page
β β
β βββ humidity
β β βββ +page.svelte Humidity page
β β
β βββ precipitation
β β βββ +page.svelte Precipitation page
β β
β βββ uv
β β βββ +page.svelte UV Index page
β β
β βββ wind
β β βββ +page.svelte Wind Speed page
β β
β βββ +layout.svelte layout file (applied to all pages)
β βββ +layout.ts layout load file
β βββ +page.svelte Temperature page
β
βββ store
β βββ store.ts Svelte stores (state management)
β
βββ styles global styling
β βββ _colors.scss sass map with all colors
β βββ _global.scss global styles
β βββ _index.scss fowards all partial SCSS files in this folder
β βββ _resets.scss style resets
β βββ _variables.scss CSS & SCSS variables
β
βββ app.html main HTML
static
βββ light-barBG.png transparent gradient background for circular barplot
βββ favicon.png favicon