admin/PolyMPR
1
0
Fork 0
Code Issues 14 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

Changed website style

Browse Source
This commit is contained in:
fedyna-k
2025-01-15 22:11:56 +01:00
parent b894930e12
commit 7036e907d7
7 changed files with 101 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
routes/(_components)/AppCard.tsx
+4 -6
View File
@@ -7,11 +7,9 @@ type AppCardProps = {
export default function AppCard(props: AppCardProps) { export default function AppCard(props: AppCardProps) {
return ( return (
<div className="app-card"> <a class="app-card" href={`/${props.href}`} f-client-nav={false}>
<a href={`/${props.href}`} f-client-nav={false}> <span class="material-symbols-outlined">{props.app.icon}</span>
<span className="material-symbols-outlined">{props.app.icon}</span> <p>{props.app.name}</p>
<p>{props.app.name}</p> </a>
</a>
</div>
); );
} }
routes/(_islands)/AppNavigator.tsx
+7 -5
View File
@@ -9,17 +9,19 @@ export default function AppNavigator(props: AppNavigatorProps) {
if (!props.apps) { if (!props.apps) {
return ( return (
<> <>
<h2>Welcome to PolyMPR!</h2> <h2>App catalog</h2>
<p>No apps available.</p> <p>
No apps are currently available. Please contact the maintainers team
to address this issue.
</p>
</> </>
); );
} }
return ( return (
<> <>
<h2>Welcome to PolyMPR!</h2> <h2>App catalog</h2>
<h3>app list</h3> <div class="app-list">
<div className="app-list">
{Object.entries(props.apps).map(([key, app]) => ( {Object.entries(props.apps).map(([key, app]) => (
<AppCard href={key} app={app} /> <AppCard href={key} app={app} />
))} ))}
routes/_app.tsx
+2 -1
View File
@@ -18,7 +18,7 @@ export default async function App(
<title>PolyMPR</title> <title>PolyMPR</title>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
/> />
<link <link
rel="stylesheet" rel="stylesheet"
@@ -26,6 +26,7 @@ export default async function App(
/> />
<link rel="stylesheet" href="/styles/main.css" /> <link rel="stylesheet" href="/styles/main.css" />
<link rel="stylesheet" href="/styles/app.css" /> <link rel="stylesheet" href="/styles/app.css" />
<link rel="stylesheet" href="styles/app-cards.css" />
</head> </head>
<body f-client-nav> <body f-client-nav>
<Header link={link} /> <Header link={link} />
routes/apps.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const handler: Handlers = {
}; };
// deno-lint-ignore require-await // deno-lint-ignore require-await
export default async function About(_request: Request, context: FreshContext) { export default async function Apps(_request: Request, context: FreshContext) {
return ( return (
<> <>
<AppNavigator apps={context.data} /> <AppNavigator apps={context.data} />
static/styles/app-cards.css
+50
View File
@@ -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;
}
static/styles/app.css
+2
View File
@@ -13,6 +13,7 @@
#app > nav > a { #app > nav > a {
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
color: light-dark(var(--light-foreground), var(--dark-foreground));
} }
#app > nav > a::before { #app > nav > a::before {
@@ -40,6 +41,7 @@
) 10%, ) 10%,
transparent transparent
); );
font-weight: 700;
} }
#app > nav > a[data-current="true"]::before { #app > nav > a[data-current="true"]::before {
static/styles/main.css
+35 -21
View File
@@ -1,25 +1,28 @@
:root { :root {
color-scheme: light; color-scheme: light dark;
--dark-background-color: rgb(30, 30, 42); --dark-background-color: hsl(250, 50%, 8%);
--dark-background-color-ui: rgb(50, 50, 62); --dark-foreground: hsl(250, 10%, 90%);
--dark-foreground: rgb(241, 241, 255); --dark-foreground-dim: hsl(250, 10%, 70%);
--dark-foreground-dim: rgb(171, 171, 179);
--light-background-color: rgb(225, 225, 237); --light-background-color: hsl(250, 50%, 92%);
--light-background-color-ui: rgb(241, 241, 255); --light-foreground: hsl(250, 10%, 10%);
--light-foreground: rgb(30, 30, 42); --light-foreground-dim: hsl(250, 10%, 30%);
--light-foreground-dim: rgb(105, 105, 110);
--dark-accent-color: rgb(84, 174, 219); --dark-accent-color: hsl(150, 70%, 50%);
--light-accent-color: rgb(0, 109, 163); --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; box-sizing: border-box;
font-family: "Jetbrains Mono"; font-family: var(--font-family-text);
} }
html, body { html, body {
@@ -36,13 +39,29 @@ body {
var(--dark-background-color) var(--dark-background-color)
); );
color: light-dark(var(--light-foreground), var(--dark-foreground)); color: light-dark(var(--light-foreground), var(--dark-foreground));
font-weight: 300;
} }
header { header {
padding: 0.5em 2em; padding: 0em 2em;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 { header > nav {
@@ -56,16 +75,11 @@ footer {
justify-content: center; justify-content: center;
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim)); color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
font-style: italic; font-style: italic;
font-size: small;
} }
section { section {
margin: 0 1.5em; padding: 0.5em 2em;
padding: 0.5em 1.5em;
background-color: light-dark(
var(--light-background-color-ui),
var(--dark-background-color-ui)
);
border-radius: 0.5em;
} }
a { a {