diff --git a/src/lib/assets/global.css b/src/lib/assets/global.css
index dd525e1..6530c39 100644
--- a/src/lib/assets/global.css
+++ b/src/lib/assets/global.css
@@ -16,6 +16,18 @@
font-style: normal;
}
-[id] {
- scroll-margin-top: 100px;
+:root {
+ /* Brand Colours */
+ --color-brand: #4fd1d1;
+ --color-brand-light: #5af5f5;
+ --color-accent: #3c6f79;
+ --color-accent-light: #5094a2;
+ --color-title: #ebebeb;
+ --color-bg-light: #404c55;
+ --color-bg-dark: #2b343c;
+
+ /* Shadows */
+ --color-shadow: hsla(210, 20%, 5%, 0.35);
+ --shadow-std: 0 4px 12px var(--color-shadow);
+ --shadow-up: 0 -4px 12px var(--color-shadow);
}
diff --git a/src/lib/components/StationInfo.svelte b/src/lib/components/StationInfo.svelte
index 56f4971..1cce787 100644
--- a/src/lib/components/StationInfo.svelte
+++ b/src/lib/components/StationInfo.svelte
@@ -103,9 +103,8 @@
({direction})
{/if}
-{platform.platformLength}m
+ {platform.platformLength}m
-
{#if platform.stepFree}
{/if}
- {#if platform.dispatchNote}
- {platform.dispatchNote}
- {/if}
- {#if platform.stepFreeNote}
- {platform.stepFreeNote}
- {/if}
+ {#if platform.dispatchNote}
+ {platform.dispatchNote}
+ {/if}
+ {#if platform.stepFreeNote}
+ {platform.stepFreeNote}
+ {/if}
{#each platform.doorPattern as pattern}
@@ -185,14 +184,14 @@
}
header {
- background: #f8fafc;
+ background: var(--color-accent);
padding: 1rem 1.5rem;
- margin-bottom: 50px;
+ margin-bottom: 50px;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
- z-index: 500;
+ z-index: 500;
}
.title-group {
@@ -202,8 +201,8 @@
}
.crs-badge {
- background: #1e293b;
- color: white;
+ background: var(--color-bg-light);
+ color: var(--color-title);
font-family: monospace;
font-weight: bold;
padding: 0.2rem 0.5rem;
@@ -214,11 +213,15 @@
h2 {
margin: 0;
font-size: 1.1rem;
- color: #0f172a;
+ color: var(--color-title);
}
.close-icon {
- background: #ef4444;
+ background: var(--color-brand);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ line-height: 0;
border-radius: 50%;
width: 32px;
height: 32px;
@@ -226,14 +229,14 @@
border: none;
font-size: 1.5rem;
cursor: pointer;
- color: #ebebeb;
+ color: var(--color-bg-light);
transition: all 0.2s;
}
.close-icon:hover {
- background: #dc2626;
+ background: var(--color-brand-light);
transform: scale(1.05);
- transform: rotate(180deg);
+ transform: rotate(90deg);
}
.content {
padding: 1.5rem;
@@ -255,13 +258,13 @@
border-radius: 10px;
}
- .platform-card:first-child {
- margin-top: 20px;
- }
+ .platform-card:first-child {
+ margin-top: 20px;
+ }
.platform-card {
display: flex;
- flex-direction: column;
+ flex-direction: column;
justify-content: space-between;
align-items: center;
background: #ffffff;
@@ -308,7 +311,8 @@
.length-tag {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.85rem;
- background: #f1f5f9;
+ background: var(--color-bg-light);
+ color: var(--color-title);
padding: 0.25rem 0.6rem;
border-radius: 4px;
border: 1px solid #e2e8f0;
@@ -320,80 +324,80 @@
justify-content: center;
}
- .train-visualiser {
- margin-top: 1.25rem;
- width: 100%;
- padding: 1rem;
- background: #f8fafc;
- border-radius: 6px;
- border: 1px solid #e2e8f0;
- display: flex;
- flex-direction: column;
- gap: 1rem;
- }
+ .train-visualiser {
+ margin-top: 1.25rem;
+ width: 100%;
+ padding: 1rem;
+ background: #f8fafc;
+ border-radius: 6px;
+ border: 1px solid #e2e8f0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
- .train-row {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- }
+ .train-row {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
- .door-pattern-kind {
- font-size: 0.7rem;
- font-weight: 800;
- color: #101316;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- }
+ .door-pattern-kind {
+ font-size: 0.7rem;
+ font-weight: 800;
+ color: #101316;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
- .coach-row {
- display: flex;
- gap: 4px;
- overflow-x: auto;
- padding-bottom: 4px;
- }
+ .coach-row {
+ display: flex;
+ gap: 4px;
+ overflow-x: auto;
+ padding-bottom: 4px;
+ }
- .coach-unit {
- flex: 0 0 32px;
- display: flex;
- flex-direction: column;
- gap: 4px;
- }
+ .coach-unit {
+ flex: 0 0 32px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
- .coach-body {
- height: 20px;
- background: #334155;
- color: #f8fafc;
- font-size: 0.65rem;
- font-weight: 700;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 2px;
- }
+ .coach-body {
+ height: 20px;
+ background: var(--color-accent-light);
+ color: #f8fafc;
+ font-size: 0.65rem;
+ font-weight: 700;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 2px;
+ }
- .coach-unit:first-child .coach-body {
- border-top-left-radius: 8px;
- border-bottom-left-radius: 8px;
- background: #0f172a;
- }
+ .coach-unit:first-child .coach-body {
+ border-top-left-radius: 8px;
+ border-bottom-left-radius: 8px;
+ background: var(--color-accent);
+ }
- .door-status {
- display: flex;
- justify-content: space-around;
- padding: 0 4px;
- }
+ .door-status {
+ display: flex;
+ justify-content: space-around;
+ padding: 0 4px;
+ }
- .dot {
- width: 6px;
- height: 6px;
- background: #b65151;
- border-radius: 50%;
- transition: all 0.2s ease;
- }
+ .dot {
+ width: 6px;
+ height: 6px;
+ background: #b65151;
+ border-radius: 50%;
+ transition: all 0.2s ease;
+ }
- .dot.open {
- background: #22c55e;
- box-shadow: 0 0 8px #22c55e;
- }
+ .dot.open {
+ background: #22c55e;
+ box-shadow: 0 0 5px #22c55e;
+ }
diff --git a/static/stations/nby.yaml b/static/stations/nby.yaml
index fa778a1..18beeff 100644
--- a/static/stations/nby.yaml
+++ b/static/stations/nby.yaml
@@ -11,11 +11,11 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
- doors: [1,10]
+ doors: [1, 10]
- kind: IET9
- doors: [1,18]
+ doors: [1, 18]
- kind: IET10
- doors: [1,20]
+ doors: [1, 20]
- kind: DMU
max-car: 12
- platformId: 1Up
@@ -26,11 +26,11 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
- doors: [1,10]
+ doors: [1, 10]
- kind: IET9
- doors: [1,18]
+ doors: [1, 18]
- kind: IET10
- doors: [1,20]
+ doors: [1, 20]
- kind: DMU
max-car: 12
- platformId: 2Dn
@@ -41,11 +41,11 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
- doors: [1,10]
+ doors: [1, 10]
- kind: IET9
- doors: [1,18]
+ doors: [1, 18]
- kind: IET10
- doors: [1,20]
+ doors: [1, 20]
- kind: DMU
max-car: 14
- platformId: 2Up
@@ -56,11 +56,11 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
- doors: [1,10]
+ doors: [1, 10]
- kind: IET9
- doors: [1,18]
+ doors: [1, 18]
- kind: IET10
- doors: [1,20]
+ doors: [1, 20]
- kind: DMU
max-car: 14
- platformId: 3
@@ -71,10 +71,10 @@ platforms:
stepFree: true
doorPattern:
- kind: IET5
- doors: [1,10]
+ doors: [1, 10]
- kind: IET9
- doors: [0,0]
+ doors: [0, 0]
- kind: IET10
- doors: [0,0]
+ doors: [0, 0]
- kind: DMU
max-car: 5