mirror of
https://github.com/furyhawk/bus_sg_app.git
synced 2026-07-20 09:47:58 +00:00
feat: update styles for improved layout and add favicon
This commit is contained in:
+39
-4
@@ -40,13 +40,13 @@ body {
|
||||
|
||||
.app-shell {
|
||||
width: min(1100px, calc(100% - 2rem));
|
||||
margin: 2rem auto 3rem;
|
||||
margin: 1.05rem auto 2.2rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.4rem;
|
||||
animation: rise 420ms ease-out both;
|
||||
}
|
||||
|
||||
@@ -74,6 +74,8 @@ h1 {
|
||||
.subtitle {
|
||||
max-width: 60ch;
|
||||
color: var(--ink-soft);
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
@@ -99,6 +101,12 @@ h1 {
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.map-actions {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.arrivals-head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -193,16 +201,20 @@ button:hover {
|
||||
.map-wrap {
|
||||
position: relative;
|
||||
margin-bottom: 0.8rem;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.map-wrap .map-panel {
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.map-arrivals-overlay {
|
||||
position: absolute;
|
||||
right: 0.7rem;
|
||||
bottom: 0.7rem;
|
||||
z-index: 900;
|
||||
width: min(320px, calc(100% - 1.4rem));
|
||||
padding: 0.62rem 0.72rem;
|
||||
background: rgba(31, 26, 19, 0.84);
|
||||
@@ -278,7 +290,7 @@ button:hover {
|
||||
}
|
||||
|
||||
.map-hint {
|
||||
margin: 0 0 0.8rem;
|
||||
margin: 0 0 0.55rem;
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
@@ -444,10 +456,27 @@ button:hover {
|
||||
|
||||
.app-shell {
|
||||
width: min(1100px, calc(100% - 1rem));
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.45rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.kicker {
|
||||
font-size: 0.66rem;
|
||||
letter-spacing: 0.13em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(1.45rem, 7vw, 1.9rem);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stop-meta,
|
||||
.arrivals-actions,
|
||||
.nearby-list {
|
||||
@@ -458,6 +487,12 @@ button:hover {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.map-actions {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.location-head {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
@@ -442,7 +442,7 @@
|
||||
<header class="hero">
|
||||
<p class="kicker">Singapore Transit</p>
|
||||
<h1>Nearby Bus Arrivals</h1>
|
||||
<p class="subtitle">Map-driven view using your current location to detect the nearest bus stop.</p>
|
||||
<p class="subtitle">Map-first view using your location and taps to find nearby stops and live arrivals.</p>
|
||||
</header>
|
||||
|
||||
<section class="panel">
|
||||
@@ -451,13 +451,13 @@
|
||||
<h2>Live Map</h2>
|
||||
<p class="hint">{locationMessage}</p>
|
||||
</div>
|
||||
<button class="btn-ghost" type="button" on:click={() => resolveLocationAndNearestStop()} disabled={locating}>
|
||||
{locating ? "Locating..." : "Use Current Location"}
|
||||
</button>
|
||||
<div class="map-actions">
|
||||
<button class="btn-ghost" type="button" on:click={() => resolveLocationAndNearestStop()} disabled={locating}>
|
||||
{locating ? "Locating..." : "Use Current Location"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="map-hint">Tip: tap anywhere on the map to check the nearest stop and refresh arrivals around that point.</p>
|
||||
|
||||
<div class="map-wrap">
|
||||
<div class="map-panel" bind:this={mapContainer}></div>
|
||||
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Bus SG icon">
|
||||
<defs>
|
||||
<linearGradient id="busBody" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#f08a2d" />
|
||||
<stop offset="1" stop-color="#c54f14" />
|
||||
</linearGradient>
|
||||
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#fdf2dc" />
|
||||
<stop offset="1" stop-color="#f6e0be" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<rect x="6" y="6" width="116" height="116" rx="24" fill="url(#sky)" />
|
||||
<rect x="20" y="26" width="88" height="68" rx="14" fill="url(#busBody)" />
|
||||
<rect x="30" y="38" width="26" height="18" rx="4" fill="#ffe8c7" />
|
||||
<rect x="60" y="38" width="38" height="18" rx="4" fill="#ffe8c7" />
|
||||
<rect x="30" y="60" width="68" height="22" rx="4" fill="#8f3810" opacity="0.25" />
|
||||
<circle cx="42" cy="94" r="10" fill="#2a2118" />
|
||||
<circle cx="86" cy="94" r="10" fill="#2a2118" />
|
||||
<circle cx="42" cy="94" r="4" fill="#f0dbc0" />
|
||||
<circle cx="86" cy="94" r="4" fill="#f0dbc0" />
|
||||
<rect x="14" y="104" width="100" height="6" rx="3" fill="#c9a678" opacity="0.8" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Reference in New Issue
Block a user