Added catalog generation, need to bug fix
This commit is contained in:
+8
-6
@@ -2,32 +2,34 @@
|
|||||||
// This file SHOULD be checked into source version control.
|
// This file SHOULD be checked into source version control.
|
||||||
// This file is automatically updated during development when running `dev.ts`.
|
// This file is automatically updated during development when running `dev.ts`.
|
||||||
|
|
||||||
import * as $_modules_notes_index from "./routes/(modules)/notes/index.tsx";
|
import * as $_apps_notes_index from "./routes/(apps)/notes/index.tsx";
|
||||||
import * as $_404 from "./routes/_404.tsx";
|
import * as $_404 from "./routes/_404.tsx";
|
||||||
import * as $_app from "./routes/_app.tsx";
|
import * as $_app from "./routes/_app.tsx";
|
||||||
import * as $_middleware from "./routes/_middleware.ts";
|
import * as $_middleware from "./routes/_middleware.ts";
|
||||||
|
import * as $about from "./routes/about.tsx";
|
||||||
|
import * as $apps from "./routes/apps.tsx";
|
||||||
import * as $index from "./routes/index.tsx";
|
import * as $index from "./routes/index.tsx";
|
||||||
import * as $login from "./routes/login.tsx";
|
import * as $login from "./routes/login.tsx";
|
||||||
import * as $logout from "./routes/logout.tsx";
|
import * as $logout from "./routes/logout.tsx";
|
||||||
import * as $partials_about from "./routes/partials/about.tsx";
|
|
||||||
import * as $partials_modules from "./routes/partials/modules.tsx";
|
|
||||||
import * as $Counter from "./islands/Counter.tsx";
|
import * as $Counter from "./islands/Counter.tsx";
|
||||||
|
import * as $_islands_AppNavigator from "./routes/(_islands)/AppNavigator.tsx";
|
||||||
import type { Manifest } from "$fresh/server.ts";
|
import type { Manifest } from "$fresh/server.ts";
|
||||||
|
|
||||||
const manifest = {
|
const manifest = {
|
||||||
routes: {
|
routes: {
|
||||||
"./routes/(modules)/notes/index.tsx": $_modules_notes_index,
|
"./routes/(apps)/notes/index.tsx": $_apps_notes_index,
|
||||||
"./routes/_404.tsx": $_404,
|
"./routes/_404.tsx": $_404,
|
||||||
"./routes/_app.tsx": $_app,
|
"./routes/_app.tsx": $_app,
|
||||||
"./routes/_middleware.ts": $_middleware,
|
"./routes/_middleware.ts": $_middleware,
|
||||||
|
"./routes/about.tsx": $about,
|
||||||
|
"./routes/apps.tsx": $apps,
|
||||||
"./routes/index.tsx": $index,
|
"./routes/index.tsx": $index,
|
||||||
"./routes/login.tsx": $login,
|
"./routes/login.tsx": $login,
|
||||||
"./routes/logout.tsx": $logout,
|
"./routes/logout.tsx": $logout,
|
||||||
"./routes/partials/about.tsx": $partials_about,
|
|
||||||
"./routes/partials/modules.tsx": $partials_modules,
|
|
||||||
},
|
},
|
||||||
islands: {
|
islands: {
|
||||||
"./islands/Counter.tsx": $Counter,
|
"./islands/Counter.tsx": $Counter,
|
||||||
|
"./routes/(_islands)/AppNavigator.tsx": $_islands_AppNavigator,
|
||||||
},
|
},
|
||||||
baseUrl: import.meta.url,
|
baseUrl: import.meta.url,
|
||||||
} satisfies Manifest;
|
} satisfies Manifest;
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
type FooterProps = Record<string | number | symbol, never>;
|
||||||
|
|
||||||
|
export default function Footer(_props: FooterProps) {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
© 2025 PolyMPR -{" "}
|
||||||
|
<a href="/about" f-client-nav={false}>About</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
type HeaderProps = {
|
||||||
|
link: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Header(props: HeaderProps) {
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<h1>
|
||||||
|
<a href="/" f-client-nav={false}>PolyMPR</a>
|
||||||
|
</h1>
|
||||||
|
<nav>
|
||||||
|
<a href="/apps" f-client-nav={false}>Catalog</a>
|
||||||
|
<a href={`/log${props.link}`} f-client-nav={false}>Log {props.link}</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
export interface AppProperties {
|
||||||
|
name: string;
|
||||||
|
icon: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type AppNavigatorProps = Record<string | number | symbol, never>;
|
||||||
|
|
||||||
|
export default async function AppNavigator(_props: AppNavigatorProps) {
|
||||||
|
|
||||||
|
const apps: Record<string, AppProperties> = {};
|
||||||
|
|
||||||
|
for await (const appDir of Deno.readDir("../(apps)")) {
|
||||||
|
try {
|
||||||
|
const properties: AppProperties = await import(`../(apps)/${appDir.name}/(_props)/props.ts`);
|
||||||
|
apps[appDir.name] = properties;
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error(`Couldn't import app "${appDir.name}": ${error}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p>{JSON.stringify(apps)}</p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { AppProperties } from "../../../(_islands)/AppNavigator.tsx";
|
||||||
|
|
||||||
|
const properties: AppProperties = {
|
||||||
|
name: "PolyNotes",
|
||||||
|
icon: "school"
|
||||||
|
};
|
||||||
|
|
||||||
|
export default properties;
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
type ModulesProps = Record<string | number | symbol, never>;
|
||||||
|
|
||||||
|
export default function Modules(_props: ModulesProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h2>All PolyMPR modules</h2>
|
||||||
|
<nav>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
+17
-15
@@ -1,8 +1,14 @@
|
|||||||
import { FreshContext } from "$fresh/server.ts";
|
import { FreshContext } from "$fresh/server.ts";
|
||||||
import { Partial } from "$fresh/runtime.ts";
|
import { Partial } from "$fresh/runtime.ts";
|
||||||
|
import { State } from "./_middleware.ts";
|
||||||
|
import Header from "./(_components)/Header.tsx";
|
||||||
|
import Footer from "./(_components)/Footer.tsx";
|
||||||
|
|
||||||
|
// deno-lint-ignore require-await
|
||||||
export default async function App(request: Request, context: FreshContext) {
|
export default async function App(
|
||||||
|
_request: Request,
|
||||||
|
context: FreshContext<State>,
|
||||||
|
) {
|
||||||
const link = context.state.isAuthenticated ? "out" : "in";
|
const link = context.state.isAuthenticated ? "out" : "in";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -11,22 +17,18 @@ export default async function App(request: Request, context: FreshContext) {
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>PolyMPR</title>
|
<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" />
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=school" />
|
||||||
<link rel="stylesheet" href="/styles/main.css" />
|
<link rel="stylesheet" href="/styles/main.css" />
|
||||||
</head>
|
</head>
|
||||||
<body f-client-nav>
|
<body f-client-nav>
|
||||||
<header>
|
<Header link={link} />
|
||||||
<h1>PolyMPR</h1>
|
<section>
|
||||||
<nav>
|
<Partial name="body">
|
||||||
<a href="/modules" f-partial="/partials/modules">Modules</a>
|
<context.Component />
|
||||||
<a href={`/log${link}`} f-client-nav={false}>Log {link}</a>
|
</Partial>
|
||||||
</nav>
|
</section>
|
||||||
</header>
|
<Footer />
|
||||||
<Partial name="body">
|
|
||||||
<context.Component />
|
|
||||||
</Partial>
|
|
||||||
<footer>
|
|
||||||
<p>© 2025 PolyMPR - <a href="/about" f-partial="/partials/about">About</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
+27
-14
@@ -1,39 +1,52 @@
|
|||||||
import { MiddlewareHandlerContext } from "$fresh/server.ts";
|
import { FreshContext } from "$fresh/server.ts";
|
||||||
import { getCookies } from "$std/http/cookie.ts";
|
import { getCookies } from "$std/http/cookie.ts";
|
||||||
import { isJwtValid } from "@popov/jwt";
|
import { isJwtValid } from "@popov/jwt";
|
||||||
|
|
||||||
|
const PUBLIC_ROUTES = [
|
||||||
|
"/",
|
||||||
|
"/login",
|
||||||
|
"/logout",
|
||||||
|
"/about",
|
||||||
|
"/partials/about",
|
||||||
|
"/contact",
|
||||||
|
];
|
||||||
|
|
||||||
const PUBLIC_ROUTES = ["/", "/login", "/logout", "/about", "/contact"];
|
export interface State {
|
||||||
|
|
||||||
interface State {
|
|
||||||
isAuthenticated: boolean;
|
isAuthenticated: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function isRoutePublic(route: string) {
|
function isRoutePublic(route: string) {
|
||||||
return PUBLIC_ROUTES.includes(route) || route.match(/\..+$/);
|
return PUBLIC_ROUTES.includes(route) || route.match(/\..+$/);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export const handler = [
|
export const handler = [
|
||||||
async function checkAuthentication(request: Request, context: MiddlewareHandlerContext<State>) {
|
async function checkAuthentication(
|
||||||
|
request: Request,
|
||||||
|
context: FreshContext<State>,
|
||||||
|
) {
|
||||||
const cookies = getCookies(request.headers);
|
const cookies = getCookies(request.headers);
|
||||||
context.state.isAuthenticated = await isJwtValid(cookies["sessionToken"] ?? "", "NEED TO CHANGE THIS KEY FURTHER IN DEV");
|
context.state.isAuthenticated = await isJwtValid(
|
||||||
|
cookies["sessionToken"] ?? "",
|
||||||
|
"NEED TO CHANGE THIS KEY FURTHER IN DEV",
|
||||||
|
);
|
||||||
|
|
||||||
return context.next();
|
return await context.next();
|
||||||
},
|
},
|
||||||
async function ensureAuthentication(request: Request, context: MiddlewareHandlerContext<State>) {
|
async function ensureAuthentication(
|
||||||
|
request: Request,
|
||||||
|
context: FreshContext<State>,
|
||||||
|
) {
|
||||||
const url = new URL(request.url);
|
const url = new URL(request.url);
|
||||||
|
|
||||||
if (!isRoutePublic(url.pathname) && !context.state.isAuthenticated) {
|
if (!isRoutePublic(url.pathname) && !context.state.isAuthenticated) {
|
||||||
return new Response(null, {
|
return new Response(null, {
|
||||||
status: 302,
|
status: 302,
|
||||||
headers: {
|
headers: {
|
||||||
Location: "/login"
|
Location: "/login",
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return context.next();
|
return await context.next();
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { FreshContext } from "$fresh/server.ts";
|
||||||
|
|
||||||
|
// deno-lint-ignore require-await
|
||||||
|
export default async function About(_request: Request, _context: FreshContext) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h2>About PolyMPR</h2>
|
||||||
|
<p>
|
||||||
|
PolyMPR is born from the will to enhance Polytech INFO department's HR
|
||||||
|
infrastructure.
|
||||||
|
</p>
|
||||||
|
<h3>Terms of Use</h3>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { FreshContext } from "$fresh/server.ts";
|
||||||
|
import AppNavigator from "./(_islands)/AppNavigator.tsx";
|
||||||
|
|
||||||
|
// deno-lint-ignore require-await
|
||||||
|
export default async function About(_request: Request, _context: FreshContext) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
//<AppNavigator />
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
+6
-4
@@ -1,8 +1,10 @@
|
|||||||
import { useSignal } from "@preact/signals";
|
import { FreshContext } from "$fresh/server.ts";
|
||||||
import Counter from "../islands/Counter.tsx";
|
|
||||||
|
|
||||||
export default function Home() {
|
// deno-lint-ignore require-await
|
||||||
|
export default async function Home(_request: Request, _context: FreshContext) {
|
||||||
return (
|
return (
|
||||||
<h1>PolyMPR</h1>
|
<>
|
||||||
|
<h2>Welcome to PolyMPR!</h2>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+39
-27
@@ -1,34 +1,45 @@
|
|||||||
import { Handlers } from "$fresh/server.ts";
|
import { Handlers } from "$fresh/server.ts";
|
||||||
import { State } from "./_middleware.ts";
|
import { State } from "./_middleware.ts";
|
||||||
import { parse, type XmlNode } from "@melvdouc/xml-parser";
|
import {
|
||||||
|
parse,
|
||||||
|
type RegularTagNode,
|
||||||
|
type TextNode,
|
||||||
|
} from "@melvdouc/xml-parser";
|
||||||
import { createJwt } from "@popov/jwt";
|
import { createJwt } from "@popov/jwt";
|
||||||
import { setCookie } from "$std/http/cookie.ts";
|
import { setCookie } from "$std/http/cookie.ts";
|
||||||
|
|
||||||
|
|
||||||
const SERVICE = "https://localhost/login";
|
const SERVICE = "https://localhost/login";
|
||||||
const CAS = "https://ident.univ-amu.fr/cas";
|
const CAS = "https://ident.univ-amu.fr/cas";
|
||||||
|
|
||||||
|
interface CasTagNode extends RegularTagNode {
|
||||||
|
children: [TextNode];
|
||||||
|
}
|
||||||
|
|
||||||
function getTag(tag: XmlNode): [string, string] {
|
interface CasGroupNode extends RegularTagNode {
|
||||||
|
children: CasTagNode[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CasResponse extends RegularTagNode {
|
||||||
|
children: [TextNode, CasGroupNode];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTag(tag: CasTagNode): [string, string] {
|
||||||
return [
|
return [
|
||||||
tag.tagName.replace("cas:", ""),
|
tag.tagName.replace("cas:", ""),
|
||||||
tag.children[0].value
|
tag.children[0].value,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function createUserJWT(casResponse: CasResponse): Promise<string> {
|
||||||
async function createUserJWT(casResponse: XmlNode): Promise<string> {
|
|
||||||
const nodes = casResponse.children[1].children.map(getTag);
|
const nodes = casResponse.children[1].children.map(getTag);
|
||||||
const fullUserInfos = {};
|
const fullUserInfos: Record<string, string | string[]> = {};
|
||||||
|
|
||||||
nodes.forEach(([key, value]) => {
|
nodes.forEach(([key, value]) => {
|
||||||
if (fullUserInfos[key] && Array.isArray(fullUserInfos[key])) {
|
if (fullUserInfos[key] && Array.isArray(fullUserInfos[key])) {
|
||||||
fullUserInfos[key].push(value);
|
fullUserInfos[key].push(value);
|
||||||
}
|
} else if (fullUserInfos[key]) {
|
||||||
else if (fullUserInfos[key]) {
|
|
||||||
fullUserInfos[key] = [fullUserInfos[key], value];
|
fullUserInfos[key] = [fullUserInfos[key], value];
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
fullUserInfos[key] = value;
|
fullUserInfos[key] = value;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -41,30 +52,32 @@ async function createUserJWT(casResponse: XmlNode): Promise<string> {
|
|||||||
iat: now,
|
iat: now,
|
||||||
exp: now + oneHour,
|
exp: now + oneHour,
|
||||||
aud: "PolyMPR",
|
aud: "PolyMPR",
|
||||||
user: fullUserInfos
|
user: fullUserInfos,
|
||||||
};
|
};
|
||||||
|
|
||||||
const key = "NEED TO CHANGE THIS KEY FURTHER IN DEV";
|
const key = "NEED TO CHANGE THIS KEY FURTHER IN DEV";
|
||||||
return createJwt(payload, key);
|
return createJwt(payload, key);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// deno-lint-ignore no-explicit-any
|
||||||
export const handler: Handlers<any, State> = {
|
export const handler: Handlers<any, State> = {
|
||||||
async GET(request, context) {
|
async GET(request, context) {
|
||||||
const url = new URL(request.url);
|
const url = new URL(request.url);
|
||||||
const ticket = url.searchParams.get("ticket");
|
const ticket = url.searchParams.get("ticket");
|
||||||
|
|
||||||
if (ticket) {
|
if (ticket) {
|
||||||
const response = await fetch(`${CAS}/serviceValidate?service=${SERVICE}&ticket=${ticket}`);
|
const response = await fetch(
|
||||||
const body = parse(await response.text(), "application/xml");
|
`${CAS}/serviceValidate?service=${SERVICE}&ticket=${ticket}`,
|
||||||
const casResponse = body[0].children[0];
|
);
|
||||||
|
const body = parse(await response.text()) as [RegularTagNode];
|
||||||
|
const casResponse = body[0].children[0] as CasResponse;
|
||||||
|
|
||||||
if (casResponse.tagName != "cas:authenticationSuccess") {
|
if (casResponse.tagName != "cas:authenticationSuccess") {
|
||||||
return new Response(null, {
|
return new Response(null, {
|
||||||
status: 302,
|
status: 302,
|
||||||
headers: {
|
headers: {
|
||||||
Location: `${CAS}/login?service=${SERVICE}`
|
Location: `${CAS}/login?service=${SERVICE}`,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -72,13 +85,13 @@ export const handler: Handlers<any, State> = {
|
|||||||
|
|
||||||
setCookie(headers, {
|
setCookie(headers, {
|
||||||
name: "sessionToken",
|
name: "sessionToken",
|
||||||
value: await createUserJWT(casResponse)
|
value: await createUserJWT(casResponse),
|
||||||
});
|
});
|
||||||
headers.set("Location", "/apps");
|
headers.set("Location", "/apps");
|
||||||
|
|
||||||
return new Response(null, {
|
return new Response(null, {
|
||||||
status: 302,
|
status: 302,
|
||||||
headers
|
headers,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -86,17 +99,16 @@ export const handler: Handlers<any, State> = {
|
|||||||
return new Response(null, {
|
return new Response(null, {
|
||||||
status: 302,
|
status: 302,
|
||||||
headers: {
|
headers: {
|
||||||
Location: "/apps"
|
Location: "/apps",
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
return new Response(null, {
|
return new Response(null, {
|
||||||
status: 302,
|
status: 302,
|
||||||
headers: {
|
headers: {
|
||||||
Location: `${CAS}/login?service=${SERVICE}`
|
Location: `${CAS}/login?service=${SERVICE}`,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
+7
-9
@@ -2,13 +2,12 @@ import { Handlers } from "$fresh/server.ts";
|
|||||||
import { State } from "./_middleware.ts";
|
import { State } from "./_middleware.ts";
|
||||||
import { deleteCookie } from "$std/http/cookie.ts";
|
import { deleteCookie } from "$std/http/cookie.ts";
|
||||||
|
|
||||||
|
|
||||||
const SERVICE = "https://localhost/";
|
const SERVICE = "https://localhost/";
|
||||||
const CAS = "https://ident.univ-amu.fr/cas";
|
const CAS = "https://ident.univ-amu.fr/cas";
|
||||||
|
|
||||||
|
// deno-lint-ignore no-explicit-any
|
||||||
export const handler: Handlers<any, State> = {
|
export const handler: Handlers<any, State> = {
|
||||||
async GET(request, context) {
|
GET(_request, context) {
|
||||||
if (context.state.isAuthenticated) {
|
if (context.state.isAuthenticated) {
|
||||||
const headers = new Headers();
|
const headers = new Headers();
|
||||||
|
|
||||||
@@ -17,16 +16,15 @@ export const handler: Handlers<any, State> = {
|
|||||||
|
|
||||||
return new Response(null, {
|
return new Response(null, {
|
||||||
status: 302,
|
status: 302,
|
||||||
headers
|
headers,
|
||||||
});
|
});
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
return new Response(null, {
|
return new Response(null, {
|
||||||
status: 302,
|
status: 302,
|
||||||
headers: {
|
headers: {
|
||||||
Location: "/"
|
Location: "/",
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { RouteConfig } from "$fresh/server.ts";
|
|
||||||
import { Partial } from "$fresh/runtime.ts";
|
|
||||||
|
|
||||||
export const config: RouteConfig = {
|
|
||||||
skipAppWrapper: true,
|
|
||||||
skipInheritedLayouts: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default async function About(request, context) {
|
|
||||||
return (
|
|
||||||
<Partial name="body">
|
|
||||||
<p>C'est nous wsh</p>
|
|
||||||
</Partial>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
+36
-5
@@ -1,7 +1,5 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
color-scheme: light dark;
|
color-scheme: dark;
|
||||||
|
|
||||||
--dark-background-color: rgb(30, 30, 42);
|
--dark-background-color: rgb(30, 30, 42);
|
||||||
--dark-background-color-ui: rgb(50, 50, 62);
|
--dark-background-color-ui: rgb(50, 50, 62);
|
||||||
@@ -11,9 +9,10 @@
|
|||||||
--light-background-color: rgb(225, 225, 237);
|
--light-background-color: rgb(225, 225, 237);
|
||||||
--light-background-color-ui: rgb(241, 241, 255);
|
--light-background-color-ui: rgb(241, 241, 255);
|
||||||
--light-foreground: rgb(30, 30, 42);
|
--light-foreground: rgb(30, 30, 42);
|
||||||
--light-foreground-dim: rgb(171, 171, 179);
|
--light-foreground-dim: rgb(105, 105, 110);
|
||||||
|
|
||||||
--accent-color: rgb(38, 157, 217);
|
--dark-accent-color: rgb(84, 174, 219);
|
||||||
|
--light-accent-color: rgb(0, 109, 163);
|
||||||
|
|
||||||
--loader-size: 0.5em;
|
--loader-size: 0.5em;
|
||||||
}
|
}
|
||||||
@@ -53,4 +52,36 @@ footer {
|
|||||||
display: flex;
|
display: flex;
|
||||||
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
text-decoration: none;
|
||||||
|
color: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||||
|
}
|
||||||
|
|
||||||
|
a::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 2px;
|
||||||
|
background-color: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||||
|
transform-origin: right;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transition: transform 100ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus::before, a:hover::before {
|
||||||
|
transform-origin: left;
|
||||||
|
transform: scaleX(1);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user