Fix #1

Also make website more mobile-friendly for smaller devices. And ignore
temporary scssc files from cache SCSS compiling.

.gitignore

@@ -5,3 +5,4 @@
 /pubspec.lock
 /.sass-cache/
 /build/
+*.scssc

web/dart/navbar.dart

@@ -43,25 +43,25 @@ final icons = {
 // Get the current page’s title
 String getPageTitle() => querySelector('title').text;
 
-// Create any type of icon
+// Create the home button
+Future<Element> makeHome() async {
+  return Element.li()
+    ..classes.add('nav-item')
+    ..insertAdjacentElement(
+        'afterBegin',
+        Element.a()
+          ..attributes['href'] = '/'
+          ..append(makeIcon(icons['home'])));
+}
+
+// Create a clickable icon
+// `t_elem` must be an SVG declared in the above `icons` variable.
 Element makeIcon(SvgElement t_elem) {
   final icon = t_elem..classes.add('nav-icon');
   return icon;
 }
 
-// Make the Table of Content in the navbar
+// Create the dropdown sitemap
-Future<Element> makeToc() async {
-  return Element.li()
-    ..attributes['id'] = 'toc-drop'
-    ..attributes['tabindex'] = '0'
-    ..classes.addAll(['nav-item', 'has-dropdown'])
-    ..append(Element.a()
-      ..attributes['tabindex'] = '-1'
-      ..attributes['href'] = 'javascript:void(0)'
-      ..append(makeIcon(icons['toc'])));
-}
-
-// Make the list of pages in the navbar
 Future<Element> makePages() async {
   var pages = Element.ul()
     ..attributes['id'] = 'drop-page'
@@ -76,7 +76,7 @@ Future<Element> makePages() async {
     ..append(pages);
 }
 
-// Make the share icon
+// Create the array of share icons
 Future<Element> makeShare() async {
   // Create a share button
   Element makeShareLink(Element t_icon, String t_url) {
@@ -115,14 +115,12 @@ Future<Element> makeShare() async {
           'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
 }
 
-// Make the theme changer in the navbar
+// Create the theme changer
 Future<Element> makeThemeChanger() async {
-  Element makeThemeItem(String t_btnId, String t_text, [Element t_icon]) {
+  Element makeThemeItem(String t_btnId, [Element t_icon]) {
     return Element.li()
       ..classes.add('dropdown-item')
-      ..append(Element.span()
+      ..append(Element.span()..attributes['id'] = t_btnId);
-        ..attributes['id'] = t_btnId
-        ..appendText(' $t_text'));
   }
 
   return Element.li()
@@ -137,25 +135,29 @@ Future<Element> makeThemeChanger() async {
     ..append(Element.ul()
       ..classes.add('dropdown')
       ..attributes['id'] = 'theme-dropdown'
-      ..append(makeThemeItem('lightBtn', 'Clair', makeIcon(icons['sun'])))
+      ..append(makeThemeItem('lightBtn', makeIcon(icons['sun'])))
-      ..append(makeThemeItem('darkBtn', 'Sombre', makeIcon(icons['lightbulb'])))
+      ..append(makeThemeItem('darkBtn', makeIcon(icons['lightbulb'])))
-      ..append(makeThemeItem('blackBtn', 'Noir', makeIcon(icons['moon']))));
+      ..append(makeThemeItem('blackBtn', makeIcon(icons['moon']))));
 }
 
-// Make home button in navbar
+// Create the dropdown table of contents
-Future<Element> makeHome() async {
+Future<Element> makeToc() async {
   return Element.li()
-    ..classes.add('nav-item')
+    ..attributes['id'] = 'toc-drop'
-    ..insertAdjacentElement(
+    ..attributes['tabindex'] = '0'
-        'afterBegin',
+    ..classes.addAll(['nav-item', 'has-dropdown'])
-        Element.a()
+    ..append(Element.a()
-          ..attributes['href'] = '/'
+      ..attributes['tabindex'] = '-1'
-          ..append(makeIcon(icons['home'])));
+      ..attributes['href'] = 'javascript:void(0)'
+      ..append(makeIcon(icons['toc'])));
 }
 
-// Add a navbar atop of the HTML body, containing two buttons:
+// Add a navbar atop of the HTML body, containing:
-// - One back to home
+// - A back to home button
-// - A dropdown to each page detected in the sitemap
+// - A dropdown sitemap
+// - A dropdown table of contents
+// - A dropdown array of share icons
+// - A theme changer
 Future<Element> makeNavbar() async {
   final navbar_content = Element.ul()..classes.add('navbar-nav');
   final home = await makeHome();

web/style/style.scss

@@ -180,8 +180,8 @@ $gradient-accent3-light-right: linear-gradient(to right, $light,  $accent3);
     }
 
     .dropdown {
-        background: $accent3;
+        background: $dark;
-        color: $dark;
+        color: $light;
     }
 
     #content {
@@ -373,11 +373,34 @@ header {
 }
 
 #theme-dropdown {
-    width: 250px;
+    width: 150px;
     flex-direction: row;
     transform: translateX(-75%);
 }
 
+#lightBtn, #darkBtn, #blackBtn {
+    content: ' ';
+    border: 2px solid white;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
+#lightBtn {
+    background: $light;
+}
+
+#darkBtn {
+    background: $dark;
+}
+
+#blackBtn {
+    background: $black;
+}
+
 #drop-page, #table-of-contents {
     flex-direction: column;
 
@@ -385,7 +408,7 @@ header {
     top: -40px;
 
     height: 0;
-    min-width: 350px;
+    min-width: 300px;
     overflow-y: auto;
 
     font-size: 0.9em;