updates w/ demo article

Author: AndrewDTR

src/components/Footer.astro

@@ -9,33 +9,39 @@ const hash = childProcess
 
 <footer class="footer-container">
   <div class="footer-words">
-    <p style="margin-left: 15px;">&copy; 2024 Andrew Moses</p>
+    <p>&copy; 2024 Andrew Moses</p>
   </div>
   <div class="footer-right">
-    <p class="made-with-love" style="margin-right: 5px;">
-      Made with &lt3. Commit
-    </p>
-    <a
-      class="commit-hash"
-      href={`https://github.com/AndrewDTR/website/commit/${hash}`}
-      style="margin-left: 0; margin-right: 20px;"
-      target="_blank">{hash}</a
-    >
+    <div class="footer-section">
+      <p class="made-with-love">Made with &lt;3</p>
+    </div>
+    <div class="footer-section">
+      <p class="commit-text">
+        Commit
+        <a
+          class="commit-hash"
+          href={`https://github.com/AndrewDTR/website/commit/${hash}`}
+          target="_blank"
+        >
+          {hash}
+        </a>
+      </p>
+    </div>
   </div>
 </footer>
 
 <style>
   .footer-container {
     width: 100%;
     background-color: #392e2e;
-    height: 60px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    /* padding: 0px 15px; */
     margin-top: 20px;
     border-top: 2px solid #f0e7d8;
     margin-bottom: 5px;
+    flex-wrap: wrap;
+    padding: 10px 15px;
   }
 
   .footer-words {
@@ -46,24 +52,58 @@ const hash = childProcess
   .footer-right {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
   }
 
-  .footer-words p,
-  .footer-icons a {
+  .footer-section {
+    display: flex;
+    align-items: center;
     margin-right: 20px;
+  }
+
+  .made-with-love,
+  .commit-text {
+    color: #f0e7d8;
+    margin: 0;
+  }
+
+  .commit-hash {
+    margin-left: 5px;
     color: #f0e7d8;
-    text-decoration: none;
+    text-decoration: underline;
+    font-size: 1em;
   }
 
-  .footer-icons a:hover,
-  .footer-words a:hover {
+  .commit-hash:hover {
     color: #ffaaaa;
     text-decoration: underline;
   }
 
-  .made-with-love,
-  .commit-hash {
-    display: inline-block;
-    margin-right: 10px; /* Adjust spacing as needed */
+  @media (max-width: 600px) {
+    .footer-container {
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 10px 15px;
+    }
+
+    .footer-right {
+      width: 100%;
+      justify-content: space-between;
+      margin-top: 10px;
+    }
+
+    .footer-section {
+      width: 48%;
+      margin-right: 0;
+      margin-bottom: 10px;
+    }
+
+    .footer-section:last-child {
+      text-align: right;
+    }
+
+    .commit-hash {
+      word-break: break-all;
+    }
   }
 </style>

src/layouts/Blog.astro

@@ -1,28 +1,35 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
 const { frontmatter } = Astro.props;
+const hasTags = frontmatter.tags && frontmatter.tags.length > 0;
 ---
 
 <BaseLayout>
-  <!-- Content for the outside slot (left-aligned, outside content div) -->
   <div slot="outside-content">
     <p class="blog-title">{frontmatter.title}</p>
     <p class="subtitle">{frontmatter.subtitle}</p>
     <p class="others">
-      <i class="fa-solid fa-user fa-sm	" style="padding-right: 2px;"></i>
+      <i class="fa-solid fa-user fa-sm" style="padding-right: 2px;"></i>
       By {frontmatter.author || "Me"} | <i
-        class="fa-regular fa-calendar fa-sm	"
+        class="fa-regular fa-calendar fa-sm"
         style="padding-right: 2px;"></i>
       {frontmatter.date || "Date Unknown"}
     </p>
-    <p class="tags">
-      <i class="fa-solid fa-tag fa-sm" style="padding-right: 2px;"></i>
-      Tags:
-      {frontmatter.tags && frontmatter.tags.map((tag) => <code>{tag}</code>)}
-    </p>
+    {
+      hasTags && (
+        <p class="tags">
+          <i class="fa-solid fa-tag fa-sm" style="padding-right: 2px;" />
+          Tags:
+          {frontmatter.tags.map((tag) => (
+            <code>{tag}</code>
+          ))}
+        </p>
+      )
+    }
+
+    <hr class="custom-hr" />
   </div>
 
-  <!-- Main blog content inside the content div -->
   <slot />
 
   <style>

src/pages/index.astro

@@ -14,26 +14,36 @@ const allPosts = await Astro.glob("./posts/*.md");
             <p class="writeup">
               Hello! I'm Andrew Moses, an engineer who loves tinkering with
               anything remotely electronic. I'm currently a sophomore at the
-              <a href="https://wisc.edu" target="_blank" style="font-size: 1em;">University of Wisconsin-Madison</a>,
-              where I'm currently studying Computer Science. My current
+              <a href="https://wisc.edu" target="_blank" style="font-size: 1em;"
+                >University of Wisconsin-Madison</a
+              >, where I'm currently studying Computer Science. My current
               interests include computer vision and communication protocols
               (feel free to ask me about Zigbee or MQT!).
             </p>
             <p class="writeup writeup2">
               I've taken a recent interest in making projects that allow people
               to access information in a more convenient way. Check out my
-              writeup on the <a href="/projects/upl-people-counter" class="project-link" style="font-size: 1em;">UPL's people counter</a>
-              or my <a href="/projects/ics-schedule-generator" class="project-link" style="font-size: 1em;">.ics schedule generator</a>
+              writeup on the <a
+                href="/projects/upl-people-counter"
+                class="project-link"
+                style="font-size: 1em;">UPL's people counter</a
+              >
+              or my <a
+                href="/projects/ics-schedule-generator"
+                class="project-link"
+                style="font-size: 1em;">.ics schedule generator</a
+              >
               for more info!
             </p>
           </div>
         </div>
+        <hr class="custom-hr" />
         <p>Here are some of my latest blog posts:</p>
         <ul>
           {
             allPosts.slice(0, 5).map((post) => (
               <li>
-                <a href={post.url}>
+                <a href={post.url} class="blog-bullet">
                   {post.frontmatter.title} -{" "}
                   <i>
                     {post.frontmatter.subtitle} | {post.frontmatter.date}
@@ -120,4 +130,17 @@ const allPosts = await Astro.glob("./posts/*.md");
       padding-left: 20px;
     }
   }
+
+  .blog-bullet,
+  .blog-bullet i {
+    color: #f0e7d8;
+    text-decoration: none;
+    transition: color 0.2s ease;
+    text-decoration: underline;
+  }
+
+  .blog-bullet:hover,
+  .blog-bullet:hover i {
+    color: #ffaaaa;
+  }
 </style>

src/pages/posts.astro

@@ -1,7 +1,34 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-const allPosts = await Astro.glob('./posts/*.md');
+const allPosts = await Astro.glob("./posts/*.md");
 ---
 
 <BaseLayout>
-    {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title} - <i>{post.frontmatter.subtitle}</i></a></li>)}
+  <ul>
+    {
+      allPosts.map((post) => (
+        <li>
+          <a href={post.url} class="blog-link">
+            {post.frontmatter.title} - <i>{post.frontmatter.subtitle}</i>
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</BaseLayout>
+
+<style>
+  .blog-link,
+  .blog-link i {
+    color: #f0e7d8;
+    text-decoration: none;
+    transition: color 0.2s ease;
+    text-decoration: underline;
+  }
+
+  .blog-link:hover,
+  .blog-link:hover i {
+    color: #ffaaaa;
+  }
+</style>
+

src/pages/posts/blog1.md

@@ -3,6 +3,7 @@ layout: "../../layouts/Blog.astro"
 title: "Blog 1"
 date: "2021-09-01"
 subtitle: "This is the first blog post"
+# tags: ["one", "two", "three"]
 ---
 
 # Hello World

src/pages/posts/sandwich.md

@@ -0,0 +1,118 @@
+---
+layout: "../../layouts/Blog.astro"
+title: "The Mathematics of Sandwich Making"
+subtitle: "A Comprehensive Exploration of the Physics, Chemistry, and Engineering of Sandwiches"
+author: ChatGPT
+tags: ["food", "mathematics", "physics", "engineering"]
+---
+
+## Introduction
+
+What makes a sandwich a great sandwich? Is it the choice of bread, the quality of the ingredients, or the order in which you assemble it? The art of sandwich making has transcended mere culinary skill and enters a realm that involves the principles of physics, chemistry, and even mathematics. In this post, we'll dive deep into the theory behind sandwich making, using some typographic magic, mathematical notations, and even a bit of science.
+
+## Typographic replacements
+
+Let's start with some simple typographic replacements to make sure everything looks good.
+
+(c) stands for ©, (r) stands for ®, and (tm) stands for ™. This is how we ensure clarity and protect intellectual property.
+
+## The Science Behind Sandwich Layers
+
+### The Perfect Bread-to-Filling Ratio
+
+Have you ever wondered why some sandwiches feel "just right" while others are too bready or too meaty? The secret lies in the bread-to-filling ratio, which can be mathematically represented as:
+
+\\[
+R = \\frac{B}{F}
+\\]
+
+where:
+
+- \\(R\\) is the ratio of bread to filling.
+- \\(B\\) is the thickness of the bread.
+- \\(F\\) is the total volume of the fillings.
+
+The ideal ratio \\(R_{ideal}\\) depends on personal preference, but most agree that a ratio of approximately 1:1 is pleasing to the palate. This can be written as:
+
+\\[
+R_{ideal} = 1
+\\]
+
+If \\(R > 1\\), the sandwich is too bready, and if \\(R < 1\\), it’s overloaded with fillings.
+
+### The Geometry of Sandwich Construction
+
+Sandwiches can come in many shapes—rectangular, circular, even triangular—but regardless of form, geometry plays a key role in ensuring an optimal eating experience.
+
+For a rectangular sandwich with length \\(L\\), width \\(W\\), and height \\(H\\), the total volume \\(V\\) is given by:
+
+\\[
+V = L \\times W \\times H
+\\]
+
+Where \\(L\\), \\(W\\), and \\(H\\) are the dimensions of the bread and fillings combined.
+
+When constructing a multi-layered sandwich, maintaining stability is crucial. The stacking order affects the center of mass \\(C_{mass}\\), which must be balanced over the base area of the sandwich for structural integrity.
+
+For a simple sandwich consisting of \\(n\\) layers, the total height \\(H_{total}\\) is:
+
+\\[
+H_{total} = \\sum_{i=1}^{n} h_i
+\\]
+
+Where \\(h_i\\) is the height of the \\(i\\)-th layer. The center of mass \\(C_{mass}\\) must be positioned to avoid tipping over while biting.
+
+## The Physics of Sandwich Compression
+
+No one wants to bite into a sandwich that's too tall to fit in their mouth. Therefore, a certain amount of compression is necessary. According to Hooke's Law, the amount of compression \\(x\\) of a sandwich can be described as:
+
+\\[
+F = kx
+\\]
+
+Where:
+
+- \\(F\\) is the force applied (the pressure of your hands).
+- \\(k\\) is the stiffness of the bread (a constant depending on the bread type).
+- \\(x\\) is the compression distance.
+
+The goal is to compress the sandwich just enough to ensure a good bite, but not so much that fillings are pushed out from the sides.
+
+## Heat Transfer in Toasted Sandwiches
+
+When toasting a sandwich, heat transfer becomes an important factor. The heat flows from the outer surfaces to the core, and the temperature distribution can be modeled using Fourier’s Law of Heat Conduction:
+
+\\[
+q = -k \\nabla T
+\\]
+
+Where:
+
+- \\(q\\) is the heat flux (the rate of heat transfer per unit area).
+- \\(k\\) is the thermal conductivity of the bread.
+- \\(\\nabla T\\) is the temperature gradient.
+
+The challenge here is to toast the bread enough to develop a crisp crust, while ensuring that the fillings remain warm but not overheated.
+
+## Condiments and Viscosity
+
+The viscosity of condiments like mayonnaise, mustard, and ketchup can affect the structural integrity of the sandwich. Viscosity \\( \\eta \\) is the measure of a fluid's resistance to flow and can be described by the formula:
+
+\\[
+\\eta = \\frac{\\tau}{\\gamma}
+\\]
+
+Where:
+
+- \\( \\tau \\) is the shear stress applied to the condiment layer.
+- \\( \\gamma \\) is the shear rate (the rate at which the condiment is spread).
+
+Too much viscosity and the condiment will not spread evenly; too little and it may leak out from the edges of the sandwich.
+
+## Conclusion
+
+The humble sandwich is much more than just a quick meal—it’s a complex system that involves physics, geometry, and chemistry. Whether you're aiming for the perfect balance of flavors or optimizing the stability of your creation, understanding the science behind sandwich making can elevate your sandwich game to new heights. Now that you've been equipped with the knowledge, go ahead and make the perfect sandwich. Bon appétit!
+
+\\[
+\\text{Happy Sandwich Making!}
+\\]