From b18871471b0e07ab41d2ca55604858b7a72d4233 Mon Sep 17 00:00:00 2001
From: Cyper <cyperita@gmail.com>
Date: Sun, 6 Jul 2025 00:59:24 -0400
Subject: [PATCH] Added abstract shape mural

---
 eleventy.config.js        | 67 +++++++++++++++++++++++++++-
 public/css/home.css       | 93 +++++++++++++++++++++++++++++++++++++++
 public/css/style.css      | 11 +++++
 src/_includes/layout.html | 26 +++++++++--
 src/index.html            |  1 -
 src/posts.html            |  9 ++++
 6 files changed, 201 insertions(+), 6 deletions(-)
 create mode 100644 public/css/home.css
 create mode 100644 src/posts.html

diff --git a/eleventy.config.js b/eleventy.config.js
index 6c0a4c0..3a5b8d5 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -2,5 +2,70 @@
 export default async function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy(
     {'./public/': '/'}
-  )
+  );
+
+  eleventyConfig.addShortcode("triangleSvg", function(strokeWidth = 10) {
+    const w = parseFloat(strokeWidth);
+    if (isNaN(w) || w <= 0) {
+      throw new Error("strokeWidth must be a positive number");
+    }
+
+    // Scale offsets based on strokeWidth
+    const topInset = +(w * 1.05).toFixed(2);
+    const bottomInset = +(w * 0.5).toFixed(2);
+    const sideInset = +(w * 0.8).toFixed(2);
+
+    const topPoint = `50,${topInset}`;
+    const leftPoint = `${sideInset},${100 - bottomInset}`;
+    const rightPoint = `${100 - sideInset},${100 - bottomInset}`;
+
+    const points = `${topPoint} ${leftPoint} ${rightPoint}`;
+
+    return `
+<svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false">
+  <polygon
+    points="${points}"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="${w}"
+    stroke-linejoin="miter"
+  />
+</svg>`;
+  });
+
+  eleventyConfig.addShortcode("squareSvg", function(strokeWidth = 10, className = "square") {
+    const w = parseFloat(strokeWidth);
+    if (isNaN(w) || w <= 0) {
+      throw new Error("strokeWidth must be a positive number");
+    }
+
+    const inset = +(w / 2).toFixed(2);
+    const x1 = inset;
+    const y1 = inset;
+    const x2 = 100 - inset;
+    const y2 = 100 - inset;
+
+    return `
+<svg
+  class="${className}"
+  viewBox="0 0 100 100"
+  width="100%"
+  height="100%"
+  preserveAspectRatio="xMidYMid meet"
+  aria-hidden="true"
+  focusable="false"
+>
+  <rect
+    class="${className}__shape"
+    x="${x1}"
+    y="${y1}"
+    width="${(x2 - x1).toFixed(2)}"
+    height="${(y2 - y1).toFixed(2)}"
+    stroke="currentColor"
+    fill="none"
+    stroke-width="${w}"
+    stroke-linejoin="miter"
+  />
+</svg>`;
+  });
 }
\ No newline at end of file
diff --git a/public/css/home.css b/public/css/home.css
new file mode 100644
index 0000000..b4d5bcc
--- /dev/null
+++ b/public/css/home.css
@@ -0,0 +1,93 @@
+/* Rounded border radius classes */
+.border-round-1 {
+  --border-radius: 40%;
+}
+.border-round-2 {
+  --border-radius: 75%;
+}
+.border-round-tl {
+  border-top-left-radius: var(--border-radius);
+}
+.border-round-tr {
+  border-top-right-radius: var(--border-radius);
+}
+.border-round-bl {
+  border-bottom-left-radius: var(--border-radius);
+}
+.border-round-br {
+  border-bottom-right-radius: var(--border-radius);
+}
+.border-round {
+  border-radius: var(--border-radius);
+}
+
+/* Fill color classes */
+.fill-teal {
+  --fill-color: rgba(var(--teal), 0.86);
+}
+.fill-teal:hover {
+  --fill-color: rgba(var(--teal), 0.96);
+}
+.fill-black {
+  --fill-color: rgba(var(--black), 0.86);
+}
+.fill-black:hover {
+  --fill-color: rgba(var(--black), 0.96);
+}
+.fill-lightblue {
+  --fill-color: rgba(var(--lightblue), 0.86);
+}
+.fill-lightblue:hover {
+  --fill-color: rgba(var(--lightblue), 0.96);
+}
+.fill-brown {
+  --fill-color: rgba(var(--brown), 0.86);
+}
+.fill-brown:hover {
+  --fill-color: rgba(var(--brown), 0.96);
+}
+.fill-tan {
+  --fill-color: rgba(var(--tan), 0.86);
+}
+.fill-tan:hover {
+  --fill-color: rgba(var(--tan), 0.96);
+}
+
+.fill {
+  color: var(--fill-color);
+}
+.fill-background {
+  background-color: var(--fill-color);
+}
+
+/* Shape classes */
+.diamond {
+  width: calc(100% / sqrt(2));  /* ≈ 100% / √2 (100% because square width = 1, which translates to 100%) */
+  aspect-ratio: 1 / 1;
+  transform: rotate(45deg);
+  margin: auto;
+}
+
+/* Grid Pattern */
+.home-grid {
+  display: grid;
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.home-grid svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* -md */
+@media (min-width: 992px) {
+  .home-grid {
+    padding: 0;
+  }
+}
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
index f3b448a..9638f63 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -101,6 +101,14 @@ nav {
   border: var(--borders);
 }
 
+.flex-adaptive {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.flex-1 {
+  flex: 1;
+}
+
 /* -xs */
 @media (min-width: 576px) {
   .container {
@@ -118,6 +126,9 @@ nav {
   .container {
     max-width: 960px;
   }
+  .flex-adaptive {
+    flex-direction: row;
+  }
 }
 /* -lg */
 @media (min-width: 1200px) {
diff --git a/src/_includes/layout.html b/src/_includes/layout.html
index 4b07e2a..9fb1e39 100644
--- a/src/_includes/layout.html
+++ b/src/_includes/layout.html
@@ -7,9 +7,10 @@
 
   <!-- TODO: Meta tags for embedding -->
 
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/home.css">
 
-  <title>CyBySide - Cyper's Blog</title>
+  <title>{{ title | default: metadata.title }} - Cyper's Blog</title>
 </head>
 <body>
   <header>
@@ -33,8 +34,25 @@
     </nav>
   </header>
   <main>
-    <div class="container">
-      {{ content }}
+    <div class="container flex-adaptive">
+      <div class="flex-1">Text</div>
+      <div class="flex-1 home-grid">
+        <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
+        <div class="fill-background fill-black diamond"></div>
+        <div class="fill-background fill-brown border-round-2 border-round-tr"></div>
+
+        <div class="fill fill-tan">
+          {% squareSvg 10 %}
+        </div>
+        <div class="fill-background fill-lightblue border-round border-round-2"></div>
+        <div class="fill-background fill-brown border-round-2 border-round-br"></div>
+
+        <div class="fill-background fill-tan border-round-1 border-round-tl border-round-tr border-round-bl"></div>
+        <div class="fill fill-lightblue">
+          {% triangleSvg 12 %}
+        </div>
+        <div class="fill-background fill-tan border-round-2 border-round-tr"></div>
+      </div>
     </div>
   </main>
   <footer>
diff --git a/src/index.html b/src/index.html
index 7423ac5..0a5d017 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,6 +1,5 @@
 ---
 layout: layout.html
-title: Hello World! Layout file change
 ---
 
 {% for post in collections.post %}
diff --git a/src/posts.html b/src/posts.html
new file mode 100644
index 0000000..7423ac5
--- /dev/null
+++ b/src/posts.html
@@ -0,0 +1,9 @@
+---
+layout: layout.html
+title: Hello World! Layout file change
+---
+
+{% for post in collections.post %}
+<h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
+<p>{{ post.content }}</p>
+{% endfor %}
\ No newline at end of file