Add fourth page

src/components/section-head.html

@@ -5,7 +5,7 @@
 </script>
 <div class="section-header">
   <div>
-    <h1>{{header}}</h1>
+    <markdown># {{header}}</markdown>
   </div>
   <div>
     <yield></yield>

src/components/tab-content.html

@@ -13,6 +13,9 @@
   <button hx-get="/partials/interests.html" hx-push-url="/interests.html"
     class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
     aria-controls="tab-content">Our Interests</button>
+  <button hx-get="/partials/page_four.html" hx-push-url="/page_four.html"
+    class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
+    aria-controls="tab-content">Page Four</button>
 </nav>
 <hr style="margin: 0">
 <div id="tab-content" role="tabpanel" class="tab-content">

src/page_four.html

@@ -0,0 +1,3 @@
+<x-head>
+  <include src="src/partials/page_four.html"></include>
+</x-head>

src/partials/page_four.html

@@ -0,0 +1,12 @@
+<x-tab-content selected="3">
+  <x-section-head header="Page four">
+    <x-blockquote cite="Josh Arbon (CEO of Mystery Project)">
+      Who is this guy?
+    </x-blockquote>
+  </x-section-head>
+  <x-project text="?">
+    <fill:title># Coming soon to theaters</fill:title>
+    <fill:subtitle>## This website is under construction</fill:subtitle>
+    <fill:description>We'll get to it, trust</fill:description>
+  </x-project>
+</x-tab-content>

src/style.css

@@ -162,6 +162,10 @@ p {
   text-align: left;
 }
 
+sup {
+  font-size: 12pt;
+}
+
 ol {
   padding: 0;
 }