Replace home symbols with Lucide icons

This commit is contained in:
b0txec
2026-08-19 11:31:49 +03:00
parent 6ee62a5ce0
commit a5b8aa651c
3 changed files with 11 additions and 9 deletions
+1
View File
@@ -20,6 +20,7 @@
"@solidjs/router": "^0.15.2", "@solidjs/router": "^0.15.2",
"chart.js": "^4.4.1", "chart.js": "^4.4.1",
"jszip": "^3.10.1", "jszip": "^3.10.1",
"lucide-solid": "^1.32.0",
"moment": "^2.30.1", "moment": "^2.30.1",
"solid-js": "^1.9.4" "solid-js": "^1.9.4"
} }
+9 -8
View File
@@ -1,13 +1,14 @@
import { A } from '@solidjs/router' import { A } from '@solidjs/router'
import { Archive, BarChart3, CloudSun, Database, Map, RadioTower, Wind } from 'lucide-solid'
import './home.css' import './home.css'
const tools = [ const tools = [
['/station','Stations','Recent measurements and station charts.','◉'], {path:'/station', title:'Stations', description:'Recent measurements and station charts.', icon:RadioTower},
['/cities','City analysis','Compare values and prepare temperature maps.','▦'], {path:'/cities', title:'City analysis', description:'Compare values and prepare temperature maps.', icon:BarChart3},
['/faktiska','Faktiskā','Temperatures and weather symbols for daily production.','▣'], {path:'/faktiska', title:'Faktiskā', description:'Temperatures and weather symbols for daily production.', icon:CloudSun},
['/latvia','Latvia overview','Country-wide weather summaries.','⌁'], {path:'/latvia', title:'Latvia overview', description:'Country-wide weather summaries.', icon:Map},
['/database','Data archive','Browse dates and stored observations.','▤'], {path:'/database', title:'Data archive', description:'Browse dates and stored observations.', icon:Archive},
['/harmonie','HARMONIE','Render locally stored forecast fields.','◫'], {path:'/harmonie', title:'HARMONIE', description:'Render locally stored forecast fields.', icon:Wind},
['/lvgmc-forecast','LVĢMC forecast','Prepared city forecasts and broadcast tables.','☁'], {path:'/lvgmc-forecast', title:'LVĢMC forecast', description:'Prepared city forecasts and broadcast tables.', icon:Database},
] ]
export function Home() { return <section class="homePage"><div class="homeHero"><div><p class="eyebrow">Weather data and production tools</p><h1>Choose a workspace</h1><p class="heroCopy">Analysis, forecasts and newsroom graphics.</p></div><div class="environmentBadge"><span class="statusDot"/>Development dataset<small>Synthetic observations</small></div></div><div class="toolGrid">{tools.map(([path,title,description,icon]) => <A class="toolCard" href={path}><span class="toolIcon">{icon}</span><div class="toolCardCopy"><h2>{title}</h2><p>{description}</p></div><span class="cardArrow"></span></A>)}</div></section> } export function Home() { return <section class="homePage"><div class="homeHero"><div><p class="eyebrow">Weather data and production tools</p><h1>Choose a workspace</h1><p class="heroCopy">Analysis, forecasts and newsroom graphics.</p></div><div class="environmentBadge"><span class="statusDot"/>Development dataset<small>Synthetic observations</small></div></div><div class="toolGrid">{tools.map(tool => <A class="toolCard" href={tool.path}><span class="toolIcon"><tool.icon size={64} strokeWidth={1.65}/></span><div class="toolCardCopy"><h2>{tool.title}</h2><p>{tool.description}</p></div><span class="cardArrow"></span></A>)}</div></section> }
+1 -1
View File
@@ -9,7 +9,7 @@
.toolCard:nth-child(3n):before{clip-path:polygon(0 10%,72% 1%,100% 17%,100% 100%,0 100%);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(217,241,250,.78))} .toolCard:nth-child(3n):before{clip-path:polygon(0 10%,72% 1%,100% 17%,100% 100%,0 100%);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(217,241,250,.78))}
.toolCard:hover{transform:translateY(-7px);filter:drop-shadow(0 20px 27px rgba(30,77,132,.17))}.toolCard:hover:after{transform:scale(1.2)}.toolCard:active{transform:translateY(-1px);filter:drop-shadow(0 9px 14px rgba(30,77,132,.1))} .toolCard:hover{transform:translateY(-7px);filter:drop-shadow(0 20px 27px rgba(30,77,132,.17))}.toolCard:hover:after{transform:scale(1.2)}.toolCard:active{transform:translateY(-1px);filter:drop-shadow(0 9px 14px rgba(30,77,132,.1))}
.toolCardCopy{align-self:flex-end;position:relative;z-index:1}.toolCard h2{margin:0 0 7px;font-size:clamp(27px,2.2vw,34px);letter-spacing:-.025em}.toolCard p{max-width:82%;margin:0;color:var(--text-muted);font-size:13px;line-height:1.45} .toolCardCopy{align-self:flex-end;position:relative;z-index:1}.toolCard h2{margin:0 0 7px;font-size:clamp(27px,2.2vw,34px);letter-spacing:-.025em}.toolCard p{max-width:82%;margin:0;color:var(--text-muted);font-size:13px;line-height:1.45}
.toolIcon{position:absolute;z-index:2;top:-9px;right:34px;color:var(--accent);font-size:58px;line-height:1;text-shadow:0 8px 16px rgba(31,93,169,.2);transform:rotate(2deg);transition:transform 280ms cubic-bezier(.23,1,.32,1)}.toolCard:nth-child(even) .toolIcon{top:-5px;right:42px;transform:rotate(-3deg)}.toolCard:hover .toolIcon{transform:translateY(-4px) rotate(0) scale(1.06)} .toolIcon{position:absolute;z-index:2;top:-9px;right:34px;display:block;width:64px;height:64px;color:var(--accent);filter:drop-shadow(0 8px 8px rgba(31,93,169,.2));transform:rotate(2deg);transition:transform 280ms cubic-bezier(.23,1,.32,1)}.toolIcon svg{display:block;width:100%;height:100%}.toolCard:nth-child(even) .toolIcon{top:-5px;right:42px;transform:rotate(-3deg)}.toolCard:hover .toolIcon{transform:translateY(-4px) rotate(0) scale(1.06)}
.cardArrow{position:absolute;right:25px;bottom:22px;color:var(--accent-strong);font-size:22px;font-weight:700;transition:transform 200ms}.toolCard:hover .cardArrow{transform:translateX(4px)} .cardArrow{position:absolute;right:25px;bottom:22px;color:var(--accent-strong);font-size:22px;font-weight:700;transition:transform 200ms}.toolCard:hover .cardArrow{transform:translateX(4px)}
@media(max-width:960px){.toolGrid{grid-template-columns:repeat(2,1fr)}.homeHero{align-items:start;flex-direction:column}.toolCard:nth-child(n):before{clip-path:polygon(0 12%,68% 0,100% 15%,100% 100%,0 100%)}} @media(max-width:960px){.toolGrid{grid-template-columns:repeat(2,1fr)}.homeHero{align-items:start;flex-direction:column}.toolCard:nth-child(n):before{clip-path:polygon(0 12%,68% 0,100% 15%,100% 100%,0 100%)}}
@media(max-width:640px){.homePage{padding:36px 18px}.toolGrid{grid-template-columns:1fr;row-gap:34px}} @media(max-width:640px){.homePage{padding:36px 18px}.toolGrid{grid-template-columns:1fr;row-gap:34px}}