web/dart/reorganize_html.dart

@@ -66,7 +66,8 @@ Future<Element> makeThemeChanger() async {
       ..append(Element.span()
         ..classes.add('fa-stack')
         ..style.verticalAlign = 'top'
-        ..append(makeIcon(['fas', 'fa-sun', 'fa-stack-1x'])..style.fontSize = '0.9em')
+        ..append(makeIcon(['fas', 'fa-sun', 'fa-stack-1x'])
+          ..style.fontSize = '0.9em')
         ..append(makeIcon(['fas', 'fa-moon', 'fa-stack-1x']))))
     ..append(Element.ul()
       ..classes.add('dropdown')
@@ -95,6 +96,7 @@ Future<Element> makeShare() async {
       ..append(makeIcon(['fas', 'fa-share-alt'])))
     ..append(Element.ul()
       ..classes.add('dropdown')
+      ..attributes['id'] = 'drop-share'
       ..append(makeShareLink(
           makeIcon(['fab', 'fa-twitter-square']),
           'https://twitter.com/share?text=${getPageTitle()}'
@@ -185,6 +187,8 @@ Future<void> reorganizeHtml() async {
   await makeNavbar().then((navbar) {
     querySelector('body').insertAdjacentElement('afterBegin', navbar);
     querySelector('nav').insertAdjacentElement('afterEnd', makeHeader());
+    querySelector('.title')
+        .insertAdjacentElement('afterEnd', querySelector('.subtitle'));
     querySelector('#toc-drop')
         .append(querySelector('#table-of-contents')..classes.add('dropdown'));
   });

web/style/style.scss

@@ -248,7 +248,6 @@ body {
             margin: 0;
             padding: 0;
         }
-
     }
 }
 
@@ -276,10 +275,19 @@ header {
     padding: 1em;
     margin-top: $navbar-height;
     margin-bottom: 1em;
-    padding-bottom: 3.5em;
+    padding-bottom: 6em;
     text-align: center;
     clip-path: polygon(50% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
     transition: background 500ms ease-in-out;
+
+    .title {
+        font-size: 5em;
+        margin: 0;
+    }
+
+    .subtitle {
+        font-size: 1.2em;
+    }
 }
 
 .dropdown {
@@ -337,6 +345,12 @@ header {
     }
 }
 
+#drop-share {
+    li {
+        padding: 10px;
+    }
+}
+
 .dropdown-item {
     cursor: pointer;
 
@@ -417,18 +431,33 @@ h1, h2, h3, h4, h5, h6 {
 
 h2 {
     font-size: 2.5em;
+    @media only screen and (max-width: 600px) {
+        font-size: 1.75em;
+    }
 }
 
 h3 {
     font-size: 2em;
+
+    @media only screen and (max-width: 600px) {
+        font-size: 1.5em;
+    }
 }
 
 h4 {
     font-size: 1.5em;
+
+    @media only screen and (max-width: 600px) {
+        font-size: 1.3em;
+    }
 }
 
 h5 {
     font-size: 1.25em;
+
+    @media only screen and (max-width: 600px) {
+        font-size: 1.2em;
+    }
 }
 
 .tooltip {
@@ -445,8 +474,6 @@ h5 {
         text-align: center;
         border-radius: 6px;
 
-        white-space: nowrap;
-
         position: absolute;
         z-index: 5;