Refactor smoke tests to use submodules (#2702)
* chore: delete inlined repos * refactor: move smoke tests to submodules * chore: remove smoke sync action * chore: update ci to fetch submodules for smoke test only * chore: fix ci script * feat: delete inlined smoke tests * fix: update lockfile to exclude smoke tests * chore(ci): ensure smoke tests can pass in CI
This commit is contained in:
Nate Moore
GitHub
parent
caf9135c48
commit
2482fe70b9
373 changed files with 44 additions and 39225 deletions
8
.github/workflows/ci.yml
vendored
8
.github/workflows/ci.yml
vendored
|
|
@ -178,7 +178,9 @@ jobs:
|
|||
- build
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
submodules: 'recursive'
|
||||
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v2
|
||||
|
|
@ -203,11 +205,11 @@ jobs:
|
|||
cache-node_modules-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-
|
||||
|
||||
- name: Install NPM Dependencies
|
||||
run: yarn install --prefer-offline --frozen-lockfile --ignore-engines --registry https://registry.npmjs.org --network-timeout 300000
|
||||
# NOTE: Do NOT use `--frozen-lockfile` here! The lockfile needs to be updated in order to pull the submodules into the monorepo
|
||||
run: yarn install --prefer-offline --ignore-engines --registry https://registry.npmjs.org --network-timeout 300000
|
||||
env:
|
||||
CI: true
|
||||
|
||||
# Turbo seems to fail on Windows, so run a custom script directly.
|
||||
- name: Test
|
||||
run: yarn test:smoke
|
||||
|
||||
|
|
|
|||
29
.github/workflows/nightly.yml
vendored
29
.github/workflows/nightly.yml
vendored
|
|
@ -61,32 +61,3 @@ jobs:
|
|||
body: >
|
||||
This PR is auto-generated by a nightly GitHub action.
|
||||
It should automatically be merged if tests pass.
|
||||
|
||||
smoke-sync:
|
||||
if: github.repository_owner == 'withastro'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check out code using Git
|
||||
uses: actions/checkout@v2
|
||||
- name: Set Node version to 16
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 16
|
||||
cache: 'yarn'
|
||||
- name: Install dependencies
|
||||
run: yarn install --frozen-lockfile --ignore-engines --ignore-scripts
|
||||
- name: Sync smoke tests
|
||||
run: node scripts/smoke/sync.js
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
- name: Create Pull Request
|
||||
id: createpr
|
||||
uses: peter-evans/create-pull-request@v3
|
||||
with:
|
||||
branch: ci/smoke-sync
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
commit-message: '[ci] update smoke tests (remote)'
|
||||
title: '[ci] update smoke tests (remote)'
|
||||
body: >
|
||||
This PR is auto-generated by a nightly GitHub action.
|
||||
It should automatically be merged if tests pass.
|
||||
8
.gitmodules
vendored
Normal file
8
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
[submodule "smoke/docs"]
|
||||
path = smoke/docs
|
||||
url = git@github.com:withastro/docs.git
|
||||
branch = main
|
||||
[submodule "smoke/astro.build"]
|
||||
path = smoke/astro.build
|
||||
url = git@github.com:withastro/astro.build.git
|
||||
branch = main
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
/** @file Runs all smoke tests and may add extra smoke-test dependencies to `yarn.lock`. */
|
||||
|
||||
// @ts-check
|
||||
|
||||
import Zip from 'adm-zip';
|
||||
import rimraf from 'rimraf';
|
||||
import { execa } from 'execa';
|
||||
import { polyfill } from '@astropub/webapi';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { promises as fs } from 'node:fs';
|
||||
|
||||
polyfill(globalThis, { exclude: 'window document' });
|
||||
|
||||
/* Configuration
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/** URL directory containing this current script. */
|
||||
// const scriptDir = new URL('./', import.meta.url);
|
||||
|
||||
/** URL directory containing the entire project. */
|
||||
const rootDir = new URL('../../', import.meta.url);
|
||||
|
||||
/** URL directory containing the example subdirectories. */
|
||||
const exampleDir = new URL('examples/', rootDir);
|
||||
const smokeDir = new URL('smoke/', rootDir);
|
||||
|
||||
/** URL directory containing the Astro package. */
|
||||
const astroDir = new URL('packages/astro/', rootDir);
|
||||
|
||||
/** GitHub configuration for the external "docs" Astro project. */
|
||||
const docGithubConfig = { org: 'withastro', name: 'docs', branch: 'main' };
|
||||
|
||||
/** GitHub configuration for the external "astro.build" Astro project. */
|
||||
const wwwGithubConfig = { org: 'withastro', name: 'astro.build', branch: 'main' };
|
||||
|
||||
/* Application
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/** Runs all smoke tests. */
|
||||
async function run() {
|
||||
await downloadGithubZip(docGithubConfig);
|
||||
await downloadGithubZip(wwwGithubConfig);
|
||||
await execa('yarn', [], { cwd: fileURLToPath(rootDir), stdout: 'inherit', stderr: 'inherit' });
|
||||
}
|
||||
|
||||
/* Functionality
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/** Returns the URL to the ZIP of the given GitHub project. */
|
||||
const getGithubZipURL = (/** @type {GithubOpts} */ opts) => `https://github.com/${opts.org}/${opts.name}/archive/refs/heads/${opts.branch}.zip`;
|
||||
|
||||
/** Returns the awaited ZIP Buffer from the given GitHub project. */
|
||||
const fetchGithubZip = (/** @type {GithubOpts} */ opts) =>
|
||||
fetch(getGithubZipURL(opts))
|
||||
.then((response) => response.arrayBuffer())
|
||||
.then((arrayBuffer) => Buffer.from(arrayBuffer));
|
||||
|
||||
/** Downloads a ZIP from the given GitHub project. */
|
||||
const downloadGithubZip = async (/** @type {GithubOpts} */ opts) => {
|
||||
/** Expected directory when the zip is downloaded. */
|
||||
const githubDir = new URL(`${opts.name}-${opts.branch}`, smokeDir);
|
||||
/** Whether the expected directory is already available */
|
||||
rimraf.sync(fileURLToPath(githubDir));
|
||||
console.log('🤖', 'Downloading', `${opts.org}/${opts.name}#${opts.branch}`);
|
||||
const buffer = await fetchGithubZip(opts);
|
||||
console.log('🤖', 'Extracting', `${opts.org}/${opts.name}#${opts.branch}`);
|
||||
new Zip(buffer).extractAllTo(fileURLToPath(smokeDir), true);
|
||||
console.log('🤖', 'Preparing', `${opts.org}/${opts.name}#${opts.branch}`);
|
||||
const astroPackage = await readDirectoryPackage(astroDir);
|
||||
const githubPackage = await readDirectoryPackage(githubDir);
|
||||
if ('astro' in Object(githubPackage.dependencies)) {
|
||||
githubPackage.dependencies['astro'] = astroPackage.version;
|
||||
}
|
||||
if ('astro' in Object(githubPackage.devDependencies)) {
|
||||
githubPackage.devDependencies['astro'] = astroPackage.version;
|
||||
}
|
||||
if ('astro' in Object(githubPackage.peerDependencies)) {
|
||||
githubPackage.peerDependencies['astro'] = astroPackage.version;
|
||||
}
|
||||
await writeDirectoryPackage(githubDir, githubPackage);
|
||||
rimraf.sync(fileURLToPath(new URL(`yarn.lock`, githubDir)));
|
||||
rimraf.sync(fileURLToPath(new URL(`package-lock.json`, githubDir)));
|
||||
};
|
||||
|
||||
/** Returns the parsed package.json of the given directory. */
|
||||
const readDirectoryPackage = async (/** @type {URL} */ dir) => JSON.parse(await fs.readFile(new URL('package.json', dir + '/'), 'utf-8'));
|
||||
|
||||
/** Returns upon completion of writing a package.json to the given directory. */
|
||||
const writeDirectoryPackage = async (/** @type {URL} */ dir, /** @type {any} */ data) =>
|
||||
await fs.writeFile(new URL('package.json', dir + '/'), JSON.stringify(data, null, ' ') + '\n');
|
||||
|
||||
/* Execution
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
run();
|
||||
|
||||
/** @typedef {{ org: string, name: string, branch: string }} GithubOpts */
|
||||
1
smoke/astro.build
Submodule
1
smoke/astro.build
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit d3d0b54b7196aa80db4a810f127ce154082434c5
|
||||
130
smoke/astro.build-main/.gitignore
vendored
130
smoke/astro.build-main/.gitignore
vendored
|
|
@ -1,130 +0,0 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[](https://app.netlify.com/sites/astro-build/deploys)
|
||||
|
||||
# [astro.build](https://astro.build)
|
||||
|
||||
The source code for [astro.build](https://astro.build), built with [Astro](https://github.com/withastro/astro).
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import type { AstroUserConfig } from "astro";
|
||||
|
||||
const config: AstroUserConfig = {
|
||||
buildOptions: {
|
||||
site: "https://astro.build",
|
||||
sitemap: true,
|
||||
},
|
||||
renderers: [],
|
||||
markdownOptions: {
|
||||
render: [
|
||||
"@astrojs/markdown-remark",
|
||||
{
|
||||
remarkPlugins: [
|
||||
"remark-smartypants",
|
||||
["remark-autolink-headings", { behavior: "wrap" }],
|
||||
],
|
||||
rehypePlugins: [
|
||||
"rehype-slug",
|
||||
["rehype-autolink-headings", { behavior: "wrap" }],
|
||||
],
|
||||
syntaxHighlight: 'shiki',
|
||||
},
|
||||
],
|
||||
},
|
||||
vite: {
|
||||
ssr: {
|
||||
noExternal: ['smartypants'],
|
||||
external: ["svgo"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
{
|
||||
"name": "astro.build",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "astro dev --experimental-static-build",
|
||||
"dev": "astro dev --experimental-static-build",
|
||||
"debug": "DEBUG=* astro dev --experimental-static-build",
|
||||
"build": "astro build --experimental-static-build",
|
||||
"preview": "astro preview",
|
||||
"update-contributors": "node ./update-contributors.mjs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/aspect-ratio": "^0.4.0",
|
||||
"@tailwindcss/typography": "^0.5.2",
|
||||
"astro": "0.23.3",
|
||||
"astro-icon": "^0.6.0",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"postcss": "^8.4.7",
|
||||
"tailwindcss": "^3.0.23"
|
||||
},
|
||||
"volta": {
|
||||
"node": "14.18.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"date-fns": "^2.28.0",
|
||||
"quicklink": "^2.2.0",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"remark-autolink-headings": "^7.0.1",
|
||||
"remark-smartypants": "^2.0.0",
|
||||
"smartypants": "^0.1.6"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,10 +0,0 @@
|
|||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {
|
||||
config: path.join(__dirname, 'tailwind.config.js'), // update this if your path differs!
|
||||
},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
# Netlify Redirects
|
||||
/chat https://discord.gg/grF4GTXXYm
|
||||
/play/* https://play.astro.build/play/:splat 200
|
||||
/v0.21 /blog/astro-021-release/ 301
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425 200">
|
||||
<view id="flame" viewBox="0 0 160 200" />
|
||||
<view id="name" viewBox="240 78 185 122" />
|
||||
|
||||
<path d="M394.5 78v28.8H425v15.6h-30.5V158c0 3.6.1 7.2.5 10.3.8 5.3 4 10.5 8.4 12.5 5.7 2.6 9.7 2.1 21.6 1.7l-2.9 17.2c-.8.4-4 .3-7 .3-7 0-33.4 2.5-38.8-24.7-.9-4.7-.7-9.5-.7-16.9v-35.8H362l.2-15.9h13.4V78zm-51.7 28.7v91.5H324v-91.5zm0-28.7v16.3h-19V78zm-83.6 102.2h48.2l-18 18H240V78h19.2z"/>
|
||||
|
||||
<path fill="#324fff" d="M0 80v80a70.3 70.3 0 0040-40z"/>
|
||||
<path fill="#283198" d="M40 120c5.7 27.3 5.3 47 0 80L0 160z"/>
|
||||
<path fill="#0ff" d="M40 120v80l40-40a149.9 149.9 0 00-40-40z"/>
|
||||
<path fill="#324fff" d="M80 0v80S48.3 55.7 40 40z"/>
|
||||
<path fill="#324fff" d="M40 40v80a84.8 84.8 0 0040-40z"/>
|
||||
<path fill="#00e8ff" d="M80 80a182 182 0 010 80l-40-40z"/>
|
||||
<path fill="#283198" d="M80 80v80c17-7.5 31.5-19 40-40-5.9-17-18.1-30.9-40-40z"/>
|
||||
<path fill="#283198" d="M120 40v80L80 80z"/>
|
||||
<path fill="#00e8ff" d="M120 120c6.1 27 4.9 53.6 0 80l-40-40z"/>
|
||||
<path fill="#324fff" d="M120 120v80l40-40c-5.4-15-18.3-27.9-40-40z"/>
|
||||
<path fill="#324fff" d="M160 80v80l-40-40z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 621 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg enable-background="new 0 0 341.7 155.3" viewBox="0 0 341.7 155.3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.513" x2="152.027" y1="3.551" y2="63.991"><stop offset=".118" stop-color="#bbbdbf"/><stop offset=".299" stop-color="#f1f1f2"/><stop offset="1" stop-color="#d0d2d3"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.792" x2="73.994" y1="33.088" y2="105.748"><stop offset="0" stop-color="#bbbdbf"/><stop offset=".475" stop-color="#929497"/><stop offset="1" stop-color="#58595b"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.417" x2="144.251" y1="64.728" y2="150.269"><stop offset="0" stop-color="#58595b"/><stop offset=".539" stop-color="#929497"/><stop offset="1" stop-color="#58595b"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.248" x2="24.386" y1="75.009" y2="261.284"><stop offset="0" stop-color="#4377bb"/><stop offset="0" stop-color="#808184"/><stop offset=".475" stop-color="#404041"/><stop offset="1" stop-color="#231f20"/></linearGradient></defs><path d="m169.2 100.9s3.2 3.4 8.1 3.4c3.4 0 6.2-2 6.2-5.4 0-7.8-15.5-5.9-15.5-15.5 0-4.5 4-8.3 9.7-8.3 5.4 0 8.3 3 8.3 3l-1.5 2.6s-2.7-2.7-6.8-2.7c-4 0-6.5 2.6-6.6 5.3 0 7.4 15.5 5.3 15.5 15.5 0 4.6-3.6 8.4-9.4 8.4-6.4 0-9.8-4-9.8-4zm49.1-25.6c8.8 0 15.8 7 15.8 15.9.1 8.8-7 16.1-15.8 16.2h-.1c-8.8-.1-15.9-7.4-15.8-16.2v-.1c.1-8.9 7.1-15.9 15.9-15.8zm-.1 29.3c7.2-.2 12.9-6.1 12.7-13.3v-.1c0-7.4-5.6-13.1-12.6-13.1s-12.7 5.6-12.7 13c0 7.6 5.6 13.4 12.6 13.5zm33.9-28.7h3l-.1 28.3h14.4v2.7h-17.5zm33.9.1h3l-.1 31.1h-3zm23.2 0h10c9.3 0 15.6 5.7 15.6 15.6s-6.3 15.5-15.6 15.5h-10zm9.6 28.4c7.6 0 12.7-4.5 12.8-12.8 0-8.3-5.1-12.8-12.7-12.8h-6.7l-.1 25.6z" fill="#fff"/><path d="m163 35.8s-52.7-39.8-93.6-30.5c-1.2.3-2.5.6-3.6 1-6.3 2-11 5.5-13.9 9.7-.6.8-1 1.7-1.5 2.5l-15.1 25.7 26.1 5.1c10.3 7.4 24.8 10.5 37.2 7.3l46.5 9.1z" fill="#bbbdbf"/><path d="m163 35.8s-52.7-39.8-93.6-30.5c-1.2.3-2.5.6-3.6 1-6.3 2-11 5.5-13.9 9.7-.6.8-1 1.7-1.5 2.5l-15.1 25.7 26.1 5.1c10.3 7.4 24.8 10.5 37.2 7.3l46.5 9.1z" fill="url(#a)" opacity=".29"/><path d="m51.5 35.3c-1.2.3-2.5.6-3.6 1-16.7 5.4-22.4 21-12.8 34.7s30.9 20.4 47.6 15l62.3-20.2s-52.6-39.8-93.5-30.5z" fill="#929497"/><path d="m51.5 35.3c-1.2.3-2.5.6-3.6 1-16.7 5.4-22.4 21-12.8 34.7s30.9 20.4 47.6 15l62.3-20.2s-52.6-39.8-93.5-30.5z" fill="url(#b)" opacity=".34"/><path d="m133.6 80.3c-9.6-13.7-30.9-20.5-47.6-15.1l-62.4 20.2-19.6 35 111.6 19.1 20-35.6c4-7 3.6-15.6-2-23.6z" fill="url(#c)"/><path d="m114 115.2c-9.6-13.7-30.9-20.5-47.6-15.1l-62.4 20.3s52.7 39.8 93.6 30.5c1.2-.3 2.5-.6 3.6-1 16.7-5.4 22.4-21 12.8-34.7z" fill="url(#d)"/></svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 479 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 697 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 376 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
|
|
@ -1,9 +0,0 @@
|
|||
<svg width="2712" height="894" viewBox="0 0 2712 894" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M445.432 22.9832C452.722 32.0324 456.439 44.2432 463.873 68.6647L626.28 602.176C566.233 571.026 500.957 548.56 432.114 536.439L326.37 179.099C324.64 173.252 319.27 169.241 313.173 169.241C307.06 169.241 301.679 173.273 299.963 179.14L195.5 536.259C126.337 548.325 60.7627 570.832 0.458984 602.095L163.664 68.5412C171.121 44.1617 174.85 31.9718 182.139 22.9393C188.575 14.9651 196.946 8.77213 206.453 4.95048C217.223 0.621582 229.97 0.621582 255.465 0.621582H372.034C397.562 0.621582 410.326 0.621582 421.106 4.95951C430.622 8.78908 438.998 14.9946 445.432 22.9832Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M464.866 627.566C438.093 650.46 384.655 666.073 323.1 666.073C247.551 666.073 184.228 642.553 167.425 610.921C161.418 629.05 160.071 649.798 160.071 663.052C160.071 663.052 156.114 728.134 201.38 773.401C201.38 749.896 220.434 730.842 243.938 730.842C284.225 730.842 284.18 765.99 284.143 794.506C284.142 795.36 284.141 796.209 284.141 797.051C284.141 840.333 310.594 877.436 348.215 893.075C342.596 881.518 339.444 868.54 339.444 854.825C339.444 813.545 363.678 798.175 391.844 780.311C414.254 766.098 439.154 750.307 456.314 718.629C465.268 702.101 470.352 683.17 470.352 663.052C470.352 650.68 468.429 638.757 464.866 627.566Z" fill="#FF5D01"/>
|
||||
<path d="M999.147 593.833C1067.08 593.833 1118.03 569.665 1138.93 528.516C1138.93 548.111 1140.23 568.36 1143.5 584.036H1255.19C1249.97 561.173 1247.35 529.82 1247.35 488.671V388.081C1247.35 292.717 1191.18 247.648 1066.42 247.648C957.344 247.648 884.188 292.717 875.696 366.527H991.962C995.881 334.521 1022.66 316.885 1066.42 316.885C1109.53 316.885 1133.7 334.521 1133.7 371.1V380.896L1015.48 391.347C957.997 397.227 925.338 407.023 902.476 422.7C878.309 439.028 865.898 463.851 865.898 494.549C865.898 555.948 916.847 593.833 999.147 593.833ZM1042.26 525.902C1004.37 525.902 981.511 510.88 981.511 486.712C981.511 461.892 1000.45 448.827 1048.14 442.949L1135.66 433.805V453.4C1135.66 497.163 1097.78 525.902 1042.26 525.902Z" fill="white"/>
|
||||
<path d="M1490.77 593.833C1604.42 593.833 1662.56 551.377 1662.56 482.793C1662.56 425.966 1629.9 394.613 1550.87 384.162L1452.23 373.059C1424.15 369.138 1412.39 361.953 1412.39 346.277C1412.39 327.336 1431.33 318.844 1474.44 318.844C1533.88 318.844 1575.03 332.561 1608.35 359.342L1661.25 306.434C1624.67 268.55 1561.32 247.648 1482.93 247.648C1372.55 247.648 1311.15 286.838 1311.15 352.809C1311.15 410.289 1349.03 442.295 1427.41 452.745L1516.25 463.196C1551.52 467.769 1561.97 474.302 1561.97 491.283C1561.97 510.88 1542.37 521.331 1496.65 521.331C1428.72 521.331 1383 503.041 1352.3 469.076L1292.2 518.717C1332.05 568.36 1399.98 593.833 1490.77 593.833Z" fill="white"/>
|
||||
<path d="M1754.78 331.255V469.076C1754.78 550.07 1800.5 591.221 1898.48 591.221C1928.53 591.221 1952.04 587.955 1974.25 581.423V496.508C1962.49 499.122 1948.12 501.734 1929.18 501.734C1888.03 501.734 1867.78 483.446 1867.78 444.908V331.255H1974.9V257.445H1867.78V137.914L1754.78 179.717V257.445H1681.62V331.255H1754.78Z" fill="white"/>
|
||||
<path d="M2137.13 257.445H2033.93V584.036H2146.93V461.892C2146.93 426.618 2154.77 394.613 2176.33 374.364C2193.31 358.687 2217.48 350.198 2251.44 350.198C2263.85 350.198 2273.65 351.502 2284.75 352.809V250.26C2277.57 248.954 2272.34 248.954 2263.2 248.954C2198.53 248.954 2154.77 286.185 2137.13 346.932V257.445Z" fill="white"/>
|
||||
<path d="M2508.05 593.833C2627.59 593.833 2711.85 530.475 2711.85 420.088C2711.85 310.353 2627.59 247.648 2508.05 247.648C2387.87 247.648 2303.61 310.353 2303.61 420.088C2303.61 530.475 2387.87 593.833 2508.05 593.833ZM2508.05 518.717C2453.19 518.717 2418.57 483.446 2418.57 420.088C2418.57 356.728 2453.19 322.763 2508.05 322.763C2562.27 322.763 2596.89 356.728 2596.89 420.088C2596.89 483.446 2562.27 518.717 2508.05 518.717Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
|
|
@ -1,9 +0,0 @@
|
|||
<svg width="2712" height="894" viewBox="0 0 2712 894" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M445.433 22.9832C452.722 32.0324 456.439 44.2432 463.873 68.6647L626.281 602.176C566.234 571.026 500.957 548.56 432.115 536.439L326.371 179.099C324.641 173.252 319.27 169.241 313.173 169.241C307.06 169.241 301.68 173.273 299.963 179.14L195.5 536.259C126.338 548.325 60.7632 570.832 0.459473 602.095L163.664 68.5412C171.121 44.1617 174.85 31.9718 182.14 22.9393C188.575 14.9651 196.946 8.77213 206.454 4.95048C217.224 0.621582 229.971 0.621582 255.466 0.621582H372.034C397.562 0.621582 410.326 0.621582 421.106 4.95951C430.622 8.78908 438.998 14.9946 445.433 22.9832Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M464.867 627.566C438.094 650.46 384.655 666.073 323.101 666.073C247.551 666.073 184.229 642.553 167.426 610.921C161.419 629.05 160.072 649.798 160.072 663.052C160.072 663.052 156.114 728.134 201.38 773.401C201.38 749.896 220.435 730.842 243.939 730.842C284.226 730.842 284.181 765.99 284.144 794.506C284.143 795.36 284.142 796.209 284.142 797.051C284.142 840.333 310.595 877.436 348.215 893.075C342.596 881.518 339.444 868.54 339.444 854.825C339.444 813.545 363.679 798.175 391.845 780.311C414.255 766.098 439.155 750.307 456.315 718.629C465.268 702.101 470.352 683.17 470.352 663.052C470.352 650.68 468.43 638.757 464.867 627.566Z" fill="#FF5D01"/>
|
||||
<path d="M999.148 593.833C1067.08 593.833 1118.03 569.665 1138.93 528.516C1138.93 548.111 1140.23 568.36 1143.5 584.036H1255.19C1249.97 561.173 1247.36 529.82 1247.36 488.671V388.081C1247.36 292.717 1191.18 247.648 1066.43 247.648C957.344 247.648 884.188 292.717 875.697 366.527H991.963C995.882 334.521 1022.66 316.885 1066.43 316.885C1109.53 316.885 1133.7 334.521 1133.7 371.1V380.896L1015.48 391.347C957.997 397.227 925.338 407.023 902.477 422.7C878.31 439.028 865.899 463.851 865.899 494.549C865.899 555.948 916.847 593.833 999.148 593.833ZM1042.26 525.902C1004.37 525.902 981.512 510.88 981.512 486.712C981.512 461.892 1000.45 448.827 1048.14 442.949L1135.66 433.805V453.4C1135.66 497.163 1097.78 525.902 1042.26 525.902Z" fill="black"/>
|
||||
<path d="M1490.77 593.833C1604.43 593.833 1662.56 551.377 1662.56 482.793C1662.56 425.966 1629.9 394.613 1550.87 384.162L1452.23 373.059C1424.15 369.138 1412.39 361.953 1412.39 346.277C1412.39 327.336 1431.33 318.844 1474.44 318.844C1533.88 318.844 1575.03 332.561 1608.35 359.342L1661.25 306.434C1624.67 268.55 1561.32 247.648 1482.94 247.648C1372.55 247.648 1311.15 286.838 1311.15 352.809C1311.15 410.289 1349.03 442.295 1427.41 452.745L1516.25 463.196C1551.52 467.769 1561.97 474.302 1561.97 491.283C1561.97 510.88 1542.37 521.331 1496.65 521.331C1428.72 521.331 1383 503.041 1352.3 469.076L1292.21 518.717C1332.05 568.36 1399.98 593.833 1490.77 593.833Z" fill="black"/>
|
||||
<path d="M1754.78 331.255V469.076C1754.78 550.07 1800.5 591.221 1898.48 591.221C1928.53 591.221 1952.04 587.955 1974.25 581.423V496.508C1962.49 499.122 1948.12 501.734 1929.18 501.734C1888.03 501.734 1867.78 483.446 1867.78 444.908V331.255H1974.9V257.445H1867.78V137.914L1754.78 179.717V257.445H1681.62V331.255H1754.78Z" fill="black"/>
|
||||
<path d="M2137.13 257.445H2033.93V584.036H2146.93V461.892C2146.93 426.618 2154.77 394.613 2176.33 374.364C2193.31 358.687 2217.48 350.198 2251.44 350.198C2263.85 350.198 2273.65 351.502 2284.75 352.809V250.26C2277.57 248.954 2272.34 248.954 2263.2 248.954C2198.53 248.954 2154.77 286.185 2137.13 346.932V257.445Z" fill="black"/>
|
||||
<path d="M2508.05 593.833C2627.59 593.833 2711.85 530.475 2711.85 420.088C2711.85 310.353 2627.59 247.648 2508.05 247.648C2387.87 247.648 2303.61 310.353 2303.61 420.088C2303.61 530.475 2387.87 593.833 2508.05 593.833ZM2508.05 518.717C2453.19 518.717 2418.57 483.446 2418.57 420.088C2418.57 356.728 2453.19 322.763 2508.05 322.763C2562.27 322.763 2596.89 356.728 2596.89 420.088C2596.89 483.446 2562.27 518.717 2508.05 518.717Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
|
|
@ -1,15 +0,0 @@
|
|||
<svg width="1281" height="1280" viewBox="0 0 1281 1280" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M815.931 94.6439C825.65 106.709 830.606 122.99 840.519 155.553L1057.06 866.901C976.999 825.368 889.964 795.413 798.174 779.252L657.182 302.798C654.875 295.002 647.715 289.654 639.585 289.654C631.434 289.654 624.26 295.03 621.972 302.853L482.688 779.011C390.471 795.1 303.038 825.109 222.634 866.793L440.24 155.388L440.24 155.388C450.183 122.882 455.154 106.629 464.874 94.5853C473.455 83.9531 484.616 75.6958 497.293 70.6002C511.652 64.8284 528.649 64.8284 562.642 64.8284H718.067C752.104 64.8284 769.123 64.8284 783.496 70.6123C796.184 75.7184 807.352 83.9923 815.931 94.6439Z" fill="url(#paint0_linear_709_106)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M841.843 900.754C806.146 931.279 734.895 952.097 652.822 952.097C552.089 952.097 467.659 920.737 445.256 878.561C437.247 902.732 435.45 930.396 435.45 948.068C435.45 948.068 430.173 1034.84 490.528 1095.2C490.528 1063.86 515.934 1038.46 547.273 1038.46C600.989 1038.46 600.929 1085.32 600.88 1123.34C600.878 1124.48 600.877 1125.61 600.877 1126.73C600.877 1184.44 636.147 1233.91 686.308 1254.77C678.816 1239.36 674.613 1222.05 674.613 1203.77C674.613 1148.73 706.926 1128.23 744.48 1104.41L744.481 1104.41C774.361 1085.46 807.56 1064.41 830.44 1022.17C842.379 1000.13 849.158 974.893 849.158 948.068C849.158 931.573 846.594 915.676 841.843 900.754Z" fill="#FF5D01"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M841.843 900.754C806.146 931.279 734.895 952.097 652.822 952.097C552.089 952.097 467.659 920.737 445.256 878.561C437.247 902.732 435.45 930.396 435.45 948.068C435.45 948.068 430.173 1034.84 490.528 1095.2C490.528 1063.86 515.934 1038.46 547.273 1038.46C600.989 1038.46 600.929 1085.32 600.88 1123.34C600.878 1124.48 600.877 1125.61 600.877 1126.73C600.877 1184.44 636.147 1233.91 686.308 1254.77C678.816 1239.36 674.613 1222.05 674.613 1203.77C674.613 1148.73 706.926 1128.23 744.48 1104.41L744.481 1104.41C774.361 1085.46 807.56 1064.41 830.44 1022.17C842.379 1000.13 849.158 974.893 849.158 948.068C849.158 931.573 846.594 915.676 841.843 900.754Z" fill="url(#paint1_linear_709_106)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_709_106" x1="883.889" y1="27.1132" x2="639.848" y2="866.902" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#F9FAFB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_709_106" x1="1002.57" y1="652.45" x2="791.219" y2="1094.91" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF1639"/>
|
||||
<stop offset="1" stop-color="#FF1639" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
|
|
@ -1,15 +0,0 @@
|
|||
<svg width="1280" height="1280" viewBox="0 0 1280 1280" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M815.039 94.6439C824.758 106.709 829.714 122.99 839.626 155.553L1056.17 866.901C976.107 825.368 889.072 795.413 797.281 779.252L656.29 302.798C653.983 295.002 646.822 289.654 638.693 289.654C630.542 289.654 623.368 295.03 621.08 302.853L481.795 779.011C389.579 795.1 302.146 825.109 221.741 866.793L439.347 155.388L439.348 155.388C449.291 122.882 454.262 106.629 463.982 94.5853C472.562 83.9531 483.723 75.6958 496.4 70.6002C510.76 64.8284 527.756 64.8284 561.749 64.8284H717.174C751.212 64.8284 768.23 64.8284 782.603 70.6123C795.292 75.7184 806.459 83.9923 815.039 94.6439Z" fill="url(#paint0_linear_709_110)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z" fill="#FF5D01"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z" fill="url(#paint1_linear_709_110)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_709_110" x1="882.997" y1="27.1132" x2="638.955" y2="866.902" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#000014"/>
|
||||
<stop offset="1" stop-color="#150426"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_709_110" x1="1001.68" y1="652.45" x2="790.326" y2="1094.91" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF1639"/>
|
||||
<stop offset="1" stop-color="#FF1639" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
|
|
@ -1,9 +0,0 @@
|
|||
<svg width="2712" height="894" viewBox="0 0 2712 894" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M445.432 22.9832C452.722 32.0324 456.439 44.2432 463.873 68.6647L626.28 602.176C566.233 571.026 500.957 548.56 432.114 536.439L326.37 179.099C324.64 173.252 319.27 169.241 313.173 169.241C307.06 169.241 301.679 173.273 299.963 179.14L195.5 536.259C126.337 548.325 60.7627 570.832 0.458984 602.095L163.664 68.5412C171.121 44.1617 174.85 31.9718 182.139 22.9393C188.575 14.9651 196.946 8.77213 206.453 4.95048C217.223 0.621582 229.97 0.621582 255.465 0.621582H372.034C397.562 0.621582 410.326 0.621582 421.106 4.95951C430.622 8.78908 438.998 14.9946 445.432 22.9832Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M464.866 627.566C438.093 650.459 384.655 666.073 323.1 666.073C247.551 666.073 184.228 642.553 167.426 610.921C161.419 629.05 160.071 649.798 160.071 663.052C160.071 663.052 156.114 728.134 201.38 773.401C201.38 749.896 220.434 730.842 243.939 730.842C284.226 730.842 284.18 765.99 284.143 794.505C284.142 795.36 284.141 796.209 284.141 797.051C284.141 840.333 310.594 877.436 348.215 893.075C342.596 881.518 339.444 868.539 339.444 854.825C339.444 813.545 363.679 798.174 391.844 780.311C414.255 766.098 439.154 750.307 456.314 718.629C465.268 702.1 470.352 683.17 470.352 663.052C470.352 650.68 468.429 638.757 464.866 627.566Z" fill="white"/>
|
||||
<path d="M999.147 593.833C1067.08 593.833 1118.03 569.665 1138.93 528.516C1138.93 548.111 1140.23 568.36 1143.5 584.036H1255.19C1249.97 561.173 1247.35 529.82 1247.35 488.671V388.081C1247.35 292.717 1191.18 247.648 1066.42 247.648C957.344 247.648 884.188 292.717 875.696 366.527H991.962C995.881 334.521 1022.66 316.885 1066.42 316.885C1109.53 316.885 1133.7 334.521 1133.7 371.1V380.896L1015.48 391.347C957.997 397.227 925.338 407.023 902.476 422.7C878.309 439.028 865.898 463.851 865.898 494.549C865.898 555.948 916.847 593.833 999.147 593.833ZM1042.26 525.902C1004.37 525.902 981.511 510.88 981.511 486.712C981.511 461.892 1000.45 448.827 1048.14 442.949L1135.66 433.805V453.4C1135.66 497.163 1097.78 525.902 1042.26 525.902Z" fill="white"/>
|
||||
<path d="M1490.77 593.833C1604.42 593.833 1662.56 551.377 1662.56 482.793C1662.56 425.966 1629.9 394.613 1550.87 384.162L1452.23 373.059C1424.15 369.138 1412.39 361.953 1412.39 346.277C1412.39 327.336 1431.33 318.844 1474.44 318.844C1533.88 318.844 1575.03 332.561 1608.35 359.342L1661.25 306.434C1624.67 268.55 1561.32 247.648 1482.93 247.648C1372.55 247.648 1311.15 286.838 1311.15 352.809C1311.15 410.289 1349.03 442.295 1427.41 452.745L1516.25 463.196C1551.52 467.769 1561.97 474.302 1561.97 491.283C1561.97 510.88 1542.37 521.331 1496.65 521.331C1428.72 521.331 1383 503.041 1352.3 469.076L1292.2 518.717C1332.05 568.36 1399.98 593.833 1490.77 593.833Z" fill="white"/>
|
||||
<path d="M1754.78 331.255V469.076C1754.78 550.07 1800.5 591.221 1898.48 591.221C1928.53 591.221 1952.04 587.955 1974.25 581.423V496.508C1962.49 499.122 1948.12 501.734 1929.18 501.734C1888.03 501.734 1867.78 483.446 1867.78 444.908V331.255H1974.9V257.445H1867.78V137.914L1754.78 179.717V257.445H1681.62V331.255H1754.78Z" fill="white"/>
|
||||
<path d="M2137.13 257.445H2033.93V584.036H2146.93V461.892C2146.93 426.618 2154.77 394.613 2176.33 374.364C2193.31 358.687 2217.48 350.198 2251.44 350.198C2263.85 350.198 2273.65 351.502 2284.75 352.809V250.26C2277.57 248.954 2272.34 248.954 2263.2 248.954C2198.53 248.954 2154.77 286.185 2137.13 346.932V257.445Z" fill="white"/>
|
||||
<path d="M2508.05 593.833C2627.59 593.833 2711.85 530.475 2711.85 420.088C2711.85 310.353 2627.59 247.648 2508.05 247.648C2387.87 247.648 2303.61 310.353 2303.61 420.088C2303.61 530.475 2387.87 593.833 2508.05 593.833ZM2508.05 518.717C2453.19 518.717 2418.57 483.446 2418.57 420.088C2418.57 356.728 2453.19 322.763 2508.05 322.763C2562.27 322.763 2596.89 356.728 2596.89 420.088C2596.89 483.446 2562.27 518.717 2508.05 518.717Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
|
|
@ -1,9 +0,0 @@
|
|||
<svg width="2712" height="894" viewBox="0 0 2712 894" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M445.433 22.9832C452.722 32.0324 456.439 44.2432 463.873 68.6647L626.281 602.176C566.234 571.026 500.957 548.56 432.115 536.439L326.371 179.099C324.641 173.252 319.27 169.241 313.173 169.241C307.06 169.241 301.68 173.273 299.963 179.14L195.5 536.259C126.338 548.325 60.7632 570.832 0.459473 602.095L163.664 68.5412C171.121 44.1617 174.85 31.9718 182.14 22.9393C188.575 14.9651 196.946 8.77213 206.454 4.95048C217.224 0.621582 229.971 0.621582 255.466 0.621582H372.034C397.562 0.621582 410.326 0.621582 421.106 4.95951C430.622 8.78908 438.998 14.9946 445.433 22.9832Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M464.867 627.566C438.094 650.459 384.655 666.073 323.101 666.073C247.551 666.073 184.229 642.553 167.426 610.921C161.419 629.05 160.072 649.798 160.072 663.052C160.072 663.052 156.114 728.134 201.381 773.401C201.381 749.896 220.435 730.842 243.939 730.842C284.226 730.842 284.181 765.99 284.144 794.505C284.143 795.36 284.142 796.209 284.142 797.051C284.142 840.333 310.595 877.436 348.215 893.075C342.596 881.518 339.444 868.539 339.444 854.825C339.444 813.544 363.679 798.174 391.845 780.311C414.255 766.098 439.155 750.307 456.315 718.629C465.268 702.1 470.353 683.17 470.353 663.052C470.353 650.68 468.43 638.757 464.867 627.566Z" fill="black"/>
|
||||
<path d="M999.148 593.833C1067.08 593.833 1118.03 569.665 1138.93 528.516C1138.93 548.111 1140.24 568.36 1143.5 584.036H1255.2C1249.97 561.173 1247.36 529.82 1247.36 488.671V388.081C1247.36 292.717 1191.18 247.648 1066.43 247.648C957.345 247.648 884.189 292.717 875.697 366.527H991.963C995.882 334.521 1022.66 316.885 1066.43 316.885C1109.53 316.885 1133.7 334.521 1133.7 371.1V380.896L1015.48 391.347C957.998 397.227 925.339 407.023 902.477 422.7C878.31 439.028 865.899 463.851 865.899 494.549C865.899 555.948 916.847 593.833 999.148 593.833ZM1042.26 525.902C1004.37 525.902 981.512 510.88 981.512 486.712C981.512 461.892 1000.45 448.827 1048.14 442.949L1135.66 433.805V453.4C1135.66 497.163 1097.78 525.902 1042.26 525.902Z" fill="black"/>
|
||||
<path d="M1490.77 593.833C1604.43 593.833 1662.56 551.377 1662.56 482.793C1662.56 425.966 1629.9 394.613 1550.87 384.162L1452.24 373.059C1424.15 369.138 1412.39 361.953 1412.39 346.277C1412.39 327.336 1431.33 318.844 1474.44 318.844C1533.88 318.844 1575.03 332.561 1608.35 359.342L1661.25 306.434C1624.68 268.55 1561.32 247.648 1482.94 247.648C1372.55 247.648 1311.15 286.838 1311.15 352.809C1311.15 410.289 1349.03 442.295 1427.41 452.745L1516.25 463.196C1551.52 467.769 1561.97 474.302 1561.97 491.283C1561.97 510.88 1542.37 521.331 1496.65 521.331C1428.72 521.331 1383 503.041 1352.3 469.076L1292.21 518.717C1332.05 568.36 1399.98 593.833 1490.77 593.833Z" fill="black"/>
|
||||
<path d="M1754.78 331.255V469.076C1754.78 550.07 1800.5 591.221 1898.48 591.221C1928.53 591.221 1952.04 587.955 1974.25 581.423V496.508C1962.49 499.122 1948.12 501.734 1929.18 501.734C1888.03 501.734 1867.78 483.446 1867.78 444.908V331.255H1974.9V257.445H1867.78V137.914L1754.78 179.717V257.445H1681.62V331.255H1754.78Z" fill="black"/>
|
||||
<path d="M2137.13 257.445H2033.93V584.036H2146.93V461.892C2146.93 426.618 2154.77 394.613 2176.33 374.364C2193.31 358.687 2217.48 350.198 2251.44 350.198C2263.85 350.198 2273.65 351.502 2284.75 352.809V250.26C2277.57 248.954 2272.34 248.954 2263.2 248.954C2198.53 248.954 2154.77 286.185 2137.13 346.932V257.445Z" fill="black"/>
|
||||
<path d="M2508.05 593.833C2627.59 593.833 2711.85 530.475 2711.85 420.088C2711.85 310.353 2627.59 247.648 2508.05 247.648C2387.87 247.648 2303.61 310.353 2303.61 420.088C2303.61 530.475 2387.87 593.833 2508.05 593.833ZM2508.05 518.717C2453.19 518.717 2418.57 483.446 2418.57 420.088C2418.57 356.728 2453.19 322.763 2508.05 322.763C2562.27 322.763 2596.89 356.728 2596.89 420.088C2596.89 483.446 2562.27 518.717 2508.05 518.717Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="1280" height="1280" viewBox="0 0 1280 1280" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M815.039 94.6439C824.758 106.709 829.714 122.99 839.626 155.553L1056.17 866.902C976.107 825.368 889.072 795.413 797.281 779.252L656.29 302.798C653.983 295.002 646.822 289.654 638.693 289.654C630.542 289.654 623.368 295.03 621.08 302.853L481.795 779.011C389.579 795.1 302.146 825.109 221.741 866.793L439.347 155.388L439.348 155.388C449.291 122.882 454.262 106.629 463.982 94.5853C472.562 83.9531 483.723 75.6958 496.4 70.6002C510.76 64.8284 527.756 64.8284 561.749 64.8284H717.174C751.212 64.8284 768.23 64.8284 782.603 70.6123C795.292 75.7184 806.459 83.9923 815.039 94.6439Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="1280" height="1280" viewBox="0 0 1280 1280" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M815.039 94.6439C824.758 106.709 829.714 122.99 839.626 155.553L1056.17 866.902C976.107 825.368 889.072 795.413 797.281 779.252L656.29 302.798C653.983 295.002 646.822 289.654 638.693 289.654C630.542 289.654 623.368 295.03 621.08 302.853L481.795 779.011C389.579 795.1 302.146 825.109 221.741 866.793L439.347 155.388L439.348 155.388C449.291 122.882 454.262 106.629 463.982 94.5853C472.562 83.9531 483.723 75.6958 496.4 70.6002C510.76 64.8284 527.756 64.8284 561.749 64.8284H717.174C751.212 64.8284 768.23 64.8284 782.603 70.6123C795.292 75.7184 806.459 83.9923 815.039 94.6439Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M840.951 900.754C805.253 931.279 734.002 952.097 651.929 952.097C551.197 952.097 466.767 920.737 444.363 878.561C436.354 902.732 434.558 930.396 434.558 948.068C434.558 948.068 429.281 1034.84 489.636 1095.2C489.636 1063.86 515.042 1038.46 546.381 1038.46C600.097 1038.46 600.036 1085.32 599.987 1123.34C599.986 1124.48 599.984 1125.61 599.984 1126.73C599.984 1184.44 635.255 1233.91 685.416 1254.77C677.924 1239.36 673.721 1222.05 673.721 1203.77C673.721 1148.73 706.034 1128.23 743.588 1104.41L743.588 1104.41C773.469 1085.46 806.668 1064.41 829.548 1022.17C841.486 1000.13 848.265 974.893 848.265 948.068C848.265 931.573 845.702 915.676 840.951 900.754Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,11 +0,0 @@
|
|||
<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
#flame { fill: #FF5D01; }
|
||||
#a { fill: #000014; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#a { fill: #fff; }
|
||||
}
|
||||
</style>
|
||||
<path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
|
||||
<path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,59 +0,0 @@
|
|||
// @ts-nocheck
|
||||
class Pixel {
|
||||
static get inputProperties() {
|
||||
return ['--border-radius', '--border-color', '--pixel-size', '--variant'];
|
||||
}
|
||||
paint(ctx, size, styleMap) {
|
||||
ctx.fillStyle = "black";
|
||||
const variant = styleMap.get("--variant").toString().trim();
|
||||
const corner = styleMap.get("--border-radius").toString();
|
||||
const px = styleMap.get("--pixel-size").toString();
|
||||
const w = size.width;
|
||||
const h = size.height;
|
||||
|
||||
switch (variant) {
|
||||
case 'primary': {
|
||||
ctx.fillRect(corner, 0, w - corner * 2, h);
|
||||
|
||||
for (let i = 0; i < Math.round(corner / px); i++) {
|
||||
let v = px * i;
|
||||
let x = v;
|
||||
let y = corner - v;
|
||||
ctx.fillRect(x, y, px, h - corner * 2 + (v * 2));
|
||||
}
|
||||
for (let i = 0; i < Math.round(corner / px); i++) {
|
||||
let v = px * i;
|
||||
let x = w - (px * (i + 1));
|
||||
let y = corner - v;
|
||||
ctx.fillRect(x, y, px, h - corner * 2 + (v * 2));
|
||||
}
|
||||
return;
|
||||
}
|
||||
case 'outline': {
|
||||
// top + right + bottom + left border
|
||||
ctx.fillRect(corner, 0, w - corner * 2, px);
|
||||
ctx.fillRect(w - px, corner, px, h - (corner * 2));
|
||||
ctx.fillRect(corner, h - px, w - corner * 2, px);
|
||||
ctx.fillRect(0, corner, px, h - (corner * 2));
|
||||
|
||||
for (let i = 0; i < Math.round(corner / px) + 1; i++) {
|
||||
let v = px * i;
|
||||
let x = v;
|
||||
let y = corner - v;
|
||||
ctx.fillRect(x, y, px, px * 2);
|
||||
ctx.fillRect(x, h - y - (px * 2), px, px * 2);
|
||||
}
|
||||
for (let i = 0; i < Math.round(corner / px) + 1; i++) {
|
||||
let v = px * i;
|
||||
let x = w - (px * (i + 1));
|
||||
let y = corner - v;
|
||||
ctx.fillRect(x, y, px, px * 2);
|
||||
ctx.fillRect(x, h - y - (px * 2), px, px * 2);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
registerPaint("pixel", Pixel);
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
# I, for one, welcome our new robotic overlords
|
||||
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://astro.build/sitemap.xml
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,334 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'RT Alias Medium';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local(''), url('/fonts/RTAliasMedium-Regular.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RT Alias Medium';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local(''), url('/fonts/RTAliasMedium-RegularOblique.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RT Alias Medium';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local(''), url('/fonts/RTAliasMedium-Bold.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'RT Alias Medium';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local(''), url('/fonts/RTAliasMedium-BoldOblique.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/** sanitize.css makes the line-height 1.5 globally, fix this for headers */
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
line-height: 1.11;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px dashed var(--color-blue);
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-tan: #f4efed;
|
||||
--color-tan-rgb: 244, 239, 237;
|
||||
--color-dawn: #f3e9fa;
|
||||
--color-dusk: #514375;
|
||||
--color-midnight: #31274a;
|
||||
--color-midnight-rgb: 49, 39, 74;
|
||||
--color-blue: #205eff;
|
||||
--color-red: #ff5050;
|
||||
--color-yellow: #ffd542;
|
||||
--color-purple: #af43ff;
|
||||
--color-pink: #FDB2B7;
|
||||
|
||||
--gradient-pop-1: linear-gradient(180deg, #205eff 0%, #c238bd 115%);
|
||||
--gradient-pop-2: repeating-linear-gradient(
|
||||
135deg,
|
||||
#ff9776 0em,
|
||||
#769cff 1em,
|
||||
#c238bd 2em,
|
||||
#ff9776 3em
|
||||
);
|
||||
--gradient-pop-3: linear-gradient(180deg, #ffb4b4 0%, #c487f0 100%);
|
||||
--gradient-pop-4: linear-gradient(
|
||||
0deg,
|
||||
#632cca -33%,
|
||||
#62289e 10%,
|
||||
#30216b 50%,
|
||||
#1f1638 100%
|
||||
);
|
||||
--gradient-pop-5: linear-gradient(
|
||||
180deg,
|
||||
#ffd542 0%,
|
||||
#ff5050 25%,
|
||||
#af43ff 100%
|
||||
);
|
||||
--gradient-mood: linear-gradient(
|
||||
180deg,
|
||||
#d8c5ef 0%,
|
||||
rgba(225, 213, 238, 0) 100%
|
||||
);
|
||||
|
||||
--shadow-sm: 0px 19px 53px 0px rgba(var(--color-midnight-rgb), 0.03),
|
||||
0px 10px 28px 0px rgba(var(--color-midnight-rgb), 0.05),
|
||||
0px 6px 16px 0px rgba(var(--color-midnight-rgb), 0.05),
|
||||
0px 3px 9px 0px rgba(var(--color-midnight-rgb), 0.075),
|
||||
0px 1px 4px 0px rgba(var(--color-midnight-rgb), 0.1);
|
||||
--shadow-md: 0px 2px 2px 0px rgba(var(--color-midnight-rgb), 0.04),
|
||||
0px 6px 5px 0px rgba(var(--color-midnight-rgb), 0.06),
|
||||
0px 15px 14px 0px rgba(var(--color-midnight-rgb), 0.08),
|
||||
0px 50px 46px 0px rgba(var(--color-midnight-rgb), 0.12);
|
||||
--shadow-xl: 0px 3px 2px 0px rgba(var(--color-midnight-rgb), 0.02),
|
||||
0px 6px 5px 0px rgba(var(--color-midnight-rgb), 0.03),
|
||||
0px 12px 10px 0px rgba(var(--color-midnight-rgb), 0.04),
|
||||
0px 22px 18px 0px rgba(var(--color-midnight-rgb), 0.04),
|
||||
0px 42px 34px 0px rgba(var(--color-midnight-rgb), 0.05),
|
||||
0px 100px 80px 0px rgba(var(--color-midnight-rgb), 0.07);
|
||||
|
||||
--blur-md: blur(10px);
|
||||
--blur-xl: blur(128px);
|
||||
|
||||
--font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
--font-body: var(--font-base);
|
||||
--font-display: "RT Alias Medium", var(--font-base);
|
||||
--font-mono: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace;
|
||||
|
||||
--corner-md: 12px;
|
||||
|
||||
--size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
|
||||
--size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
|
||||
--size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
|
||||
--size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
|
||||
--size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
|
||||
--size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
|
||||
--size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
|
||||
--size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
|
||||
|
||||
/* @property fallbacks */
|
||||
--border-radius: 4;
|
||||
--pixel-size: 4;
|
||||
--link-color-stop-a: #205eff;
|
||||
--link-color-stop-b: #c238bd;
|
||||
|
||||
background: var(--color-tan);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@property --border-radius {
|
||||
syntax: '<integer>';
|
||||
inherits: true;
|
||||
initial-value: 4;
|
||||
}
|
||||
@property --pixel-size {
|
||||
syntax: '<integer>';
|
||||
inherits: true;
|
||||
initial-value: 4;
|
||||
}
|
||||
@property --link-color-stop-a {
|
||||
syntax: '<color>';
|
||||
inherits: false;
|
||||
initial-value: #205eff;
|
||||
}
|
||||
@property --link-color-stop-b {
|
||||
syntax: '<color>';
|
||||
inherits: false;
|
||||
initial-value: #c238bd;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: #7D4796;
|
||||
}
|
||||
a:is(:hover, :focus) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:active {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
.logo a {
|
||||
color: var(--color-midnight);
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-body);
|
||||
color: var(--color-midnight);
|
||||
min-height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--color-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-gradient::selection {
|
||||
--fill: white;
|
||||
color: var(--fill);
|
||||
-webkit-background-clip: initial;
|
||||
-webkit-text-fill-color: initial;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: var(--fill, var(--gradient-pop-1));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.astro-container {
|
||||
max-width: 40rem;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.astro-container {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
.astro-container {
|
||||
max-width: 50rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 64rem) {
|
||||
.astro-container {
|
||||
max-width: 62rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 82rem) {
|
||||
.astro-container {
|
||||
max-width: 80rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 92rem) {
|
||||
.astro-container {
|
||||
max-width: 90rem;
|
||||
}
|
||||
}
|
||||
|
||||
.head-sm {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--size-600);
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.head-md {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--size-700);
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
p, .body-md {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--size-500);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.elevation-xl {
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.elevation-md {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.elevation-sm {
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.astro-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.astro-code > code::before,
|
||||
.astro-code > code::after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 50rem) {
|
||||
#content :is(h2, h3, h4, h5, h6) a::before {
|
||||
order: initial;
|
||||
margin-left: -1em;
|
||||
}
|
||||
}
|
||||
|
||||
.egg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from {
|
||||
background-position: 50% 100%;
|
||||
}
|
||||
to {
|
||||
background-position: 50% calc(100% - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
.🥚 {
|
||||
--cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2331274a' viewBox='0 0 128 128'%3E%3Cpath fill='%23fff' d='M3.37 0 .11.01C-.05 24.95.04 49.9 0 74.82c.05 13.23-.1 26.46.09 39.68 4.48 0 8.97.04 13.46 0 .12-1.92.15-3.86.15-5.8v-.88h.87c1.91.02 3.82 0 5.72-.01.04-1.96.18-3.92-.03-5.88l-.12-1.1 1.09.15c1.97.25 3.95.08 5.92.04.04-1.88.08-3.77.1-5.65v-.86h.87c1.49.02 2.98 0 4.47-.08l.99-.05-.08.98c-.3 4.12.39 8.24.16 12.36 1.95.06 3.89.09 5.83.1l.85.02.01.84c.04 4.18.03 8.35.1 12.52 1.92.04 3.84.06 5.76.07h.86l.01.85c.03 1.95.05 3.88.04 5.83 4.52.06 9.04.05 13.56.03.16-1.92.24-3.86.1-5.81l-.07-.96.96.03c1.91.05 3.84.03 5.73-.02.07-4.5.04-9 0-13.49-1.94-.05-3.87-.08-5.8-.1h-.84l-.01-.85c-.07-4.18-.04-8.35-.06-12.53-1.93-.07-3.88-.1-5.83-.06l-.92.03.03-.92c.07-1.62.1-3.22.09-4.82v-.87h.87c8.63-.01 17.27 0 25.91-.1.06-4.48.07-8.96-.01-13.44-1.94 0-3.88-.02-5.82-.05h-.85v-.85c-.03-1.94-.05-3.89-.04-5.83a252.3 252.3 0 0 0-5.8-.07h-.85l-.01-.85c-.03-1.93-.04-3.85-.08-5.78-1.93-.09-3.87-.14-5.82-.12l-.88.01v-.88a567 567 0 0 0-.03-5.84 226 226 0 0 1-5.83-.04l-.85-.02v-.85c0-1.9-.02-3.8-.07-5.71-1.92-.1-3.85-.12-5.78-.13h-.86v-.86c-.04-1.94-.06-3.88-.05-5.83-1.95 0-3.89-.02-5.83-.05l-.82-.01-.04-.83c-.07-1.94-.14-3.9-.15-5.84-1.9-.04-3.8-.05-5.7-.05h-.85l-.02-.85a170.8 170.8 0 0 1-.05-5.82c-1.95-.02-3.89-.03-5.83-.06l-.83-.01-.03-.83c-.07-1.94-.1-3.88-.1-5.84-1.94-.04-3.87-.05-5.8-.06h-.86l-.01-.86c-.01-1.93-.03-3.87-.07-5.8l-5.84-.03-.84-.01-.01-.85-.04-5.83c-1.94-.06-3.9-.04-5.86-.03h-.86v-.86A162 162 0 0 0 6.63.01L3.37 0Z'/%3E%3Cpath d='M.1.02C2.3-.01 4.48 0 6.66.02c.1 2.22.14 4.45.14 6.68 2.24-.02 4.48-.02 6.71.05 0 2.22.01 4.45.04 6.67-2.26-.02-4.51-.01-6.77 0-.01 31.42.07 62.83.04 94.25 2.23.02 4.46.03 6.68-.02-.02-2.22 0-4.44.01-6.66 2.23-.03 4.48-.23 6.69.17.36 2.2.16 4.44.1 6.65-2.18.03-4.37.05-6.56.02.02 2.23-.04 4.46-.18 6.68-4.48.03-8.97-.01-13.46 0-.18-13.23-.03-26.46-.08-39.69C.05 49.9-.05 24.96.11.03Z'/%3E%3Cpath d='m13.54 13.42 6.69.04c.05 2.21.06 4.43.08 6.65 2.22 0 4.44.02 6.66.07 0 2.22 0 4.45.11 6.67 2.23.04 4.45.05 6.68.07-.02 2.22 0 4.44.06 6.66 2.19 0 4.38.01 6.57.07 0 2.22.1 4.44.17 6.66 2.21.04 4.44.05 6.66.06-.01 2.22 0 4.44.04 6.66 2.22 0 4.44.03 6.65.15.07 2.2.09 4.38.09 6.58 2.22.06 4.44.07 6.66.06.02 2.22.04 4.45.04 6.68-2.25.12-4.5.1-6.75.04v-6.69c-2.25-.03-4.51-.02-6.77 0 .03-2.26.04-4.51 0-6.76h-6.7l.02-6.7c-2.26-.05-4.52-.04-6.77 0 0-2.26.01-4.52-.01-6.77h-6.7c-.03-2.24-.02-4.49-.04-6.73-2.25 0-4.49 0-6.73-.05.02-2.23.02-4.45 0-6.68-2.22-.02-4.44-.02-6.66 0-.07-2.25-.06-4.5-.05-6.74ZM60.7 60.5a93.2 93.2 0 0 1 6.69.14c.04 2.2.06 4.42.09 6.62 2.22 0 4.43.02 6.65.08-.01 2.22 0 4.45.04 6.68 2.22.03 4.45.05 6.67.05.08 4.48.07 8.95.02 13.43-8.93.1-17.86.1-26.78.12 0 2.2.02 4.4-.1 6.59-2.25.11-4.5.08-6.76.07-.06-4.5-.06-8.99 0-13.48 8.97-.05 17.95.03 26.92-.01.03-2.25.03-4.5 0-6.74-2.24-.02-4.5-.01-6.73-.05v-6.68a296.6 296.6 0 0 0-6.67 0c-.09-2.27-.09-4.54-.04-6.82ZM27 87.48c2.23-.02 4.46-.01 6.69 0 .08 2.3.18 4.62-.13 6.91-2.1.17-4.2.15-6.3.12 0 2.17-.05 4.34-.1 6.51-2.23.05-4.49.28-6.7-.14-.46-2.18-.24-4.44-.2-6.65l6.7-.01c0-2.25 0-4.5.04-6.74Zm6.56 6.92c2.3-.26 4.6-.18 6.9-.14.06 4.47.01 8.95.04 13.43 2.24 0 4.49 0 6.73.04.02 4.46-.04 8.92.03 13.38 4.5.07 9-.14 13.5.12.26 2.24.12 4.5-.07 6.75-4.52.02-9.03.04-13.55-.02 0-2.23-.01-4.45-.06-6.68-2.2 0-4.42-.03-6.63-.07-.07-4.46-.05-8.92-.1-13.37a270.1 270.1 0 0 1-6.67-.12c.24-4.45-.64-8.9-.12-13.33Z'/%3E%3Cpath d='M53.98 94.2a79.3 79.3 0 0 1 6.72.05c.02 4.45-.03 8.91.05 13.38 2.22.02 4.43.04 6.65.1.05 4.5.08 9 .01 13.5-2.21.05-4.44.1-6.65 0-.25-4.48-.04-8.97-.09-13.45-2.25-.05-4.5-.04-6.76-.06 0-4.5-.05-9.01.07-13.51Z'/%3E%3C/svg%3E%0A") 0 0, default;
|
||||
--cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2331274a' viewBox='0 0 128 128'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23fff' d='M29.14.42a426.8 426.8 0 0 0-.05 5.06l-.01.71-.7.03c-1.7.05-3.38.07-5.08.08-.09 17.14-.04 34.27-.04 51.4v.74l-.74.01c-1.42.02-2.86.03-4.29.07l-.77.01v-.77c.04-1.67.03-3.35-.01-5.01-5.81-.05-11.63-.08-17.44.02 0 5.79-.02 11.58 0 17.37 1.68.03 3.39.1 5.1-.01l.92-.07-.14.93c-.24 1.67-.08 3.36-.07 5.04 1.6.08 3.23.1 4.85.1h.7l.05.69c.27 3.58.14 7.17.2 10.77 1.67.07 3.35.1 5.03.11l.73.01v.73c.03 3.6.02 7.18.08 10.77 1.69.03 3.38.11 5.09.01l.86-.05-.07.85c-.28 3.6-.04 7.21-.07 10.81 1.65.03 3.29.06 4.93.07h.74v.73c.08 5.55.05 11.1.12 16.65 9.57.13 19.15.15 28.73.14 9.8-.02 19.6.06 29.41-.17-.15-5.53.34-11.06.11-16.59l-.02-.8.79.03c1.64.04 3.3.01 4.93-.04.06-5.5.07-11 .07-16.51v-.68l.67-.07c1.68-.16 3.36-.17 5.05-.16.04-6.16-.07-12.32.12-18.48v-.03c-.2-7.4-.06-14.81-.15-22.22-1.66.01-3.32 0-4.97-.03h-.72l-.02-.73a135.9 135.9 0 0 1-.02-4.91c-1.7-.05-3.4 0-5.1-.1l-.64-.03-.05-.66c-.12-1.7-.06-3.41-.09-5.13-3.6-.02-7.22.01-10.82-.04h-.73l-.01-.74c-.03-1.63-.05-3.26-.03-4.9-5.54-.29-11.1-.1-16.64-.16l-.71-.01-.03-.7c-.07-1.68-.1-3.37-.1-5.06-3.6-.02-7.2 0-10.8-.07l-.73-.02v-.72c-.08-7.46-.04-14.92-.06-22.38a371.76 371.76 0 0 0-5.03 0h-.77l.01-.76c.03-1.72.02-3.43-.14-5.13-3.81.01-7.62.02-11.43 0Z'/%3E%3Cpath d='M29.13.42c3.81.02 7.63.01 11.44 0 .18 1.92.17 3.84.14 5.75-3.88.04-7.75 0-11.63.04.02-1.93.02-3.86.05-5.79ZM23.3 6.3c1.93-.01 3.86 0 5.78-.09 0 21.32.04 42.63.02 63.95-1.94.04-3.88.04-5.83 0-.03-1.9-.03-3.82 0-5.73-1.94-.08-3.87-.07-5.8-.06a81.5 81.5 0 0 1 0-5.85c1.93-.07 3.86-.05 5.79-.08 0-17.38-.05-34.76.04-52.14Zm17.43 0c1.92-.02 3.84 0 5.77.01.02 7.7-.03 15.42.05 23.12 3.85.1 7.7.05 11.54.07 0 1.92 0 3.84.11 5.77 5.79.09 11.59-.14 17.37.16-.02 1.88-.01 3.76.03 5.64 3.85.07 7.71.02 11.57.04.02 1.93-.1 3.87.1 5.8 1.92.16 3.84.06 5.76.12-.03 1.88-.01 3.76.04 5.64 1.9.03 3.8.05 5.7.03.09 7.42-.06 14.83.15 22.23-.2 6.17-.08 12.34-.12 18.5a43.63 43.63 0 0 0-5.72.22c0 5.73-.01 11.47-.07 17.2-1.9.06-3.82.12-5.72.03-.21-5.83-.11-11.67-.06-17.51 1.92.02 3.84.02 5.76 0L93 52.72c-1.92-.03-3.83-.02-5.75 0-.1-1.89.02-3.78-.13-5.66-1.9-.37-3.85-.15-5.77-.15-.04 5.8.07 11.62-.04 17.44h-5.7c-.13-7.75 0-15.5-.04-23.26-3.89-.02-7.78 0-11.66 0 0 5.81.06 11.62 0 17.43-1.93.04-3.86.04-5.78 0-.04-7.75-.04-15.5.05-23.24-3.89-.02-7.78-.03-11.67.02-.04 7.74.03 15.48 0 23.22-1.94.05-3.9.06-5.84 0 0-17.4.02-34.8.05-52.21ZM0 52.76c5.82-.1 11.64-.06 17.45-.01.04 1.92.07 3.84.02 5.77-3.86.1-7.71.02-11.57.05-.14 3.84.2 7.7-.05 11.53-1.95.22-3.9.07-5.85.03V52.76Zm6 17.47c1.87-.3 3.77-.18 5.65-.13.04 1.94.04 3.88.02 5.82 1.95.01 3.88 0 5.82.03.05 3.87 0 7.73.03 11.6 1.91-.02 3.83-.01 5.75.01-.03 3.88.25 7.79-.14 11.64-1.9.17-3.79.04-5.67 0-.06-3.82-.05-7.65-.09-11.48-1.92-.01-3.84-.05-5.76-.13-.06-3.81.13-7.63-.22-11.44a115 115 0 0 1-5.57-.12c0-1.94-.26-3.9.18-5.8Z'/%3E%3Cpath d='M23.39 99.23c1.9-.15 3.8-.06 5.7-.05.06 3.86.01 7.71.02 11.57 1.94-.01 3.88-.01 5.82.06.03 3.85-.04 7.71.02 11.57 15.46.04 30.92.03 46.38.02.06-3.86-.01-7.72.03-11.58 1.98-.03 3.95-.05 5.93.06.32 5.78-.25 11.57-.09 17.37-9.8.23-19.6.15-29.4.16-9.59.01-19.16 0-28.73-.13-.08-5.8-.04-11.59-.13-17.37-1.89 0-3.78-.04-5.67-.07.03-3.87-.28-7.77.12-11.61Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h128v128H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") 8 0, pointer;
|
||||
|
||||
cursor: var(--cursor-default);
|
||||
}
|
||||
|
||||
.🥚 :is(a, button, input[type="checkbox"]) {
|
||||
cursor: var(--cursor-pointer);
|
||||
}
|
||||
|
|
@ -1,356 +0,0 @@
|
|||
/* Document
|
||||
* ========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add border box sizing in all browsers (opinionated).
|
||||
* 2. Backgrounds do not repeat by default (opinionated).
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; /* 1 */
|
||||
background-repeat: no-repeat; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add text decoration inheritance in all browsers (opinionated).
|
||||
* 2. Add vertical alignment inheritance in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
::before,
|
||||
::after {
|
||||
text-decoration: inherit; /* 1 */
|
||||
vertical-align: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Use the default cursor in all browsers (opinionated).
|
||||
* 2. Change the line height in all browsers (opinionated).
|
||||
* 3. Breaks words to prevent overflow in all browsers (opinionated).
|
||||
* 4. Use a 4-space tab width in all browsers (opinionated).
|
||||
* 5. Remove the grey highlight on links in iOS (opinionated).
|
||||
* 6. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
:where(:root) {
|
||||
cursor: default; /* 1 */
|
||||
line-height: 1.5; /* 2 */
|
||||
overflow-wrap: break-word; /* 3 */
|
||||
-moz-tab-size: 4; /* 4 */
|
||||
tab-size: 4; /* 4 */
|
||||
-webkit-tap-highlight-color: transparent; /* 5 */
|
||||
-webkit-text-size-adjust: 100%; /* 6 */
|
||||
text-size-adjust: 100%; /* 6 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
* ========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where(body) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Edge, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
:where(h1) {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
* ========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin on nested lists in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance of border color in Firefox.
|
||||
* 2. Add the correct box sizing in Firefox.
|
||||
*/
|
||||
|
||||
:where(hr) {
|
||||
color: inherit; /* 1 */
|
||||
height: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the list style on navigation lists in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where(nav) :where(ol, ul) {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
|
||||
*/
|
||||
|
||||
:where(nav li)::before {
|
||||
content: "\200B";
|
||||
float: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
* 3. Prevent overflow of the container in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where(pre) {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
overflow: auto; /* 3 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
* ========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct text decoration in Safari.
|
||||
*/
|
||||
|
||||
:where(abbr[title]) {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
:where(b, strong) {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
:where(code, kbd, samp) {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
:where(small) {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
* ========================================================================== */
|
||||
|
||||
/*
|
||||
* Change the alignment on media elements in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on iframes in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the fill color to match the text color in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* Tabular data
|
||||
* ========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Collapse border spacing in all browsers (opinionated).
|
||||
* 2. Correct table border color in Chrome, Edge, and Safari.
|
||||
* 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
:where(table) {
|
||||
border-collapse: collapse; /* 1 */
|
||||
border-color: currentColor; /* 2 */
|
||||
text-indent: 0; /* 3 */
|
||||
}
|
||||
|
||||
/* Forms
|
||||
* ========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin on controls in Safari.
|
||||
*/
|
||||
|
||||
:where(button, input, select) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style buttons in iOS and Safari.
|
||||
*/
|
||||
|
||||
:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the inconsistent appearance in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where(fieldset) {
|
||||
border: 1px solid #a0a0a0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Edge, and Firefox.
|
||||
*/
|
||||
|
||||
:where(progress) {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the margin in Firefox and Safari.
|
||||
* 3. Change the resize direction in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where(textarea) {
|
||||
margin: 0; /* 1 */
|
||||
resize: vertical; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
:where([type="search" i]) {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style upload buttons in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
* ========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct styles in Safari.
|
||||
*/
|
||||
|
||||
:where(dialog) {
|
||||
background-color: white;
|
||||
border: solid;
|
||||
color: black;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
:where(dialog:not([open])) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in Safari.
|
||||
*/
|
||||
|
||||
:where(details > summary:first-of-type) {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Accessibility
|
||||
* ========================================================================== */
|
||||
|
||||
/**
|
||||
* Change the cursor on busy elements in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where([aria-busy="true" i]) {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on disabled, not-editable, or otherwise
|
||||
* inoperable elements in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where([aria-disabled="true" i], [disabled]) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the display on visually hidden accessible elements
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
:where([aria-hidden="false" i][hidden]) {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
:where([aria-hidden="false" i][hidden]:not(:focus)) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
---
|
||||
import { Sprite } from 'astro-icon';
|
||||
|
||||
const { icon, href, title, always = false } = Astro.props;
|
||||
---
|
||||
|
||||
<a class={always ? 'always' : undefined} href={href} label={title} rel="noopener noreferrer">
|
||||
{icon && <Sprite aria-hidden="true" name={icon} size="1.5em" />}
|
||||
<span><slot /></span>
|
||||
<Sprite aria-hidden="true" class="arrow" pack="mdi" name="arrow-right" size="1.5em" />
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
margin-right: -1.5em;
|
||||
transition: transform 200ms cubic-bezier(0.23, 1, 0.320, 1);
|
||||
color: var(--color-dusk);
|
||||
}
|
||||
a > :global(* + *) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
a > span {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--size-500);
|
||||
}
|
||||
.arrow {
|
||||
opacity: 0;
|
||||
transform: translateX(-0.5em);
|
||||
margin-left: 0.25em;
|
||||
transition: transform 200ms cubic-bezier(0.23, 1, 0.320, 1);
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
transform: translateX(-0.25em);
|
||||
color: var(--color-purple);
|
||||
}
|
||||
a:active {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
a:hover .arrow,
|
||||
a:focus .arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(0em);
|
||||
}
|
||||
.always .arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
.always:hover,
|
||||
.always:focus {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.always:hover .arrow,
|
||||
.always:focus .arrow {
|
||||
transform: translateX(0.25em);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
---
|
||||
import { Sprite } from 'astro-icon';
|
||||
import { mentions } from '../mentions.ts';
|
||||
const { name } = Astro.props;
|
||||
|
||||
const author = mentions[name];
|
||||
if (!author) {
|
||||
throw new Error(`Could not find author "${name}"!`)
|
||||
}
|
||||
---
|
||||
|
||||
<span class="author">
|
||||
<img aria-hidden="true" src={author.avatar} alt={author.name} width="32" height="32" loading="lazy">
|
||||
<span>{author.name}</span>
|
||||
<a href={author.twitter} title={`Follow ${author.name} on Twitter`}>
|
||||
<span>
|
||||
<Sprite role="img" pack="mdi" name="twitter" width="20" height="20" />
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.author {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font: inherit;
|
||||
}
|
||||
img {
|
||||
--size: 2rem;
|
||||
display: block;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
a, a > span {
|
||||
--size: 1.5rem;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
}
|
||||
a {
|
||||
margin-left: 0.25em;
|
||||
color: var(--color-dusk);
|
||||
opacity: 0.7;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--color-dusk);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
---
|
||||
const { href, items = [] } = Astro.props;
|
||||
const Tag = href ? 'a' : 'div';
|
||||
---
|
||||
|
||||
<not-marquee role="marquee" aria-labelledby="not-marquee-label">
|
||||
<input id="marquee-pause" type="checkbox" aria-label="Toggle marquee">
|
||||
<Tag {href} class="track">
|
||||
{Array.from({ length: 6 }, (_, i) => <span class="group" style={`--i: ${i};`} id={i === 0 ? 'not-marquee-label' : undefined} aria-hidden={i > 0 ? 'true' : undefined}>{items.map(item => <span>{item}</span>)}</span>)}
|
||||
</Tag>
|
||||
</not-marquee>
|
||||
|
||||
<!-- Blocking, rehydrate from localStorage immediately -->
|
||||
<script global>
|
||||
document.getElementById('marquee-pause').checked = (localStorage.getItem('astro:marquee-paused') || 'false') === 'true';
|
||||
</script>
|
||||
|
||||
<script type="module" hoist>
|
||||
import "/src/scripts/marquee.ts";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
not-marquee {
|
||||
--color: var(--color-midnight);
|
||||
--height: 2rem;
|
||||
--speed: 25;
|
||||
--gap: var(--size-1000);
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: var(--height);
|
||||
overflow: hidden;
|
||||
|
||||
border-top: 1px solid var(--color);
|
||||
margin-top: -1px;
|
||||
border-bottom: 1px solid var(--color);
|
||||
font-family: var(--font-display);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
background: white;
|
||||
z-index: 3;
|
||||
|
||||
}
|
||||
|
||||
not-marquee::before,
|
||||
not-marquee::after {
|
||||
content: "";
|
||||
width: var(--gap);
|
||||
height: var(--height);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: var(--right, auto);
|
||||
bottom: 0;
|
||||
left: var(--left, auto);
|
||||
background: linear-gradient(var(--dir, to right), white, white 5%, rgba(255, 255, 255, 0));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
not-marquee::before {
|
||||
--left: calc(var(--height) - 4px);
|
||||
--dir: to right;
|
||||
}
|
||||
not-marquee::after {
|
||||
--right: 0;
|
||||
--dir: to left;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
--size: var(--height);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 0;
|
||||
z-index: 2;
|
||||
background: white;
|
||||
margin-top: -1px;
|
||||
margin-left: -1px;
|
||||
border: 1px solid var(--color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover,
|
||||
input[type="checkbox"]:focus {
|
||||
background: var(--color-dusk);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:active {
|
||||
background: var(--color-purple);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover::before,
|
||||
input[type="checkbox"]:focus::before,
|
||||
input[type="checkbox"]:active::before {
|
||||
filter: saturate(0) brightness(0) invert(1);
|
||||
}
|
||||
|
||||
input[type="checkbox"]::before {
|
||||
content: "";
|
||||
width: calc(var(--size) * 0.75);
|
||||
height: calc(var(--size) * 0.75);
|
||||
}
|
||||
|
||||
input[type="checkbox"]::before {
|
||||
/* Pause */
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 19h4V5h-4M6 19h4V5H6v14z' fill='%2331274a'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
/* Play */
|
||||
background-position: -1px center;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.14v14l11-7l-11-7z' fill='%2331274a'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked ~ .track,
|
||||
.track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.track {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: var(--color);
|
||||
transition: color 300ms cubic-bezier(0.23, 1, 0.320, 1);
|
||||
}
|
||||
|
||||
a.track:hover,
|
||||
a.track:focus {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
|
||||
a.track:active {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
.group {
|
||||
position: absolute;
|
||||
display: block;
|
||||
animation: marquee calc(var(--speed) * 1s) linear infinite;
|
||||
animation-play-state: inherit;
|
||||
user-select: none;
|
||||
padding-left: var(--gap);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.track {
|
||||
animation-play-state: paused;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.group > span + span {
|
||||
padding-left: var(--gap);
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
from { transform: translateX(calc(100% * var(--i, 0))) }
|
||||
to { transform: translateX(calc(100% * calc(var(--i, 0) - 1))) }
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
import { smartypants } from 'smartypants';
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
canonicalURL?: URL | string
|
||||
image?: string;
|
||||
}
|
||||
const { canonicalURL = Astro.request.canonicalURL } = Astro.props;
|
||||
const image = new URL(Astro.props.image || './social.png', Astro.site);
|
||||
const description = Astro.props.description || 'Astro is a new kind of static site builder for the modern web. Powerful developer experience meets lightweight output.';
|
||||
|
||||
const title = [Astro.props.title, 'Astro']
|
||||
.filter(Boolean)
|
||||
.join(' | ')
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="theme-color" content="#8D46E7">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="mask-icon" href="/favicon.svg" color="#8D46E7">
|
||||
<link rel="sitemap" href="/sitemap.xml">
|
||||
<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" />
|
||||
|
||||
<!-- Preload -->
|
||||
<slot name="preload" />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title set:html={smartypants(title, 1)}></title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonicalURL}/>
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={canonicalURL} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={image} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={canonicalURL} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={image} />
|
||||
|
||||
<!-- Assets -->
|
||||
<slot name="assets" />
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
|
||||
|
||||
<section class="quote">
|
||||
|
||||
<div class="logo">
|
||||
<slot name="logo" />
|
||||
</div>
|
||||
<blockquote class="astro-container container">
|
||||
<p class=""><slot name="quote" /></p>
|
||||
<cite class="head-sm"><slot name="cite" /></cite>
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.quote {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
color: var(--color, var(--color-dusk));
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
blockquote {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
padding: 2rem 0 0;
|
||||
font-size: inherit;
|
||||
max-width: 36rem;
|
||||
}
|
||||
cite {
|
||||
margin-top: 1rem;
|
||||
font-style: normal;
|
||||
font-size: var(--size-500);
|
||||
}
|
||||
cite > :global(*) {
|
||||
font: inherit;
|
||||
}
|
||||
.logo > :global(a) {
|
||||
padding: 1rem;
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
---
|
||||
const { cols = 2 } = Astro.props;
|
||||
---
|
||||
|
||||
<ul style={`--cols: ${cols};`} role="list">
|
||||
<slot />
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
font-size: var(--size-500);
|
||||
--marker-size: 3rem;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 72rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@media (min-width: 24rem) {
|
||||
ul {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
ul {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
ul {
|
||||
grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
---
|
||||
import { Sprite } from 'astro-icon'
|
||||
const { href } = Astro.props;
|
||||
const Wrapper = href ? 'a' : Fragment;
|
||||
const wrapperProps = href ? { href, target: '_blank', rel: 'noopener noreferrer' } : {};
|
||||
---
|
||||
|
||||
<li role="listitem">
|
||||
<Wrapper {...wrapperProps}>
|
||||
<span class="marker">
|
||||
<slot name="icon" />
|
||||
</span>
|
||||
<span class="text"><slot /></span>
|
||||
<Sprite aria-hidden="true" class="arrow" pack="mdi" name="arrow-right" size="1em" />
|
||||
</Wrapper>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.marker {
|
||||
transition: transform 200ms cubic-bezier(0.23, 1, 0.320, 1);
|
||||
transition-property: transform, background, color;
|
||||
}
|
||||
a:is(:hover, :focus) .marker {
|
||||
color: var(--color-dawn);
|
||||
background: var(--color-purple);
|
||||
transform: scale(1.10);
|
||||
}
|
||||
a .arrow {
|
||||
opacity: 0;
|
||||
transition: transform 200ms cubic-bezier(0.23, 1, 0.320, 1);
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
a:is(:hover, :focus) .arrow {
|
||||
transform: translateX(0.25em);
|
||||
opacity: 1;
|
||||
}
|
||||
.marker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--marker-size);
|
||||
height: var(--marker-size);
|
||||
background: var(--color-dawn);
|
||||
color: var(--color-midnight);
|
||||
border-radius: 50%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.text {
|
||||
font-size: var(--size-600);
|
||||
}
|
||||
@media (min-width: 24rem) {
|
||||
li {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
---
|
||||
const {obj, size, type} = Astro.props;
|
||||
let color, label;
|
||||
switch (type) {
|
||||
case 'staff':
|
||||
color= 'var(--color-red)';
|
||||
label= 'Staff';
|
||||
break;
|
||||
case 'l3':
|
||||
color= 'var(--color-purple)';
|
||||
label= 'Core';
|
||||
break;
|
||||
case 'l2':
|
||||
color= 'var(--color-blue)';
|
||||
label= 'Maintainer';
|
||||
break;
|
||||
default:
|
||||
color = 'none';
|
||||
break;
|
||||
}
|
||||
---
|
||||
<a class="avatar" title={`@${obj.login}`} href={obj.html_url}>
|
||||
<div class="avatar-image-border" style={`
|
||||
box-shadow:
|
||||
0px 0px 4px 0px ${color};`}>
|
||||
<div class="avatar-image" style={`
|
||||
width: ${size}px;
|
||||
height: ${size}px;
|
||||
background-image: url("${obj.avatar_url}"); `}>
|
||||
</div>
|
||||
</div>
|
||||
{label && <div class="badge" style={`background-color: ${color}`}>{label}</div>}
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.avatar {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.avatar-image-border {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
.avatar-image {
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
transition: background-size 400ms ease-out, filter 200ms ease-out;
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
bottom: 0;
|
||||
border-radius: 6px;
|
||||
background-color: limegreen;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
---
|
||||
import ContributorAvatar from './ContributorAvatar.astro';
|
||||
import ArrowLink from '../components/ArrowLink.astro';
|
||||
import contributors from '../data/contributors.json';
|
||||
|
||||
export interface Props {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
const { id } = Astro.props as Props;
|
||||
|
||||
const {staff, l3, l2, l1} = contributors;
|
||||
---
|
||||
<ul class="avatar-list" {id}>
|
||||
{staff.map(obj => <li><ContributorAvatar size={72} obj={obj} type="staff" /></li>)}
|
||||
{l3.map(obj => <li><ContributorAvatar size={72} obj={obj} type="l3" /></li>)}
|
||||
{l2.map(obj => <li><ContributorAvatar size={72} obj={obj} type="l2" /></li>)}
|
||||
{l1.map(obj => <li><ContributorAvatar size={72} obj={obj} highlight="255, 255, 255" /></li>)}
|
||||
<ArrowLink always href="https://github.com/withastro/astro/graphs/contributors">See all 200+ contributors</ArrowLink>
|
||||
|
||||
</ul>
|
||||
<style>
|
||||
.avatar-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2.5rem;
|
||||
margin: 2.5rem -2.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
import { parse, startOfDay, intlFormat, formatISO } from 'date-fns';
|
||||
|
||||
const { value } = Astro.props;
|
||||
let date;
|
||||
if (typeof value === 'string') {
|
||||
date = parse(value, 'MMMM d, yyyy', new Date());
|
||||
} else {
|
||||
date = value;
|
||||
}
|
||||
const dateISO = formatISO(startOfDay(date), { representation: 'date' });
|
||||
const dateFormatted = intlFormat(date, {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
}, {
|
||||
locale: 'en-US',
|
||||
})
|
||||
---
|
||||
|
||||
<time datetime={dateISO}>{dateFormatted}</time>
|
||||
|
|
@ -1,230 +0,0 @@
|
|||
---
|
||||
import { Sprite } from 'astro-icon';
|
||||
import Quote from './landing/Quote.astro';
|
||||
import Grid from './landing/Grid.astro';
|
||||
import Community from './landing/Community.astro';
|
||||
|
||||
import { social } from '../config.ts';
|
||||
|
||||
const { quote } = Astro.slots;
|
||||
const YYYY = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class={!quote ? 'has-card' : ''}>
|
||||
<div class="background">
|
||||
<div class="blob" />
|
||||
<Grid class="footer-grid" />
|
||||
</div>
|
||||
|
||||
{!quote && <Community />}
|
||||
|
||||
{quote && (
|
||||
<Quote color="white" blobs={false}>
|
||||
<Fragment slot="logo">
|
||||
<slot name="logo" />
|
||||
</Fragment>
|
||||
<Fragment slot="quote"><slot name="quote" /></Fragment>
|
||||
<Fragment slot="cite"><slot name="cite" /></Fragment>
|
||||
</Quote>
|
||||
)}
|
||||
|
||||
<div class="astro-container container content">
|
||||
<ul class="links">
|
||||
<li>© {YYYY} The Astro Technology Company</li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/company">We're Hiring!</a></li>
|
||||
<li><a href="/blog">Blog</a></li>
|
||||
<li><a href="/press">Press</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
overflow: hidden;
|
||||
--height: clamp(min-content, 75vh, 56rem);
|
||||
min-height: var(--height);
|
||||
position: relative;
|
||||
background: var(--color-tan) linear-gradient(180deg, #E8ADB7, #C776BE, #9039CF, #7D32DE);
|
||||
}
|
||||
.has-card {
|
||||
/* background: var(--color-tan) var(--gradient-pop-3); */
|
||||
}
|
||||
footer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: radial-gradient(200% 100% at 50% 100%, #0029FF 0%, #6D39FF 30%, rgba(255, 153, 0, 0) 100%);
|
||||
}
|
||||
footer > :global(.quote) {
|
||||
z-index: 1;
|
||||
background: none;
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
.footer-grid {
|
||||
position: absolute;
|
||||
bottom: -10% !important;
|
||||
height: 40% !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.background {
|
||||
--height: 1350px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
bottom: 0;
|
||||
margin-top: calc(var(--height) * -0.9);
|
||||
height: calc(var(--height) * 1.25);
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: white;
|
||||
margin-bottom: 6.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.content ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.content a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.content a:hover,
|
||||
.content a:focus,
|
||||
.content a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
ul > li + li {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
ul.main > li:nth-child(2) {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
.logo .logomark {
|
||||
display: none;
|
||||
}
|
||||
.logo .wordmark {
|
||||
display: block;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.icon {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
.links {
|
||||
order: 9;
|
||||
margin-top: 1rem;
|
||||
margin-left: 1rem;
|
||||
font-size: var(--size-400);
|
||||
justify-content: center;
|
||||
}
|
||||
.links > li + li {
|
||||
margin-left: 1rem;
|
||||
padding-left: 1rem;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.links > li:first-child {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.links > li + li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
border: none;
|
||||
}
|
||||
.content ul.mark {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
max-width: max-content;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.mark li:first-child {
|
||||
display: none;
|
||||
}
|
||||
.mark > li:nth-child(2) {
|
||||
margin-left: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.mark address {
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
}
|
||||
.mark address p {
|
||||
font-size: var(--size-400);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.mark address p + p {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
.icon {
|
||||
transform: scale(1);
|
||||
}
|
||||
.logo {
|
||||
padding: 0;
|
||||
}
|
||||
.logo .logomark {
|
||||
display: block;
|
||||
}
|
||||
.logo .wordmark {
|
||||
display: none;
|
||||
}
|
||||
.content {
|
||||
grid-template-columns: 1fr max-content;
|
||||
}
|
||||
.content ul.mark {
|
||||
grid-row: 1 / 3;
|
||||
margin-top: 0;
|
||||
margin-left: auto;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
ul.main {
|
||||
height: 6rem;
|
||||
}
|
||||
ul.main > li:nth-child(2) {
|
||||
margin-left: 2rem !important;
|
||||
}
|
||||
.links {
|
||||
order: initial;
|
||||
grid-row: 2;
|
||||
}
|
||||
.links > li:first-child {
|
||||
width: initial;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.links > li + li:nth-child(2) {
|
||||
margin-left: 1rem;
|
||||
padding-left: 1rem;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.mark {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.mark li:first-child {
|
||||
display: block;
|
||||
}
|
||||
.mark address {
|
||||
flex-direction: column;
|
||||
}
|
||||
.mark address p + p {
|
||||
margin-left: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 64rem) {
|
||||
.content ul.mark {
|
||||
padding-right: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
import SkipLink from './SkipLink.astro';
|
||||
// import { getStars } from '../utils.ts';
|
||||
---
|
||||
|
||||
<SkipLink />
|
||||
<slot />
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
---
|
||||
import { mentions } from '../mentions.ts';
|
||||
const { name } = Astro.props;
|
||||
|
||||
const mention = mentions[name];
|
||||
if (!mention) {
|
||||
throw new Error(`Could not find mentioned user "${name}"!`)
|
||||
}
|
||||
---
|
||||
|
||||
<span class="mention">
|
||||
<a href={mention.twitter} title={`Follow ${mention.name} on Twitter`}>
|
||||
<img aria-hidden="true" alt={mention.name} src={mention.avatar} loading="lazy">
|
||||
<span>{mention.name}</span>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.mention {
|
||||
--padding-block: 0.125rem;
|
||||
--padding-inline: 0.33rem;
|
||||
display: inline-flex;
|
||||
align-self: baseline;
|
||||
white-space: nowrap;
|
||||
margin: calc(var(--padding-block) * -1) calc(var(--padding-inline) / -2);
|
||||
background: var(--color-dawn);
|
||||
text-decoration: none;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 0.8em;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: var(--padding-block) var(--padding-inline);
|
||||
text-decoration: none;
|
||||
color: var(--color-purple);
|
||||
border-radius: inherit;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
background: var(--color-purple);
|
||||
color: white;
|
||||
}
|
||||
.mention img {
|
||||
--size: 1rem;
|
||||
display: block;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,205 +0,0 @@
|
|||
---
|
||||
import { Sprite } from 'astro-icon';
|
||||
import { social } from '../config.ts';
|
||||
|
||||
const { invert = false, marginBottom = false } = Astro.props;
|
||||
|
||||
const items = [
|
||||
{ href: '/blog', title: 'Blog' },
|
||||
{ href: 'https://docs.astro.build', title: 'Docs' },
|
||||
{ href: '/play', title: 'Playground', hiddenMobile: true }
|
||||
]
|
||||
---
|
||||
|
||||
<nav id="nav" class={`main ${invert ? 'dark' : ''} ${marginBottom ? 'margin-bottom' : ''}`.trim()} style={`--offset: 2.5;`}>
|
||||
<ul class="astro-container container" role="list">
|
||||
<li class="logo">
|
||||
<a href="/" id="navlogo">
|
||||
<h1 class="visually-hidden sr-only">Astro</h1>
|
||||
<Sprite class="logomark" name="logo" size="3em" />
|
||||
<Sprite class="wordmark" name="wordmark" height="3.5em" width="6em" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{items.map(item => (
|
||||
<li class={`${item.hiddenMobile ? 'hidden-mobile' : ''}`}>
|
||||
<a aria-current={Astro.request.url.pathname.startsWith(item.href) ? 'page' : undefined} href={item.href}>
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
|
||||
{social.map(item => (
|
||||
<li class="icon">
|
||||
<a href={item.href} title={item.title}>
|
||||
<Sprite name={item.icon} size="1.5em" role="presentation" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<script type="module" hoist>
|
||||
import "/src/scripts/nav.ts";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
--offset-height: calc(var(--offset) * 1rem);
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
top: calc((var(--offset-height) * -1) - 1px);
|
||||
margin-top: -2rem;
|
||||
padding: 0.5rem 0;
|
||||
background: linear-gradient(0deg, rgba(var(--color-tan-rgb), 0.7), rgba(var(--color-tan-rgb), 1));
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 2;
|
||||
}
|
||||
nav.margin-bottom {
|
||||
margin-bottom: -4.5rem;
|
||||
}
|
||||
nav.dark {
|
||||
background: transparent;
|
||||
color: white;
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
nav.dark a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: var(--offset-height);
|
||||
z-index: -2;
|
||||
}
|
||||
nav.dark::before {
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
nav::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: var(--offset-height);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
box-shadow: var(--shadow-md);
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
nav[stuck]::after {
|
||||
opacity: 0.5;
|
||||
transition-duration: 600ms;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.33rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
li {
|
||||
color: var(--color-dusk);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: var(--size-500);
|
||||
}
|
||||
nav.dark li {
|
||||
color: white;
|
||||
}
|
||||
li + li {
|
||||
margin-left: 0;
|
||||
}
|
||||
[aria-current="page"] {
|
||||
font-weight: 700;
|
||||
}
|
||||
.logo {
|
||||
font-size: 1rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
.logo a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-midnight);
|
||||
}
|
||||
.logo a:hover,
|
||||
.logo a:focus {
|
||||
color: var(--color-midnight);
|
||||
}
|
||||
.logo a:active {
|
||||
color: var(--color-midnight);
|
||||
}
|
||||
.logo :global(svg) {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
.logomark {
|
||||
color: inherit;
|
||||
}
|
||||
nav.dark .logo :global(svg) {
|
||||
color: white;
|
||||
fill: white;
|
||||
}
|
||||
.wordmark {
|
||||
display: none;
|
||||
color: inherit;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
.hidden-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
nav {
|
||||
/* height: calc(2px + 4.5rem); */
|
||||
}
|
||||
.logo :global(svg) {
|
||||
transform: scale(1);
|
||||
}
|
||||
.wordmark {
|
||||
display: block;
|
||||
}
|
||||
.hidden-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
color: var(--color-midnight);
|
||||
text-decoration: none;
|
||||
transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
transition-property: transform, color;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
a:active {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
.icon a :global(svg) {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.icon a:focus :global(svg),
|
||||
.icon a:hover :global(svg) {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
[astro-icon="logo"] {
|
||||
margin-right: 0.25em;
|
||||
transform: translateY(0.5em);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<noscript></noscript>
|
||||
|
||||
<style>
|
||||
noscript {
|
||||
order: -1;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--size-600);
|
||||
text-align: center;
|
||||
color: var(--color-midnight);
|
||||
background: linear-gradient(to bottom, var(--color-tan), white);
|
||||
}
|
||||
noscript::before {
|
||||
--size: var(--size-1000);
|
||||
padding-top: var(--size);
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
content: 'You need to enable JavaScript to view this site.';
|
||||
background-size: var(--size);
|
||||
background-position: center top;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 140 140'%3E%3Cg fill='%23514375'%3E%3Cpath d='M129.7 100v20h-10v-20z'/%3E%3Cpath d='M119.69 100h20v10h-20zM10 100v20h10v-20z'/%3E%3Cpath d='M20 100H0v10h20zm0-90H0v10h20z'/%3E%3Cpath d='M20 20V0H10v20zm79.69 30h20v10h-20zm-39.21 0h20v10h-20zM29.73 20h80v10h-80zm-9.97 50h99.93v10H19.76zm10 10h79.93v10H29.76zm-.03 10h20v10h-20zm30.75 0h20v10h-20zm29.21 0h20v10h-20zM19.73 30h100v10h-100zm0 10h100v10h-100zm0 20h100v10h-100zm0-10h20v10h-20zM120 10h20v10h-20z'/%3E%3Cpath d='M120 20V0h10v20z'/%3E%3C/g%3E%3C/svg%3E%0A");
|
||||
}
|
||||
noscript::after {
|
||||
--size: var(--size-1000);
|
||||
content: "Just kidding—you're going to love Astro!";
|
||||
font-size: 0.75em;
|
||||
padding-bottom: var(--size);
|
||||
background-size: var(--size);
|
||||
background-position: 50% 100%;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='140' height='141' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23af43ff' d='M85 80.325v-20h10v20zM45 80.325v-20h10v20zM65 40.325h10v60H65z'/%3E%3Cpath fill='%23af43ff' d='M55 80.325h30v10H55z'/%3E%3C/svg%3E");
|
||||
animation: bounce 1s steps(4) alternate-reverse infinite;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
---
|
||||
export interface Props {
|
||||
title?: string;
|
||||
type?: 'tip' | 'warning' | 'error';
|
||||
}
|
||||
const { type = 'tip', title } = Astro.props;
|
||||
---
|
||||
|
||||
<aside class={`note type-${type}`}>
|
||||
{title && <h3 class="head-sm">{title}</h3>}
|
||||
<slot />
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.note {
|
||||
--padding-block: 2rem;
|
||||
--padding-inline: 2rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: var(--padding-block) var(--padding-inline);
|
||||
margin-left: calc(var(--padding-inline) * -1);
|
||||
margin-right: calc(var(--padding-inline) * -1);
|
||||
margin-top: 4rem !important;
|
||||
|
||||
background: var(--color-dawn);
|
||||
color: var(--color-midnight);
|
||||
}
|
||||
|
||||
@media (min-width: 64rem) {
|
||||
.note {
|
||||
border-radius: var(--corner-md);
|
||||
}
|
||||
}
|
||||
|
||||
.note > :global(* + *) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.note h3 {
|
||||
font-weight: 700;
|
||||
font-size: var(--size-500);
|
||||
color: var(--color-accent);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.note.type-tip {
|
||||
--color-accent: var(--color-blue);
|
||||
}
|
||||
.note.type-warning {
|
||||
--color-accent: var(--color-yellow);
|
||||
}
|
||||
.note.type-error {
|
||||
--color-accent: var(--color-red);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
---
|
||||
const { class: className, background = 'color-tan', offset = 0, size = "lg", elevation = "xl", pad = 1 } = Astro.props;
|
||||
let style = `--pad: ${pad}; `;
|
||||
if (offset !== 0) {
|
||||
style += `--offset-block: ${offset};`
|
||||
}
|
||||
---
|
||||
|
||||
<div class="astro-container px-2" style={style}>
|
||||
<article class={`panel elevation-${elevation} size-${size} ${className}`} style={`--background: ${background};`}>
|
||||
{Astro.slots.title && <div class="title">
|
||||
<slot name="title" />
|
||||
</div>}
|
||||
<slot />
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.astro-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: calc(var(--offset-block, 0) * -1rem);
|
||||
}
|
||||
.panel {
|
||||
--offset-inline: 0.5rem;
|
||||
background: var(--background);
|
||||
border-radius: var(--corner-md);
|
||||
padding: calc(1.25rem * var(--pad, 1)) 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: calc(var(--offset-inline) * -1);
|
||||
margin-right: calc(var(--offset-inline) * -1);
|
||||
}
|
||||
.panel.size-md {
|
||||
max-width: 64rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
.panel {
|
||||
padding: calc(3.25rem * var(--pad, 1)) 2rem;
|
||||
--offset-inline: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: var(--color-dusk);
|
||||
}
|
||||
|
||||
.panel > :not(p):nth-child(2) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
---
|
||||
const { class: className = '', href } = Astro.props;
|
||||
// Wrap in <span> because Houdini is disabled for a[href] for security
|
||||
|
||||
const { variant = 'primary' } = Astro.props;
|
||||
const { before, after } = Astro.slots;
|
||||
---
|
||||
|
||||
<!-- Blocking script -->
|
||||
<script hoist>
|
||||
if ('paintWorklet' in CSS) {
|
||||
CSS.paintWorklet.addModule('/pixel.worklet.js');
|
||||
}
|
||||
</script>
|
||||
|
||||
<span class={`link pixel variant-${variant} ${before ? 'has-before' : ''} ${after ? 'has-after' : ''} ${className}`.trim()}>
|
||||
<a {href}>
|
||||
<slot name="before" />
|
||||
<span><slot /></span>
|
||||
<slot name="after" />
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.pixel {
|
||||
--border-radius: 8;
|
||||
--pixel-size: 4;
|
||||
--background: var(--gradient-pop-1);
|
||||
position: relative;
|
||||
border-radius: calc(var(--border-radius) * 1px);
|
||||
}
|
||||
.pixel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(var(--pixel-size) * 1px);
|
||||
right: 0;
|
||||
bottom: calc(var(--pixel-size) * 1px);
|
||||
left: 0;
|
||||
background: var(--background);
|
||||
z-index: -1;
|
||||
}
|
||||
.pixel::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(var(--pixel-size) * 1px);
|
||||
bottom: 0;
|
||||
left: calc(var(--pixel-size) * 1px);
|
||||
background: var(--background);
|
||||
z-index: -1;
|
||||
}
|
||||
.pixel.variant-outline {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
border-radius: 0;
|
||||
}
|
||||
.pixel.variant-outline::before {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
border: calc(var(--pixel-size) * 1px) solid var(--background);
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.pixel.variant-outline::after {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
border: calc(var(--pixel-size) * 1px) solid var(--background);
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
@supports (background: paint(pixel)) {
|
||||
:global(.js) .pixel {
|
||||
background: none !important;
|
||||
}
|
||||
:global(.js) .pixel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
background: var(--background);
|
||||
-webkit-mask-image: paint(pixel);
|
||||
mask-image: paint(pixel);
|
||||
}
|
||||
:global(.js) .pixel::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
.link {
|
||||
--border-radius: 8;
|
||||
--duration: 200ms;
|
||||
--delay: 30ms;
|
||||
--background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
|
||||
display: flex;
|
||||
color: white;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
width: max-content;
|
||||
transition-property: transform, --link-color-stop-a, --link-color-stop-b;
|
||||
transition-duration: var(--duration);
|
||||
transition-delay: var(--delay);
|
||||
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.link:hover,
|
||||
.link:focus-within {
|
||||
transform: translateY(calc(var(--pixel-size) * -0.5px));
|
||||
}
|
||||
.link:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.has-before a :first-child {
|
||||
margin-left: -1rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.has-before a :last-child {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.67rem 2.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: inherit !important;
|
||||
}
|
||||
a > :global(* + *) {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.variant-primary {
|
||||
--variant: primary;
|
||||
--background: linear-gradient(180deg, var(--link-color-stop-a), var(--link-color-stop-b));
|
||||
}
|
||||
.variant-primary:hover,
|
||||
.variant-primary:focus-within {
|
||||
--link-color-stop-a: #6D39FF;
|
||||
--link-color-stop-b: #AF43FF;
|
||||
}
|
||||
.variant-primary:active {
|
||||
--link-color-stop-a: #5F31E1;
|
||||
--link-color-stop-b: #A740F3;
|
||||
}
|
||||
|
||||
.variant-outline {
|
||||
--variant: outline;
|
||||
--background: none;
|
||||
color: var(--background);
|
||||
}
|
||||
.variant-outline > a::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(var(--pixel-size) * 1px);
|
||||
bottom: calc(var(--pixel-size) * 1px);
|
||||
left: calc(var(--pixel-size) * 1px);
|
||||
content: "";
|
||||
display: block;
|
||||
transform-origin: bottom center;
|
||||
background: linear-gradient(to top, var(--background), rgba(255, 255, 255, 0));
|
||||
opacity: 0.3;
|
||||
transform: scaleY(0);
|
||||
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.variant-outline:hover > a::before,
|
||||
.variant-outline:focus-within > a::before {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
.variant-outline:active > a::before {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
---
|
||||
export interface Props {
|
||||
code: string;
|
||||
}
|
||||
const { code } = Astro.props;
|
||||
---
|
||||
|
||||
<pre><code>{String(code).trim().split('\n').map(
|
||||
line => <span class="line">{
|
||||
line.startsWith('#') ? <span class="comment">{line}</span> : line
|
||||
}</span>)
|
||||
}</code></pre>
|
||||
|
||||
<style>
|
||||
pre,
|
||||
code {
|
||||
white-space: pre;
|
||||
}
|
||||
.comment {
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
.line {
|
||||
display: block;
|
||||
}
|
||||
.line:empty::after {
|
||||
content: ' ';
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<a href="#content">Skip to main content</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
text-align: center;
|
||||
|
||||
background-color: white;
|
||||
border-bottom: 1px solid transparent;
|
||||
font-family: var(--font-display);
|
||||
text-transform: uppercase;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
background: white;
|
||||
z-index: 5;
|
||||
|
||||
/* Visually hidden */
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
a:focus {
|
||||
width: 100vw;
|
||||
height: 48px;
|
||||
position: fixed;
|
||||
clip: initial;
|
||||
clip-path: initial;
|
||||
|
||||
background: var(--color-purple);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
---
|
||||
const { height = 50 } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="starfield" style={`--height: ${height}%;`} />
|
||||
|
||||
<style>
|
||||
.starfield {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: calc(100% - var(--height));
|
||||
left: 0;
|
||||
background-image: url(/stars.png);
|
||||
background-repeat: repeat;
|
||||
-webkit-mask-image: url(/stars-mask.png);
|
||||
-webkit-mask-repeat: repeat;
|
||||
mask-image: url(/stars-mask.png);
|
||||
mask-repeat: repeat;
|
||||
animation: sparkle 10s linear infinite alternate-reverse;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes sparkle {
|
||||
from {
|
||||
-webkit-mask-position: top right;
|
||||
mask-position: top right;
|
||||
}
|
||||
to {
|
||||
-webkit-mask-position: bottom left;
|
||||
mask-position: bottom left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
import Panel from './Panel.astro'
|
||||
---
|
||||
|
||||
<Panel class="tweet" background="var(--color-dawn)">
|
||||
<slot />
|
||||
</Panel>
|
||||
|
||||
<style>
|
||||
.tweet {
|
||||
margin-top: 2rem;
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<div class="wrapper">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
background: var(--color-tan) linear-gradient(to bottom, var(--color-tan) 0%, var(--color-tan) calc(100% - 50vh), #E8ADB7 100%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<article class="bg-dawn shadow-lg px-4 py-4 text-center rounded-lg sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<slot />
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<section class="prose mx-auto">
|
||||
<slot />
|
||||
</section>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<div class="max-w-7xl mx-auto">
|
||||
<div class="sm:text-center">
|
||||
<h1 class="text-3xl md:text-3xl font-bold font-display text-gradient">
|
||||
<slot name="title" />
|
||||
</h1>
|
||||
<div class="max-w-2xl mt-5 mx-auto">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
---
|
||||
import DateTime from '../../components/Date.astro';
|
||||
import Author from '../../components/Author.astro';
|
||||
import { smartypants } from 'smartypants';
|
||||
|
||||
const { post = {}, variant = 'summary' } = Astro.props;
|
||||
const Title = variant === 'summary' ? 'h2' : 'h1';
|
||||
---
|
||||
|
||||
<div class="wrapper">
|
||||
<Title class="title text-gradient" set:html={smartypants(post.title, 1)} />
|
||||
|
||||
<div class="authors">
|
||||
<h3>Written by</h3>
|
||||
<ul role="list">
|
||||
{post.authors.map(author => (
|
||||
<li><Author name={author} /></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="date">
|
||||
<h3>Published on</h3>
|
||||
<p><DateTime value={post.publishDate} /></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
--space: 0.5rem;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
.wrapper {
|
||||
--space: 1rem;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-family: var(--font-display);
|
||||
margin: 0 auto;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
line-height: 1.1;
|
||||
}
|
||||
h1.title {
|
||||
font-size: var(--size-800);
|
||||
}
|
||||
h2.title {
|
||||
--fill: var(--color-dusk);
|
||||
font-size: var(--size-600);
|
||||
}
|
||||
.description {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
margin-top: var(--space);
|
||||
}
|
||||
.description > p {
|
||||
max-width: 48ch;
|
||||
}
|
||||
.post > div {
|
||||
margin-top: calc(var(--space) * 2);
|
||||
}
|
||||
.authors {
|
||||
flex-grow: 2;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 50rem) {
|
||||
.authors {
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
.authors ul {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
list-style: none;
|
||||
}
|
||||
.authors ul > li + li {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.date {
|
||||
flex-grow: 1;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
margin-bottom: var(--size-300);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--size-300);
|
||||
font-weight: 700;
|
||||
color: var(--color-dusk);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.date, .authors {
|
||||
margin-top: calc(var(--space) * 2);
|
||||
font-size: var(--size-400);
|
||||
}
|
||||
:is(.date, .authors) p {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
height: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
---
|
||||
import { Sprite } from 'astro-icon';
|
||||
|
||||
const { tweet: { title, href } } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="outro">
|
||||
<div class="astro-container container">
|
||||
<div class="content">
|
||||
<a class="return" href="/blog">
|
||||
<Sprite pack="mdi" name="arrow-left" size="32" aria-hidden="true" />
|
||||
<span>Return to Blog</span>
|
||||
</a>
|
||||
<a class="share-on-twitter" title="Share on Twitter" href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(href)}&via=astrodotbuild`}>
|
||||
<Sprite pack="mdi" name="twitter" size="16" />
|
||||
<span>Share</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.outro {
|
||||
padding: 4rem 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 48rem;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.return {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--size-600);
|
||||
font-family: var(--font-display);
|
||||
color: var(--color-purple);
|
||||
gap: 0.25em;
|
||||
}
|
||||
.share-on-twitter {
|
||||
background: var(--color-blue);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.25em 0.5em;
|
||||
gap: 0.25em;
|
||||
}
|
||||
@media (min-width: 52rem) {
|
||||
.outro {
|
||||
padding: 8rem 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
---
|
||||
import { smartypants } from 'smartypants';
|
||||
|
||||
const { career = {}, variant = 'summary' } = Astro.props;
|
||||
const Title = variant === 'summary' ? 'h2' : 'h1';
|
||||
---
|
||||
|
||||
<div class="wrapper">
|
||||
<Title class="title text-gradient">{smartypants(career.title, 1)}</Title>
|
||||
<div class="description">
|
||||
<p>{career.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.title {
|
||||
font-family: var(--font-display);
|
||||
margin: 0 auto;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
line-height: 1.1;
|
||||
}
|
||||
h1.title {
|
||||
font-size: var(--size-800);
|
||||
}
|
||||
h2.title {
|
||||
--fill: var(--color-dusk);
|
||||
font-size: var(--size-600);
|
||||
}
|
||||
.description {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.description > p {
|
||||
max-width: 48ch;
|
||||
color: #999;
|
||||
}
|
||||
.post > div {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.authors {
|
||||
flex-grow: 2;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 52rem) {
|
||||
.authors {
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
.authors ul {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
list-style: none;
|
||||
}
|
||||
.authors ul > li + li {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.date {
|
||||
flex-grow: 1;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
margin-bottom: var(--size-300);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--size-300);
|
||||
font-weight: 700;
|
||||
color: var(--color-dusk);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.date, .authors {
|
||||
margin-top: 2rem;
|
||||
font-size: var(--size-400);
|
||||
}
|
||||
:is(.date, .authors) p {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
height: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
---
|
||||
import Section from './Section.astro';
|
||||
import Panel from '../Panel.astro';
|
||||
---
|
||||
|
||||
<Section {...Astro.props}>
|
||||
<Panel background="var(--gradient-pop-4)">
|
||||
<div class="astro-container container">
|
||||
<div class="content">
|
||||
<h3 class="head-md"><slot name="title" /></h3>
|
||||
<div class="body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
color: var(--color-dawn);
|
||||
text-align: center;
|
||||
}
|
||||
.body {
|
||||
max-width: 75ch;
|
||||
margin: 2em auto 0;
|
||||
}
|
||||
|
||||
.body :global(a) {
|
||||
text-decoration: underline;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
---
|
||||
import Section from './Section.astro';
|
||||
import Title from './Title.astro';
|
||||
import ArrowLink from '../ArrowLink.astro';
|
||||
import Panel from '../Panel.astro';
|
||||
import { social } from '../../config.ts';
|
||||
|
||||
const { style } = Astro.props;
|
||||
---
|
||||
|
||||
<Section class="community" style={style} pad={1.0}>
|
||||
<Panel size="md" background="var(--color-dawn)">
|
||||
<Fragment slot="title">
|
||||
<h3 class="head-md"><Title id="community"><slot name="title">Connect with Astro</slot></Title></h3>
|
||||
<div class="description">
|
||||
<slot>
|
||||
<p>Learn more about Astro, get support, and meet thousands of other devs in our Discord community!</p>
|
||||
</slot>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
||||
<ul class="links">
|
||||
<li class="social">
|
||||
<ArrowLink icon="mdi:book" href="https://docs.astro.build">
|
||||
Documentation
|
||||
</ArrowLink>
|
||||
</li>
|
||||
{social.map(item => (
|
||||
<li class="social">
|
||||
<ArrowLink icon={item.icon} href={item.href}>
|
||||
{item.title}
|
||||
</ArrowLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Panel>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.community {
|
||||
padding-top: var(--size-1000);
|
||||
background: var(--background, rgba(255, 255, 255, 0));
|
||||
}
|
||||
.description {
|
||||
margin-top: 1rem;
|
||||
max-width: 48ch;
|
||||
}
|
||||
.links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.links > :global(li) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 52rem) {
|
||||
.links > :global(li) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
---
|
||||
import Section from './Section.astro';
|
||||
const { reverse, gradient = false } = Astro.props;
|
||||
---
|
||||
<Section pad={2} class={"demo" + (gradient ? ' gradient' : '')}>
|
||||
<div class="astro-container">
|
||||
<div class="content">
|
||||
<h3 class="head-md title"><slot name="title" /></h3>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class={['illo', reverse ? 'reverse' : ''].filter(x => x).join(' ')}>
|
||||
<slot name="illustration" />
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.demo:nth-child(3) {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
.reverse {
|
||||
padding-bottom: var(--size-1000);
|
||||
}
|
||||
.gradient {
|
||||
background: var(--color-tan) linear-gradient(180deg, #E5DAEE 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
.astro-container {
|
||||
display: grid;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.content > :global(p) {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
max-width: 52ch;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
.illo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@media (min-width: 64rem) {
|
||||
.reverse {
|
||||
order: -1;
|
||||
}
|
||||
.title {
|
||||
margin-top: -2.5ex;
|
||||
}
|
||||
.astro-container {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.content {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 82rem) {
|
||||
.illo :global(svg) {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
---
|
||||
import { Sprite } from 'astro-icon';
|
||||
|
||||
const { before, after, name } = Astro.props;
|
||||
---
|
||||
<div class="illustration" role="img" data-name={name}>
|
||||
<div class="before-astro">
|
||||
<div class="screen">
|
||||
<slot name="before" />
|
||||
</div>
|
||||
<div class="label">
|
||||
<div class="badge">
|
||||
<Sprite pack="ic" name="close" size={24} />
|
||||
</div>
|
||||
<div class="text">
|
||||
<h4>{before}</h4>
|
||||
<h5>Before Astro</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="after-astro">
|
||||
<div class="screen">
|
||||
<slot name="after" />
|
||||
</div>
|
||||
<div class="label">
|
||||
<div class="badge">
|
||||
<Sprite name="logo-single-color" size={20} />
|
||||
</div>
|
||||
<div class="text">
|
||||
<h4>{after}</h4>
|
||||
<h5>With Astro</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.illustration {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.screen {
|
||||
position: relative;
|
||||
height: 248px;
|
||||
width: 165px;
|
||||
border-radius: var(--corner-md);
|
||||
box-shadow: var(--shadow-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
.screen {
|
||||
height: 330px;
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
.before-astro {
|
||||
--color: #E3CFC7;
|
||||
--color-rgb: 227, 207, 199;
|
||||
}
|
||||
.after-astro {
|
||||
--color: #E8D6F3;
|
||||
--color-rgb: 232, 214, 243;
|
||||
}
|
||||
.before-astro :is(.label, .screen) {
|
||||
background: #FAFAFA linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #F4EFED 100%);
|
||||
}
|
||||
.after-astro :is(.label, .screen) {
|
||||
background: #FAFAFA linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #F3E9FA 100%);
|
||||
}
|
||||
.after-astro .screen::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: var(--gradient-pop-5);
|
||||
filter: blur(10px);
|
||||
z-index: -1;
|
||||
}
|
||||
.before-astro {
|
||||
z-index: 0;
|
||||
}
|
||||
.after-astro {
|
||||
z-index: 1;
|
||||
}
|
||||
.after-astro .screen {
|
||||
margin-left: -24px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
.after-astro .screen {
|
||||
margin-top: initial;
|
||||
margin-left: initial;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
position: relative;
|
||||
width: 165px;
|
||||
margin: -1.5rem 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
z-index: 2;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.after-astro .label {
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
.label {
|
||||
margin: -1.5rem auto 0;
|
||||
width: 175px;
|
||||
}
|
||||
.after-astro .label {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.text h4,
|
||||
.text h5 {
|
||||
font-family: var(--font-display);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.text h4 {
|
||||
font-size: var(--size-400);
|
||||
color: var(--color-midnight);
|
||||
}
|
||||
.text h5 {
|
||||
font-size: var(--size-300);
|
||||
color: #7C678B;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.before-astro .text h5 {
|
||||
color: #CC2727;
|
||||
}
|
||||
.after-astro .text h5 {
|
||||
color: #4a54ee;
|
||||
}
|
||||
.badge {
|
||||
--size: 2rem;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
.before-astro .badge {
|
||||
background: linear-gradient(180deg, #FA8C5D 0%, #CC2727 100%);
|
||||
}
|
||||
.after-astro .badge {
|
||||
background: linear-gradient(180.2deg, #205EFF 0.17%, #C238BD 114.76%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
---
|
||||
import Illustration from './DemoIllustration.astro';
|
||||
---
|
||||
|
||||
<Illustration before="255 kB" after="10.7 kB" name="hydration">
|
||||
<Fragment slot="before">
|
||||
<div class="ph-content before">
|
||||
<header>
|
||||
<div class="logo" style="--i: 0" />
|
||||
<div class="cart dynamic" style="--i: 0.5" />
|
||||
</header>
|
||||
<ul role="list">
|
||||
{[0, 1, 2].map((i) => {
|
||||
return (
|
||||
<li>
|
||||
<div class="img" style={`--i: ${(i * 0.5) + 1}`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none"width="48" height="44" viewBox="0 0 64 59" role="img">
|
||||
<path fill="#FAFAFA" d="M13 1h5v1h2v1h2v2h1v3h3v2h1v5h-1v2h-3v2h-1v3h-2v1h-2v1h-5v-1h-2v-1H8v-3H7v-2H5v-2H4v-5h1V8h2V5h1V3h3V2h2V1ZM1 54h3v-4h3v-3h3v-3h3v-3h2v-3h5v3h4v3h2v3h5v-3h2v-4h3v-4h1v-5h2v-3h2v-3h2v-3h2v3h2v3h2v3h2v5h2v4h2v4h2v3h3v4h1v4h2v4H1v-5Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="group">
|
||||
<div style={`--i: ${(i * 0.5) + 1.33}`} />
|
||||
<div class="dynamic" style={`--i: ${(i * 0.5) + 1.67}`} />
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</Fragment>
|
||||
<Fragment slot="after">
|
||||
<div class="ph-content after">
|
||||
<header>
|
||||
<div class="logo" />
|
||||
<div class="cart dynamic" style="--i: 0" />
|
||||
</header>
|
||||
<ul role="list">
|
||||
{[0, 1, 2].map((i) => {
|
||||
return (
|
||||
<li>
|
||||
<div class="img">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="48" height="44" viewBox="0 0 64 59" role="img">
|
||||
<path fill="#FAFAFA" d="M13 1h5v1h2v1h2v2h1v3h3v2h1v5h-1v2h-3v2h-1v3h-2v1h-2v1h-5v-1h-2v-1H8v-3H7v-2H5v-2H4v-5h1V8h2V5h1V3h3V2h2V1ZM1 54h3v-4h3v-3h3v-3h3v-3h2v-3h5v3h4v3h2v3h5v-3h2v-4h3v-4h1v-5h2v-3h2v-3h2v-3h2v3h2v3h2v3h2v5h2v4h2v4h2v3h3v4h1v4h2v4H1v-5Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="group">
|
||||
<div />
|
||||
<div class="dynamic" style={`--i: ${i * 0.5}`} />
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</Fragment>
|
||||
</Illustration>
|
||||
|
||||
|
||||
<style>
|
||||
.before {
|
||||
--accent: 94, 81, 76;
|
||||
--accent-bg: linear-gradient(to bottom, #DFC9C0 0%, #A8938A 100%);
|
||||
--delay: 100ms;
|
||||
}
|
||||
.after {
|
||||
--accent: 175, 67, 255;
|
||||
--accent-bg: var(--gradient-pop-3);
|
||||
--delay: 200ms;
|
||||
}
|
||||
.ph-content {
|
||||
color: var(--color);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
.ph-content > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.group {
|
||||
margin-left: 1rem;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.group div {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.group div:last-child {
|
||||
margin-top: 0.5rem;
|
||||
width: 67%;
|
||||
}
|
||||
header {
|
||||
--size: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: var(--size);
|
||||
}
|
||||
:where(.ph-content div) {
|
||||
border-radius: 8px;
|
||||
background: var(--color);
|
||||
width: 100%;
|
||||
height: var(--height, var(--size, 1rem));
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.img {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
z-index: 2;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.logo {
|
||||
width: calc(var(--size) * 3);
|
||||
height: var(--size);
|
||||
}
|
||||
.cart {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ph-content .dynamic {
|
||||
background: var(--accent-bg);
|
||||
}
|
||||
.ph-content div[style*="--i"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
}
|
||||
.ph-content div[style*="--i"]::after {
|
||||
box-shadow: 0 0 0 2px rgba(var(--accent), 1);
|
||||
opacity: 0;
|
||||
animation: hydrate-border 3s calc(var(--delay) + calc(var(--i) * 250ms)) ease-out forwards;
|
||||
}
|
||||
@keyframes hydrate-border {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50%, 80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
---
|
||||
import Illustration from './DemoIllustration.astro';
|
||||
---
|
||||
|
||||
<Illustration before="4.0s TTI" after="2.3s TTI" name="tti">
|
||||
<Fragment slot="before">
|
||||
<div class="spinner-container before">
|
||||
<svg class="spinner" viewBox="0 0 100 100" width="128" height="128" fill="none" role="status">
|
||||
<circle cx="50" cy="50" r="25" stroke="currentColor" stroke-width="8" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tti-content before">
|
||||
<svg class="img" xmlns="http://www.w3.org/2000/svg" fill="none" width="188" height="148" role="img" viewBox="0 0 198 156">
|
||||
<path fill="url(#tti-before-a)" fill-rule="evenodd" d="M7 0C3 0 0 3 0 7v141c0 4 3 7 7 7h183c4 0 7-3 7-7V7c0-4-3-7-7-7H7Zm65 19h-9v2h-5v2h-5v5h-2v5h-5v5h-2v9h2v5h5v5h2v4h5v3h5v2h9v-2h5v-3h5v-4h2v-5h5v-5h2v-9h-2v-5h-5v-5h-2v-5h-5v-2h-5v-2ZM45 128h-7v9h128v-8h-4v-8h-3v-7h-5v-7h-4v-9h-4v-7h-5V81h-4v-7h-4v-5h-3v-7h-6v7h-4v5h-3v7h-4v10h-3v7h-5v9h-6v7h-9v-7h-5v-6h-7v-7H67v7h-5v6h-5v7h-6v6h-6v8Z" clip-rule="evenodd"/>
|
||||
<defs>
|
||||
<linearGradient id="tti-before-a" x1="98.7" x2="98.7" y1="0" y2="155.2" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#DFC9C0"/>
|
||||
<stop offset="1" stop-color="#A8938A"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
</Fragment>
|
||||
<Fragment slot="after">
|
||||
<div class="spinner-container after">
|
||||
<svg class="spinner" viewBox="0 0 100 100" width="128" height="128" fill="none" role="status">
|
||||
<circle cx="50" cy="50" r="25" stroke="currentColor" stroke-width="8" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="tti-content after">
|
||||
<svg class="img" xmlns="http://www.w3.org/2000/svg" fill="none" width="188" height="148" viewBox="0 0 198 156" role="img">
|
||||
<path fill="url(#tti-after-a)" fill-rule="evenodd" d="M8 1C4 1 0 4 0 8v140c0 5 4 8 8 8h182c5 0 8-3 8-8V8c0-4-3-7-8-7H8Zm65 18H63v3h-5v2h-4v5h-3v5h-4v4h-3v10h3v5h4v4h3v5h4v2h5v3h10v-3h4v-2h5v-5h3v-4h4v-5h3V38h-3v-4h-4v-5h-3v-5h-5v-2h-4v-3ZM45 129h-6v9h128v-8h-4v-8h-4v-8h-4v-6h-5v-9h-4v-8h-4V81h-5v-6h-3v-6h-4v-6h-5v6h-4v6h-4v6h-3v10h-4v8h-5v9h-5v6h-9v-6h-6v-7h-7v-6H67v6h-5v7h-5v6h-6v7h-6v8Z" clip-rule="evenodd"/>
|
||||
<defs>
|
||||
<linearGradient id="tti-after-a" x1="70.4" x2="70.4" y1=".6" y2="155.8" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFB4B4"/>
|
||||
<stop offset="1" stop-color="#C487F0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
</Fragment>
|
||||
</Illustration>
|
||||
|
||||
|
||||
<style>
|
||||
.spinner {
|
||||
--size: 8rem;
|
||||
--len: 156px;
|
||||
--rot: 360deg;
|
||||
transform-origin: center center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
margin: auto;
|
||||
color: var(--color);
|
||||
stroke-dasharray: var(--len);
|
||||
stroke-dashoffset: calc(var(--len) * 0.25);
|
||||
animation: spin 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
.spinner {
|
||||
--size: 12rem;
|
||||
}
|
||||
}
|
||||
.spinner > circle {
|
||||
transform-origin: center center;
|
||||
animation: rotate 6s linear infinite;
|
||||
}
|
||||
.spinner-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.before,
|
||||
.after {
|
||||
animation: fade-out 10s linear infinite both;
|
||||
}
|
||||
.spinner-container.before {
|
||||
animation-name: fade-out-before;
|
||||
}
|
||||
.tti-content.before {
|
||||
animation-name: fade-in-before;
|
||||
}
|
||||
.spinner-container.after {
|
||||
animation-name: fade-out-after;
|
||||
}
|
||||
.tti-content.after {
|
||||
animation-name: fade-in-after;
|
||||
}
|
||||
.tti-content {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
.img {
|
||||
width: 100%;
|
||||
}
|
||||
.tti-content > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.tti-content > div {
|
||||
height: var(--height, 1rem);
|
||||
width: var(--width, 100%);
|
||||
border-radius: 8px;
|
||||
background: var(--color);
|
||||
}
|
||||
.tti-content > :nth-child(2) {
|
||||
--height: 1.5rem;
|
||||
--width: 67%;
|
||||
}
|
||||
.tti-content > :nth-child(4) {
|
||||
--width: 80%;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
.tti-content > :nth-child(2) {
|
||||
--height: 2rem;
|
||||
--width: 67%;
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(calc(var(--rot) * 0));
|
||||
}
|
||||
to {
|
||||
transform: rotate(calc(var(--rot) * 1));
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(calc(var(--rot) * 0));
|
||||
stroke-dashoffset: calc(var(--len) * 0.25);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(calc(var(--rot) * 0.25));
|
||||
stroke-dashoffset: calc(var(--len) * 0.5);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(calc(var(--rot) * 0.5));
|
||||
stroke-dashoffset: calc(var(--len) * 0.25);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(calc(var(--rot) * 0.75));
|
||||
stroke-dashoffset: calc(var(--len) * 0.5);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(calc(var(--rot) * 1));
|
||||
stroke-dashoffset: calc(var(--len) * 0.25);
|
||||
}
|
||||
}
|
||||
@keyframes fade-in-before {
|
||||
0%, 39.9%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
40%, 85% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fade-out-before {
|
||||
0%, 39.9%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
40%, 99.9% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fade-in-after {
|
||||
0%, 22.9%, 100% {
|
||||
opacity: 0;
|
||||
}
|
||||
23%, 85% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fade-out-after {
|
||||
0%, 22.9%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
23%, 99.9% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
---
|
||||
const { class: className } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={`grid ${className}`}>
|
||||
<div class="base" />
|
||||
{Array.from({ length: 10 }, (_, i) => <div class="line" style={`--i: ${i};`} />)}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
--len: 10;
|
||||
--time: 15s;
|
||||
--grid-size-inline: 5em;
|
||||
--grid-size-block: 2.5em;
|
||||
--grid-color: #000;
|
||||
--grid-stroke: 1px;
|
||||
opacity: 0.7;
|
||||
mix-blend-mode: hard-light;
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
filter: invert(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
.base {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-left: -50%;
|
||||
width: 200%;
|
||||
background-position-y: 0px;
|
||||
background-image: repeating-linear-gradient(90deg, var(--grid-color, white) 0%, transparent calc(1px + var(--grid-stroke, 0px)), transparent var(--grid-size-inline), var(--grid-color, white) calc(var(--grid-size-inline) + 1px + var(--grid-stroke, 0px)));
|
||||
transform: perspective(50vh) rotateX(60deg) translateZ(10px) translateY(-1px);
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
|
||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))
|
||||
}
|
||||
.line {
|
||||
--n-start: calc((var(--i) + 1) / var(--len));
|
||||
--n-end: calc((var(--i) + 2) / var(--len));
|
||||
--ty-start: calc(var(--i) * calc(var(--grid-size-block) * ((var(--i) + 1) / var(--len))));
|
||||
--ty-end: calc((var(--i) + 1) * calc(var(--grid-size-block) * ((var(--i) + 2) / var(--len))));
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 35.5%;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border: var(--grid-stroke) solid var(--grid-color);
|
||||
transform: scaleY(var(--sy-start)) translateY(var(--ty-start));
|
||||
animation: move var(--time) infinite linear;
|
||||
}
|
||||
|
||||
/* Firefox tweaks */
|
||||
@supports (-moz-appearance: none) {
|
||||
.line {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.line {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
opacity: calc(var(--n-start));
|
||||
transform: translate3d(0, var(--ty-start), 0);
|
||||
}
|
||||
100%{
|
||||
opacity: calc(var(--n-end));
|
||||
transform: translate3d(0, var(--ty-end), 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
---
|
||||
import Grid from './Grid.astro';
|
||||
---
|
||||
<section class="hero">
|
||||
<div class="background">
|
||||
<div class="blob-a" />
|
||||
<div class="blob-b" />
|
||||
<div class="blob-c" />
|
||||
</div>
|
||||
<Grid />
|
||||
<div class="astro-container container content">
|
||||
<h2 class="text-gradient"><slot name="title" /></h2>
|
||||
<p><slot name="tagline" /></p>
|
||||
<div class="cta astro-container container">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
position: relative;
|
||||
background: var(--color-tan) linear-gradient(180deg, var(--color-tan), var(--color-tan) 10rem, #E8ADB7 100%);
|
||||
padding: var(--padding, 4rem) 0;
|
||||
padding-bottom: var(--padding-bottom, 16rem);
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
max-height: 95vh;
|
||||
max-height: 95svh;
|
||||
|
||||
}
|
||||
@supports (padding: clamp(0px, 1vw, 1px)) {
|
||||
.hero {
|
||||
--padding: clamp(4rem, 6vw, 8rem);
|
||||
--padding-bottom: max(calc(var(--padding) * 1.5), 24rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) and (min-height: 40rem) {
|
||||
.hero {
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 5rem;
|
||||
text-align: center;
|
||||
color: rgba(34, 34, 34, 0.8);
|
||||
}
|
||||
@media (min-width: 52rem) {
|
||||
.content {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
--fill: var(--gradient-pop-1);
|
||||
font-size: 4rem;
|
||||
font-size: var(--size-800);
|
||||
font-family: var(--font-display);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
@media (min-width: 52rem) {
|
||||
h2 {
|
||||
font-size: var(--size-900);
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: var(--size-600);
|
||||
max-width: min(48ch, calc(100% - 1rem));
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.cta {
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
.cta {
|
||||
position: absolute;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
--time: 25s;
|
||||
--blur: 128px;
|
||||
--scale-x: 1.125;
|
||||
--opacity: 0.9;
|
||||
--ty: 0;
|
||||
--aspect-ratio: 16 / 9;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
backface-visibility: hidden;
|
||||
transform: translate3d(0,0,0) scaleX(var(--scale-x, 1));
|
||||
opacity: var(--opacity, 1);
|
||||
filter: blur(var(--blur)) saturate(1.1);
|
||||
}
|
||||
|
||||
@media (min-width: 64rem) {
|
||||
.background {
|
||||
--ty: -5%;
|
||||
/* --opacity: 1; */
|
||||
--scale-x: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
/* Firefox tweaks */
|
||||
@supports (-moz-appearance: none) {
|
||||
.background {
|
||||
--blur: 1280px;
|
||||
--opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Safari tweaks */
|
||||
@supports (-webkit-appearance: none) {
|
||||
.background {
|
||||
--blur: 80px;
|
||||
--opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.blob-a {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 67%;
|
||||
right: -50%;
|
||||
margin-left: -50%;
|
||||
min-width: 1280px;
|
||||
width: 200%;
|
||||
aspect-ratio: var(--aspect-ratio);
|
||||
border-radius: 50%;
|
||||
transform-origin: center center;
|
||||
background: linear-gradient(-170deg, #FF9900 0%, #AD00FF 30.71%, #0029FF 37.67%, #6D39FF 49.54%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.blob-b {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 67%;
|
||||
right: -50%;
|
||||
margin-left: -50%;
|
||||
min-width: 1280px;
|
||||
width: 200%;
|
||||
aspect-ratio: var(--aspect-ratio);
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
transform-origin: center center;
|
||||
background: linear-gradient(259deg, #FF9900 0%, #AD00FF 30.71%, #0029FF 37.67%, #6D39FF 49.54%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.blob-c {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -50%;
|
||||
margin-left: -50%;
|
||||
min-width: 1280px;
|
||||
width: 200%;
|
||||
aspect-ratio: var(--aspect-ratio);
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
transform-origin: center center;
|
||||
background: linear-gradient(-180deg, #FF9900 0%, #AD00FF 30.71%, #0029FF 37.67%, #6D39FF 49.54%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@supports not (aspect-ratio: 1 / 1) {
|
||||
.blob-a::before,
|
||||
.blob-b::before,
|
||||
.blob-c::before {
|
||||
float: left;
|
||||
padding-top: calc(100% * var(--aspect-ratio));
|
||||
content: "";
|
||||
}
|
||||
|
||||
.blob-a::after,
|
||||
.blob-b::after,
|
||||
.blob-c::after {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue