feat(examples): tidy up examples layout and styles

Refined the CSS for the examples section by adjusting margins, padding, and grid settings. Updated HTML structure to wrap content in an article tag for better semantics. Added a new example component to showcase a reactive grid. Overall, improved layout consistency and visual appeal.

themes/aurelia-theme/assets/css/main.css

@@ -1629,7 +1629,7 @@ section.not-found.article {
   .contact button:active, .contact button:hover {
     background-color: #ed2b88; }
 
-section.examples-content {
+section.examples-content > article {
   margin: 32px 48px;
 }
 
@@ -1639,14 +1639,13 @@ section.examples-content h1 {
   text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
   font-size: 42px;
   font-weight: bold;
-  padding: 16px 48px;
-  margin: -32px -48px 32px -48px;
+  padding: 16px 0 16px 48px;
   background: linear-gradient(135deg, #6d50a2 0%, #ed2b88 100%);
 }
 
 .examples-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
   gap: 32px;
   margin-top: 32px;
 }
@@ -1684,10 +1683,10 @@ section.examples-content h1 {
 
   section.examples-content h1 {
     padding: 16px 24px;
-    margin: -32px -24px 32px -24px;
   }
 
   .examples-grid {
     grid-template-columns: 1fr;
   }
 }
+

themes/aurelia-theme/layouts/examples/single.html

@@ -1,23 +1,29 @@
 {{ define "main" }}
   <section class="examples-content">
     <h1>{{ .Title }}</h1>
-    <div>
-      {{ .Content }}
-    </div>
+    <article>
+      <div>
+        {{ .Content }}
+      </div>
 
-    <div class="examples-grid">
-      <article>
-        <h2>Counter</h2>
-        <div data-aurelia-app="counter"></div>
-      </article>
-      <article>
-        <h2>Particle System</h2>
-        <div data-aurelia-app="particle-system"></div>
-      </article>
-      <article>
-        <h2>Real-time Clock</h2>
-        <div data-aurelia-app="real-time-clock"></div>
-      </article>
-    </div>
+      <div class="examples-grid">
+        <article>
+          <h2>Counter</h2>
+          <div data-aurelia-app="counter"></div>
+        </article>
+        <article>
+          <h2>Particle System</h2>
+          <div data-aurelia-app="particle-system"></div>
+        </article>
+        <article>
+          <h2>Real-time Clock</h2>
+          <div data-aurelia-app="real-time-clock"></div>
+        </article>
+        <article>
+          <h2>Reactive Grid</h2>
+          <div data-aurelia-app="reactive-grid"></div>
+        </article>
+      </div>
+    </article>
   </section>
 {{ end }}