mirror of
https://github.com/Kyren223/website.git
synced 2026-01-07 13:33:23 +00:00
Backup
This commit is contained in:
12
src/components/Link.astro
Normal file
12
src/components/Link.astro
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
interface Props {
|
||||
href: string;
|
||||
newTab?: boolean;
|
||||
}
|
||||
|
||||
const { href, newTab = true } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={href} {...newTab && { target: "_blank", rel: "noopener noreferrer" }}>
|
||||
<slot />
|
||||
</a>
|
||||
12
src/components/Markdown.astro
Normal file
12
src/components/Markdown.astro
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import "../../styles/asides.css";
|
||||
import "../../styles/markdown.css";
|
||||
import "../../styles/props.css";
|
||||
import "../../styles/reset.css";
|
||||
import "../../styles/shiki.css";
|
||||
import "../../styles/util.css";
|
||||
---
|
||||
|
||||
<div class="sl-markdown-content">
|
||||
<slot />
|
||||
</div>
|
||||
11
src/components/MarkdownB.astro
Normal file
11
src/components/MarkdownB.astro
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
import Markdown from './Markdown.astro';
|
||||
import "../../styles/asides.css";
|
||||
import "../../styles/markdown.css";
|
||||
import "../../styles/props.css";
|
||||
import "../../styles/reset.css";
|
||||
import "../../styles/shiki.css";
|
||||
import "../../styles/util.css";
|
||||
---
|
||||
<Markdown><slot></Markdown>
|
||||
|
||||
@@ -5,7 +5,7 @@ interface Props {
|
||||
|
||||
const { path } = Astro.props;
|
||||
|
||||
const directories = ["about", "works", "links"];
|
||||
const directories = ["skills", "projects", "blogs"];
|
||||
---
|
||||
|
||||
<nav>
|
||||
@@ -23,10 +23,6 @@ const directories = ["about", "works", "links"];
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
/* main { */
|
||||
/* padding-top: 1.25rem; */
|
||||
/* } */
|
||||
|
||||
nav {
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
@@ -43,12 +39,13 @@ const directories = ["about", "works", "links"];
|
||||
margin-bottom: 0px;
|
||||
margin-left: 0.15rem;
|
||||
color: var(--primary);
|
||||
font-size: 1rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
#nav-links a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
#nav-path {
|
||||
margin-right: 2rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,35 +2,36 @@
|
||||
interface Props {
|
||||
header: string;
|
||||
margin?: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { header, margin = "-1px" } = Astro.props;
|
||||
const { header, margin = "-1px", class: htmlClass } = Astro.props;
|
||||
---
|
||||
<div class="section" style={`margin: ${margin};`}>
|
||||
|
||||
<div class="section" style={`margin: ${margin};`} class={htmlClass}>
|
||||
<span class="tag">{header}</span>
|
||||
<slot/>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.section {
|
||||
position: relative;
|
||||
padding: 0.8rem;
|
||||
padding-top: 0.85rem;
|
||||
display: flex;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: var(--alt);
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: -0.6rem;
|
||||
left: 0.5rem;
|
||||
background-color: var(--background);
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--alt);
|
||||
}
|
||||
.section {
|
||||
position: relative;
|
||||
padding: 0.8rem;
|
||||
padding-top: 0.85rem;
|
||||
display: flex;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: var(--alt);
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
top: -0.6rem;
|
||||
left: 0.5rem;
|
||||
background-color: var(--background);
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--alt);
|
||||
}
|
||||
</style>
|
||||
|
||||
39
src/content/blogs/blog-0.md
Normal file
39
src/content/blogs/blog-0.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# The search for the perfect ed25519 key pair
|
||||
|
||||
Todo write intro to catch attention
|
||||
|
||||
### Why care about ed25519 key pairs?
|
||||
|
||||
Ed25519 is a cryptographic algorithm for generating
|
||||
a pair of keys, a public one that can be shared with anyone
|
||||
and a private one that is kept as a secret.
|
||||
|
||||
### The ssh public key format
|
||||
|
||||
If you have ever accessed a remote server it was most likely by
|
||||
ssh-ing into it.
|
||||
You have also most likely had to copy paste something similar to this:
|
||||
|
||||
```
|
||||
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBSSj+yfJLWEb+Df4r4603TOFAUBREYS43qQB+c9i9UW
|
||||
```
|
||||
|
||||
Let's break it down
|
||||
|
||||
- The first part `ssh-ed25519` is the algorithm type, other common algorithms are `ssh-rsa` and `ssh-ecdsa`
|
||||
- The second part is a base64-encoded binary format consiting of
|
||||
- the length of the algorithm string, for ed25519 it's always 11 (4 bytes long)
|
||||
- the algorithm type, for ed25519 it's always `ssh-ed25519` in binary (11 bytes long)
|
||||
- the length of the key, 32 bytes for ed25519 (4 bytes long)
|
||||
- the actual ed25519 key (32 bytes long)
|
||||
|
||||
### Embedding a word in base64
|
||||
|
||||
Base64 is a widely used format for writing binary in a compact and human readable way,
|
||||
it uses A-Z, a-z, 0-9, '/' and '+' adding up to 64 unique characters.
|
||||
|
||||
It's possible to choose specific bytes in a way that when encoding it with base64
|
||||
it will form a word.
|
||||
|
||||
For example, to encode "Kyren" in base64, we can use the following bytes
|
||||
`00101011 00101010 01001110` or in hex `2b 2a de`
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
title: The search for the perfect ed25519 key pair
|
||||
template: splash
|
||||
---
|
||||
# My Title
|
||||
|
||||
## Secondary
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
title: The search for the perfect ed25519 key pair
|
||||
template: splash
|
||||
---
|
||||
# Other blog
|
||||
|
||||
How about code blocks
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { defineCollection } from 'astro:content';
|
||||
import { docsSchema } from '@astrojs/starlight/schema';
|
||||
import { defineCollection } from "astro:content";
|
||||
|
||||
export const collections = {
|
||||
docs: defineCollection({ schema: docsSchema() }),
|
||||
blogs: defineCollection({}),
|
||||
};
|
||||
|
||||
@@ -24,8 +24,18 @@ const { title } = Astro.props;
|
||||
<style is:global>
|
||||
@import url("../styles/JetBrainsMono.css");
|
||||
|
||||
/* :root { */
|
||||
/* --primary: #ffbf00; */
|
||||
/* --secondary: #9b7eca; */
|
||||
/* --accent: #7ed4fb; */
|
||||
/* --extra: #8fcc75; */
|
||||
/* --text: #ffffff; */
|
||||
/* --alt: #999999; */
|
||||
/* --background: #000000; */
|
||||
/* } */
|
||||
|
||||
:root {
|
||||
--primary: #ffbf00;
|
||||
--primary: #54D7A9;
|
||||
--secondary: #9b7eca;
|
||||
--accent: #7ed4fb;
|
||||
--extra: #8fcc75;
|
||||
|
||||
32
src/pages/blogs/[...slug].astro
Normal file
32
src/pages/blogs/[...slug].astro
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
import Markdown from "../../components/MarkdownB.astro";
|
||||
import { getCollection } from "astro:content";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const blogEntries = await getCollection("blogs");
|
||||
return blogEntries.map((entry) => ({
|
||||
params: { slug: entry.slug },
|
||||
props: { entry },
|
||||
}));
|
||||
}
|
||||
|
||||
const { entry } = Astro.props;
|
||||
const { Content } = await entry.render();
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Test</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<Markdown><Content /></Markdown>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import TerminalBorder from "../components/TerminalBorder.astro";
|
||||
import Link from "../components/Link.astro";
|
||||
import Nav from "../components/Nav.astro";
|
||||
|
||||
const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren`;
|
||||
@@ -22,8 +23,7 @@ Hi! I'm Kyren, a software engineer and Minecraft plugin freelancer,
|
||||
I love working with Rust, Golang and Java.
|
||||
I am also a terminal nerd and linux enthusiast who uses NVIM btw.
|
||||
And when I am not coding I am most likely playing video games,
|
||||
watching Anime or solving Rubik's cubes fast.
|
||||
Test`.trimStart();
|
||||
watching Anime or solving Rubik's cubes fast.`.trimStart();
|
||||
---
|
||||
|
||||
<Layout title="Kyren's Website">
|
||||
@@ -52,45 +52,60 @@ Test`.trimStart();
|
||||
<TerminalBorder header="Timezone">
|
||||
<span>UTC+2</span>
|
||||
</TerminalBorder>
|
||||
<TerminalBorder header="SSH Key">
|
||||
<div
|
||||
class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]"
|
||||
>
|
||||
<span
|
||||
id="sshKey"
|
||||
class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
|
||||
>{sshKey}</span
|
||||
<div class="w-[334%]">
|
||||
<TerminalBorder header="SSH Key">
|
||||
<div
|
||||
class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]"
|
||||
>
|
||||
<button
|
||||
id="sshKeyCopy"
|
||||
class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
|
||||
>
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 -3 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
<span
|
||||
id="sshKey"
|
||||
class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
|
||||
>{sshKey}</span
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</TerminalBorder>
|
||||
<button
|
||||
id="sshKeyCopy"
|
||||
class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
|
||||
>
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 -3 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</TerminalBorder>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right" class="column">
|
||||
<TerminalBorder header="About Me">
|
||||
<TerminalBorder header="Status">
|
||||
<p>
|
||||
Working on
|
||||
<Link href="https://github.com/KapiMC/Kapi">Kapi </Link>
|
||||
| Learning Web Development | Available for hire
|
||||
</p>
|
||||
</TerminalBorder>
|
||||
<TerminalBorder header="About Me" margin="20px 0">
|
||||
<p>{aboutMe}</p>
|
||||
</TerminalBorder>
|
||||
<TerminalBorder header="Skills" margin="30px 0px">
|
||||
<a href="/about/">cd ~/imabanana80/about </a>
|
||||
</TerminalBorder>
|
||||
<TerminalBorder header="Projects">
|
||||
<a href="/works/">cd ~/imabanana80/works</a>
|
||||
<TerminalBorder header="Links">
|
||||
<p>
|
||||
<Link href="https://github.com/Kyren223"
|
||||
>github.com/Kyren223</Link
|
||||
>
|
||||
<br />
|
||||
<Link
|
||||
href="https://discord.com/users/481884415090229258"
|
||||
>discord.com/Kyren223</Link
|
||||
>
|
||||
</p>
|
||||
</TerminalBorder>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
// import Prose from '../components/Prose.astro';
|
||||
// import Layout from '../layouts/Layout.astro';
|
||||
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
|
||||
import { getEntry } from 'astro:content';
|
||||
|
||||
const entry = await getEntry('blogs', 'blog-1');
|
||||
const { Content } = await entry.render();
|
||||
---
|
||||
<StarlightPage frontmatter={{title: "Blabla", template: 'splash'}}>
|
||||
<Content />
|
||||
</StarlightPage>
|
||||
49
src/styles/asides.css
Normal file
49
src/styles/asides.css
Normal file
@@ -0,0 +1,49 @@
|
||||
.starlight-aside {
|
||||
padding: 1rem;
|
||||
border-inline-start: 0.25rem solid var(--sl-color-asides-border);
|
||||
color: var(--sl-color-white);
|
||||
}
|
||||
.starlight-aside--note {
|
||||
--sl-color-asides-text-accent: var(--sl-color-blue-high);
|
||||
--sl-color-asides-border: var(--sl-color-blue);
|
||||
background-color: var(--sl-color-blue-low);
|
||||
}
|
||||
.starlight-aside--tip {
|
||||
--sl-color-asides-text-accent: var(--sl-color-purple-high);
|
||||
--sl-color-asides-border: var(--sl-color-purple);
|
||||
background-color: var(--sl-color-purple-low);
|
||||
}
|
||||
.starlight-aside--caution {
|
||||
--sl-color-asides-text-accent: var(--sl-color-orange-high);
|
||||
--sl-color-asides-border: var(--sl-color-orange);
|
||||
background-color: var(--sl-color-orange-low);
|
||||
}
|
||||
.starlight-aside--danger {
|
||||
--sl-color-asides-text-accent: var(--sl-color-red-high);
|
||||
--sl-color-asides-border: var(--sl-color-red);
|
||||
background-color: var(--sl-color-red-low);
|
||||
}
|
||||
|
||||
.starlight-aside__title {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
font-size: var(--sl-text-h5);
|
||||
font-weight: 600;
|
||||
line-height: var(--sl-line-height-headings);
|
||||
color: var(--sl-color-asides-text-accent);
|
||||
}
|
||||
|
||||
.starlight-aside__icon {
|
||||
font-size: 1.333em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.starlight-aside__title + .starlight-aside__content {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.starlight-aside__content a {
|
||||
color: var(--sl-color-asides-text-accent);
|
||||
}
|
||||
218
src/styles/markdown.css
Normal file
218
src/styles/markdown.css
Normal file
@@ -0,0 +1,218 @@
|
||||
.sl-markdown-content
|
||||
:not(a, strong, em, del, span, input, code, br)
|
||||
+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Headings after non-headings have more spacing. */
|
||||
.sl-markdown-content
|
||||
:not(h1, h2, h3, h4, h5, h6)
|
||||
+ :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.sl-markdown-content li + li:not(:where(.not-content *)),
|
||||
.sl-markdown-content dt + dt:not(:where(.not-content *)),
|
||||
.sl-markdown-content dt + dd:not(:where(.not-content *)),
|
||||
.sl-markdown-content dd + dd:not(:where(.not-content *)) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content li:not(:where(.not-content *)) {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sl-markdown-content
|
||||
li
|
||||
> :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *)) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content dt:not(:where(.not-content *)) {
|
||||
font-weight: 700;
|
||||
}
|
||||
.sl-markdown-content dd:not(:where(.not-content *)) {
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
|
||||
color: var(--sl-color-white);
|
||||
line-height: var(--sl-line-height-headings);
|
||||
font-weight: 600;
|
||||
font-size: 10000%;
|
||||
}
|
||||
|
||||
.sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sl-markdown-content h1:not(:where(.not-content *)) {
|
||||
font-size: var(--sl-text-h1);
|
||||
}
|
||||
.sl-markdown-content h2:not(:where(.not-content *)) {
|
||||
font-size: var(--sl-text-h2);
|
||||
}
|
||||
.sl-markdown-content h3:not(:where(.not-content *)) {
|
||||
font-size: var(--sl-text-h3);
|
||||
}
|
||||
.sl-markdown-content h4:not(:where(.not-content *)) {
|
||||
font-size: var(--sl-text-h4);
|
||||
}
|
||||
.sl-markdown-content h5:not(:where(.not-content *)) {
|
||||
font-size: var(--sl-text-h5);
|
||||
}
|
||||
.sl-markdown-content h6:not(:where(.not-content *)) {
|
||||
font-size: var(--sl-text-h6);
|
||||
}
|
||||
|
||||
.sl-markdown-content a:not(:where(.not-content *)) {
|
||||
color: var(--sl-color-text-accent);
|
||||
}
|
||||
.sl-markdown-content a:hover:not(:where(.not-content *)) {
|
||||
color: var(--sl-color-white);
|
||||
}
|
||||
|
||||
.sl-markdown-content code:not(:where(.not-content *)) {
|
||||
background-color: var(--sl-color-bg-inline-code);
|
||||
margin-block: -0.125rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: var(--sl-text-code-sm);
|
||||
}
|
||||
.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.sl-markdown-content pre:not(:where(.not-content *)) {
|
||||
border: 1px solid var(--sl-color-gray-5);
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: var(--sl-text-code);
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.sl-markdown-content pre code:not(:where(.not-content *)) {
|
||||
all: unset;
|
||||
font-family: var(--__sl-font-mono);
|
||||
}
|
||||
|
||||
.sl-markdown-content blockquote:not(:where(.not-content *)) {
|
||||
border-inline-start: 1px solid var(--sl-color-gray-5);
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
/* Table styling */
|
||||
.sl-markdown-content table:not(:where(.not-content *)) {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
|
||||
border-bottom: 1px solid var(--sl-color-gray-5);
|
||||
padding: 0.5rem 1rem;
|
||||
/* Align text to the top of the row in multiline tables. */
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.sl-markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
.sl-markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
.sl-markdown-content th:not(:where(.not-content *)) {
|
||||
color: var(--sl-color-white);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* Align headings to the start of the line unless set by the `align` attribute. */
|
||||
.sl-markdown-content th:not([align]):not(:where(.not-content *)) {
|
||||
text-align: start;
|
||||
}
|
||||
/* <table>s, <hr>s, and <blockquote>s inside asides */
|
||||
.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
|
||||
border-color: var(--sl-color-gray-4);
|
||||
}
|
||||
@supports (border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent)) {
|
||||
.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
|
||||
border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/* <code> inside asides */
|
||||
@supports (border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent)) {
|
||||
.sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
|
||||
background-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.sl-markdown-content hr:not(:where(.not-content *)) {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--sl-color-hairline);
|
||||
}
|
||||
|
||||
/* <details> and <summary> styles */
|
||||
.sl-markdown-content details:not(:where(.not-content *)) {
|
||||
--sl-details-border-color: var(--sl-color-gray-5);
|
||||
--sl-details-border-color--hover: var(--sl-color-text-accent);
|
||||
|
||||
border-inline-start: 2px solid var(--sl-details-border-color);
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
|
||||
.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
|
||||
border-color: var(--sl-details-border-color--hover);
|
||||
}
|
||||
.sl-markdown-content summary:not(:where(.not-content *)) {
|
||||
color: var(--sl-color-white);
|
||||
cursor: pointer;
|
||||
display: block; /* Needed to hide the default marker in some browsers. */
|
||||
font-weight: 600;
|
||||
/* Expand the outline so that the marker cannot distort it. */
|
||||
margin-inline-start: -0.5rem;
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* <summary> marker styles */
|
||||
.sl-markdown-content summary:not(:where(.not-content *))::marker,
|
||||
.sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.sl-markdown-content summary:not(:where(.not-content *))::before {
|
||||
--sl-details-marker-size: 1.25rem;
|
||||
|
||||
background-color: currentColor;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: var(--sl-details-marker-size);
|
||||
width: var(--sl-details-marker-size);
|
||||
margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem;
|
||||
vertical-align: middle;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.sl-markdown-content summary:not(:where(.not-content *))::before {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
.sl-markdown-content details[open] > summary:not(:where(.not-content *))::before {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
[dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::before,
|
||||
.sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
/* <summary> with only a paragraph automatically added when using MDX */
|
||||
.sl-markdown-content summary:not(:where(.not-content *)) p:only-child {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* <details> styles inside asides */
|
||||
.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
|
||||
--sl-details-border-color: var(--sl-color-asides-border);
|
||||
--sl-details-border-color--hover: var(--sl-color-asides-text-accent);
|
||||
}
|
||||
189
src/styles/props.css
Normal file
189
src/styles/props.css
Normal file
@@ -0,0 +1,189 @@
|
||||
:root,
|
||||
::backdrop {
|
||||
/* Colors (dark mode) */
|
||||
--sl-color-white: hsl(0, 0%, 100%); /* “white” */
|
||||
--sl-color-gray-1: hsl(224, 20%, 94%);
|
||||
--sl-color-gray-2: hsl(224, 6%, 77%);
|
||||
--sl-color-gray-3: hsl(224, 6%, 56%);
|
||||
--sl-color-gray-4: hsl(224, 7%, 36%);
|
||||
--sl-color-gray-5: hsl(224, 10%, 23%);
|
||||
--sl-color-gray-6: hsl(224, 14%, 16%);
|
||||
--sl-color-black: hsl(224, 10%, 10%);
|
||||
|
||||
--sl-hue-orange: 41;
|
||||
--sl-color-orange-low: hsl(var(--sl-hue-orange), 39%, 22%);
|
||||
--sl-color-orange: hsl(var(--sl-hue-orange), 82%, 63%);
|
||||
--sl-color-orange-high: hsl(var(--sl-hue-orange), 82%, 87%);
|
||||
--sl-hue-green: 101;
|
||||
--sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%);
|
||||
--sl-color-green: hsl(var(--sl-hue-green), 82%, 63%);
|
||||
--sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%);
|
||||
--sl-hue-blue: 234;
|
||||
--sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%);
|
||||
--sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%);
|
||||
--sl-color-blue-high: hsl(var(--sl-hue-blue), 100%, 87%);
|
||||
--sl-hue-purple: 281;
|
||||
--sl-color-purple-low: hsl(var(--sl-hue-purple), 39%, 22%);
|
||||
--sl-color-purple: hsl(var(--sl-hue-purple), 82%, 63%);
|
||||
--sl-color-purple-high: hsl(var(--sl-hue-purple), 82%, 89%);
|
||||
--sl-hue-red: 339;
|
||||
--sl-color-red-low: hsl(var(--sl-hue-red), 39%, 22%);
|
||||
--sl-color-red: hsl(var(--sl-hue-red), 82%, 63%);
|
||||
--sl-color-red-high: hsl(var(--sl-hue-red), 82%, 87%);
|
||||
|
||||
--sl-color-accent-low: hsl(224, 54%, 20%);
|
||||
--sl-color-accent: hsl(224, 100%, 60%);
|
||||
--sl-color-accent-high: hsl(224, 100%, 85%);
|
||||
|
||||
--sl-color-text: var(--sl-color-gray-2);
|
||||
--sl-color-text-accent: var(--sl-color-accent-high);
|
||||
--sl-color-text-invert: var(--sl-color-accent-low);
|
||||
--sl-color-bg: var(--sl-color-black);
|
||||
--sl-color-bg-nav: var(--sl-color-gray-6);
|
||||
--sl-color-bg-sidebar: var(--sl-color-gray-6);
|
||||
--sl-color-bg-inline-code: var(--sl-color-gray-5);
|
||||
--sl-color-bg-accent: var(--sl-color-accent-high);
|
||||
--sl-color-hairline-light: var(--sl-color-gray-5);
|
||||
--sl-color-hairline: var(--sl-color-gray-6);
|
||||
--sl-color-hairline-shade: var(--sl-color-black);
|
||||
|
||||
--sl-color-backdrop-overlay: hsla(223, 13%, 10%, 0.66);
|
||||
|
||||
/* Shadows (dark mode) */
|
||||
--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.12),
|
||||
0px 2px 1px hsla(0, 0%, 0%, 0.24);
|
||||
--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.08),
|
||||
0px 5px 2px hsla(0, 0%, 0%, 0.08), 0px 3px 2px hsla(0, 0%, 0%, 0.12),
|
||||
0px 1px 1px hsla(0, 0%, 0%, 0.15);
|
||||
--sl-shadow-lg: 0px 25px 7px hsla(0, 0%, 0%, 0.03),
|
||||
0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33),
|
||||
0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25);
|
||||
|
||||
/* Text size and line height */
|
||||
--sl-text-2xs: 0.75rem; /* 12px */
|
||||
--sl-text-xs: 0.8125rem; /* 13px */
|
||||
--sl-text-sm: 0.875rem; /* 14px */
|
||||
--sl-text-base: 1rem; /* 16px */
|
||||
--sl-text-lg: 1.125rem; /* 18px */
|
||||
--sl-text-xl: 1.25rem; /* 20px */
|
||||
--sl-text-2xl: 1.5rem; /* 24px */
|
||||
--sl-text-3xl: 1.8125rem; /* 29px */
|
||||
--sl-text-4xl: 2.1875rem; /* 35px */
|
||||
--sl-text-5xl: 2.625rem; /* 42px */
|
||||
--sl-text-6xl: 4rem; /* 64px */
|
||||
|
||||
--sl-text-body: var(--sl-text-base);
|
||||
--sl-text-body-sm: var(--sl-text-xs);
|
||||
--sl-text-code: var(--sl-text-sm);
|
||||
--sl-text-code-sm: var(--sl-text-xs);
|
||||
--sl-text-h1: var(--sl-text-4xl);
|
||||
--sl-text-h2: var(--sl-text-3xl);
|
||||
--sl-text-h3: var(--sl-text-2xl);
|
||||
--sl-text-h4: var(--sl-text-xl);
|
||||
--sl-text-h5: var(--sl-text-lg);
|
||||
|
||||
--sl-line-height: 1.75;
|
||||
--sl-line-height-headings: 1.2;
|
||||
|
||||
--sl-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
"Liberation Mono", "Courier New", monospace;
|
||||
--__sl-font: var(--sl-font, var(--sl-font-system)), var(--sl-font-system);
|
||||
--__sl-font-mono: var(--sl-font-mono, var(--sl-font-system-mono)),
|
||||
var(--sl-font-system-mono);
|
||||
|
||||
/** Key layout values */
|
||||
--sl-nav-height: 3.5rem;
|
||||
--sl-nav-pad-x: 1rem;
|
||||
--sl-nav-pad-y: 0.75rem;
|
||||
--sl-mobile-toc-height: 3rem;
|
||||
--sl-sidebar-width: 18.75rem;
|
||||
--sl-sidebar-pad-x: 1rem;
|
||||
--sl-content-width: 45rem;
|
||||
--sl-content-pad-x: 1rem;
|
||||
--sl-menu-button-size: 2rem;
|
||||
--sl-nav-gap: var(--sl-content-pad-x);
|
||||
/* Offset required to show outline inside an element instead of round the outside */
|
||||
--sl-outline-offset-inside: -0.1875rem;
|
||||
|
||||
/* Global z-index values */
|
||||
--sl-z-index-toc: 4;
|
||||
--sl-z-index-menu: 5;
|
||||
--sl-z-index-navbar: 10;
|
||||
--sl-z-index-skiplink: 20;
|
||||
}
|
||||
|
||||
:root[data-theme="light"],
|
||||
[data-theme="light"] ::backdrop {
|
||||
/* Colours (light mode) */
|
||||
--sl-color-white: hsl(224, 10%, 10%);
|
||||
--sl-color-gray-1: hsl(224, 14%, 16%);
|
||||
--sl-color-gray-2: hsl(224, 10%, 23%);
|
||||
--sl-color-gray-3: hsl(224, 7%, 36%);
|
||||
--sl-color-gray-4: hsl(224, 6%, 56%);
|
||||
--sl-color-gray-5: hsl(224, 6%, 77%);
|
||||
--sl-color-gray-6: hsl(224, 20%, 94%);
|
||||
--sl-color-gray-7: hsl(224, 19%, 97%);
|
||||
--sl-color-black: hsl(0, 0%, 100%);
|
||||
|
||||
--sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%);
|
||||
--sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%);
|
||||
--sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%);
|
||||
--sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%);
|
||||
--sl-color-green: hsl(var(--sl-hue-green), 90%, 46%);
|
||||
--sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%);
|
||||
--sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%);
|
||||
--sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%);
|
||||
--sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%);
|
||||
--sl-color-purple-high: hsl(var(--sl-hue-purple), 90%, 30%);
|
||||
--sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%);
|
||||
--sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%);
|
||||
--sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%);
|
||||
--sl-color-red: hsl(var(--sl-hue-red), 90%, 60%);
|
||||
--sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%);
|
||||
|
||||
--sl-color-accent-high: hsl(234, 80%, 30%);
|
||||
--sl-color-accent: hsl(234, 90%, 60%);
|
||||
--sl-color-accent-low: hsl(234, 88%, 90%);
|
||||
|
||||
--sl-color-text-accent: var(--sl-color-accent);
|
||||
--sl-color-text-invert: var(--sl-color-black);
|
||||
--sl-color-bg-nav: var(--sl-color-gray-7);
|
||||
--sl-color-bg-sidebar: var(--sl-color-bg);
|
||||
--sl-color-bg-inline-code: var(--sl-color-gray-6);
|
||||
--sl-color-bg-accent: var(--sl-color-accent);
|
||||
--sl-color-hairline-light: var(--sl-color-gray-6);
|
||||
--sl-color-hairline-shade: var(--sl-color-gray-6);
|
||||
|
||||
--sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66);
|
||||
|
||||
/* Shadows (light mode) */
|
||||
--sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06),
|
||||
0px 2px 1px hsla(0, 0%, 0%, 0.06);
|
||||
--sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.03),
|
||||
0px 5px 2px hsla(0, 0%, 0%, 0.03), 0px 3px 2px hsla(0, 0%, 0%, 0.06),
|
||||
0px 1px 1px hsla(0, 0%, 0%, 0.06);
|
||||
--sl-shadow-lg: 0px 25px 7px rgba(0, 0, 0, 0.01),
|
||||
0px 16px 6px hsla(0, 0%, 0%, 0.03), 0px 9px 5px hsla(223, 13%, 10%, 0.08),
|
||||
0px 4px 4px hsla(0, 0%, 0%, 0.16), 0px 4px 2px hsla(0, 0%, 0%, 0.04);
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
:root {
|
||||
--sl-nav-height: 4rem;
|
||||
--sl-nav-pad-x: 1.5rem;
|
||||
--sl-text-h1: var(--sl-text-5xl);
|
||||
--sl-text-h2: var(--sl-text-4xl);
|
||||
--sl-text-h3: var(--sl-text-3xl);
|
||||
--sl-text-h4: var(--sl-text-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 72rem) {
|
||||
:root {
|
||||
--sl-content-pad-x: 1.5rem;
|
||||
--sl-mobile-toc-height: 0rem;
|
||||
}
|
||||
}
|
||||
48
src/styles/reset.css
Normal file
48
src/styles/reset.css
Normal file
@@ -0,0 +1,48 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
accent-color: var(--sl-color-accent);
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--__sl-font);
|
||||
line-height: var(--sl-line-height);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: var(--sl-color-text);
|
||||
background-color: var(--sl-color-bg);
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
code {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--__sl-font-mono);
|
||||
}
|
||||
13
src/styles/shiki.css
Normal file
13
src/styles/shiki.css
Normal file
@@ -0,0 +1,13 @@
|
||||
:root {
|
||||
--astro-code-color-text: var(--sl-color-white);
|
||||
--astro-code-color-background: var(--sl-color-gray-6);
|
||||
--astro-code-token-constant: var(--sl-color-blue-high);
|
||||
--astro-code-token-string: var(--sl-color-green-high);
|
||||
--astro-code-token-comment: var(--sl-color-gray-2);
|
||||
--astro-code-token-keyword: var(--sl-color-purple-high);
|
||||
--astro-code-token-parameter: var(--sl-color-red-high);
|
||||
--astro-code-token-function: var(--sl-color-red-high);
|
||||
--astro-code-token-string-expression: var(--sl-color-green-high);
|
||||
--astro-code-token-punctuation: var(--sl-color-gray-2);
|
||||
--astro-code-token-link: var(--sl-color-blue-high);
|
||||
}
|
||||
61
src/styles/util.css
Normal file
61
src/styles/util.css
Normal file
@@ -0,0 +1,61 @@
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.sl-hidden {
|
||||
display: none;
|
||||
}
|
||||
.sl-flex {
|
||||
display: flex;
|
||||
}
|
||||
.sl-block {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 50rem) {
|
||||
.md\:sl-hidden {
|
||||
display: none;
|
||||
}
|
||||
.md\:sl-flex {
|
||||
display: flex;
|
||||
}
|
||||
.md\:sl-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media (min-width: 72rem) {
|
||||
.lg\:sl-hidden {
|
||||
display: none;
|
||||
}
|
||||
.lg\:sl-flex {
|
||||
display: flex;
|
||||
}
|
||||
.lg\:sl-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
[data-theme="light"] .light\:sl-hidden {
|
||||
display: none;
|
||||
}
|
||||
[data-theme="dark"] .dark\:sl-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Flip an element around the y-axis when in an RTL context.
|
||||
Primarily useful for things where we can’t rely on writing direction like icons.
|
||||
|
||||
<Icon name="right-arrow" class="rtl:flip" />
|
||||
|
||||
In a LTR context: → In a RTL context: ←
|
||||
*/
|
||||
[dir="rtl"] .rtl\:flip:not(:where([dir="rtl"] [dir="ltr"] *)) {
|
||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
Reference in New Issue
Block a user