fix: apply styles to legal pages

Author: TheAlexLichter

pages/disclaimer.vue

@@ -4,7 +4,7 @@
     <section class="flex flex-col flex-wrap items-center bg-gray-lighter py-8 leading-normal text-gray-darkest min-h-screen">
       <!-- eslint-disable vue/no-v-html -->
       <div
-        class="justify-around items-center w-5/6 md:w-1/2 mx-auto"
+        class="justify-around items-center w-5/6 md:w-1/2 mx-auto legal"
         v-html="$t('legal.disclaimer')"
       />
     </section>
@@ -22,3 +22,25 @@ export default {
   }
 }
 </script>
+
+<style lang="postcss">
+  .legal > h1 {
+    @apply font-bold text-2xl
+  }
+  .legal > h2 {
+    @apply font-bold text-xl
+  }
+  .legal > h3 {
+    @apply font-bold text-lg
+  }
+  .legal > a {
+    @apply underline text-blue-400;
+
+    &:hover {
+      @apply text-indigo-400
+    }
+  }
+  .legal > ul {
+    @apply list-disc px-8
+  }
+</style>

pages/legal.vue

@@ -5,7 +5,7 @@
     <section class="flex flex-col flex-wrap items-center bg-gray-lighter py-8 leading-normal text-gray-darkest">
       <!-- eslint-disable vue/no-v-html -->
       <div
-        class="justify-around items-center w-5/6 md:w-1/2 mx-auto"
+        class="justify-around items-center w-5/6 md:w-1/2 mx-auto legal"
         v-html="$t('legal.legal')"
       />
     </section>
@@ -25,3 +25,25 @@ export default {
   }
 }
 </script>
+
+<style lang="postcss">
+  .legal > h1 {
+    @apply font-bold text-2xl py-6
+  }
+  .legal > h2 {
+    @apply font-bold text-xl py-4
+  }
+  .legal > h3 {
+    @apply font-bold text-lg py-2
+  }
+  .legal > a {
+    @apply underline text-blue-400;
+
+    &:hover {
+      @apply text-indigo-400
+    }
+  }
+  .legal > ul {
+    @apply list-disc px-8
+  }
+</style>

pages/privacy.vue

@@ -3,7 +3,7 @@
     <div class="h-48 bg-rains" />
     <section class="flex flex-col flex-wrap items-center bg-gray-lighter py-8 leading-normal text-gray-darkest">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="justify-around items-center w-5/6 md:w-1/2 mx-auto" v-html="$t('legal.privacy')" />
+      <div class="justify-around items-center w-5/6 md:w-1/2 mx-auto legal" v-html="$t('legal.privacy')" />
     </section>
   </div>
 </template>
@@ -33,3 +33,25 @@ export default {
   }
 }
 </script>
+
+<style lang="postcss">
+  .legal > h1 {
+    @apply font-bold text-2xl
+  }
+  .legal > h2 {
+    @apply font-bold text-xl
+  }
+  .legal > h3 {
+    @apply font-bold text-lg
+  }
+  .legal > a {
+    @apply underline text-blue-400;
+
+    &:hover {
+      @apply text-indigo-400
+    }
+  }
+  .legal > ul {
+    @apply list-disc px-8
+  }
+</style>