initial commit
This commit is contained in:
parent
4c79041548
commit
d08e40c76e
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
# build output
|
||||
dist/
|
||||
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"typescript.inlayHints.parameterNames.enabled": "all"
|
||||
}
|
||||
56
README.md
56
README.md
@ -1,3 +1,55 @@
|
||||
# creator
|
||||
# Astro Starter Kit: Basics
|
||||
|
||||
A browser based intro creation tool
|
||||
```
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Card.astro
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :--------------------- | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
|
||||
11
astro.config.ts
Normal file
11
astro.config.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import UnoCSS from "unocss/astro";
|
||||
|
||||
import react from "@astrojs/react";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [UnoCSS({
|
||||
injectReset: true
|
||||
}), react()]
|
||||
});
|
||||
30
package.json
Normal file
30
package.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "creator",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^2.1.1",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@unom/style": "^0.2.14",
|
||||
"astro": "^2.3.0",
|
||||
"motion": "^10.15.5",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@jasikpark/astro-svg-loader": "^0.1.0",
|
||||
"@unocss/postcss": "^0.51.4",
|
||||
"@unocss/preset-mini": "^0.51.4",
|
||||
"@unocss/reset": "^0.51.4",
|
||||
"postcss-preset-env": "^8.3.1",
|
||||
"unocss": "^0.51.4"
|
||||
}
|
||||
}
|
||||
10
postcss.config.cjs
Normal file
10
postcss.config.cjs
Normal file
@ -0,0 +1,10 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
"@unocss/postcss": {},
|
||||
"postcss-preset-env": {
|
||||
features: {
|
||||
"nesting-rules": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
39
src/components/Cards/Highlight.astro
Normal file
39
src/components/Cards/Highlight.astro
Normal file
@ -0,0 +1,39 @@
|
||||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<div class="icon-container mb-8">
|
||||
<slot name="icon" />
|
||||
</div>
|
||||
<h3 class="mb-2">{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
|
||||
& p {
|
||||
max-width: 300px;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& .icon-container {
|
||||
& svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
src/components/Icons/Highlights/HighlightsIcon.astro
Normal file
21
src/components/Icons/Highlights/HighlightsIcon.astro
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
import SVG from "@jasikpark/astro-svg-loader";
|
||||
|
||||
type IconName = "resolution" | "smooth" | "local";
|
||||
|
||||
export interface Props {
|
||||
name: IconName;
|
||||
}
|
||||
|
||||
const { name } = Astro.props;
|
||||
|
||||
const icons: Record<IconName, Promise<typeof import("*.svg")>> = {
|
||||
resolution: import("./Icon_Resolution.svg?raw"),
|
||||
smooth: import("./Icon_Smooth.svg?raw"),
|
||||
local: import("./Icon_Local.svg?raw"),
|
||||
};
|
||||
|
||||
const iconSrc = icons[name];
|
||||
---
|
||||
|
||||
<SVG src={iconSrc} aria-label={name} />
|
||||
4
src/components/Icons/Highlights/Icon_Local.svg
Normal file
4
src/components/Icons/Highlights/Icon_Local.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="66.5" cy="66.5" r="66.5" fill="#D9D9D9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M75 64.8956L90 53V75.3636L66.5 94L43 75.3636V53L56 63.3095L56 0H75L75 64.8956Z" fill="#161616"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 307 B |
23
src/components/Icons/Highlights/Icon_Resolution.svg
Normal file
23
src/components/Icons/Highlights/Icon_Resolution.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg width="118" height="118" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g style="mix-blend-mode:luminosity">
|
||||
<rect x="0.00012207" y="59.0001" width="59" height="59" fill="white"/>
|
||||
<rect x="59.0001" y="6.10352e-05" width="59" height="59" fill="#2D2D2D"/>
|
||||
<rect x="59.0001" y="59.0001" width="59" height="59" fill="#737373"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:luminosity">
|
||||
<rect y="29.5" width="29.5" height="29.5" fill="white"/>
|
||||
<rect x="29.5" width="29.5" height="29.5" fill="#2D2D2D"/>
|
||||
<rect x="29.5" y="29.5" width="29.5" height="29.5" fill="#737373"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:luminosity">
|
||||
<rect y="15" width="15" height="15" fill="white"/>
|
||||
<rect x="15" width="15" height="15" fill="#2D2D2D"/>
|
||||
<rect x="15" y="15" width="15" height="15" fill="#737373"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:luminosity">
|
||||
<rect y="7.5" width="7.5" height="7.5" fill="white"/>
|
||||
<rect x="7.5" width="7.5" height="7.5" fill="#2D2D2D"/>
|
||||
<rect x="7.5" y="7.5" width="7.5" height="7.5" fill="#737373"/>
|
||||
<rect width="7.5" height="7.5" fill="#828282"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
5
src/components/Icons/Highlights/Icon_Smooth.svg
Normal file
5
src/components/Icons/Highlights/Icon_Smooth.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="66.5" cy="40" rx="39.5" ry="39" fill="#D9D9D9" fill-opacity="0.4"/>
|
||||
<ellipse cx="66.5" cy="94" rx="39.5" ry="39" fill="#D9D9D9" fill-opacity="0.58"/>
|
||||
<circle cx="67" cy="68" r="39" fill="#D9D9D9" fill-opacity="0.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 337 B |
70
src/components/Layout/Footer.astro
Normal file
70
src/components/Layout/Footer.astro
Normal file
@ -0,0 +1,70 @@
|
||||
---
|
||||
type NavigationItem = {
|
||||
path: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
type NavigationGroup = {
|
||||
title: string;
|
||||
items: Array<NavigationItem>;
|
||||
};
|
||||
|
||||
const tree: Array<NavigationGroup> = [
|
||||
{
|
||||
title: "Overview",
|
||||
items: [
|
||||
{
|
||||
path: "/",
|
||||
label: "Landing",
|
||||
},
|
||||
{
|
||||
path: "/blog",
|
||||
label: "Blog",
|
||||
},
|
||||
{
|
||||
path: "/contact",
|
||||
label: "Contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ path: "/legal/imprint", label: "Imprint" },
|
||||
{
|
||||
path: "/legal/privacy-policy",
|
||||
label: "Privacy Policy",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<footer class="py-4">
|
||||
<div class="m-auto flex flex-row flex-wrap gap-12 inner-container">
|
||||
{
|
||||
tree.map((group) => (
|
||||
<div>
|
||||
<h3 class="mb-2">{group.title}</h3>
|
||||
<div class="flex flex-col">
|
||||
{group.items.map((item) => (
|
||||
<a href={item.path}>{item.label}</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background-color: var(--color-neutral-accent);
|
||||
|
||||
& .inner-container {
|
||||
max-width: var(--content-max-width);
|
||||
margin: auto;
|
||||
padding: var(--padding-main);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
src/components/Layout/Header.astro
Normal file
48
src/components/Layout/Header.astro
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
import Logo from "components/Logo.astro";
|
||||
---
|
||||
|
||||
<header id="main-header">
|
||||
<div class="inner-container">
|
||||
<Logo />
|
||||
<button id="get-started-button" class="button">Get Started</button>
|
||||
</div>
|
||||
</header>
|
||||
<script>
|
||||
import { animate } from "motion";
|
||||
import { ease } from "@unom/style";
|
||||
|
||||
const getStartedButton = document.getElementById("get-started-button");
|
||||
const header = document.getElementById("main-header");
|
||||
|
||||
if (header) {
|
||||
animate(header, { opacity: [0, 1], y: ["-101%", 0] }, ease.quart(0.6).out);
|
||||
}
|
||||
|
||||
if (getStartedButton) {
|
||||
animate(
|
||||
getStartedButton,
|
||||
{ scale: [0, 1] },
|
||||
{ ...ease.quart(0.6).out, delay: 0 }
|
||||
);
|
||||
}
|
||||
</script>
|
||||
<style lang="postcss">
|
||||
header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 2rem;
|
||||
z-index: 99;
|
||||
|
||||
& .inner-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
border-radius: 100px;
|
||||
margin: auto;
|
||||
max-width: var(--content-max-width);
|
||||
padding: var(--padding-main);
|
||||
background-color: var(--color-neutral-accent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
42
src/components/Logo.astro
Normal file
42
src/components/Logo.astro
Normal file
@ -0,0 +1,42 @@
|
||||
<a id="logo" class="block" href="/">
|
||||
<h1 class="text-4xl leading-8 font-bold">
|
||||
<span>p</span><span>l</span><span>a</span><span>y</span>
|
||||
</h1>
|
||||
</a>
|
||||
<style>
|
||||
a {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
h1 {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
margin-bottom: 0.25rem;
|
||||
background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0.4));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
width: fit-content;
|
||||
|
||||
&:hover {
|
||||
-webkit-text-stroke: 1px #eee;
|
||||
}
|
||||
|
||||
& span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { animate, stagger } from "motion";
|
||||
import { ease } from "@unom/style";
|
||||
|
||||
const logoText = document.querySelectorAll("#logo h1")[0];
|
||||
|
||||
console.log(logoText);
|
||||
|
||||
animate(
|
||||
logoText.children as any,
|
||||
{ y: [-30, 0], opacity: [0, 1] },
|
||||
{ ...ease.quint(0.7).out, delay: stagger(0.1) }
|
||||
);
|
||||
</script>
|
||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="astro/client" />
|
||||
116
src/layouts/Layout.astro
Normal file
116
src/layouts/Layout.astro
Normal file
@ -0,0 +1,116 @@
|
||||
---
|
||||
import Header from "components/Layout/Header.astro";
|
||||
import Footer from "components/Layout/Footer.astro";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<slot />
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
:root {
|
||||
--font-main: "Gilroy", system-ui, sans-serif;
|
||||
|
||||
--font-size-s: 0.8rem;
|
||||
--font-size-m: 1rem;
|
||||
--font-size-l: 1.2rem;
|
||||
--font-size-xl: 2.5rem;
|
||||
--font-size-xxl: 3rem;
|
||||
|
||||
--color-neutral: #222;
|
||||
--color-neutral-accent: #333;
|
||||
--color-main: #eee;
|
||||
|
||||
--padding-main: 24px 48px;
|
||||
|
||||
--content-max-width: 1600px;
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
color: var(--color-main);
|
||||
background-color: var(--color-neutral);
|
||||
}
|
||||
code {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
|
||||
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
font-size: var(--font-size-xxl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-main);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
button,
|
||||
a {
|
||||
font-family: var(--font-main);
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #563795;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 30px;
|
||||
transition: filter 0.1s linear;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.default-section {
|
||||
max-width: var(--content-max-width);
|
||||
padding: var(--padding-main);
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
78
src/pages/index.astro
Normal file
78
src/pages/index.astro
Normal file
@ -0,0 +1,78 @@
|
||||
---
|
||||
import Layout from "layouts/Layout.astro";
|
||||
import SectionHighlights from "sections/Start/Highlights.astro";
|
||||
---
|
||||
|
||||
<Layout title="play by tempblade">
|
||||
<main>
|
||||
<section class="default-section" id="header">
|
||||
<div class="heading-container">
|
||||
<h1 class="my-4 font-bold">
|
||||
Motion Graphics made easy, <br /> for free!
|
||||
</h1>
|
||||
<p>
|
||||
Thats right! Create an intro, outro or other motion graphic elements
|
||||
right in your browser for free. How is this possible? Through the
|
||||
power of open source software!
|
||||
</p>
|
||||
</div>
|
||||
<div class="illustration-container">
|
||||
<svg viewBox="0 0 1000 1000">
|
||||
<circle cx="500" cy="500" r="300"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
<SectionHighlights />
|
||||
</main>
|
||||
<script>
|
||||
import { animate, stagger } from "motion";
|
||||
import { ease } from "@unom/style";
|
||||
|
||||
const headingContainer = document.querySelectorAll(
|
||||
"#header .heading-container"
|
||||
)[0];
|
||||
|
||||
console.log(headingContainer);
|
||||
|
||||
animate(
|
||||
headingContainer.children as any,
|
||||
{ y: [50, 0], opacity: [0, 1] },
|
||||
{ ...ease.quart(0.6).out, delay: stagger(0.1) }
|
||||
);
|
||||
window.sessionStorage.setItem("did_animation_run", "1");
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#header {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
& .heading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& .illustration-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@screen 2xl {
|
||||
#header {
|
||||
flex-direction: row;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
40
src/sections/Start/Highlights.astro
Normal file
40
src/sections/Start/Highlights.astro
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
import HighlightCard from "components/Cards/Highlight.astro";
|
||||
import HighlightIcon from "components/Icons/Highlights/HighlightsIcon.astro";
|
||||
---
|
||||
|
||||
<section class="default-section">
|
||||
<HighlightCard
|
||||
title="Local"
|
||||
description="Unleash the power of any machine rocking a modern browser"
|
||||
>
|
||||
<HighlightIcon slot="icon" name="local" />
|
||||
</HighlightCard>
|
||||
<HighlightCard
|
||||
title="Resolution"
|
||||
description="Experience high fidelity motion graphics like never before"
|
||||
>
|
||||
<HighlightIcon slot="icon" name="resolution" />
|
||||
</HighlightCard>
|
||||
<HighlightCard
|
||||
title="Smooth"
|
||||
description="Our Animations range from 24-60FPS"
|
||||
>
|
||||
<HighlightIcon slot="icon" name="smooth" />
|
||||
</HighlightCard>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@screen l {
|
||||
section {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
8
tsconfig.json
Normal file
8
tsconfig.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"baseUrl": "src",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
16
uno.config.ts
Normal file
16
uno.config.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { defineConfig } from "unocss";
|
||||
import presetMini from "@unocss/preset-mini";
|
||||
|
||||
export default defineConfig({
|
||||
presets: [presetMini()],
|
||||
theme: {
|
||||
breakpoints: {
|
||||
s: "576px",
|
||||
m: "768px",
|
||||
l: "992px",
|
||||
xl: "1200px",
|
||||
"2xl": "1400px",
|
||||
"3xl": "1600px",
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user