From 21fcd86ea90183129a29a804c1317afc74cba381 Mon Sep 17 00:00:00 2001
From: LimePotato <nelle@limepot.xyz>
Date: Sun, 29 Oct 2023 21:34:09 -0600
Subject: [PATCH] 202310292134

---
 src/components/Card-noimg.astro |  62 ++++++++++++++++++++
 src/components/Footer.astro     |  42 ++++++++++++++
 src/components/Header.astro     |  58 ++++++++++++++++++
 src/layouts/Layout.astro        | 100 ++------------------------------
 src/layouts/MDPost.astro        |  84 +++++++++++++++++++++++++++
 src/pages/blog.astro            |  16 +++++
 src/pages/posts/post-1.md       |  13 +++++
 7 files changed, 279 insertions(+), 96 deletions(-)
 create mode 100755 src/components/Card-noimg.astro
 create mode 100644 src/components/Footer.astro
 create mode 100644 src/components/Header.astro
 create mode 100755 src/layouts/MDPost.astro
 create mode 100644 src/pages/posts/post-1.md

diff --git a/src/components/Card-noimg.astro b/src/components/Card-noimg.astro
new file mode 100755
index 0000000..3b7d9e1
--- /dev/null
+++ b/src/components/Card-noimg.astro
@@ -0,0 +1,62 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+	source: string;
+}
+
+const { href, title, body, source } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href} class="informational">
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style:none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..8989244
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,42 @@
+---
+---
+<center>
+    <footer class="footer">
+      <div class="content has-text-centered">
+        <!--Badges-->
+        <a href="https://limepot.xyz/"><image src="/assets/badges/limepotxyz-badge00.gif"></a>
+        <br>
+        <a href="https://jointhefediverse.net/"><image src="/assets/badges/FEDERATE-NOW.jpg"></a>
+        <a href="https://gnu.org"><image src="/assets/badges/gnu-linux.gif"></a>
+        <a href="https://fuckoffgoogle.de/"><image src="/assets/badges/google_stand.gif"></a>
+        <a href="https://privacytests.org/"><image src="/assets/badges/chrmevil.gif"></a>
+        <br>
+        <image src="/assets/badges/browser.gif">
+        
+        <a href="https://tuxcrafting.online/"><image src="/assets/badges/tctek.gif"></a>
+        <iframe src="//incr.easrng.net/badge?key=limepot" style="background: url(//incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0"></iframe>
+        <a href="https://cybercriminal.eu"><image src ="/assets/badges/cbrmnl.png"></a>
+        <br>
+    
+        <!--Badges-->
+        <br><br>
+        <a href="https://astro.build">
+            <img src="https://astro.badg.es/v1/built-with-astro/tiny.svg" alt="Built with Astro" width="109" height="20">
+          </a>
+        <a href="https://bulma.io">
+          <img src="https://bulma.io/images/made-with-bulma--semiwhite.png" alt="Made with Bulma" width="128" height="24">
+        </a>
+        <br>
+        <a href="https://github.com/catppuccin/catppuccin">
+          <img src="https://img.shields.io/badge/Catppuccin-Mocha%20Mauve-%23cba6f7" width="185" height="20">
+        </a>
+        <a href="https://git.ouroboros.group/LimePotato/limepot-xyz">
+          <img src="https://img.shields.io/badge/Site-Source-lightgrey.svg" width="94.2" height="20">
+        </a>
+        
+        <br>
+        <a href="https://up.ouroboros.group/status/obos"><u>Experiencing downtimes?</u></a>
+        <a href="/policy"><u>Security, Privacy, & Credits</u></a>
+      </div>
+    </footer></center>
+    </section>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..886b8c7
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,58 @@
+---
+---
+<nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="/">
+        <img src="/assets/branding/IMG_0934_square.JPG" style="border-radius: 20%">
+        <span class="text-gradient">LimePot</span>
+      </a>
+      <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+    <div class="navbar-menu" id="navMenu">
+      <div class="navbar-start">
+        <a class="navbar-item" href="/about">
+            <span class="text-gradient">About Me</span>
+        </a>
+        
+          <a class="navbar-item" href="/projects">
+            <span class="text-gradient">Projects</span>
+          </a>
+            </div>
+        </div>
+      </div>
+      <div class="navbar-end">
+        <a class="navbar-item" href="https://ko-fi.com/limepot">
+          <img src="/assets/other-branding/ko-fi-button-red.png">
+        </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
+    <script>document.addEventListener('DOMContentLoaded', () => {
+
+      // Get all "navbar-burger" elements
+      const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+    
+      // Add a click event on each of them
+      $navbarBurgers.forEach( el => {
+        el.addEventListener('click', () => {
+    
+          // Get the target from the "data-target" attribute
+          const target = el.dataset.target;
+          const $target = document.getElementById(target);
+    
+          // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+          el.classList.toggle('is-active');
+          $target.classList.toggle('is-active');
+    
+        });
+      });
+    
+    });</script>
+    <!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
+  </nav>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 00ff91f..ef62889 100755
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 --- 
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
 interface Props {
 	title: string;
 }
@@ -23,108 +25,14 @@ const { title } = Astro.props;
 		  </style>
 	</head>
 	<body>
-		<nav class="navbar" role="navigation" aria-label="main navigation">
-			<div class="navbar-brand">
-			  <a class="navbar-item" href="/">
-				<img src="/assets/branding/IMG_0934_square.JPG" style="border-radius: 20%">
-				<span class="text-gradient">LimePot</span>
-			  </a>
-			  <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
-				<span aria-hidden="true"></span>
-				<span aria-hidden="true"></span>
-				<span aria-hidden="true"></span>
-			  </a>
-			</div>
-			<div class="navbar-menu" id="navMenu">
-			  <div class="navbar-start">
-				<a class="navbar-item" href="/about">
-					<span class="text-gradient">About Me</span>
-				</a>
-				
-				  <a class="navbar-item" href="/projects">
-					<span class="text-gradient">Projects</span>
-				  </a>
-					</div>
-				</div>
-			  </div>
-			  <div class="navbar-end">
-				<a class="navbar-item" href="https://ko-fi.com/limepot">
-				  <img src="/assets/other-branding/ko-fi-button-red.png">
-				</a>
-				  </div>
-				</div>
-			  </div>
-			</div>
-			<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
-			<script>document.addEventListener('DOMContentLoaded', () => {
-	
-			  // Get all "navbar-burger" elements
-			  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-			
-			  // Add a click event on each of them
-			  $navbarBurgers.forEach( el => {
-				el.addEventListener('click', () => {
-			
-				  // Get the target from the "data-target" attribute
-				  const target = el.dataset.target;
-				  const $target = document.getElementById(target);
-			
-				  // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-				  el.classList.toggle('is-active');
-				  $target.classList.toggle('is-active');
-			
-				});
-			  });
-			
-			});</script>
-			<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
-		  </nav>
+		<Header />
 	  <section class="section">
 		<div class="container">
 		<slot />
 	</div>
 	</section>
 	</body>
-<center>
-<footer class="footer">
-  <div class="content has-text-centered">
-	<!--Badges-->
-	<a href="https://limepot.xyz/"><image src="/assets/badges/limepotxyz-badge00.gif"></a>
-	<br>
-	<a href="https://jointhefediverse.net/"><image src="/assets/badges/FEDERATE-NOW.jpg"></a>
-	<a href="https://gnu.org"><image src="/assets/badges/gnu-linux.gif"></a>
-	<a href="https://fuckoffgoogle.de/"><image src="/assets/badges/google_stand.gif"></a>
-	<a href="https://privacytests.org/"><image src="/assets/badges/chrmevil.gif"></a>
-	<br>
-	<image src="/assets/badges/browser.gif">
-	
-	<a href="https://tuxcrafting.online/"><image src="/assets/badges/tctek.gif"></a>
-	<iframe src="//incr.easrng.net/badge?key=limepot" style="background: url(//incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0"></iframe>
-	<a href="https://cybercriminal.eu"><image src ="/assets/badges/cbrmnl.png"></a>
-	<br>
-
-	<!--Badges-->
-	<br><br>
-	<a href="https://astro.build">
-		<img src="https://astro.badg.es/v1/built-with-astro/tiny.svg" alt="Built with Astro" width="109" height="20">
-	  </a>
-	<a href="https://bulma.io">
-	  <img src="https://bulma.io/images/made-with-bulma--semiwhite.png" alt="Made with Bulma" width="128" height="24">
-	</a>
-	<br>
-	<a href="https://github.com/catppuccin/catppuccin">
-	  <img src="https://img.shields.io/badge/Catppuccin-Mocha%20Mauve-%23cba6f7" width="185" height="20">
-	</a>
-	<a href="https://git.ouroboros.group/LimePotato/limepot-xyz">
-	  <img src="https://img.shields.io/badge/Site-Source-lightgrey.svg" width="94.2" height="20">
-	</a>
-	
-	<br>
-	<a href="https://up.ouroboros.group/status/obos"><u>Experiencing downtimes?</u></a>
-	<a href="/policy"><u>Security, Privacy, & Credits</u></a>
-  </div>
-</footer></center>
-</section>
+<Footer />
 </html>
 <style is:global>
 	:root {
diff --git a/src/layouts/MDPost.astro b/src/layouts/MDPost.astro
new file mode 100755
index 0000000..d47dd8c
--- /dev/null
+++ b/src/layouts/MDPost.astro
@@ -0,0 +1,84 @@
+--- 
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+const { frontmatter } = Astro.props;
+---
+<html>
+<Header />
+<center>
+    <h1 class="title">{frontmatter.title}</h1>
+    <h2 class="subtitle"><em>Summary: {frontmatter.description} - Written by {frontmatter.author} on {frontmatter.pubDate.slice(0,10)}</em></h2>
+    <br>
+</center>
+<slot />
+<Footer />
+</html>
+<style is:global>
+	:root {
+		--accent: 136, 58, 234;
+		--accent-light: 224, 204, 250;
+		--accent-dark: 49, 10, 101;
+		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
+	}
+	html {
+		font-family: system-ui, sans-serif;
+		background: #13151A;
+		background-size: 224px;
+	}
+	main {
+		margin: auto;
+		padding: 1rem;
+		width: 800px;
+		max-width: calc(100% - 2rem);
+		color: white;
+		font-size: 20px;
+		line-height: 1.6;
+	}
+	.astro-a {
+		position: absolute;
+		top: -32px;
+		left: 50%;
+		transform: translatex(-50%);
+		width: 220px;
+		height: auto;
+		z-index: -1;
+	}
+	h1 {
+		font-size: 4rem;
+		font-weight: 700;
+		line-height: 1;
+		text-align: center;
+		margin-bottom: 1em;
+	}
+	.text-gradient {
+		background-image: var(--accent-gradient);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-size: 400%;
+		background-position: 0%;
+	}
+	.instructions {
+		margin-bottom: 2rem;
+		border: 1px solid rgba(var(--accent-light), 25%);
+		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
+		padding: 1.5rem;
+		border-radius: 8px;
+	}
+	.instructions code {
+		font-size: 0.8em;
+		font-weight: bold;
+		background: rgba(var(--accent-light), 12%);
+		color: rgb(var(--accent-light));
+		border-radius: 4px;
+		padding: 0.3em 0.4em;
+	}
+	.instructions strong {
+		color: rgb(var(--accent-light));
+	}
+	.link-card-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+		gap: 2rem;
+		padding: 0;
+	}
+</style>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index e69de29..7bc9f9f 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -0,0 +1,16 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card-noimg.astro';
+---
+
+<Layout title="LimePot - Blog">
+	<main>
+        <ul role="list" class="link-card-grid">
+            <Card
+            href="/posts/post-1"
+            title="First Post!"
+            body="First blog post on the blog blog woah"
+            />
+        </ul>
+    </main>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
new file mode 100644
index 0000000..e23962b
--- /dev/null
+++ b/src/pages/posts/post-1.md
@@ -0,0 +1,13 @@
+---
+layout: ../../layouts/MDPost.astro
+title: 'My First Blog Post'
+pubDate: 2023-10-29
+description: 'This is the first post of my new blog.'
+author: 'LimePotato'
+image:
+    url: '/assets/branding/obo.svg'
+    alt: 'Website Icon'
+tags: ["first", "blogging"]
+---
+
+Welcome to my _new blog_ this is a test post while I make the framework.
\ No newline at end of file