almost complete website
This commit is contained in:
commit
bb3958518d
16 changed files with 494 additions and 0 deletions
48
README.md
Normal file
48
README.md
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
# Astro Starter Kit: Basics
|
||||
|
||||
```sh
|
||||
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:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
|
||||
|
||||
## 🧞 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:4321` |
|
||||
| `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).
|
||||
12
astro.config.mjs
Normal file
12
astro.config.mjs
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// @ts-check
|
||||
import { defineConfig } from 'astro/config';
|
||||
import icon from "astro-icon";
|
||||
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
|
||||
import react from '@astrojs/react';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [tailwind(), icon(), react()]
|
||||
});
|
||||
BIN
bun.lockb
Executable file
BIN
bun.lockb
Executable file
Binary file not shown.
25
package.json
Normal file
25
package.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^4.1.0",
|
||||
"@astrojs/tailwind": "^5.1.3",
|
||||
"@fontsource/poppins": "^5.1.0",
|
||||
"@iconify-json/solar": "^1.2.1",
|
||||
"@iconify/react": "^5.1.0",
|
||||
"@types/react": "^19.0.1",
|
||||
"@types/react-dom": "^19.0.2",
|
||||
"astro": "^5.0.5",
|
||||
"astro-icon": "^1.1.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwindcss": "^3.4.16"
|
||||
}
|
||||
}
|
||||
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/assets/global.css
Normal file
39
src/assets/global.css
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
:root {
|
||||
--crust: #11111b;
|
||||
--mantle: #181825;
|
||||
--base: #1e1e2e;
|
||||
|
||||
--surface0: #313244;
|
||||
--surface1: #45475a;
|
||||
--surface2: #585b70;
|
||||
|
||||
--overlay0: #6c7086;
|
||||
--overlay1: #7f849c;
|
||||
--overlay2: #9399b2;
|
||||
|
||||
--subtext0: #a6adc8;
|
||||
--subtext1: #bac2de;
|
||||
--text: #cdd6f4;
|
||||
|
||||
--lavender: #b4befe;
|
||||
--blue: #89b4fa;
|
||||
--sapphire: #74c7ec;
|
||||
--sky: #89dceb;
|
||||
--teal: #94e2d5;
|
||||
--green: #a6e3a1;
|
||||
--yellow: #f9e2af;
|
||||
--peach: #fab387;
|
||||
--maroon: #eba0ac;
|
||||
--red: #f38ba8;
|
||||
--mauve: #cba6f7;
|
||||
--mauve-rgb: rgba(203, 166, 247, 0.1);
|
||||
--pink: #f5c2e7;
|
||||
--flamingo: #f2cdcd;
|
||||
--rosewater: #f5e0dc;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--crust);
|
||||
color: var(--text);
|
||||
font-family: Poppins;
|
||||
}
|
||||
BIN
src/assets/img/bg.jpg
Normal file
BIN
src/assets/img/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
14
src/assets/img/logo.svg
Normal file
14
src/assets/img/logo.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<svg width="330" height="300" viewBox="0 0 330 300" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_1_11" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="330" height="300">
|
||||
<path d="M105.02 0.250505C124.411 -2.58042 144.952 18.9013 150.868 48.5428C156.784 78.0178 146.102 104.329 126.712 107.326C107.485 110.324 86.7801 88.8419 80.7 59.2004C74.6199 29.7255 85.6298 3.41448 105.02 0.250505ZM222.515 0.250505C242.07 3.41448 252.915 29.7255 247.164 59.2004C240.919 88.8419 220.378 110.324 200.988 107.326C181.433 104.329 170.751 78.0178 176.832 48.5428C182.747 18.9013 203.288 -2.58042 222.515 0.250505ZM17.1052 76.8521C35.8386 68.6924 61.3093 83.5131 74.6199 109.325C87.1087 135.636 82.8362 163.279 64.2672 171.438C45.6982 179.598 20.3918 164.944 7.40989 138.799C-5.57198 112.655 -0.970814 84.8453 17.1052 76.8521ZM312.895 76.8521C330.971 84.8453 335.572 112.655 322.59 138.799C309.608 164.944 284.302 179.598 265.733 171.438C247.164 163.279 242.891 135.636 255.38 109.325C268.691 83.5131 294.161 68.6924 312.895 76.8521ZM285.452 256.366C286.109 272.02 274.278 289.338 260.146 295.833C230.731 309.488 195.894 281.179 163.192 281.179C130.491 281.179 95.3251 310.654 66.4035 295.833C49.9707 287.673 38.6321 266.025 40.7684 248.04C43.7263 223.228 73.1409 209.906 90.5596 191.755C113.73 168.274 130.163 124.145 163.192 124.145C196.058 124.145 213.477 167.608 235.661 191.755C253.901 212.071 284.302 229.223 285.452 256.366Z" fill="black"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_1_11)">
|
||||
<rect x="-6" y="-10" width="349" height="315" fill="#E4AAFF"/>
|
||||
<path d="M0 252.384C0 244.841 1.17526 237.344 3.48351 230.162L23.7762 167.029C28.8459 151.257 37.7548 136.991 49.7023 125.514L69.2526 106.734C85.9028 90.739 107.575 80.9985 130.59 79.1654L172.764 75.8064C195.564 73.9905 218.296 80.0449 237.172 92.96L271.485 116.437C291.78 130.323 306.247 151.201 312.121 175.081L318.525 201.113C334.028 264.136 286.321 325 221.42 325H72.6163C32.5115 325 0 292.489 0 252.384V252.384Z" fill="#C954FF"/>
|
||||
<path d="M31.9954 191.599C28.0829 178.056 42.0188 166.239 54.8185 172.147V172.147C58.7566 173.965 63.2843 174.125 67.3348 172.574L76.5228 169.055C87.3233 164.919 97.4366 176.459 91.9188 186.623V186.623C90.078 190.014 89.9133 194.067 91.4727 197.596L92.7496 200.486C99.0359 214.713 86.3886 230.013 71.2332 226.515L60.1167 223.95C57.4279 223.33 54.6181 223.488 52.016 224.406L50.9473 224.783C39.6245 228.78 28.8503 217.611 33.2513 206.439V206.439C34.3851 203.561 34.5344 200.388 33.6759 197.417L31.9954 191.599Z" fill="white"/>
|
||||
<path d="M239.787 291.341C236.329 280.189 247.692 270.178 258.419 274.791V274.791C261.472 276.104 264.938 276.225 268.069 275.108L277.392 271.781C285.774 268.79 293.327 277.885 288.847 285.575V285.575C287.262 288.296 287.121 291.624 288.47 294.47L289.55 296.748C294.64 307.481 285.208 319.389 273.594 316.892L262.239 314.451C260.163 314.004 258.007 314.119 255.991 314.782L253.453 315.616C244.692 318.497 236.613 309.725 240.204 301.23V301.23C241.191 298.896 241.321 296.288 240.57 293.867L239.787 291.341Z" fill="white"/>
|
||||
<path d="M61.7873 298.341C58.3295 287.189 69.6921 277.178 80.4185 281.791V281.791C83.4724 283.104 86.9379 283.225 90.0688 282.108L99.3924 278.781C107.774 275.79 115.327 284.885 110.847 292.575V292.575C109.262 295.296 109.121 298.624 110.47 301.47L111.55 303.748C116.64 314.481 107.208 326.389 95.5944 323.892L84.2386 321.451C82.1635 321.004 80.007 321.119 77.9907 321.782L75.4526 322.616C66.6917 325.497 58.6127 316.725 62.2042 308.23V308.23C63.1912 305.896 63.3209 303.288 62.5703 300.867L61.7873 298.341Z" fill="white"/>
|
||||
<path d="M223.995 164.599C220.083 151.056 234.019 139.239 246.818 145.147V145.147C250.757 146.965 255.284 147.125 259.335 145.574L268.523 142.055C279.323 137.919 289.437 149.459 283.919 159.623V159.623C282.078 163.014 281.913 167.067 283.473 170.596L284.75 173.486C291.036 187.713 278.389 203.013 263.233 199.515L252.117 196.95C249.428 196.33 246.618 196.488 244.016 197.406L242.947 197.783C231.624 201.78 220.85 190.611 225.251 179.439V179.439C226.385 176.561 226.534 173.388 225.676 170.417L223.995 164.599Z" fill="white"/>
|
||||
<path d="M78.9954 115.599C75.0829 102.056 89.0188 90.2395 101.818 96.147V96.147C105.757 97.9646 110.284 98.1252 114.335 96.5739L123.523 93.0551C134.323 88.9187 144.437 100.459 138.919 110.623V110.623C137.078 114.014 136.913 118.067 138.473 121.596L139.75 124.486C146.036 138.713 133.389 154.013 118.233 150.515L107.117 147.95C104.428 147.33 101.618 147.488 99.016 148.406L97.9473 148.783C86.6245 152.78 75.8503 141.611 80.2513 130.439V130.439C81.3851 127.561 81.5344 124.388 80.6759 121.417L78.9954 115.599Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
15
src/assets/img/pages.svg
Normal file
15
src/assets/img/pages.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 33 KiB |
112
src/components/Navbar.tsx
Normal file
112
src/components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Logo from "@/assets/img/logo.svg";
|
||||
|
||||
const NavbarWithSidebar = () => {
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
if (!isAnimating) {
|
||||
setIsSidebarOpen(!isSidebarOpen);
|
||||
setIsAnimating(true);
|
||||
}
|
||||
};
|
||||
|
||||
const closeSidebar = () => {
|
||||
if (!isAnimating) {
|
||||
setIsSidebarOpen(false);
|
||||
setIsAnimating(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAnimationEnd = () => {
|
||||
setIsAnimating(false);
|
||||
};
|
||||
|
||||
const NavLinks = () => (
|
||||
<>
|
||||
<a href="https://git.yiffing.dev/Tailux" target="_blank" className="max-md:mb-1 bg-[var(--mauve-rgb)] text-[var(--mauve)] pt-1 pb-1 pl-4 pr-4 text-[18px] rounded-[10px] font-medium hover:bg-[var(--mauve)] flex items-center gap-2 hover:text-[var(--crust)] transition-all active:scale-90">
|
||||
<Icon icon="solar:heart-bold" />
|
||||
Tailux
|
||||
</a>
|
||||
<a href="/services" className="max-md:mb-1 bg-[var(--mauve-rgb)] text-[var(--mauve)] pt-1 pb-1 pl-4 pr-4 text-[18px] rounded-[10px] font-medium hover:bg-[var(--mauve)] flex items-center gap-2 hover:text-[var(--crust)] transition-all active:scale-90">
|
||||
<Icon icon="solar:server-square-bold" />
|
||||
Services
|
||||
</a>
|
||||
<a href="/pages" className="max-md:mb-1 bg-[var(--mauve-rgb)] text-[var(--mauve)] pt-1 pb-1 pl-4 pr-4 text-[18px] rounded-[10px] font-medium hover:bg-[var(--mauve)] flex items-center gap-2 hover:text-[var(--crust)] transition-all active:scale-90">
|
||||
<Icon icon="solar:map-arrow-square-bold" />
|
||||
Pages
|
||||
</a>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center navbar">
|
||||
<a href="/">
|
||||
<div className="transition-all active:scale-90 flex items-center">
|
||||
<img width="45" src={Logo.src} alt="" />
|
||||
<div className="ml-3 text-[var(--mauve)] font-semibold">
|
||||
yiffing.dev
|
||||
<div className="text-[var(--flamingo)]">By furries, for furries :3</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/* Desktop Links */}
|
||||
<div className="ml-auto flex items-center gap-2 max-md:hidden">
|
||||
<NavLinks />
|
||||
</div>
|
||||
{/* Mobile Hamburger Icon */}
|
||||
<div className="ml-auto hidden max-md:block">
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="bg-[var(--mauve-rgb)] text-[var(--mauve)] pt-2 pb-2 pl-2 pr-2 text-[18px] rounded-[10px] font-medium hover:bg-[var(--mauve)] flex items-center gap-2 hover:text-[var(--crust)] transition-all active:scale-90"
|
||||
>
|
||||
<Icon icon="solar:hamburger-menu-bold" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Sidebar */}
|
||||
{(isSidebarOpen || isAnimating) && (
|
||||
<div
|
||||
className={`fixed inset-0 bg-black/50 z-40 transition-opacity duration-300 ${
|
||||
isSidebarOpen ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
onClick={closeSidebar}
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
fixed top-0 right-0 w-64 h-full bg-[var(--crust)] shadow-lg p-6 z-50
|
||||
transform transition-transform duration-300 ease-in-out
|
||||
${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'}
|
||||
`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onTransitionEnd={handleAnimationEnd}
|
||||
>
|
||||
<div className="flex justify-end mb-6">
|
||||
<button
|
||||
onClick={closeSidebar}
|
||||
className="bg-[var(--mauve-rgb)] text-[var(--mauve)] pt-2 pb-2 pl-2 pr-2 text-[18px] rounded-[10px] font-medium hover:bg-[var(--mauve)] flex items-center gap-2 hover:text-[var(--crust)] transition-all active:scale-90"
|
||||
>
|
||||
<Icon icon="solar:close-circle-bold" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<NavLinks />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style>{`
|
||||
.navbar {
|
||||
padding-top: 7vh;
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavbarWithSidebar;
|
||||
43
src/layouts/Layout.astro
Normal file
43
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
import "@/assets/global.css"
|
||||
import "@fontsource/poppins/400.css";
|
||||
import "@fontsource/poppins/500.css";
|
||||
import "@fontsource/poppins/600.css";
|
||||
import "@fontsource/poppins/700.css";
|
||||
import { ClientRouter } from 'astro:transitions';
|
||||
|
||||
import Logo from "@/assets/img/logo.svg"
|
||||
import Navbar from "@/components/Navbar.tsx";
|
||||
---
|
||||
|
||||
<!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={Logo.src} />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
<ClientRouter/>
|
||||
</head>
|
||||
<body>
|
||||
<Navbar client:load />
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 95%;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
45
src/pages/index.astro
Normal file
45
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Bg from '@/assets/img/bg.jpg'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
---
|
||||
|
||||
<Layout title="yiffing.dev - by furries, for furries">
|
||||
<div style={`background-image: url(${Bg.src})`} class="bg">
|
||||
</div>
|
||||
|
||||
<div class="mt-[20vh]">
|
||||
<div class="text-[10vh] max-md:text-[5vh] font-semibold text-[var(--blue)]">
|
||||
Hewwo!~
|
||||
</div>
|
||||
<div class="text-[2vh]">
|
||||
We are an community <small>2 people ekhem</small> of furry linux nerds and opensource software enthusiasts <br>
|
||||
that are just trying to create something cool :3
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center text-[2vh] max-md:text-[10px]">
|
||||
Also, take a look at our Forgejo instance <a class="text-[var(--sky)] font-bold flex items-center gap-2 ml-1 mr-1" href="https://git.yiffing.dev">git.yiffing.dev<Icon name="solar:link-bold"/></a> !
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.bg {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: fixed;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.bg {
|
||||
background-position: right !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
93
src/pages/pages.astro
Normal file
93
src/pages/pages.astro
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import PagesIcon from '@/assets/img/pages.svg'
|
||||
---
|
||||
|
||||
<Layout title="yiffing.dev - Yiffing Pages">
|
||||
<div class="mt-[4vh] bg-[var(--base)] p-10 rounded-[30px]">
|
||||
<div class="flex items-center justify-center max-w-[70%] max-md:max-w-[100%] max-md:block max-md:text-center m-auto">
|
||||
<img class="max-md:w-[130px] m-auto" src={PagesIcon.src} alt="">
|
||||
<div class="ml-6 max-md:ml-0">
|
||||
<div class="text-[var(--mauve)] font-semibold text-[6vh]">
|
||||
Yiffing Pages
|
||||
</div>
|
||||
<div class="text-[var(--sky)] font-medium text-[20px]">
|
||||
Hosting websites, Made easy
|
||||
</div>
|
||||
<div class="mt-1">Quick 'n easy way to host a website for your project or just your personal website. Just put your open source project's page, blog, portfolio into a Git repository at <a class="text-[var(--mauve)] font-medium" href="https://git.yffing.dev">Yiffing Git</a>, and we will do the hard stuff for you.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-[70%] m-auto grid grid-cols-3 gap-3 mt-[3vh] max-md:block">
|
||||
<div class="bg-[var(--mantle)] p-3 rounded-[10px] text-center max-md:mb-3">
|
||||
<div class="bg-[var(--mauve-rgb)] text-[var(--mauve)] font-semibold w-[40px] h-[40px] flex justify-center items-center rounded-[15px] m-auto">
|
||||
1
|
||||
</div>
|
||||
|
||||
<div class="mt-2 text-[20px] font-medium text-[var(--sky)]">
|
||||
Set up Your Repository
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
Create a public repository called <code>pages</code> to make the site available at the main subdomain.
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2 mb-2">
|
||||
<div class="divider"></div>
|
||||
OR
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
|
||||
Create a branch <code>pages</code> in a public repository: <br>
|
||||
<div class="mb-2 mt-1"><code>git switch --orphan pages</code></div>
|
||||
<code>git rm --cached -r . </code>
|
||||
</div>
|
||||
<div class="bg-[var(--mantle)] p-3 rounded-[10px] text-center max-md:mb-3">
|
||||
<div class="bg-[var(--mauve-rgb)] text-[var(--mauve)] font-semibold w-[40px] h-[40px] flex justify-center items-center rounded-[15px] m-auto">
|
||||
2
|
||||
</div>
|
||||
|
||||
<div class="mt-2 text-[20px] font-medium text-[var(--sky)]">
|
||||
Upload your files
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
Upload your static HTML, css, js etc to the repository
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[var(--mantle)] p-3 rounded-[10px] text-center max-md:mb-3">
|
||||
<div class="bg-[var(--mauve-rgb)] text-[var(--mauve)] font-semibold w-[40px] h-[40px] flex justify-center items-center rounded-[15px] m-auto">
|
||||
3
|
||||
</div>
|
||||
|
||||
<div class="mt-2 text-[20px] font-medium text-[var(--sky)]">
|
||||
You're done! :3
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
Access your website using this link: <br>
|
||||
<code>https://USERNAME.fluffy.pw[/REPOSITORY][/@BRANCH]</code>
|
||||
|
||||
<div class="mt-3">
|
||||
Stuff in " [] " is optional if you have uploaded everything to your main <code>pages</code> repository it will be available at: <br>
|
||||
|
||||
<code>https://USERNAME.fluffy.pw</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
code {
|
||||
background-color: var(--crust);
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
background-color: var(--crust);
|
||||
height: 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
11
src/pages/services.astro
Normal file
11
src/pages/services.astro
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="yiffing.dev - Services">
|
||||
<div>
|
||||
<div>
|
||||
The stuff we host
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
8
tailwind.config.mjs
Normal file
8
tailwind.config.mjs
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
20
tsconfig.json
Normal file
20
tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [
|
||||
".astro/types.d.ts",
|
||||
"**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"dist"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue