Added new footer and put everything inside a flexbox

Now I am happy :D
Feuersteinium · Jan 15, 2024 · 98dc17a · 98dc17a
1 parent d8a560d
commit 98dc17a
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 97 deletions.
diff --git a/src/components/footer.astro b/src/components/footer.astro
@@ -4,27 +4,28 @@ import '../styles/footer.css'
 
 
 <footer>
-    <div class="container">
-        <div id="fone"></div>
-
-        <div id="ftwo">
-            <p class="footer-h">Me on the Web</p>
-            <p><a class="element" href="https://github.com/feuersteinium" target="_blank">Github</a></p>
-            <p><a class="element" href="https://mastodon.de/@feuerstein" rel="me">Mastodon</a></p>
-            <p class="element">Matrix</p>
-            <p class="element">Mail</p>
-        </div>
-
-        <div id="fthree"></div>
-
-        <div id="ffour">
-            <p class="footer-h">About this Site</p>
-            <p><a class="element" href="/license">License</a></p>
-            <p><a class="element" href="https://github.com/feuersteinium/feuerstein.dev" target="_blank">Source Code</a></p>
+    <div class="footer">
+        <div id="footer-content">
+            <div id="footer-layer-1">
+                <a href="mailto:[email protected]" target="_blank">
+                    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M20 4a2 2 0 0 1 1.995 1.85L22 6v12a2 2 0 0 1-1.85 1.995L20 20H4a2 2 0 0 1-1.995-1.85L2 18V6a2 2 0 0 1 1.85-1.995L4 4zm0 3.414l-6.94 6.94a1.5 1.5 0 0 1-2.12 0L4 7.414V18h16zM18.586 6H5.414L12 12.586z"/></g></svg>
+                </a>
+                <a href="https://github.com/feuersteinium" target="_blank">
+                    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M6.315 6.176c-.25-.638-.24-1.367-.129-2.034a6.77 6.77 0 0 1 2.12 1.07c.28.214.647.283.989.18A9.343 9.343 0 0 1 12 5c.961 0 1.874.14 2.703.391c.342.104.709.034.988-.18a6.77 6.77 0 0 1 2.119-1.07c.111.667.12 1.396-.128 2.033c-.15.384-.075.826.208 1.14C18.614 8.117 19 9.04 19 10c0 2.114-1.97 4.187-5.134 4.818c-.792.158-1.101 1.155-.495 1.726c.389.366.629.882.629 1.456v3a1 1 0 0 0 2 0v-3c0-.57-.12-1.112-.334-1.603C18.683 15.35 21 12.993 21 10c0-1.347-.484-2.585-1.287-3.622c.21-.82.191-1.646.111-2.28c-.071-.568-.17-1.312-.57-1.756c-.595-.659-1.58-.271-2.28-.032a9.081 9.081 0 0 0-2.125 1.045A11.432 11.432 0 0 0 12 3c-.994 0-1.953.125-2.851.356a9.08 9.08 0 0 0-2.125-1.045c-.7-.24-1.686-.628-2.281.031c-.408.452-.493 1.137-.566 1.719l-.005.038c-.08.635-.098 1.462.112 2.283C3.484 7.418 3 8.654 3 10c0 2.992 2.317 5.35 5.334 6.397A3.986 3.986 0 0 0 8 17.98l-.168.034c-.717.099-1.176.01-1.488-.122c-.76-.322-1.152-1.133-1.63-1.753c-.298-.385-.732-.866-1.398-1.088a1 1 0 0 0-.632 1.898c.558.186.944 1.142 1.298 1.566c.373.448.869.916 1.58 1.218c.682.29 1.483.393 2.438.276V21a1 1 0 0 0 2 0v-3c0-.574.24-1.09.629-1.456c.607-.572.297-1.568-.495-1.726C6.969 14.187 5 12.114 5 10c0-.958.385-1.881 1.108-2.684c.283-.314.357-.756.207-1.14"/></g></svg>
+                </a>
+                <a rel="me" href="https://mastodon.de/@feuerstein" target="_blank">
+                    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M16.432 2.415a5.109 5.109 0 0 1 4.163 4.142c.431 2.361.528 4.682.04 7.108c-.406 2.023-2.006 3.532-4.01 3.893c-1.55.278-3.105.424-4.667.42c.722.144 1.471.17 2.21.186l.632.012l.395.002c.536.007 1.097.048 1.533.34c.266.178.535.51.533.985c0 .429-.231.732-.364.878c-.468.513-1.19.784-1.832.994c-1.042.339-2.46.6-4.06.607c-3.428.016-6.644-2.263-7.478-5.75c-.749-3.133-.743-6.648-.145-9.781a5.03 5.03 0 0 1 4.094-4.02a25.859 25.859 0 0 1 8.956-.016M7.822 4.4a3.03 3.03 0 0 0-2.475 2.424c-.552 2.89-.55 6.117.125 8.942c.602 2.514 2.951 4.227 5.523 4.215c.234 0 .462-.008.684-.02a5.862 5.862 0 0 1-2.959-1.498c-.519-.495-1.115-1.254-.791-2.014c.201-.471.702-.721 1.2-.657c2.383.31 4.759.224 7.142-.204c1.223-.22 2.165-1.127 2.404-2.318c.426-2.119.35-4.177-.047-6.355a3.109 3.109 0 0 0-2.537-2.53a23.858 23.858 0 0 0-8.269.015M14 6a3 3 0 0 1 3 3v4a1 1 0 1 1-2 0V9a1 1 0 1 0-2 0v3a1 1 0 1 1-2 0V9a1 1 0 1 0-2 0v4a1 1 0 1 1-2 0V9a3 3 0 0 1 5-2.236A2.989 2.989 0 0 1 14 6"/></g></svg>
+                </a>
+            </div>
+            <div id="footer-layer-2">
+                <p><a href="/license">License</a></p>
+                <p> <a href="https://github.com/feuersteinium/feuersteinium.github.io">Source Code</a></p>
+                <p><a href="/impressum">Impressum</a></p>
+            </div>
+            <p><strong>Made with ♥️ from Niklas</strong></p>
         </div>
