Removed empty CSS class

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>`;
+  });
 }

public/css/home.css

@@ -0,0 +1,94 @@
+/* Rounded border radius classes */
+.border-round-1 {
+  --border-radius: 40%;
+}
+.border-round-2 {
+  --border-radius: 85%;
+}
+.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-container {
+  padding: 0 15% 2rem 15%;
+}
+.home-grid {
+  display: grid;
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  box-sizing: border-box;
+}
+.home-grid svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* -md */
+@media (min-width: 992px) {
+  .home-grid-container {
+    padding: 0;
+  }
+}

public/css/style.css

@@ -50,6 +50,14 @@ footer {
   height: var(--footer-height);
 }
 
+.color-teal {
+  color: rgba(var(--teal), .86);
+  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+}
+.color-tan {
+  color: rgba(var(--tan), .86);
+}
+
 .container {
   max-width: 1200px;
   margin-left: auto;
@@ -101,6 +109,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 +134,9 @@ nav {
   .container {
     max-width: 960px;
   }
+  .flex-adaptive {
+    flex-direction: row;
+  }
 }
 /* -lg */
 @media (min-width: 1200px) {

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,30 @@
     </nav>
   </header>
   <main>
-    <div class="container">
-      {{ content }}
+    <div class="container flex-adaptive">
+      <div class="flex-1">
+        <h1>Welcome to <span class="color-teal">Cyper's Blog</span>!</h1>
+        <p>Where you can experience stories <span class="">side-by-side</span> with <span class="">Cyper</span></p>
+      </div>
+      <div class="flex-1 home-grid-container">
+        <div class="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>
     </div>
   </main>
   <footer>

src/index.html

@@ -1,6 +1,5 @@
 ---
 layout: layout.html
-title: Hello World! Layout file change
 ---
 
 {% for post in collections.post %}

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 %}