started adding docs site
Anton Franzluebbers
parent
61444aee34
commit
a300b2b5e4
|
|
@ -0,0 +1,21 @@
|
|||
# build output
|
||||
dist/
|
||||
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
# Astro Starter Kit: Basics
|
||||
|
||||
```
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Card.astro
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import mdx from "@astrojs/mdx";
|
||||
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [mdx(), tailwind()]
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"name": "",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/mdx": "^0.19.7",
|
||||
"@astrojs/tailwind": "^4.0.0",
|
||||
"astro": "^2.10.1",
|
||||
"tailwindcss": "^3.3.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: Menlo, Monaco, "Courier New", monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: .5rem;
|
||||
line-height: 1.25;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: #01ff70;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
color: #2ecc40;
|
||||
}
|
||||
|
||||
.retro-no-decoration {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 32rem) and (max-width: 48rem) {
|
||||
html {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
p,
|
||||
.retro-p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.3rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
.retro-h1,
|
||||
h2,
|
||||
.retro-h2,
|
||||
h3,
|
||||
.retro-h3,
|
||||
h4,
|
||||
.retro-h4 {
|
||||
margin: 1.414rem 0 .5rem;
|
||||
font-weight: inherit;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
h1,
|
||||
.retro-h1 {
|
||||
margin-top: 0;
|
||||
font-size: 3.998rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
.retro-h2 {
|
||||
font-size: 2.827rem;
|
||||
}
|
||||
|
||||
h3,
|
||||
.retro-h3 {
|
||||
font-size: 1.999rem;
|
||||
}
|
||||
|
||||
h4,
|
||||
.retro-h4 {
|
||||
font-size: 1.414rem;
|
||||
}
|
||||
|
||||
h5,
|
||||
.retro-h5 {
|
||||
font-size: 1.121rem;
|
||||
}
|
||||
|
||||
h6,
|
||||
.retro-h6 {
|
||||
font-size: .88rem;
|
||||
}
|
||||
|
||||
small,
|
||||
.retro-small {
|
||||
font-size: .707em;
|
||||
}
|
||||
|
||||
/* https://github.com/mrmrs/fluidity */
|
||||
|
||||
img,
|
||||
canvas,
|
||||
iframe,
|
||||
video,
|
||||
svg,
|
||||
select,
|
||||
textarea {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: #222;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #fafafa;
|
||||
font-family: "Courier New";
|
||||
line-height: 1.45;
|
||||
margin: 6rem auto 1rem;
|
||||
max-width: 48rem;
|
||||
padding: .25rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid #01ff70;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
|
|
@ -0,0 +1,592 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Global focus outline reset */
|
||||
*:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-color: var(--theme-dim-light) transparent;
|
||||
}
|
||||
|
||||
/* Webkit */
|
||||
/* Make scrollbars transparent except for main page scrollbar. */
|
||||
::-webkit-scrollbar,
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
body::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar-track {
|
||||
background: var(--theme-bg-gradient);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--theme-dim-light);
|
||||
border: 4px solid transparent;
|
||||
background-clip: content-box;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Ensure that the auto-hiding/showing address bar on iOS Safari
|
||||
always has a background color matching our theme.
|
||||
*/
|
||||
html {
|
||||
background: var(--theme-bg-gradient-bottom);
|
||||
}
|
||||
|
||||
/*
|
||||
Use a pseudo-element to add a gradient background that covers the entire viewport.
|
||||
Using a regular fixed background does not work properly on mobile browsers like iOS Safari.
|
||||
*/
|
||||
body::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -999;
|
||||
background: var(--theme-bg-gradient);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--theme-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content > section > * + *,
|
||||
.content > section > blockquote > * + *,
|
||||
.content > section > :is(ul, ol) > li > * + *,
|
||||
.content details > * + *,
|
||||
.content * > astro-slot > * + * {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.content > section > :is(ul, ol) > li > * + * {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.content > section > :is(ul, ol) > li,
|
||||
.content > section > :is(ul, ol) > li > * + *,
|
||||
.content > section > :is(ul, ol) > li > :is(ul, ol) > li,
|
||||
.content > section > :is(ul, ol) > li > :is(ul, ol) > li > * + * {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.content > section > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content > section > :is(ul, ol),
|
||||
.content > section > :is(ul, ol) :is(ul, ol) {
|
||||
padding-inline-start: 1.5em;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
:is(h1, h2, h3, h4, h5, h6),
|
||||
.content > section > .heading-wrapper {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) + *,
|
||||
.content > section > .heading-wrapper + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
max-width: 40ch;
|
||||
}
|
||||
|
||||
:is(h2):not(:first-child),
|
||||
.heading-wrapper:not(:first-child):is(.level-h2) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
:is(h3, h4):not(:first-child),
|
||||
.heading-wrapper:not(:first-child):is(.level-h3, .level-h4) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
:is(h5, h6):not(:first-child),
|
||||
.heading-wrapper:not(:first-child):is(.level-h5, .level-h6) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6, .heading-wrapper)
|
||||
+ :is(h1, h2, h3, h4, h5, h6, .heading-wrapper):not(:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5) code {
|
||||
--border-radius: 4px;
|
||||
--padding-block: 0.1rem;
|
||||
--padding-inline: 0.4rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem; /* 40px */
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@media (min-width: 37.75em) {
|
||||
h1 {
|
||||
font-size: 3rem; /* 48px */
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.875rem; /* 30px */
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem; /* 24px */
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem; /* 20px */
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem; /* 16px */
|
||||
}
|
||||
|
||||
.heading-wrapper {
|
||||
--icon-size-x: 2rem;
|
||||
--icon-size-y: 1.5rem;
|
||||
margin-inline-end: var(--icon-size-x);
|
||||
}
|
||||
|
||||
.heading-wrapper:not(:first-child) {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
.heading-wrapper > * {
|
||||
display: inline;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.heading-wrapper > .anchor-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
margin-inline-end: calc(-1 * var(--icon-size-x));
|
||||
width: var(--icon-size-x);
|
||||
height: var(--icon-size-y);
|
||||
color: var(--theme-text-light);
|
||||
text-decoration: none;
|
||||
justify-content: center;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Float anchor links to the left of headings on larger screens. */
|
||||
@media (min-width: 50em) {
|
||||
.heading-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
align-items: baseline;
|
||||
margin-inline-start: calc(-1 * var(--icon-size-x));
|
||||
}
|
||||
|
||||
.heading-wrapper > .anchor-link {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.heading-wrapper > .anchor-link {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.heading-wrapper > .anchor-link {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.heading-wrapper:hover > .anchor-link,
|
||||
.anchor-link:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
p,
|
||||
.content ul,
|
||||
.content ol {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
p,
|
||||
.content ul {
|
||||
color: var(--theme-text-light);
|
||||
}
|
||||
|
||||
small,
|
||||
.text_small {
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-accent-secondary);
|
||||
text-underline-offset: 0.08em;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
article > section :is(ul, ol) > * + * {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
article > section nav :is(ul, ol) > * + * {
|
||||
margin-top: inherit;
|
||||
}
|
||||
|
||||
article > section li > :is(p, pre, .expressive-code, blockquote):not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
article > section nav :is(ul, ol) {
|
||||
padding-inline-start: inherit;
|
||||
}
|
||||
|
||||
article > section nav {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
article > section ::marker {
|
||||
font-weight: bold;
|
||||
color: var(--theme-text-light);
|
||||
}
|
||||
|
||||
article > section iframe {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
a > code {
|
||||
position: relative;
|
||||
color: var(--theme-text-accent);
|
||||
text-underline-offset: var(--padding-block);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: 0.25em;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Supporting Content */
|
||||
code {
|
||||
--border-radius: 3px;
|
||||
--padding-block: 0.2rem;
|
||||
--padding-inline: 0.3rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
color: var(--theme-code-inline-text);
|
||||
background-color: var(--theme-code-inline-bg);
|
||||
padding: var(--padding-block) var(--padding-inline);
|
||||
margin: calc(var(--padding-block) * -1) 0;
|
||||
border-radius: var(--border-radius);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/*RTL Fix Code dir for inline code*/
|
||||
[dir='rtl'] code {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
/*RTL Fix Arrows*/
|
||||
[dir='rtl'] .toc-mobile-container svg {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.content kbd {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9375rem;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.0625rem 0.375rem;
|
||||
border: 1px solid var(--theme-shade-subtle);
|
||||
box-shadow: 0 2px var(--theme-shade-subtle);
|
||||
background-color: var(--theme-bg-offset);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.theme-dark .content kbd {
|
||||
border-color: var(--theme-divider);
|
||||
background-color: var(--theme-divider);
|
||||
}
|
||||
|
||||
thead {
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
padding: var(--padding-block) 0;
|
||||
margin: 0;
|
||||
border-collapse: collapse;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Zebra striping */
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background: var(--theme-divider);
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: 6px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
blockquote code {
|
||||
background-color: var(--theme-bg);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 2rem 0 2rem 0;
|
||||
padding: 1.25em 1.5rem;
|
||||
border-inline-start: 8px solid var(--theme-divider);
|
||||
background-color: var(--theme-bg-offset);
|
||||
border-radius: 0 0.25rem 0.25rem 0;
|
||||
line-height: 1.7;
|
||||
/* Indicates the blockquote boundaries for forced colors users, transparent is changed to a solid color */
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.content video {
|
||||
box-shadow: 0 0 var(--theme-glow-blur) var(--theme-glow-diffuse);
|
||||
}
|
||||
|
||||
.content details {
|
||||
--details-padding-block: 0.25rem;
|
||||
--details-padding-inline: 1rem;
|
||||
--details-corners: 0.5rem;
|
||||
border-radius: var(--details-corners);
|
||||
border: 1px solid var(--theme-shade-subtle);
|
||||
padding: var(--details-padding-block) var(--details-padding-inline);
|
||||
}
|
||||
|
||||
.content details:hover {
|
||||
background: var(--theme-bg-offset);
|
||||
}
|
||||
|
||||
.content details[open] {
|
||||
background: var(--theme-bg-offset);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content details summary {
|
||||
margin: calc(-1 * var(--details-padding-block)) calc(-1 * var(--details-padding-inline));
|
||||
padding: var(--details-padding-block) var(--details-padding-inline);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content details summary::marker,
|
||||
.content details summary::-webkit-details-marker {
|
||||
color: var(--theme-accent-secondary);
|
||||
}
|
||||
|
||||
.content details[open] > summary {
|
||||
border-bottom: 1px solid var(--theme-shade-subtle);
|
||||
}
|
||||
|
||||
.content details pre {
|
||||
--padding-inline: 1.25rem;
|
||||
border: var(--glow-border);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
font-size: 1rem;
|
||||
padding: 0.33em 0.67em;
|
||||
}
|
||||
|
||||
h2.heading {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.header-link {
|
||||
font-size: 1em;
|
||||
transition: border-inline-start-color 100ms ease-out, background-color 200ms ease-out;
|
||||
}
|
||||
|
||||
a.header-link {
|
||||
display: inline-flex;
|
||||
gap: 0.5em;
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
line-height: 1.3;
|
||||
color: var(--theme-text-lighter);
|
||||
text-decoration: none;
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
a.header-link {
|
||||
padding-top: 0.275rem;
|
||||
padding-bottom: 0.275rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-link:hover,
|
||||
.header-link:focus,
|
||||
.header-link:focus-within {
|
||||
border-inline-start-color: var(--theme-accent-secondary);
|
||||
}
|
||||
|
||||
a.header-link:hover,
|
||||
a.header-link:focus {
|
||||
color: var(--theme-text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.header-link svg {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.header-link:hover svg {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Add line and padding on the left side */
|
||||
.header-link {
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
.header-link.depth-3 {
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
.header-link.depth-4 {
|
||||
padding-inline-start: 3rem;
|
||||
}
|
||||
|
||||
/* Apply different TOC styling for wide viewports showing the right sidebar */
|
||||
@media (min-width: 72em) {
|
||||
h2.heading {
|
||||
padding-inline-start: calc(1rem + 4px);
|
||||
}
|
||||
|
||||
.header-link {
|
||||
border-inline-start: 4px solid var(--theme-divider);
|
||||
}
|
||||
}
|
||||
|
||||
/* Highlight TOC header link matching the current scroll position */
|
||||
a.current-header-link {
|
||||
background-color: var(--theme-bg-accent);
|
||||
/* Indicates the current heading for forced colors users in older browsers */
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
a.current-header-link {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
a.current-header-link {
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
/* Screenreader Only Text */
|
||||
.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;
|
||||
}
|
||||
|
||||
.focus\:not-sr-only:focus,
|
||||
.focus\:not-sr-only:focus-visible {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct amount of scroll padding to ensure that linked headings are always visible
|
||||
and have enough distance to the viewport edge and potential fixed navigation bars.
|
||||
|
||||
Please note that this can't be done with `scroll-margin` on the scroll targets themselves
|
||||
due to lack of iOS Safari browser support.
|
||||
*/
|
||||
html {
|
||||
/* Mobile TOC is displayed above page content */
|
||||
scroll-padding-top: calc(1.5rem + var(--theme-navbar-height) + var(--theme-mobile-toc-height));
|
||||
}
|
||||
|
||||
@media (min-width: 72em) {
|
||||
html {
|
||||
/* Regular TOC is displayed as a sidebar */
|
||||
scroll-padding-top: calc(1.5rem + var(--theme-navbar-height));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
details svg {
|
||||
/* Removes the collapsible sidebar svg animation */
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
/*
|
||||
Define common sizes and spacings
|
||||
*/
|
||||
:root {
|
||||
--theme-navbar-height: 6rem;
|
||||
--theme-mobile-toc-height: 4rem;
|
||||
--theme-left-sidebar-width: 18rem;
|
||||
--theme-right-sidebar-width: 18rem;
|
||||
/*
|
||||
Minimum visual horizontal spacing from the edges of the viewport,
|
||||
and between vertically arranged elements
|
||||
*/
|
||||
--min-spacing-inline: 1rem;
|
||||
/* Vertical spacing around the article content and the right sidebar */
|
||||
--doc-padding-block: 0.5rem;
|
||||
--max-width: 100%;
|
||||
--cur-viewport-height: 100vh;
|
||||
/* Font sizes */
|
||||
--theme-text-lg: 1.25rem;
|
||||
--theme-text-base: 1rem;
|
||||
--theme-text-sm: 0.9375rem;
|
||||
--theme-text-xs: 0.875rem;
|
||||
/* Animation helpers */
|
||||
--theme-ease-bounce: cubic-bezier(0.4, 2.5, 0.6, 1);
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
:root {
|
||||
--min-spacing-inline: 1.5rem;
|
||||
--doc-padding-block: 1rem;
|
||||
--max-width: 46em;
|
||||
--theme-text-sm: 0.875rem;
|
||||
--theme-text-xs: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 72em) {
|
||||
:root {
|
||||
--doc-padding-block: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Use dynamic viewport height if the unit is supported by the browser */
|
||||
@supports (height: 100dvh) {
|
||||
:root {
|
||||
--cur-viewport-height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Define common fonts and colors
|
||||
*/
|
||||
:root,
|
||||
::backdrop {
|
||||
--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
|
||||
Apple Color Emoji, Segoe UI Emoji;
|
||||
--font-body: system-ui, var(--font-fallback);
|
||||
--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
|
||||
'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
|
||||
'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
|
||||
|
||||
/*
|
||||
Variables with --color-base prefix define
|
||||
the hue, and saturation values to be used for
|
||||
hsla colors.
|
||||
|
||||
Example:
|
||||
--color-base-{color}: {hue}, {saturation};
|
||||
*/
|
||||
|
||||
--color-base-white: 0, 0%;
|
||||
--color-base-black: 240, 100%;
|
||||
--color-base-gray: 250, 14%;
|
||||
--color-base-blue: 212, 100%;
|
||||
--color-base-blue-dark: 212, 72%;
|
||||
--color-base-teal: 180, 80%;
|
||||
--color-base-green: 158, 79%;
|
||||
--color-base-orange: 22, 100%;
|
||||
--color-base-purple: 269, 79%;
|
||||
--color-base-red: 351, 100%;
|
||||
--color-base-yellow: 41, 100%;
|
||||
|
||||
/*
|
||||
Color palettes are made using --color-base
|
||||
variables, along with a lightness value to
|
||||
define different variants.
|
||||
*/
|
||||
|
||||
--color-gray-5: var(--color-base-gray), 5%;
|
||||
--color-gray-10: var(--color-base-gray), 10%;
|
||||
--color-gray-20: var(--color-base-gray), 20%;
|
||||
--color-gray-30: var(--color-base-gray), 30%;
|
||||
--color-gray-40: var(--color-base-gray), 40%;
|
||||
--color-gray-50: var(--color-base-gray), 50%;
|
||||
--color-gray-60: var(--color-base-gray), 60%;
|
||||
--color-gray-70: var(--color-base-gray), 70%;
|
||||
--color-gray-80: var(--color-base-gray), 80%;
|
||||
--color-gray-90: var(--color-base-gray), 90%;
|
||||
--color-gray-95: var(--color-base-gray), 95%;
|
||||
|
||||
--color-blue: var(--color-base-blue), 61%;
|
||||
--color-blue-dark: var(--color-base-blue-dark), 39%;
|
||||
--color-green: var(--color-base-green), 42%;
|
||||
--color-orange: var(--color-base-orange), 50%;
|
||||
--color-purple: var(--color-base-purple), 54%;
|
||||
--color-red: var(--color-base-red), 54%;
|
||||
--color-yellow: var(--color-base-yellow), 59%;
|
||||
}
|
||||
|
||||
:root,
|
||||
::backdrop {
|
||||
color-scheme: light;
|
||||
--theme-accent: hsla(var(--color-orange), 1);
|
||||
--theme-accent-secondary: hsl(324, 75%, 38%);
|
||||
--theme-dim: hsla(var(--color-gray-70), 1);
|
||||
--theme-dim-light: hsla(var(--color-gray-80), 1);
|
||||
--theme-dim-lighter: hsla(var(--color-gray-90), 1);
|
||||
--theme-accent-opacity: 0.1;
|
||||
--theme-divider: hsla(var(--color-purple), 0.1);
|
||||
--theme-shade-subtle: hsla(var(--color-purple), 0.3);
|
||||
--theme-text: hsla(var(--color-gray-10), 1);
|
||||
--theme-text-light: hsla(var(--color-gray-30), 1);
|
||||
--theme-text-lighter: hsla(var(--color-gray-40), 1);
|
||||
--theme-bg: hsl(273, 37%, 93%);
|
||||
--theme-bg-gradient-top: var(--theme-bg);
|
||||
--theme-bg-gradient-bottom: #fdfeff;
|
||||
--theme-bg-hover: hsla(var(--color-purple), 0.075);
|
||||
--theme-bg-offset: hsla(var(--color-purple), 0.1);
|
||||
--theme-bg-accent: hsla(var(--color-purple), var(--theme-accent-opacity));
|
||||
--theme-backdrop-overlay: hsla(var(--color-gray-50), 0.8);
|
||||
--theme-code-inline-bg: hsla(var(--color-purple), 0.1);
|
||||
--theme-code-inline-text: var(--theme-text);
|
||||
--theme-code-bg: hsla(257, 31%, 22%, 1);
|
||||
--theme-code-tabs: hsla(257, 38%, 32%, 1);
|
||||
--theme-code-text: hsla(var(--color-gray-95), 1);
|
||||
--theme-navbar-bg: var(--theme-bg);
|
||||
--theme-selection-color: hsla(var(--color-purple), 1);
|
||||
--theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
|
||||
--theme-code-selection-bg: hsla(var(--color-purple), 0.4);
|
||||
--theme-code-mark-bg: hsl(226, 50%, 33%);
|
||||
--theme-code-mark-border: hsl(224, 50%, 54%);
|
||||
--theme-code-ins-bg: hsl(122, 22%, 23%);
|
||||
--theme-code-ins-border: hsl(128, 42%, 38%);
|
||||
--theme-code-ins-text: hsl(128, 31%, 65%);
|
||||
--theme-code-del-bg: hsl(338, 40%, 26%);
|
||||
--theme-code-del-border: hsl(338, 46%, 53%);
|
||||
--theme-code-del-text: hsl(338, 36%, 70%);
|
||||
|
||||
--theme-bg-gradient: linear-gradient(
|
||||
180deg,
|
||||
var(--theme-bg-gradient-top),
|
||||
var(--theme-bg-gradient-top) calc(var(--theme-navbar-height) + var(--theme-mobile-toc-height)),
|
||||
var(--theme-bg-gradient-bottom)
|
||||
);
|
||||
|
||||
--theme-glow-highlight: transparent;
|
||||
--theme-glow-diffuse: hsla(var(--color-base-purple), 65%, 0.5);
|
||||
--theme-glow-blur: 10px;
|
||||
}
|
||||
|
||||
:root.theme-dark,
|
||||
.theme-dark ::backdrop {
|
||||
color-scheme: dark;
|
||||
/* We lighten-up the orange in dark mode, to help with link contrast. */
|
||||
--color-orange: var(--color-base-orange), 60%;
|
||||
--theme-accent-opacity: 0.4;
|
||||
--theme-accent: hsla(var(--color-orange), 1);
|
||||
--theme-accent-secondary: hsla(var(--color-orange), 1);
|
||||
--theme-text-accent: hsla(var(--color-orange), 1);
|
||||
--theme-dim: hsla(var(--color-gray-90), 0.3);
|
||||
--theme-dim-light: hsla(var(--color-gray-90), 0.2);
|
||||
--theme-dim-lighter: hsla(var(--color-gray-90), 0.1);
|
||||
--theme-divider: hsla(var(--color-gray-95), 0.1);
|
||||
--theme-shade-subtle: hsla(var(--color-gray-95), 0.4);
|
||||
--theme-text: hsla(var(--color-gray-90), 1);
|
||||
--theme-text-light: hsla(var(--color-gray-80), 1);
|
||||
--theme-text-lighter: hsla(var(--color-gray-70), 1);
|
||||
--theme-bg: hsl(256, 27%, 19%);
|
||||
--theme-bg-gradient-top: var(--theme-bg);
|
||||
--theme-bg-gradient-bottom: hsl(251, 29%, 11%);
|
||||
--theme-bg-hover: hsla(var(--color-purple), 0.2);
|
||||
--theme-bg-offset: #0008;
|
||||
--theme-backdrop-overlay: hsla(var(--color-gray-10), 0.8);
|
||||
--theme-code-inline-bg: #ffffff16;
|
||||
--theme-code-inline-text: var(--theme-text-light);
|
||||
--theme-code-bg: hsla(257, 31%, 11%, 1);
|
||||
--theme-code-tabs: hsla(261, 40%, 21%, 1);
|
||||
--theme-code-text: hsla(var(--color-base-white), 80%, 1);
|
||||
--theme-navbar-bg: var(--theme-bg);
|
||||
--theme-selection-color: hsla(var(--color-base-white), 100%, 1);
|
||||
--theme-code-mark-bg: hsl(224, 60%, 25%);
|
||||
--theme-code-mark-border: hsl(225, 42%, 46%);
|
||||
--theme-code-ins-bg: hsl(122, 29%, 17%);
|
||||
--theme-code-ins-border: hsl(128, 41%, 32%);
|
||||
--theme-code-ins-text: hsl(128, 31%, 55%);
|
||||
--theme-code-del-bg: hsl(337, 47%, 19%);
|
||||
--theme-code-del-border: hsl(340, 34%, 43%);
|
||||
--theme-code-del-text: hsl(340, 24%, 65%);
|
||||
|
||||
--theme-glow-highlight: hsla(var(--color-base-purple), 50%, 1);
|
||||
--theme-glow-diffuse: hsla(var(--color-base-purple), 35%, 0.4);
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--theme-selection-color);
|
||||
background-color: var(--theme-selection-bg);
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="astro/client" />
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content={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>
|
||||
<link rel="stylesheet" href="/css/retro.css" />
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
/* :root {
|
||||
--accent: 136, 58, 234;
|
||||
--accent-light: 224, 204, 250;
|
||||
--accent-dark: 49, 10, 101;
|
||||
--accent-gradient: linear-gradient(
|
||||
45deg,
|
||||
rgb(var(--accent)),
|
||||
rgb(var(--accent-light)) 30%,
|
||||
white 60%
|
||||
);
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: #13151a;
|
||||
background-size: 224px;
|
||||
}
|
||||
code {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
|
||||
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
} */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: VelNet Unity
|
||||
description: Unity integration package for VelNet
|
||||
layout: ../layouts/Layout.astro
|
||||
---
|
||||
|
||||
# VelNet Unity
|
||||
An easy-to-use networking library for Unity. VelNet is architected similar to Photon PUN, with a single server that acts as a relay for information sent by all clients.
|
||||
|
||||
## Installing
|
||||
|
||||
1. Set up the [server](/server_setup), or use the default server at `velnet-example.ugavel.com`
|
||||
2. Install the UPM package in Unity
|
||||
- Option 1:
|
||||
- Add the VEL package registry:
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict"
|
||||
}
|
||||
Loading…
Reference in New Issue