From dc9192d58d3c40e2d0fb04980ee19cedf6b8afd6 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 6 Mar 2020 17:42:38 +0100
Subject: [PATCH] feat(style): update site style to not look as bland

---
 src/App.vue | 49 +++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9ee2ca3..878dfd9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,16 +2,22 @@
   <div id="app">
     <header>
       <h1>{{ appName }}</h1>
+      <h2>{{ appSubtitle }}</h2>
     </header>
 
-    <h2>Quick info</h2>
-    <data-table :dataset="getSebinData.generic"></data-table>
+    <section>
+      <h2>Quick info</h2>
+      <data-table :dataset="getSebinData.generic"></data-table>
+    </section>
 
-    <h2>Colors</h2>
-    <data-table :dataset="getSebinData.colors"></data-table>
-
-    <h2>Penis</h2>
-    <data-table :dataset="getSebinData.penis"></data-table>
+    <section>
+      <h2>Colors</h2>
+      <data-table :dataset="getSebinData.colors"></data-table>
+    </section>
+    <section>
+      <h2>Penis</h2>
+      <data-table :dataset="getSebinData.penis"></data-table>
+    </section>
 
     <section class="prose">
       <h2>Anatomy</h2>
@@ -294,7 +300,8 @@ export default {
   },
   data() {
     return {
-      appName: "Sebin Nyshkim Character Reference Page",
+      appName: "Sebin Nyshkim",
+      appSubtitle: "Character Reference Page",
       muscleRefs: this.getMuscleRefPics(17),
       kittens: this.getKittens(17),
       clothes: this.getClothesPics()
@@ -332,10 +339,36 @@ export default {
 
 header {
   text-align: center;
+
+  h1 {
+    font-size: 2.2em;
+    line-height: 1;
+  }
+
+  h2 {
+    font-size: 1em;
+    font-weight: normal;
+  }
 }
 
 .prose {
   text-align: justify;
+  hyphens: auto;
+}
+
+section {
+  margin: 2em 0;
+  padding: 1em;
+  box-shadow: 0 0 2em rgba(#000, 0.3), 0 0 2em rgba(#000, 0.1) inset;
+  background-color: #fff;
+
+  h2 {
+    border-bottom: 0.0625em #000 solid;
+  }
+
+  h3 {
+    border-bottom: 0.125em #000 dotted;
+  }
 }
 
 .float {