FEAT: More stiling, more components, more assets
This commit is contained in:
cake
parent
3d84555eaf
commit
b86b815f6e
9 changed files with 90 additions and 31 deletions
BIN
public/mainpicture.jpg
Normal file
BIN
public/mainpicture.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB |
17
src/assets/Fediverse_logo_proposal.svg
Normal file
17
src/assets/Fediverse_logo_proposal.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="196.52mm" height="196.52mm" viewBox="0 0 196.52 196.52">
|
||||
<path fill="#a730b8" d="M47.9242 72.7966a18.2278 18.2278 0 0 1-7.7959 7.7597l42.7984 42.9653 10.3182-5.2291zm56.4524 56.6704-10.3182 5.2291 21.686 21.7708a18.2278 18.2278 0 0 1 7.7975-7.7608z"/>
|
||||
<path fill="#5496be" d="M129.6645 102.0765l1.7865 11.4272 27.4149-13.8942a18.2278 18.2278 0 0 1-4.9719-9.8124zm-14.0658 7.1282-57.2891 29.0339a18.2278 18.2278 0 0 1 4.9728 9.8133l54.1027-27.4194z"/>
|
||||
<path fill="#ce3d1a" d="M69.5312 91.6539l8.1618 8.1933 29.269-57.1387a18.2278 18.2278 0 0 1-9.787-5.0219zm-7.1897 14.0363-14.0022 27.3353a18.2278 18.2278 0 0 1 9.786 5.0214l12.3775-24.1639z"/>
|
||||
<path fill="#d0188f" d="M39.8906 80.6763a18.2278 18.2278 0 0 1-10.8655 1.7198l8.1762 52.2981a18.2278 18.2278 0 0 1 10.8645-1.7198z"/>
|
||||
<path fill="#5b36e9" d="M63.3259 148.3109a18.2278 18.2278 0 0 1-1.7322 10.8629l52.2893 8.3907a18.2278 18.2278 0 0 1 1.7322-10.8629z"/>
|
||||
<path fill="#30b873" d="M134.9148 146.9182a18.2278 18.2278 0 0 1 9.788 5.0224l24.1345-47.117a18.2278 18.2278 0 0 1-9.7875-5.0229z"/>
|
||||
<path fill="#ebe305" d="M126.1329 33.1603a18.2278 18.2278 0 0 1-7.7975 7.7608l37.3765 37.5207a18.2278 18.2278 0 0 1 7.7969-7.7608z"/>
|
||||
<path fill="#f47601" d="M44.7704 51.6279a18.2278 18.2278 0 0 1 4.9723 9.8123l47.2478-23.9453a18.2278 18.2278 0 0 1-4.9718-9.8113z"/>
|
||||
<path fill="#57c115" d="M118.2491 40.9645a18.2278 18.2278 0 0 1-10.8511 1.8123l4.1853 26.8 11.42 1.8324zm-4.2333 44.1927 9.8955 63.3631a18.2278 18.2278 0 0 1 10.88-1.6278l-9.355-59.9035z"/>
|
||||
<path fill="#dbb210" d="M49.7763 61.6412a18.2278 18.2278 0 0 1-1.694 10.8686l26.8206 4.3077 5.2715-10.2945zm45.9677 7.382-5.272 10.2955 63.3713 10.1777a18.2278 18.2278 0 0 1 1.7606-10.8593z"/>
|
||||
<path fill="#ffca00" d="M93.4385 23.8419a1 1 0 1 0 33.0924 1.8025 1 1 0 1 0-33.0924-1.8025"/>
|
||||
<path fill="#64ff00" d="M155.314 85.957a1 1 0 1 0 33.0923 1.8025 1 1 0 1 0-33.0923-1.8025"/>
|
||||
<path fill="#00a3ff" d="M115.3466 163.9824a1 1 0 1 0 33.0923 1.8025 1 1 0 1 0-33.0923-1.8025"/>
|
||||
<path fill="#9500ff" d="M28.7698 150.0898a1 1 0 1 0 33.0923 1.8025 1 1 0 1 0-33.0923-1.8025"/>
|
||||
<path fill="#ff0000" d="M15.2298 63.4781a1 1 0 1 0 33.0923 1.8025 1 1 0 1 0-33.0923-1.8025"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
9
src/assets/Matrix_icon.svg
Normal file
9
src/assets/Matrix_icon.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<title>Matrix (protocol) logo</title>
|
||||
<g transform="translate(-.095 .005)" fill="#040404">
|
||||
<path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
|
||||
<path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
|
||||
<path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
2
src/assets/git-icon-logo-svgrepo-com.svg
Normal file
2
src/assets/git-icon-logo-svgrepo-com.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M251.172 116.594L139.4 4.828c-6.433-6.437-16.873-6.437-23.314 0l-23.21 23.21 29.443 29.443c6.842-2.312 14.688-.761 20.142 4.693 5.48 5.489 7.02 13.402 4.652 20.266l28.375 28.376c6.865-2.365 14.786-.835 20.269 4.657 7.663 7.66 7.663 20.075 0 27.74-7.665 7.666-20.08 7.666-27.749 0-5.764-5.77-7.188-14.235-4.27-21.336l-26.462-26.462-.003 69.637a19.82 19.82 0 0 1 5.188 3.71c7.663 7.66 7.663 20.076 0 27.747-7.665 7.662-20.086 7.662-27.74 0-7.663-7.671-7.663-20.086 0-27.746a19.654 19.654 0 0 1 6.421-4.281V94.196a19.378 19.378 0 0 1-6.421-4.281c-5.806-5.798-7.202-14.317-4.227-21.446L81.47 39.442l-76.64 76.635c-6.44 6.443-6.44 16.884 0 23.322l111.774 111.768c6.435 6.438 16.873 6.438 23.316 0l111.251-111.249c6.438-6.44 6.438-16.887 0-23.324" fill="#DE4C36"/></svg>
|
||||
|
After Width: | Height: | Size: 1,019 B |
23
src/components/Footer.astro
Normal file
23
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
actual shit
|
||||
</div>
|
||||
<div id="footer-license">
|
||||
<a>this website is licensed under the AGPLv3 license</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
height: 150px;
|
||||
margin-left: 32px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +1,25 @@
|
|||
---
|
||||
import FediLogo from "@/assets/Fediverse_logo_proposal.svg"
|
||||
import GitLogo from "@/assets/git-icon-logo-svgrepo-com.svg"
|
||||
import MatrixLogo from "@/assets/Matrix_icon.svg"
|
||||
|
||||
const {homeUrl, blogUrl} = Astro.props;
|
||||
---
|
||||
|
||||
<header>
|
||||
<img src="/mainpicture.png" />
|
||||
<div>
|
||||
<div id="brand-container">
|
||||
<p>SmolBeaver.it</p>
|
||||
<img src="/mainpicture.jpg" />
|
||||
<div id="brand-container">
|
||||
<p>SmolBeaver.it</p>
|
||||
<div>
|
||||
<nav>
|
||||
<a href={homeUrl}>home</a>
|
||||
<a href={blogUrl}>blog</a>
|
||||
</nav>
|
||||
<div id="find-me-at-container">
|
||||
<a><MatrixLogo /></a>
|
||||
<a><GitLogo /></a>
|
||||
<a><FediLogo /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -18,38 +27,41 @@ const {homeUrl, blogUrl} = Astro.props;
|
|||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
height: 200px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
header > img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left: 30px;
|
||||
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
header > div {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
header > div > #brand-container {
|
||||
header > #brand-container {
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header > div > #brand-container > p {
|
||||
header > #brand-container > p {
|
||||
padding: 0;
|
||||
|
||||
color: #8e5f35 ;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
header > div > #brand-container > nav > a:visited {
|
||||
header > #brand-container > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header > #brand-container > div > #find-me-at-container > a > svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
header > #brand-container > div > nav > a:visited {
|
||||
color: #A0724A;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import "@/styles/global.css";
|
||||
|
||||
import Header from "@/components/Header.astro";
|
||||
import Footer from "@/components/Footer.astro";
|
||||
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
|
|
@ -24,9 +25,7 @@ const { pageTitle } = Astro.props;
|
|||
<div id="main-content">
|
||||
<slot />
|
||||
</div>
|
||||
<footer>
|
||||
this is a footer ( also supposed to not be visible when the page is so small!!!)
|
||||
</footer>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -46,13 +45,13 @@ body {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
#header-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
#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);
|
||||
|
|
@ -62,11 +61,7 @@ body {
|
|||
#main-content {
|
||||
border-radius: 15px;
|
||||
min-height: 300px;
|
||||
|
||||
margin: 32px;
|
||||
background: #c99b5fff;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,4 +6,5 @@ import MainLayout from "@/layouts/Main.astro";
|
|||
<MainLayout pageTitle="Home">
|
||||
<h1>Hello!</h1>
|
||||
<p>This is an unstiled page!!!</p>
|
||||
<p>Woah!!! this is a paragraph</p>
|
||||
</MainLayout>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue