diff --git a/public/mainpicture.jpg b/public/mainpicture.jpg
new file mode 100644
index 0000000..f072e15
Binary files /dev/null and b/public/mainpicture.jpg differ
diff --git a/public/mainpicture.png b/public/mainpicture.png
deleted file mode 100644
index 11879d6..0000000
Binary files a/public/mainpicture.png and /dev/null differ
diff --git a/src/assets/Fediverse_logo_proposal.svg b/src/assets/Fediverse_logo_proposal.svg
new file mode 100644
index 0000000..5f04313
--- /dev/null
+++ b/src/assets/Fediverse_logo_proposal.svg
@@ -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>
\ No newline at end of file
diff --git a/src/assets/Matrix_icon.svg b/src/assets/Matrix_icon.svg
new file mode 100644
index 0000000..4e5bfb4
--- /dev/null
+++ b/src/assets/Matrix_icon.svg
@@ -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>
diff --git a/src/assets/git-icon-logo-svgrepo-com.svg b/src/assets/git-icon-logo-svgrepo-com.svg
new file mode 100644
index 0000000..246df56
--- /dev/null
+++ b/src/assets/git-icon-logo-svgrepo-com.svg
@@ -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>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..bbf4988
--- /dev/null
+++ b/src/components/Footer.astro
@@ -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>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index df7a050..b913df3 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -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;
}
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
index 50ffcb6..8106017 100644
--- a/src/layouts/Main.astro
+++ b/src/layouts/Main.astro
@@ -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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4b0a25b..7009b60 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -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>