mirror of
https://github.com/Kyren223/website.git
synced 2026-01-03 19:52:28 +00:00
Added blog and changed some other stuff
This commit is contained in:
@@ -2,19 +2,21 @@ import { defineConfig } from "astro/config";
|
||||
|
||||
import mdx from "@astrojs/mdx";
|
||||
|
||||
import starlight from "@astrojs/starlight";
|
||||
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
|
||||
import expressiveCode from "astro-expressive-code";
|
||||
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
tailwind(),
|
||||
starlight({
|
||||
title: "My delightful docs site",
|
||||
customCss: ["./src/styles/custom.css"],
|
||||
expressiveCode({
|
||||
plugins: [pluginLineNumbers()],
|
||||
defaultProps: {
|
||||
showLineNumbers: false,
|
||||
},
|
||||
}),
|
||||
mdx(),
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
@@ -13,7 +13,9 @@
|
||||
"@astrojs/mdx": "^3.1.9",
|
||||
"@astrojs/starlight": "^0.29.0",
|
||||
"@astrojs/tailwind": "^5.1.2",
|
||||
"@expressive-code/plugin-line-numbers": "^0.38.3",
|
||||
"astro": "^4.16.10",
|
||||
"astro-expressive-code": "^0.38.3",
|
||||
"tailwindcss": "^3.4.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
13
pnpm-lock.yaml
generated
13
pnpm-lock.yaml
generated
@@ -17,9 +17,15 @@ importers:
|
||||
'@astrojs/tailwind':
|
||||
specifier: ^5.1.2
|
||||
version: 5.1.2(astro@4.16.10(rollup@4.24.4)(typescript@5.6.3))(tailwindcss@3.4.14)
|
||||
'@expressive-code/plugin-line-numbers':
|
||||
specifier: ^0.38.3
|
||||
version: 0.38.3
|
||||
astro:
|
||||
specifier: ^4.16.10
|
||||
version: 4.16.10(rollup@4.24.4)(typescript@5.6.3)
|
||||
astro-expressive-code:
|
||||
specifier: ^0.38.3
|
||||
version: 0.38.3(astro@4.16.10(rollup@4.24.4)(typescript@5.6.3))
|
||||
tailwindcss:
|
||||
specifier: ^3.4.14
|
||||
version: 3.4.14
|
||||
@@ -322,6 +328,9 @@ packages:
|
||||
'@expressive-code/plugin-frames@0.38.3':
|
||||
resolution: {integrity: sha512-qL2oC6FplmHNQfZ8ZkTR64/wKo9x0c8uP2WDftR/ydwN/yhe1ed7ZWYb8r3dezxsls+tDokCnN4zYR594jbpvg==}
|
||||
|
||||
'@expressive-code/plugin-line-numbers@0.38.3':
|
||||
resolution: {integrity: sha512-QbK9NL44ST9w5ANVEu0a7fkjlq+fXgxyPqiSyFC4Nw/sAXd0MUwT1C8V0qlve4pZYLz53CR9tn4JQQbR0Z1tOg==}
|
||||
|
||||
'@expressive-code/plugin-shiki@0.38.3':
|
||||
resolution: {integrity: sha512-kqHnglZeesqG3UKrb6e9Fq5W36AZ05Y9tCREmSN2lw8LVTqENIeCIkLDdWtQ5VoHlKqwUEQFTVlRehdwoY7Gmw==}
|
||||
|
||||
@@ -2517,6 +2526,10 @@ snapshots:
|
||||
dependencies:
|
||||
'@expressive-code/core': 0.38.3
|
||||
|
||||
'@expressive-code/plugin-line-numbers@0.38.3':
|
||||
dependencies:
|
||||
'@expressive-code/core': 0.38.3
|
||||
|
||||
'@expressive-code/plugin-shiki@0.38.3':
|
||||
dependencies:
|
||||
'@expressive-code/core': 0.38.3
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
border-radius: 7px;
|
||||
background-position: 100%;
|
||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.link-card > a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
line-height: 1.4;
|
||||
padding: calc(1.5rem - 1px);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
background-color: #23262d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) {
|
||||
background-position: 0;
|
||||
background-image: var(--accent-gradient);
|
||||
}
|
||||
.link-card:is(:hover, :focus-within) h2 {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +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";
|
||||
import "../styles/markdown/asides.css";
|
||||
import "../styles/markdown/markdown.css";
|
||||
import "../styles/markdown/props.css";
|
||||
import "../styles/markdown/reset.css";
|
||||
import "../styles/markdown/shiki.css";
|
||||
import "../styles/markdown/util.css";
|
||||
---
|
||||
|
||||
<div class="sl-markdown-content">
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
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>
|
||||
|
||||
@@ -28,11 +28,10 @@ const directories = ["skills", "projects", "blogs"];
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
border: 0;
|
||||
border-bottom: 1px;
|
||||
border: 1.5px var(--alt);
|
||||
border-style: solid;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
#nav-links a {
|
||||
margin-right: 0.15rem;
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
---
|
||||
<div
|
||||
class="prose dark:prose-invert
|
||||
prose-h1:font-bold prose-h1:text-xl
|
||||
prose-a:text-blue-300 prose-p:text-justify prose-img:rounded-xl">
|
||||
<slot />
|
||||
</div>
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
title: The search for the perfect ed25519 key pair
|
||||
template: splash
|
||||
---
|
||||
|
||||
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,23 +0,0 @@
|
||||
---
|
||||
title: My dakdkadkadk a
|
||||
description: EEEEEE akd ak dka kdak ak dka kdka dk ak
|
||||
template: splash
|
||||
---
|
||||
|
||||
# My oadkadkakd
|
||||
|
||||
## Secondary
|
||||
|
||||
Testing some content with multiline thing
|
||||
|
||||
```go example.go
|
||||
package main
|
||||
|
||||
import "fmt"
|
||||
|
||||
func main() {
|
||||
fmt.Println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
Hmm
|
||||
@@ -1,66 +0,0 @@
|
||||
---
|
||||
title: My docs
|
||||
description: Learn more about my project in this docs site built with Starlight.
|
||||
template: splash
|
||||
---
|
||||
|
||||
# My Title
|
||||
|
||||
## Secondary
|
||||
|
||||
### Test
|
||||
|
||||
#### 4
|
||||
|
||||
##### 5
|
||||
|
||||
###### 6
|
||||
|
||||
####### 7 Should be normal
|
||||
|
||||
Testing some content with multiline thing
|
||||
let's see what happens if this wraps
|
||||
This should be super close
|
||||
|
||||
This should be far
|
||||
|
||||
- Some bullets
|
||||
- Adka kda kd ak
|
||||
- d kakd akd ka k
|
||||
|
||||
- [ ] Check me
|
||||
- [x] Already checked
|
||||
|
||||
## Smaller header
|
||||
|
||||
How about code blocks
|
||||
|
||||
```go example.go
|
||||
package main
|
||||
|
||||
import "fmt"
|
||||
|
||||
func main() {
|
||||
fmt.Println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
Hmm
|
||||
|
||||
> ![INFO]
|
||||
> Does this work
|
||||
|
||||
This is `highlighting` I think is what it's called
|
||||
|
||||
:::caution
|
||||
If you are not sure you want an awesome docs site, think twice before using [Starlight](/).
|
||||
:::
|
||||
|
||||
:::danger
|
||||
Your users may be more productive and find your product easier to use thanks to helpful Starlight features.
|
||||
|
||||
- Clear navigation
|
||||
- User-configurable colour theme
|
||||
- [i18n support](/guides/i18n/)
|
||||
|
||||
:::
|
||||
@@ -1,7 +1,3 @@
|
||||
---
|
||||
title: The search for the perfect ed25519 key pair
|
||||
template: splash
|
||||
---
|
||||
# My Title
|
||||
|
||||
## Secondary
|
||||
@@ -35,21 +31,6 @@ func main() {
|
||||
|
||||
Hmm
|
||||
|
||||
> ![INFO]
|
||||
> Does this work
|
||||
|
||||
This is `highlighting` I think is what it's called
|
||||
|
||||
:::caution
|
||||
If you are not sure you want an awesome docs site, think twice before using [Starlight](/).
|
||||
:::
|
||||
|
||||
:::danger
|
||||
Your users may be more productive and find your product easier to use thanks to helpful Starlight features.
|
||||
|
||||
- Clear navigation
|
||||
- User-configurable colour theme
|
||||
- [i18n support](/guides/i18n/)
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
title: The search for the perfect ed25519 key pair
|
||||
template: splash
|
||||
---
|
||||
# Other blog
|
||||
|
||||
How about code blocks
|
||||
|
||||
```go example.go
|
||||
package main
|
||||
|
||||
import "fmt"
|
||||
|
||||
func main() {
|
||||
fmt.Println("Hello, World!")
|
||||
}
|
||||
```
|
||||
|
||||
adkadkakdakd
|
||||
@@ -1,5 +1,7 @@
|
||||
import { defineCollection } from "astro:content";
|
||||
import { defineCollection, z } from "astro:content";
|
||||
|
||||
export const collections = {
|
||||
blogs: defineCollection({}),
|
||||
blogs: defineCollection({
|
||||
type: "content",
|
||||
}),
|
||||
};
|
||||
|
||||
28
src/layouts/Blog.astro
Normal file
28
src/layouts/Blog.astro
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
import Markdown from "../components/Markdown.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!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>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<main class="w-[70%] m-auto">
|
||||
<Markdown>
|
||||
<slot />
|
||||
</Markdown>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,6 @@
|
||||
---
|
||||
import "../styles/terminal.css";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
@@ -20,94 +22,3 @@ const { title } = Astro.props;
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<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: #54D7A9;
|
||||
--secondary: #9b7eca;
|
||||
--accent: #7ed4fb;
|
||||
--extra: #8fcc75;
|
||||
--text: #ffffff;
|
||||
--alt: #999999;
|
||||
--background: #000000;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
font-family: "Jetbrains Mono", monospace;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
zoom: 1;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
body {
|
||||
zoom: 0.8;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
body {
|
||||
zoom: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
grid-template-columns: minmax(200px, 1fr);
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px;
|
||||
border-style: solid;
|
||||
background: var(--background);
|
||||
padding: 1.75rem;
|
||||
width: 55rem;
|
||||
max-width: 75%;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 300;
|
||||
}
|
||||
a:link,
|
||||
a:visited,
|
||||
a:active {
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
color: var(--secondary);
|
||||
}
|
||||
a:hover {
|
||||
transition-duration: 0.2s;
|
||||
transition-property: color, text-decoration;
|
||||
text-decoration: underline;
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,32 +1,19 @@
|
||||
---
|
||||
import Markdown from "../../components/MarkdownB.astro";
|
||||
import Blog from "../../layouts/Blog.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 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>
|
||||
<Blog title=`/home/kyren/blogs/${entry.slug}`>
|
||||
<Content />
|
||||
</Blog>
|
||||
|
||||
@@ -26,7 +26,7 @@ And when I am not coding I am most likely playing video games,
|
||||
watching Anime or solving Rubik's cubes fast.`.trimStart();
|
||||
---
|
||||
|
||||
<Layout title="Kyren's Website">
|
||||
<Layout title="/home/kyren/">
|
||||
<main>
|
||||
<Nav path="" />
|
||||
<div id="content">
|
||||
@@ -165,29 +165,4 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
border: 0;
|
||||
border-bottom: 1px;
|
||||
border-style: solid;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
#nav-links a {
|
||||
margin-right: 0.15rem;
|
||||
margin-bottom: 0px;
|
||||
margin-left: 0.15rem;
|
||||
color: var(--primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
#nav-links a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
#nav-path {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,123 +0,0 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
---
|
||||
|
||||
<Layout title="Kyren's Website">
|
||||
<main>
|
||||
<svg
|
||||
class="astro-a"
|
||||
width="495"
|
||||
height="623"
|
||||
viewBox="0 0 495 623"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M167.19 364.254C83.4786 364.254 0 404.819 0 404.819C0 404.819 141.781 19.4876 142.087 18.7291C146.434 7.33701 153.027 0 162.289 0H332.441C341.703 0 348.574 7.33701 352.643 18.7291C352.92 19.5022 494.716 404.819 494.716 404.819C494.716 404.819 426.67 364.254 327.525 364.254L264.41 169.408C262.047 159.985 255.147 153.581 247.358 153.581C239.569 153.581 232.669 159.985 230.306 169.408L167.19 364.254ZM160.869 530.172C160.877 530.18 160.885 530.187 160.894 530.195L160.867 530.181C160.868 530.178 160.868 530.175 160.869 530.172ZM136.218 411.348C124.476 450.467 132.698 504.458 160.869 530.172C160.997 529.696 161.125 529.242 161.248 528.804C161.502 527.907 161.737 527.073 161.917 526.233C165.446 509.895 178.754 499.52 195.577 500.01C211.969 500.487 220.67 508.765 223.202 527.254C224.141 534.12 224.23 541.131 224.319 548.105C224.328 548.834 224.337 549.563 224.347 550.291C224.563 566.098 228.657 580.707 237.264 593.914C245.413 606.426 256.108 615.943 270.749 622.478C270.593 621.952 270.463 621.508 270.35 621.126C270.045 620.086 269.872 619.499 269.685 618.911C258.909 585.935 266.668 563.266 295.344 543.933C298.254 541.971 301.187 540.041 304.12 538.112C310.591 533.854 317.059 529.599 323.279 525.007C345.88 508.329 360.09 486.327 363.431 457.844C364.805 446.148 363.781 434.657 359.848 423.275C358.176 424.287 356.587 425.295 355.042 426.275C351.744 428.366 348.647 430.33 345.382 431.934C303.466 452.507 259.152 455.053 214.03 448.245C184.802 443.834 156.584 436.019 136.218 411.348Z"
|
||||
fill="url(#paint0_linear_1805_24383)"></path>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1805_24383"
|
||||
x1="247.358"
|
||||
y1="0"
|
||||
x2="247.358"
|
||||
y2="622.479"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-opacity="0.9"></stop>
|
||||
<stop offset="1" stop-opacity="0.2"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<h1>Welcome to <span class="text-gradient">Kyren's Site</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br />
|
||||
<strong>Code Challenge:</strong> Tweak HMMM "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
width: 800px;
|
||||
max-width: calc(100% - 2rem);
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.astro-a {
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
left: 50%;
|
||||
transform: translatex(-50%);
|
||||
width: 220px;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.text-gradient {
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
.instructions {
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid rgba(var(--accent-light), 25%);
|
||||
background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent-light), 12%);
|
||||
color: rgb(var(--accent-light));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.4em;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent-light));
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +0,0 @@
|
||||
:root {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
/* --sl-text-body-sm: var(--sl-text-sm * 10); */
|
||||
/* --sl-text-code-sm: var(--sl-text-xs * 10); */
|
||||
/* font-size: 130%; */
|
||||
}
|
||||
p {
|
||||
/* font-size: 1.625rem; */
|
||||
}
|
||||
@@ -1,218 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
251
src/styles/markdown/markdown.css
Normal file
251
src/styles/markdown/markdown.css
Normal file
@@ -0,0 +1,251 @@
|
||||
.sl-markdown-content
|
||||
:not(.expressive-code *)
|
||||
+ :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);
|
||||
}
|
||||
88
src/styles/terminal.css
Normal file
88
src/styles/terminal.css
Normal file
@@ -0,0 +1,88 @@
|
||||
@import url("../styles/fonts/JetBrainsMono.css");
|
||||
|
||||
/* :root { */
|
||||
/* --primary: #ffbf00; */
|
||||
/* --secondary: #9b7eca; */
|
||||
/* --accent: #7ed4fb; */
|
||||
/* --extra: #8fcc75; */
|
||||
/* --text: #ffffff; */
|
||||
/* --alt: #999999; */
|
||||
/* --background: #000000; */
|
||||
/* } */
|
||||
|
||||
:root {
|
||||
--primary: #54d7a9;
|
||||
--secondary: #9b7eca;
|
||||
--accent: #7ed4fb;
|
||||
--extra: #8fcc75;
|
||||
--text: #ffffff;
|
||||
--alt: #999999;
|
||||
--background: #000000;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
font-family: "Jetbrains Mono", monospace;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-y: scroll;
|
||||
zoom: 1;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
body {
|
||||
zoom: 0.8;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
body {
|
||||
zoom: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
grid-template-columns: minmax(200px, 1fr);
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px;
|
||||
border-style: solid;
|
||||
background: var(--background);
|
||||
padding: 1.75rem;
|
||||
width: 55rem;
|
||||
max-width: 75%;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 300;
|
||||
}
|
||||
a:link,
|
||||
a:visited,
|
||||
a:active {
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
color: var(--secondary);
|
||||
}
|
||||
a:hover {
|
||||
transition-duration: 0.2s;
|
||||
transition-property: color, text-decoration;
|
||||
text-decoration: underline;
|
||||
color: var(--accent);
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/base"
|
||||
"extends": "astro/tsconfigs/base",
|
||||
"compilerOptions": {
|
||||
"strictNullChecks": true
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user