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