refactor: adjust stylings and add more normalization to the styles

src/client/theme-default/components/icons/OutboundLink.vue

@@ -22,10 +22,10 @@
 
 <style>
 .icon.outbound {
-  color: #aaa;
-  display: inline-block;
-  vertical-align: middle;
   position: relative;
   top: -1px;
+  display: inline-block;
+  color: #aaa;
+  vertical-align: middle;
 }
 </style>

src/client/theme-default/index.ts

@@ -3,9 +3,9 @@ import './styles/layout.css'
 import './styles/code.css'
 import './styles/custom-blocks.css'
 
+import { Theme } from '/@app/theme'
 import Layout from './Layout.vue'
 import NotFound from './NotFound.vue'
-import { Theme } from '../app/theme'
 
 const theme: Theme = {
   Layout,

src/client/theme-default/styles/layout.css

@@ -1,15 +1,33 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
 body {
-  padding: 0;
-  margin: 0;
-  background-color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  width: 100%;
+  min-width: 320px;
+  min-height: 100vh;
+  line-height: 1.4;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--text-color);
+  background-color: #ffffff;
+  direction: ltr;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-* {
-  box-sizing: border-box;
+main {
+  display: block;
 }
 
 .theme {
@@ -155,13 +173,28 @@ b {
   line-height: 1.6;
 }
 
+h1:hover .header-anchor,
+h1:focus .header-anchor,
+h2:hover .header-anchor,
+h2:focus .header-anchor,
+h3:hover .header-anchor,
+h3:focus .header-anchor,
+h4:hover .header-anchor,
+h4:focus .header-anchor,
+h5:hover .header-anchor,
+h5:focus .header-anchor,
+h6:hover .header-anchor,
+h6:focus .header-anchor {
+  opacity: 1;
+}
+
 h1 {
   font-size: 2.2rem;
 }
 
 h2 {
   font-size: 1.65rem;
-  padding-bottom: 0.3rem;
+  padding-bottom: .3rem;
   border-bottom: 1px solid var(--border-color);
 }
 
@@ -182,30 +215,15 @@ a.header-anchor {
   opacity: 0;
 }
 
-a.header-anchor:focus,
-a.header-anchor:hover {
+a.header-anchor:hover,
+a.header-anchor:focus {
   text-decoration: none;
 }
 
-h1:focus .header-anchor,
-h1:hover .header-anchor,
-h2:focus .header-anchor,
-h2:hover .header-anchor,
-h3:focus .header-anchor,
-h3:hover .header-anchor,
-h4:focus .header-anchor,
-h4:hover .header-anchor,
-h5:focus .header-anchor,
-h5:hover .header-anchor,
-h6:focus .header-anchor,
-h6:hover .header-anchor {
-  opacity: 1;
-}
-
 p,
 ol,
 ul {
-  line-height: 1.6;
+  line-height: 1.7;
 }
 
 ul,
@@ -214,9 +232,9 @@ ol {
 }
 
 table {
+  display: block;
   border-collapse: collapse;
   margin: 1rem 0;
-  display: block;
   overflow-x: auto;
 }