feat: placeholders for docs and about

src/about.webc

@@ -0,0 +1,40 @@
+---
+layout: default.webc
+---
+
+<diamond-wrap size="lg" class="diamond-spacing-bottom-fluid">
+  <diamond-section padding="fluid">
+    <article>
+      <div class="diamond-text-align-center diamond-spacing-bottom-fluid">
+        <h1>The origin story</h1>
+        <p class="diamond-text-size-xxl">How the pursuit of a better methodology began</p>
+      </div>
+
+      <div class="diamond-text-size-lg">
+        <p>I’ve been writing HTML and CSS for a long time. There’s something amazing about drawing with code. Seeing all the little words and numbers turn into pictures on the screen that you can put in front of anybody in the world, essentially for free.</p>
+        <p>I remember the slow transition from fixed pages to flexible components, to systems. It felt like magic when we started writing and documenting components like we’d solved all the problems in the world with making websites. Now we had components, we could just re-use them all over our sites and fly away into the sunset as front-end development masters.</p>
+        <p>Over time, our egos came crashing down as new designs didn’t fit the components we’d built. They almost fit, so we shoehorned them in with new props. We were doing it! Our components could support anything!</p>
+        <p>As time went on, the components became more and more complicated, trying to support every scenario, becoming harder to test and harder to understand.</p>
+        <p>I spoke to Jim, our designer and asked:</p>
+        <diamond-card class="diamond-spacing-bottom-md" muted radius>
+          Why are the designs always fighting the existing components, why can’t you re-use the bits of the interface that are already there?
+        </diamond-card>
+        <p>His response:</p>
+        <diamond-card class="diamond-spacing-bottom-md" muted radius>
+          I am re-using it! Interface styles can be grouped into four categories: composition, canvas, content and controls.
+        </diamond-card>
+        <p>And that was the inception point of Diamond UI.</p>
+      </div>
+    </article>
+  </diamond-section>
+
+  <d-separator></d-separator>
+
+  <diamond-section padding="fluid">
+    <d-title-group class="diamond-text-align-center">
+      <p>The story continues</p>
+      <h2>Do you want to know more?</h2>
+    </d-title-group>
+
+  </diamond-section>
+</diamond-wrap>

src/components/control/d-site-nav.webc

@@ -10,7 +10,7 @@
     <li webc:for="siteLink of $data.siteLinks">
       <a
         :href="siteLink.href"
-        :class="`${page.url === siteLink.href ? 'active' : ''}`"
+        :class="`${page.url.includes(siteLink.href) ? 'active' : ''}`"
         @text="siteLink.label"
       ></a>
     </li>

src/docs.webc

@@ -0,0 +1,9 @@
+---
+layout: default.webc
+---
+
+<diamond-wrap size="xxl" class="diamond-spacing-bottom-fluid">
+  <diamond-section padding="fluid">
+    <h1>Docs</h1>
+  </diamond-section>
+</diamond-wrap>