-
-        <div id="ffive"></div>
     </div>
+
 </footer>
 
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -20,11 +20,7 @@ import Umami from '../components/umami.astro'
 	</head>
 	<body>
 		<Header />
-		<div class="darkblue">
-			<div>
-				<h1>Niklas Feuerstein</h1>
-			</div>
-		</div>
+
 		<Footer />
 	</body>
 </html>

diff --git a/src/styles/blog.css b/src/styles/blog.css
@@ -3,3 +3,33 @@ img {
 }
 
 
+
+#blogarticles {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+}
+
+
+.blogarticle {
+    width: 20vw;
+    border-width: 5px;
+    border-style: solid;
+    border-radius: 1.5rem;
+    border-color: var(--color-component);
+    background-color: var(--color-component);
+}
+
+.blogarticle p,.blogarticle a {
+    color: green;
+    text-decoration: none;
+}
+
+.blog-date {
+    font-style: italic;
+    color: #9590a8;
+    text-align: end;
+    padding: 1rem;
+}
+
diff --git a/src/styles/footer.css b/src/styles/footer.css
@@ -1,48 +1,42 @@
-.footer-h {
-    text-decoration: none;
-    font-family: lilita;
-    font-size: 1.25rem;
-    color: #272626;
-}
-
-.element {
-    text-decoration: none;
-    font-family: martian;
-    font-size: 1em;
-    color: #272626;
-    font-weight: bold;
+#footer-layer-1 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+
 }
 
-
-
-.container {
+#footer-layer-2 {
     display: flex;
-    align-items: top;
-    width: 100%;
-    height: 200px;
-    background-color: #3C6E71;
-    position: fixed;
-    bottom: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 3rem;
+    height: 2rem;
 }
 
-
-#fone {
-    flex-grow: 2;
+.footer * {
+    color: var(--color-text-main);
+    font-family: raleway;
 }
 
-#ftwo {
+.footer svg {
+    height: 2.5rem;
 }
 
-
-#fthree {
-    flex-grow: 0.5;
+.footer {
+    background-color: var(--color-text-faded);
 }
 
-#ffour {
-
+#footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 10rem
 }
 
-#ffive {
-    flex-grow: 2;
+
+.footer a:hover {
+
 }
 
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -83,17 +83,9 @@ p {
 body {
     margin: 0;
     padding: 0;
-}
-
-
-
-.darkblue {
-    background-color: #9590a8;
-    padding: 1rem 0 2.5rem 0;
-}
-
-.darkblue * {
-    text-align: center;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 .box {
@@ -104,40 +96,25 @@ body {
 }
 
 
-#blogarticles {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 1rem;
+code {
+    font-family: martian;
+    background-color: var(--color-text-main);
+    color: var(--color-component);
+    border: 1rem solid var(--color-text-main);
+    border-radius: 1rem;
 }
 
 
-.blogarticle {
-    width: 20vw;
-    border-width: 5px;
-    border-style: solid;
-    border-radius: 1.5rem;
-    border-color: var(--color-component);
-    background-color: var(--color-component);
-}
-
-.blogarticle p,a {
-    color: green;
-    text-decoration: none;
+#full-layout {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
-.blog-date {
-    font-style: italic;
-    color: #9590a8;
-    text-align: end;
-    padding: 1rem;
+footer {
+    margin-top: auto;
 }
 
-
-code {
-    font-family: martian;
-    background-color: var(--color-text-main);
-    color: var(--color-component);
-    border: 1rem solid var(--color-text-main);
-    border-radius: 1rem;
+a {
+    text-decoration: none;
 }