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 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 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 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 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;