From e8e18d608475806d7a6e4e3c50d3b43284f5fdb0 Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Sat, 2 May 2020 19:00:39 +0200
Subject: [PATCH] Moved subtitle out of h1 tag, some more styling for mobile
 users

there has been also some code formatting
---
 web/dart/reorganize_html.dart | 56 +++++++++++++++++++----------------
 web/style/style.scss          | 35 +++++++++++++++++++---
 2 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/web/dart/reorganize_html.dart b/web/dart/reorganize_html.dart
index 3c1d271..a8ebea6 100644
--- a/web/dart/reorganize_html.dart
+++ b/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')
@@ -80,35 +81,36 @@ Future<Element> makeThemeChanger() async {
 
 Element makeShareLink(Element icon, String url) {
   return Element.li()
-  ..classes.add('dropdown-item')
-  ..append(Element.a()
-    ..attributes['href'] = url
-    ..attributes['target'] = '_blank'
-    ..append(icon));
+    ..classes.add('dropdown-item')
+    ..append(Element.a()
+      ..attributes['href'] = url
+      ..attributes['target'] = '_blank'
+      ..append(icon));
 }
 
 Future<Element> makeShare() async {
   return Element.li()
-  ..classes.addAll(['nav-item', 'has-dropdown'])
-  ..append(Element.a()
-    ..attributes['href'] = 'javascript:void(0)'
-    ..append(makeIcon(['fas', 'fa-share-alt'])))
-  ..append(Element.ul()
-    ..classes.add('dropdown')
-    ..append(makeShareLink(
-        makeIcon(['fab', 'fa-twitter-square']),
-        'https://twitter.com/share?text=${getPageTitle()}'
-        '&url=${window.location.href}'))
-    ..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']),
-        'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}'))
-    ..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']),
-        'mailto:?subject=${getPageTitle}&body=${window.location.href}'))
-    ..append(makeShareLink(
-        makeIcon(['fab', 'fa-linkedin']),
-        'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}'
-        '&title=${getPageTitle()}'))
-    ..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']),
-        'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
+    ..classes.addAll(['nav-item', 'has-dropdown'])
+    ..append(Element.a()
+      ..attributes['href'] = 'javascript:void(0)'
+      ..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()}'
+          '&url=${window.location.href}'))
+      ..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']),
+          'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}'))
+      ..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']),
+          'mailto:?subject=${getPageTitle}&body=${window.location.href}'))
+      ..append(makeShareLink(
+          makeIcon(['fab', 'fa-linkedin']),
+          'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}'
+          '&title=${getPageTitle()}'))
+      ..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']),
+          'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
 }
 
 // Add a navbar atop of the HTML body, containing two buttons:
@@ -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'));
   });
diff --git a/web/style/style.scss b/web/style/style.scss
index 906b783..4f2534e 100644
--- a/web/style/style.scss
+++ b/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;