Add tabs

src/components/blockquote.html

@@ -0,0 +1,15 @@
+<script props>
+  module.exports = {
+    cite: props.cite || ''
+  }
+</script>
+<center style="margin: 16px;">
+  <blockquote>
+    <markdown>
+      <yield></yield>
+    </markdown>
+  </blockquote>
+  <if condition="cite != ''">
+    <p>—{{cite}}</p>
+  </if>
+</center>

src/components/marquee.html

@@ -0,0 +1,7 @@
+<div class="marquee">
+  <div class="track">
+    <div class="content">
+      <yield></yield>
+    </div>
+  </div>
+</div>

src/components/project.html

@@ -0,0 +1,39 @@
+<script props>
+  module.exports = {
+    img: props.img || '',
+    svg: props.svg || '',
+    text: props.text || '',
+    href: props.href || '/',
+    onclick: props.onclick || '',
+    titlestyle: 'min-width: 275px;' + (props.titlestyle || ''),
+    headerstyle: props.headerstyle || '',
+  }
+</script>
+<div class="project">
+  <div class="project-title" style="{{titlestyle}}">
+    <a href="{{href}}" target="_blank">
+      <if condition="img != ''">
+        <img class="figure" src="{{img}}">
+      </if>
+      <if condition="svg != ''">
+        <div class="figure">
+          <include src="{{svg}}"></include>
+        </div>
+      </if>
+      <if condition="text != ''">
+        <p style="font-size: 200px; text-align: center; margin: 0; padding: 0;">{{text}}</p>
+      </if>
+      <markdown>
+        <slot:title />
+      </markdown>
+    </a>
+  </div>
+  <div class="description">
+    <div onclick="{{onclick}}" style="{{headerstyle}}">
+      <markdown>
+        <slot:subtitle />
+      </markdown>
+    </div>
+    <slot:description />
+  </div>
+</div>

src/components/section-head.html

@@ -0,0 +1,14 @@
+<script props>
+  module.exports = {
+    header: props.header || ''
+  }
+</script>
+<div class="section-header">
+  <div>
+    <h1>{{header}}</h1>
+  </div>
+  <div>
+    <yield></yield>
+  </div>
+</div>
+<hr>

src/components/tab-content.html

@@ -0,0 +1,16 @@
+<script props>
+  module.exports = {
+    selected: Number(props.selected || '0')
+  }
+</script>
+<nav class="tab-list" role="tablist" hx-indicator="#indicator">
+  <button hx-get="/projects.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
+    aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our
+    Projects</button>
+  <button hx-get="/who_we_are.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
+    aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Who we are</button>
+</nav>
+<hr style="margin: 0">
+<div id="tab-content" role="tabpanel" class="tab-content">
+  <yield></yield>
+</div>