diff --git a/routes/(_components)/AppCard.tsx b/routes/(_components)/AppCard.tsx index a786ada..189543f 100644 --- a/routes/(_components)/AppCard.tsx +++ b/routes/(_components)/AppCard.tsx @@ -7,11 +7,9 @@ type AppCardProps = { export default function AppCard(props: AppCardProps) { return ( -
- - {props.app.icon} -

{props.app.name}

- -
+ + {props.app.icon} +

{props.app.name}

+ ); } diff --git a/routes/(_islands)/AppNavigator.tsx b/routes/(_islands)/AppNavigator.tsx index 89b9a08..1a6bb1b 100644 --- a/routes/(_islands)/AppNavigator.tsx +++ b/routes/(_islands)/AppNavigator.tsx @@ -9,17 +9,19 @@ export default function AppNavigator(props: AppNavigatorProps) { if (!props.apps) { return ( <> -

Welcome to PolyMPR!

-

No apps available.

+

App catalog

+

+ No apps are currently available. Please contact the maintainers team + to address this issue. +

); } return ( <> -

Welcome to PolyMPR!

-

app list

-
+

App catalog

+
{Object.entries(props.apps).map(([key, app]) => ( ))} diff --git a/routes/_app.tsx b/routes/_app.tsx index 8c8c92e..16dc070 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -18,7 +18,7 @@ export default async function App( PolyMPR +
diff --git a/routes/apps.tsx b/routes/apps.tsx index 8c9843d..54c4e44 100644 --- a/routes/apps.tsx +++ b/routes/apps.tsx @@ -26,7 +26,7 @@ export const handler: Handlers = { }; // deno-lint-ignore require-await -export default async function About(_request: Request, context: FreshContext) { +export default async function Apps(_request: Request, context: FreshContext) { return ( <> diff --git a/static/styles/app-cards.css b/static/styles/app-cards.css new file mode 100644 index 0000000..e40bbea --- /dev/null +++ b/static/styles/app-cards.css @@ -0,0 +1,50 @@ +.app-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1em; +} + +.app-card { + text-align: center; + padding: 1em; + border-radius: 0.5em; + font-weight: 700; + + border: 1px solid + light-dark( + var(--light-strong-color), + var(--dark-strong-color) + ); + + color: light-dark( + var(--light-strong-color), + var(--dark-strong-color) + ); + + transition: all 200ms ease-in-out; +} + +.app-card::before { + all: unset; +} + +.app-card:hover, .app-card:focus { + background-color: light-dark( + var(--light-strong-color), + var(--dark-strong-color) + ); + + color: light-dark( + var(--light-background-color), + var(--dark-background-color) + ); +} + +.app-card > p { + margin: 0; +} + +.app-card > span { + font-size: 4em; +} diff --git a/static/styles/app.css b/static/styles/app.css index 27096b2..cd59267 100644 --- a/static/styles/app.css +++ b/static/styles/app.css @@ -13,6 +13,7 @@ #app > nav > a { padding: 0.25em 0.5em; + color: light-dark(var(--light-foreground), var(--dark-foreground)); } #app > nav > a::before { @@ -40,6 +41,7 @@ ) 10%, transparent ); + font-weight: 700; } #app > nav > a[data-current="true"]::before { diff --git a/static/styles/main.css b/static/styles/main.css index 5a75edf..2ac72b3 100644 --- a/static/styles/main.css +++ b/static/styles/main.css @@ -1,25 +1,28 @@ :root { - color-scheme: light; + color-scheme: light dark; - --dark-background-color: rgb(30, 30, 42); - --dark-background-color-ui: rgb(50, 50, 62); - --dark-foreground: rgb(241, 241, 255); - --dark-foreground-dim: rgb(171, 171, 179); + --dark-background-color: hsl(250, 50%, 8%); + --dark-foreground: hsl(250, 10%, 90%); + --dark-foreground-dim: hsl(250, 10%, 70%); - --light-background-color: rgb(225, 225, 237); - --light-background-color-ui: rgb(241, 241, 255); - --light-foreground: rgb(30, 30, 42); - --light-foreground-dim: rgb(105, 105, 110); + --light-background-color: hsl(250, 50%, 92%); + --light-foreground: hsl(250, 10%, 10%); + --light-foreground-dim: hsl(250, 10%, 30%); - --dark-accent-color: rgb(84, 174, 219); - --light-accent-color: rgb(0, 109, 163); + --dark-accent-color: hsl(150, 70%, 50%); + --dark-strong-color: hsl(50, 70%, 50%); + --dark-error-color: hsl(50, 70%, 50%); - --loader-size: 0.5em; + --light-accent-color: hsl(230, 70%, 50%); + --light-strong-color: hsl(210, 70%, 50%); + --light-error-color: hsl(210, 70%, 50%); + + --font-family-text: "Inter", sans-serif; } * { box-sizing: border-box; - font-family: "Jetbrains Mono"; + font-family: var(--font-family-text); } html, body { @@ -36,13 +39,29 @@ body { var(--dark-background-color) ); color: light-dark(var(--light-foreground), var(--dark-foreground)); + font-weight: 300; } header { - padding: 0.5em 2em; + padding: 0em 2em; display: flex; justify-content: space-between; align-items: center; + border-bottom: 1px solid + color-mix( + in srgb, + light-dark( + var(--light-foreground-dim), + var(--dark-foreground-dim) + ) 30%, + transparent + ); + + font-weight: 700; +} + +header > h1 { + font-size: large; } header > nav { @@ -56,16 +75,11 @@ footer { justify-content: center; color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim)); font-style: italic; + font-size: small; } section { - margin: 0 1.5em; - padding: 0.5em 1.5em; - background-color: light-dark( - var(--light-background-color-ui), - var(--dark-background-color-ui) - ); - border-radius: 0.5em; + padding: 0.5em 2em; } a {