FEAT: styling
This commit is contained in:
cake
commit
3d84555eaf
15 changed files with 5240 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# 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
|
||||||
|
|
||||||
|
# jetbrains setting folder
|
||||||
|
.idea/
|
||||||
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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
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).
|
||||||
9
astro.config.mjs
Normal file
9
astro.config.mjs
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
// @ts-check
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
experimental: {
|
||||||
|
svg:true
|
||||||
|
}
|
||||||
|
});
|
||||||
4856
package-lock.json
generated
Normal file
4856
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
14
package.json
Normal file
14
package.json
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"name": "smolbeaver",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"astro": "^5.4.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
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 |
BIN
public/mainpicture.png
Normal file
BIN
public/mainpicture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
97
public/wood.svg
Normal file
97
public/wood.svg
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="1200"
|
||||||
|
height="1200"
|
||||||
|
viewBox="0 0 36 36"
|
||||||
|
id="Layer_1"
|
||||||
|
data-name="Layer 1"
|
||||||
|
version="1.1"
|
||||||
|
sodipodi:docname="wood.svg"
|
||||||
|
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview5"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:zoom="0.439375"
|
||||||
|
inkscape:cx="278.80512"
|
||||||
|
inkscape:cy="772.68848"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1052"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<style
|
||||||
|
id="style1">.cls-1{fill:none;stroke:#020202;stroke-miterlimit:10;stroke-width:1.88px;}</style>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
transform="translate(5.1837773,5.2780693)">
|
||||||
|
<circle
|
||||||
|
class="cls-1"
|
||||||
|
cx="6.8200002"
|
||||||
|
cy="17.18"
|
||||||
|
id="circle2"
|
||||||
|
r="2.3499999"
|
||||||
|
style="stroke:#835a3c;stroke-opacity:0.21277818" />
|
||||||
|
<circle
|
||||||
|
class="cls-1"
|
||||||
|
cx="6.8200002"
|
||||||
|
cy="17.18"
|
||||||
|
id="circle1"
|
||||||
|
r="5.3200002"
|
||||||
|
style="stroke:#835a3c;stroke-opacity:0.21277818" />
|
||||||
|
<path
|
||||||
|
class="cls-1"
|
||||||
|
d="M 20.94,10.59 10.59,20.94 A 5.3245141,5.3245141 0 0 0 3.06,13.41 L 13.41,3.06 a 5.3245141,5.3245141 0 0 1 7.53,7.53 z"
|
||||||
|
id="path2"
|
||||||
|
style="stroke:#835a3c;stroke-opacity:0.21277818" />
|
||||||
|
<line
|
||||||
|
class="cls-1"
|
||||||
|
x1="10.305903"
|
||||||
|
y1="10.771309"
|
||||||
|
x2="13.745903"
|
||||||
|
y2="7.3313088"
|
||||||
|
id="line2"
|
||||||
|
style="stroke:#835a3c;stroke-opacity:0.21277818" />
|
||||||
|
<line
|
||||||
|
class="cls-1"
|
||||||
|
x1="21.940001"
|
||||||
|
y1="4.3600001"
|
||||||
|
x2="18.18"
|
||||||
|
y2="8.1199999"
|
||||||
|
id="line3"
|
||||||
|
style="stroke:#835a3c;stroke-opacity:0.21277818" />
|
||||||
|
<line
|
||||||
|
class="cls-1"
|
||||||
|
x1="14.549345"
|
||||||
|
y1="12.292376"
|
||||||
|
x2="17.879345"
|
||||||
|
y2="8.9623756"
|
||||||
|
id="line4"
|
||||||
|
style="stroke:#835a3c;stroke-opacity:0.21277818" />
|
||||||
|
<line
|
||||||
|
class="cls-1"
|
||||||
|
x1="15.145491"
|
||||||
|
y1="6.3659029"
|
||||||
|
x2="18.44549"
|
||||||
|
y2="3.0759032"
|
||||||
|
id="line5"
|
||||||
|
style="stroke:#835a3c;stroke-opacity:0.21277818" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
56
src/components/Header.astro
Normal file
56
src/components/Header.astro
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
---
|
||||||
|
const {homeUrl, blogUrl} = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<img src="/mainpicture.png" />
|
||||||
|
<div>
|
||||||
|
<div id="brand-container">
|
||||||
|
<p>SmolBeaver.it</p>
|
||||||
|
<nav>
|
||||||
|
<a href={homeUrl}>home</a>
|
||||||
|
<a href={blogUrl}>blog</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > img {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: auto;
|
||||||
|
margin-left: 30px;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
header > div {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > div > #brand-container {
|
||||||
|
max-width: 300px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > div > #brand-container > p {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
color: #8e5f35 ;
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > div > #brand-container > nav > a:visited {
|
||||||
|
color: #A0724A;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
72
src/layouts/Main.astro
Normal file
72
src/layouts/Main.astro
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
---
|
||||||
|
import "@/styles/global.css";
|
||||||
|
|
||||||
|
import Header from "@/components/Header.astro";
|
||||||
|
|
||||||
|
const { pageTitle } = 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>{pageTitle}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="center-container">
|
||||||
|
<div id="main-container">
|
||||||
|
<div id="header-container">
|
||||||
|
<Header homeUrl="/" blogUrl="/blog" />
|
||||||
|
</div>
|
||||||
|
<div id="main-content">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
this is a footer ( also supposed to not be visible when the page is so small!!!)
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
background-image: url("/wood.svg");
|
||||||
|
background-color: #f1e3d7;
|
||||||
|
background-size: 32px;
|
||||||
|
}
|
||||||
|
#center-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-container {
|
||||||
|
flex-grow: 1;
|
||||||
|
max-width: 1000px;
|
||||||
|
|
||||||
|
margin-bottom: 32px;
|
||||||
|
margin-top: 32px;
|
||||||
|
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
background: #edd8be;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-content {
|
||||||
|
border-radius: 15px;
|
||||||
|
min-height: 300px;
|
||||||
|
|
||||||
|
background: #c99b5fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
9
src/pages/index.astro
Normal file
9
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
import "@/styles/global.css";
|
||||||
|
import MainLayout from "@/layouts/Main.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<MainLayout pageTitle="Home">
|
||||||
|
<h1>Hello!</h1>
|
||||||
|
<p>This is an unstiled page!!!</p>
|
||||||
|
</MainLayout>
|
||||||
20
src/styles/global.css
Normal file
20
src/styles/global.css
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: white;
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
11
tsconfig.json
Normal file
11
tsconfig.json
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"include": [".astro/types.d.ts", "**/*"],
|
||||||
|
"exclude": ["dist"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue