vaporvee/web-old
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added accent color in more places

Browse Source
This commit is contained in:
Yannik
2024-02-13 11:11:38 +01:00
parent 5a1204c211
commit 01416bddf5
3 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/layouts/Layout.astro
View File

@@ -9,6 +9,10 @@ const { description } = Astro.props;
import "../styles/main.scss"; import "../styles/main.scss";
import "../styles/callout.scss"; import "../styles/callout.scss";
import styles from "../styles/_var.scss";
const accentColorMatch = styles.match(/accentColor: ([^;]+)/);
const accentColor = accentColorMatch ? accentColorMatch[1] : "";
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
@@ -20,6 +24,7 @@ import { ViewTransitions } from "astro:transitions";
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="darkreader-lock" /> <meta name="darkreader-lock" />
<meta name="theme-color" content={accentColor} />
<meta name="description" content={description} /> <meta name="description" content={description} />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -29,6 +34,7 @@ import { ViewTransitions } from "astro:transitions";
</head> </head>
<body> <body>
<Navbar /> <Navbar />
<main> <main>
<slot /> <slot />
</main> </main>

33
src/styles/_var.scss
View File

@@ -1,28 +1,9 @@
@font-face { $primary: #1c1427;
font-family: 'Tanker-Regular'; $accent: #7eca9c;
src: url('/fonts/Tanker-Regular.ttf') format('truetype'); $link: #ccffbd;
font-weight: 400; $highlight-primary: #40394a;
font-display: swap;
font-style: normal;
}
@font-face { :export {
font-family: 'Satoshi-Regular'; primaryColor: $primary;
src: url('/fonts/Satoshi-Regular.ttf') format('truetype'); accentColor: $accent;
font-weight: 400;
font-display: swap;
font-style: normal;
} }
@font-face {
font-family: 'Satoshi-Bold';
src: url('/fonts/Satoshi-Bold.ttf') format('truetype');
font-weight: 700;
font-display: swap;
font-style: normal;
}
$primary: #1C1427;
$accent: #7ECA9C;
$link: #CCFFBD;
$highlight-primary: #40394A;

32
src/styles/main.scss
View File

@@ -2,6 +2,38 @@
:root { :root {
color-scheme: dark; color-scheme: dark;
--accent-color: $accent; // conversion for theme color meta tag
}
@font-face {
font-family: "Tanker-Regular";
src: url("/fonts/Tanker-Regular.ttf") format("truetype");
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Satoshi-Regular";
src: url("/fonts/Satoshi-Regular.ttf") format("truetype");
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "Satoshi-Bold";
src: url("/fonts/Satoshi-Bold.ttf") format("truetype");
font-weight: 700;
font-display: swap;
font-style: normal;
}
::selection {
background-color: $accent;
}
::marker {
color: $accent;
} }
body { body {