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
+2 -4
View File
@@ -7,11 +7,9 @@ type AppCardProps = {
export default function AppCard(props: AppCardProps) {
return (
<div className="app-card">
<a href={`/${props.href}`} f-client-nav={false}>
<span className="material-symbols-outlined">{props.app.icon}</span>
<a class="app-card" href={`/${props.href}`} f-client-nav={false}>
<span class="material-symbols-outlined">{props.app.icon}</span>
<p>{props.app.name}</p>
</a>
</div>
);
}
routes/(_islands)/AppNavigator.tsx
+7 -5
View File
@@ -9,17 +9,19 @@ export default function AppNavigator(props: AppNavigatorProps) {
if (!props.apps) {
return (
<>
<h2>Welcome to PolyMPR!</h2>
<p>No apps available.</p>
<h2>App catalog</h2>
<p>
No apps are currently available. Please contact the maintainers team
to address this issue.
</p>
</>
);
}
return (
<>
<h2>Welcome to PolyMPR!</h2>
<h3>app list</h3>
<div className="app-list">
<h2>App catalog</h2>
<div class="app-list">
{Object.entries(props.apps).map(([key, 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>
<link
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
rel="stylesheet"
@@ -26,6 +26,7 @@ export default async function App(
/>
<link rel="stylesheet" href="/styles/main.css" />
<link rel="stylesheet" href="/styles/app.css" />
<link rel="stylesheet" href="styles/app-cards.css" />
</head>
<body f-client-nav>
<Header link={link} />
routes/apps.tsx
+1 -1
View File
@@ -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 (
<>
<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 {
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 {
static/styles/main.css
+35 -21
View File
@@ -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 {