Various changes

src/link/components/website.html

@@ -1,9 +1,10 @@
 <script props>
   module.exports = {
     href: props.href,
+    referencing: props.referencing
   }
 </script>
-<a href="{{href}}" target="_blank" aria-label="Associated webpage">
+<a href="{{href}}" target="_blank" aria-label="{{referencing}}'s website">
   <svg id="Filled" width="16pt" height="16pt" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m8 0a8 8 0 1 0 8 8 8.0087 8.0087 0 0 0-8-8zm2.148 4.6667h-4.296a13.076 13.076 0 0 1 2.148-3.0587 13.047 13.047 0 0 1 2.148 3.0587zm0.53333 1.3333a6.8073 6.8073 0 0 1 0.31733 2 6.8073 6.8073 0 0 1-0.31733 2h-5.364a6.8073 6.8073 0 0 1-0.31733-2 6.8073 6.8073 0 0 1 0.31733-2zm-4.4147-4.4293a13.117 13.117 0 0 0-1.884 3.096h-2.1473a6.6873 6.6873 0 0 1 4.0313-3.096zm-4.9333 6.4293a6.6573 6.6573 0 0 1 0.30733-2h2.2927a8.0107 8.0107 0 0 0-0.26667 2 8.0107 8.0107 0 0 0 0.26667 2h-2.2927a6.6573 6.6573 0 0 1-0.30733-2zm0.902 3.3333h2.1473a13.117 13.117 0 0 0 1.884 3.096 6.6873 6.6873 0 0 1-4.0313-3.096zm3.6167 0h4.296a13.076 13.076 0 0 1-2.148 3.0587 13.047 13.047 0 0 1-2.148-3.0587zm3.8847 3.096a13.117 13.117 0 0 0 1.8807-3.096h2.1473a6.6873 6.6873 0 0 1-4.028 3.096zm4.93-6.4293a6.6573 6.6573 0 0 1-0.30733 2h-2.2927a8.0107 8.0107 0 0 0 0.26667-2 8.0107 8.0107 0 0 0-0.26667-2h2.2913a6.6573 6.6573 0 0 1 0.30867 2zm-3.0493-3.3333a13.117 13.117 0 0 0-1.8807-3.096 6.6873 6.6873 0 0 1 4.028 3.096z"

src/partials/interests.html

@@ -1,4 +1,4 @@
-<x-tab-content selected="2">
+<x-tab::content selected="2">
   <x-section-head header="Shoutouts to cool things!">
     <x-blockquote cite="Tyson Jenkins (CEO of TYSONCLOUD)">
       That's crazy
@@ -17,4 +17,4 @@
     </fill:subtitle>
     <fill:description>We'll get to it, trust</fill:description>
   </x-project>
-</x-tab-content>
+</x-tab::content>

src/partials/page_four.html

@@ -1,4 +1,4 @@
-<x-tab-content selected="3">
+<x-tab::content selected="3">
   <x-section-head header="Page four">
     <x-blockquote cite="Josh Arbon (CEO of Tysontoucherinator)">
       Who is this guy?
@@ -17,4 +17,4 @@
     </fill:subtitle>
     <fill:description>We'll get to it, trust</fill:description>
   </x-project>
-</x-tab-content>
+</x-tab::content>

src/partials/projects.html

@@ -1,4 +1,4 @@
-<x-tab-content selected="0">
+<x-tab::content selected="0">
   <x-section-head header="Our projects">
     <x-blockquote cite="You, just now">
       Wow, such professionalism! What are these guys working on now?
@@ -7,7 +7,7 @@
   <x-project id="tysoncloud">
     <fill:links>
       <x-link::github href="timmyjinks/TYSONCLOUD"></x-link::github>
-      <x-link::website href="https://tysoncloud.tysonjenkins.dev/"></x-link::website>
+      <x-link::website href="https://tysoncloud.tysonjenkins.dev/" referencing="TYSONCLOUD"></x-link::website>
     </fill:links>
     <fill:img>
       <img src="/assets/tysoncloud.svg">
