refactor: remove TextBlock component in favor of simpler section element

src/components/TextBlock.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="textblock">
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss">
-.textblock {
-  max-width: var(--textblock-max-width);
-  margin: auto;
-  padding: var(--textblock-padding);
-
-  p {
-    text-align: justify;
-  }
-}
-</style>

src/scss/main.scss

@@ -36,6 +36,16 @@ main {
   transition: 0.4s;
 }
 
+section {
+  max-width: var(--textblock-max-width);
+  margin: auto;
+  padding: var(--textblock-padding);
+
+  p {
+    text-align: justify;
+  }
+}
+
 h1,
 h2,
 h3,

src/views/AnatomyView.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import RefImage from "@/components/RefImage.vue";
 import ColorTable from "@/components/ColorTable.vue";
-import TextBlock from "@/components/TextBlock.vue";
 
 const colors = [
   { name: "Front", value: "#e7c7b1" },
@@ -16,9 +15,9 @@ const colors = [
 </script>
 
 <template>
-  <TextBlock>
+  <section>
     <h1>{{ $route.meta.title }}</h1>
-  </TextBlock>
+  </section>
 
   <RefImage>
     <source
@@ -45,7 +44,7 @@ const colors = [
 
   <ColorTable :colors="colors"></ColorTable>
 
-  <TextBlock>
+  <section>
     <p>
       Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly
       bicolored, with several shades of brown.
@@ -63,7 +62,7 @@ const colors = [
       strip of deep dark cedar brown. Arms and legs are distinguished by a light
       earthy brown.
     </p>
-  </TextBlock>
+  </section>
 
   <RefImage>
     <source
@@ -87,7 +86,7 @@ const colors = [
     </template>
   </RefImage>
 
-  <TextBlock>
+  <section>
     <p>
       His entire body is speckled with scattered aquamarine spots, which come in
       pairs of one large and one small spot. The only exceptions are the spots
@@ -107,5 +106,5 @@ const colors = [
     </p>
 
     <p>He owes his strong, stocky physique to years of hard physical labor.</p>
-  </TextBlock>
+  </section>
 </template>

src/views/AttributionsView.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import TextBlock from "@/components/TextBlock.vue";
 import AttributionTable from "@/components/AttributionTable.vue";
 
 import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&webp&quality=100&imagetools";
@@ -26,7 +25,7 @@ const attributions = [
 </script>
 
 <template>
-  <TextBlock>
+  <section>
     <h1>{{ $route.meta.title }}</h1>
     <h2>Artwork</h2>
     <AttributionTable :attributions="attributions" />
@@ -45,7 +44,7 @@ const attributions = [
       <a href="https://antonkoovit.com/typefaces/arvo">Arvo</a> by
       <a href="https://antonkoovit.com/">Anton Koovit</a>
     </p>
-  </TextBlock>
+  </section>
 </template>
 
 <style lang="scss"></style>

src/views/CareerPathView.vue

@@ -6,17 +6,16 @@ import TreeIcon from "@/assets/icons/TreeIcon.vue";
 import CarIcon from "@/assets/icons/CarIcon.vue";
 import HelmetSafetyIcon from "@/assets/icons/HelmetSafetyIcon.vue";
 import BoxesIcon from "@/assets/icons/BoxesIcon.vue";
-import TextBlock from "@/components/TextBlock.vue";
 </script>
 
 <template>
-  <TextBlock>
+  <section>
     <h1>{{ $route.meta.title }}</h1>
     <p>
       Viktor's had many different jobs in the past, some of which where very
       formative, other's just paid the bills.
     </p>
-  </TextBlock>
+  </section>
 
   <TimelineList>
     <TimelineItem>

src/views/GeneralView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import DataTable from "@/components/DataTable.vue";
-import TextBlock from "@/components/TextBlock.vue";
 
 const dob = new Date("1987-12-08");
 const locale = "en-US";
@@ -49,13 +48,13 @@ const sexData = [
 </script>
 
 <template>
-  <TextBlock>
+  <section>
     <h1>{{ $route.meta.title }}</h1>
-  </TextBlock>
+  </section>
 
   <DataTable :headings="heads" :data="data"></DataTable>
 
-  <TextBlock>
+  <section>
     <h2>Personality</h2>
     <p>
       Viktor is not a man of many words, his manner of expression is simple and
@@ -82,15 +81,15 @@ const sexData = [
       high-tech. He does have a smartphone, but he hates using it as much as he
       dislikes the fact he's dependent on owning one.
     </p>
-  </TextBlock>
+  </section>
 
-  <TextBlock>
+  <section>
     <h2>Sexuality</h2>
-  </TextBlock>
+  </section>
 
   <DataTable :headings="sexHeads" :data="sexData"></DataTable>
 
-  <TextBlock>
+  <section>
     <p>
       As a teenager, Viktor noticed that he felt a bit differently about the
       boys in his class. Especially in gym class, his eyes tended to linger
@@ -117,5 +116,5 @@ const sexData = [
       wouldn't remember much of the party, but what he didn't forget how good it
       felt to give himself to another man.
     </p>
-  </TextBlock>
+  </section>
 </template>

src/views/HomeView.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import TextBlock from "@/components/TextBlock.vue";
 import WelcomeHeader from "@/components/WelcomeHeader.vue";</script>
 
 <template>
@@ -8,10 +7,10 @@ import WelcomeHeader from "@/components/WelcomeHeader.vue";</script>
     <template #sub>Character Reference Page</template>
   </WelcomeHeader>
 
-  <TextBlock>
+  <section>
     <h3>Welcome to Viktor's Ref Page</h3>
 
     <p>Here you can learn all about the ankylosaurus named Viktor.</p>
     <p>Pick an item from the navigation to dive in!</p>
-  </TextBlock>
+  </section>
 </template>