wilson/language-learning-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: [frontend] color -> colour

Browse source
This commit is contained in:
wilson 2026-05-04 08:00:59 +01:00
parent bcc12e3fad
commit 568b907013
5 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/lib/components/TopNav.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts">
import { resolve } from '$app/paths';
import { page } from '$app/state';
interface Props {
@ -12,7 +13,7 @@
<header class="topnav" role="banner">
<div class="topnav-inner">
<a href="/app" class="wordmark" aria-label="Home">
<a href={resolve('/app')} class="wordmark" aria-label="Home">
<span class="wordmark-text">Language Learning App</span>
</a>
@ -20,7 +21,17 @@
<ul class="nav-links" role="list">
<li>
<a
href="/app/articles"
href={resolve('/app/adventures')}
class="nav-link"
class:is-active={isActive('/app/adventures')}
aria-current={isActive('/app/adventures') ? 'page' : undefined}
>
Adventures
</a>
</li>
<li>
<a
href={resolve('/app/articles')}
class="nav-link"
class:is-active={isActive('/app/articles')}
aria-current={isActive('/app/articles') ? 'page' : undefined}
@ -73,7 +84,7 @@
background-color: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: 0 1px 0 color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
box-shadow: 0 1px 0 color-mix(in srgb, var(--colour-outline-variant) 35%, transparent);
}
.topnav-inner {

12
frontend/src/routes/+page.svelte
View file

@ -130,7 +130,7 @@
background-color: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: 0 1px 0 color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
box-shadow: 0 1px 0 color-mix(in srgb, var(--colour-outline-variant) 35%, transparent);
}
.sitenav-inner {
@ -187,7 +187,7 @@
/* ---------- Left margin ---------- */
.left-margin {
border-right: 1px solid var(--color-outline-variant);
border-right: 1px solid var(--colour-outline-variant);
padding: var(--space-12) var(--space-5) var(--space-8);
display: flex;
flex-direction: column;
@ -288,7 +288,7 @@
.divider {
border: none;
border-top: 1px solid var(--color-outline-variant);
border-top: 1px solid var(--colour-outline-variant);
margin: 0;
}
@ -325,7 +325,7 @@
/* ---------- Right rail ---------- */
.right-rail {
border-left: 1px dashed var(--color-outline-variant);
border-left: 1px dashed var(--colour-outline-variant);
padding: var(--space-12) var(--space-4);
display: flex;
align-items: flex-start;
@ -338,7 +338,7 @@
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--color-outline);
color: var(--colour-outline);
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
@ -364,7 +364,7 @@
.left-margin {
border-right: none;
border-bottom: 1px solid var(--color-outline-variant);
border-bottom: 1px solid var(--colour-outline-variant);
padding: var(--space-6) var(--space-6) var(--space-5);
flex-direction: row;
flex-wrap: wrap;

10
frontend/src/routes/app/+page.svelte
View file

@ -87,7 +87,7 @@
/* ---------- Left margin ---------- */
.left-margin {
border-right: 1px solid var(--color-outline-variant);
border-right: 1px solid var(--colour-outline-variant);
padding: var(--space-12) var(--space-5) var(--space-8);
display: flex;
flex-direction: column;
@ -188,7 +188,7 @@
.divider {
border: none;
border-top: 1px solid var(--color-outline-variant);
border-top: 1px solid var(--colour-outline-variant);
margin: 0;
}
@ -249,7 +249,7 @@
/* ---------- Right rail ---------- */
.right-rail {
border-left: 1px dashed var(--color-outline-variant);
border-left: 1px dashed var(--colour-outline-variant);
padding: var(--space-12) var(--space-4);
display: flex;
align-items: flex-start;
@ -262,7 +262,7 @@
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--color-outline);
color: var(--colour-outline);
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
@ -288,7 +288,7 @@
.left-margin {
border-right: none;
border-bottom: 1px solid var(--color-outline-variant);
border-bottom: 1px solid var(--colour-outline-variant);
padding: var(--space-6) var(--space-6) var(--space-5);
flex-direction: row;
flex-wrap: wrap;

2
frontend/src/routes/app/jobs/[job_id]/+page.svelte
View file

@ -171,7 +171,7 @@
.spinner {
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--color-outline-variant);
border: 2px solid var(--colour-outline-variant);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.9s linear infinite;

2
frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte
View file

@ -59,7 +59,7 @@
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
border-top: 1px solid color-mix(in srgb, var(--colour-outline-variant) 30%, transparent);
}
.section-title {