@@ -36,7 +36,7 @@
     headerstyle="font-family: 'Apex Mk2'" id="simulo">
     <fill:links>
       <x-link::github href="richgrov/simulo"></x-link::github>
-      <x-link::website href="https://simulo.grover.sh"></x-link::website>
+      <x-link::website href="https://simulo.grover.sh" referencing="Simulo"></x-link::website>
     </fill:links>
     <fill:img>
       <img src="/assets/simulo.svg">
@@ -68,7 +68,7 @@
   </x-project>
   <x-project id="c0re">
     <fill:links>
-      <x-link::website href="https://c0re.com"></x-link::website>
+      <x-link::website href="https://c0re.com" referencing="c0re"></x-link::website>
     </fill:links>
     <fill:img>
       <include src="assets/c0re.svg"></include>
@@ -129,7 +129,7 @@
     titlestyle="background-image: linear-gradient(to right, oklch(0.714 0.203 305.504) 0px, oklch(0.718 0.202 349.761) 100%); background-clip: text; color: transparent"
     id="braindance">
     <fill:links>
-      <x-link::website href="https://braindance.live"></x-link::website>
+      <x-link::website href="https://braindance.live" referencing="Braindance"></x-link::website>
     </fill:links>
     <fill:img>
       <img src="/assets/braindance.svg">
@@ -221,4 +221,4 @@
       </li>
     </ol>
   </fill:footer>
-</x-tab-content>
+</x-tab::content>

src/style.css

@@ -118,14 +118,14 @@ html {
   justify-content: space-around;
 }
 
-.tab-list button {
+.tab-list a {
   background-color: transparent;
   border: solid 3px transparent;
   border-bottom: solid 3px #eee;
   font-size: 16pt;
 }
 
-.tab-list button[aria-selected=true] {
+.tab-list a[aria-selected=true] {
   font-weight: bold;
   border-bottom: solid 6px #eee;
 }
@@ -233,13 +233,13 @@ a {
     flex-direction: column;
   }
 
-  .tab-list button {
+  .tab-list a {
     background-color: transparent;
     border: solid 3px #999;
     font-size: 16pt;
   }
 
-  .tab-list button[aria-selected=true] {
+  .tab-list a[aria-selected=true] {
     background-color: #eee;
     font-weight: bold;
     color: black;

src/tab/components/button.html

@@ -4,7 +4,7 @@
     aria_selected: Boolean(props.selected)
   }
 </script>
-<button hx-get="/partials/{{page}}" hx-push-url="/{{page}}" role="tab" aria-selected="{{aria_selected}}"
+<a href="/src/{{page}}" hx-get="/partials/{{page}}" hx-push-url="/{{page}}" role="tab" aria-selected="{{aria_selected}}"
   aria-controls="tab-content">
   <yield></yield>
-</button>
+</a>

src/tab/components/content.html

@@ -4,10 +4,10 @@
   }
 </script>
 <nav class="tab-list" role="tablist" hx-indicator="#indicator">
-  <x-tab-button page="projects.html" selected="{{ selected-- == 0 }}">Our Projects</x-tab-button>
+  <x-tab::button page="projects.html" selected="{{ selected-- == 0 }}">Our Projects</x-tab::button>
-  <x-tab-button page="who_we_are.html" selected="{{ selected-- == 0 }}">Who we are</x-tab-button>
+  <x-tab::button page="who_we_are.html" selected="{{ selected-- == 0 }}">Who we are</x-tab::button>
-  <x-tab-button page="interests.html" selected="{{ selected-- == 0 }}">Our Interests</x-tab-button>
+  <x-tab::button page="interests.html" selected="{{ selected-- == 0 }}">Our Interests</x-tab::button>
-  <x-tab-button page="page_four.html" selected="{{ selected-- == 0 }}">Page Four</x-tab-button>
+  <x-tab::button page="page_four.html" selected="{{ selected-- == 0 }}">Page Four</x-tab::button>
 </nav>
 <hr style="margin: 0">
 <div id="tab-content" role="tabpanel" class="tab-content">