TODOs.org

@@ -1,14 +1,22 @@
-* TODO Organization of HTML [1/3]
+* TODO Organization of HTML [2/3]
 ** DONE Add button to display TOC
    CLOSED: [2020-04-28 mar. 22:30]
 ** TODO Add link to images that don’t have any
-** TODO Add share links [0/3]
+** DONE Add share links [5/5]
-*** TODO Add Twitter share
+   CLOSED: [2020-04-29 mer. 00:03]
-*** TODO Add Email share
+*** DONE Add Twitter share
-*** TODO Add LinkedIn share
+    CLOSED: [2020-04-28 mar. 23:22]
-*** TODO Add Facebook share
+*** DONE Add Reddit share
-* TODO Styling [1/3]
+    CLOSED: [2020-04-28 mar. 23:23]
+*** DONE Add Facebook share
+    CLOSED: [2020-04-28 mar. 23:23]
+*** DONE Add LinkedIn share
+    CLOSED: [2020-04-29 mer. 00:03]
+*** DONE Add Email share
+    CLOSED: [2020-04-29 mer. 00:03]
+* TODO Styling [2/3]
 ** TODO Tables
 ** DONE Hint bubbles for phonetics (Ñyqy)
    CLOSED: [2020-04-28 mar. 22:31]
-** TODO Links
+** DONE Links
+   CLOSED: [2020-04-29 mer. 00:03]

web/dart/reorganize_html.dart

@@ -15,7 +15,7 @@ Element makeIcon(List<String> classes, [String id]) {
   return icon;
 }
 
-Future<Element> addLanguages(Element navbar) async {
+Future<Element> makeLanguages() async {
   // Languages
   var languages = Element.ul()
     ..attributes['id'] = 'drop-lang'
@@ -32,14 +32,12 @@ Future<Element> addLanguages(Element navbar) async {
           languages.insertAdjacentElement('beforeEnd', link);
         })
       });
-  navbar.append(Element.li()
+  return Element.li()
     ..append(Element.a()
       ..attributes['href'] = 'javascript:void(0)'
       ..append(makeIcon(['fas', 'fa-language'])))
-    // ..innerText = 'Langues')
     ..classes.addAll(['nav-item', 'has-dropdown'])
-    ..insertAdjacentElement('beforeEnd', languages));
+    ..insertAdjacentElement('beforeEnd', languages);
-  return navbar;
 }
 
 Element makeTocDropDown() {
@@ -65,20 +63,58 @@ Element makeThemeChanger() {
     ..classes.addAll(['nav-item', 'has-dropdown'])
     ..append(Element.a()
       ..attributes['href'] = 'javascript:void(0)'
-      ..append(makeIcon(['fas', 'fa-sun']))
+      ..append(Element.span()
-      ..append(makeIcon(['fas', 'fa-moon'])))
+        ..classes.add('fa-stack')
+        ..style.verticalAlign = 'top'
+        ..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')
       ..attributes['id'] = 'theme-dropdown'
       ..append(makeThemeItem('lightBtn', makeIcon(['fas', 'fa-sun']), 'Clair'))
-      ..append(makeThemeItem('darkBtn', makeIcon(['fas', 'fa-lightbulb']), 'Sombre'))
+      ..append(
-      ..append(makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir')));
+          makeThemeItem('darkBtn', makeIcon(['fas', 'fa-lightbulb']), 'Sombre'))
+      ..append(
+          makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir')));
 }
 
 // Add a navbar atop of the HTML body, containing two buttons:
 // - One back to home
 // - A dropdown to each language detected in the sitemap
 Future<Element> makeNavbar() async {
+  Element makeShare() {
+    Element makeShareLink(Element icon, String url) {
+      return Element.li()
+        ..classes.add('dropdown-item')
+        ..append(Element.a()
+          ..attributes['href'] = url
+          ..attributes['target'] = '_blank'
+          ..append(icon));
+    }
+
+    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}')));
+  }
+
   var navbar_content = Element.ul()..classes.add('navbar-nav');
 
   // Home
@@ -94,15 +130,12 @@ Future<Element> makeNavbar() async {
   navbar_content.append(makeTocDropDown());
 
   // Add languages
-  navbar_content = await addLanguages(navbar_content);
+  navbar_content.append(await makeLanguages());
 
   // Share icon
-  // TODO Add dropdown for sharing on multiple platforms
+  navbar_content.append(makeShare());
-  navbar_content = addIcon(navbar_content, ['fas', 'fa-share-alt'], 'shareBtn');
 
   // Theme changer
-  var theme = window.localStorage['theme'];
-  theme = (theme == null || theme == 'light') ? 'fa-moon' : 'fa-sun';
   navbar_content.append(makeThemeChanger());
 
   // Navbar content added to navbar

web/headers

@@ -34,7 +34,7 @@
 #+HTML_HEAD_EXTRA: <link rel="shortcut icon" href="https://cdn.phundrak.com/img/mahakala-128x128.png" type="img/png" media="screen" />
 #+HTML_HEAD_EXTRA: <link rel="shortcut icon" href="https://cdn.phundrak.com/img/favicon.ico" type="image/x-icon" media="screen" />
 #+HTML_HEAD_EXTRA: <script defer src="dart/main.dart.js"></script>
-#+HTML_HEAD_EXTRA: <script defer src="https://kit.fontawesome.com/4d42d0c8c5.js"></script>
+#+HTML_HEAD_EXTRA: <script src="https://kit.fontawesome.com/4d42d0c8c5.js" crossorigin="anonymous"></script>
 
 # ### MACROS ###################################################################
 #+MACRO: newline @@latex:\hspace{0pt}\\@@ @@html:<br>@@

web/style/style.scss

@@ -99,6 +99,18 @@ $postamble-height: 55px;
         background: $accent3;
         color: $dark;
     }
+
+    #content {
+        a {
+            box-shadow: inset 0 -3px 0 $accent3;
+            transition: box-shadow 300ms ease-in-out;
+
+            &:hover {
+                box-shadow: inset 0 -23px 0 $accent3;
+                transition: box-shadow 300ms ease-in-out;
+            }
+        }
+    }
 }
 
 .dark, .black {
@@ -136,6 +148,18 @@ $postamble-height: 55px;
         background: $accent3;
         color: $dark;
     }
+
+    #content {
+        a {
+            box-shadow: inset 0 -3px 0 $accent2;
+            transition: box-shadow 300ms ease-in-out;
+
+            &:hover {
+                box-shadow: inset 0 -23px 0 $accent2;
+                transition: box-shadow 300ms ease-in-out;
+            }
+        }
+    }
 }
 
 .black {
@@ -155,6 +179,18 @@ $postamble-height: 55px;
         background: $dark;
         color: $light;
     }
+
+    #content {
+        a {
+            box-shadow: inset 0 -3px 0 $accent1;
+            transition: box-shadow 300ms ease-in-out;
+
+            &:hover {
+                box-shadow: inset 0 -23px 0 $accent1;
+                transition: box-shadow 300ms ease-in-out;
+            }
+        }
+    }
 }
 
 /* Style *********************************************************************/
@@ -215,7 +251,7 @@ header {
 .dropdown {
     position: absolute;
     opacity: 0;
-    z-index: 5;
+    z-index: -1;
 
     border-bottom-right-radius: 8px;
     border-bottom-left-radius: 8px;
@@ -226,11 +262,31 @@ header {
     min-height: 3rem;
     margin-top: 1rem;
     padding: 0.5rem;
+    top: 0;
 
     box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em;
     transform: translateX(-40%);
 
-    transition: opacity .15s ease-out;
+    transition: opacity 500ms ease-in-out, top 500ms ease-in-out;
+}
+
+.has-dropdown {
+    &:focus-within {
+        .dropdown {
+            opacity: 1;
+            top: $navbar-height / 1.5;
+            z-index: 5;
+            pointer-events: auto;
+        }
+
+        #table-of-contents {
+            opacity: 1;
+            top: $navbar-height / 1.5;
+            z-index: 5;
+            height: 500%;
+            pointer-events: auto;
+        }
+    }
 }
 
 #theme-dropdown {
@@ -244,21 +300,6 @@ header {
     transform: translateX(-40%);
 }
 
-.has-dropdown {
-    &:focus-within {
-        .dropdown {
-            opacity: 1;
-            pointer-events: auto;
-        }
-
-        #table-of-contents {
-            opacity: 1;
-            height: 500%;
-            pointer-events: auto;
-        }
-    }
-}
-
 .dropdown-item {
     cursor: pointer;
 
@@ -297,8 +338,11 @@ header {
     padding-top: 0;
     max-width: 700px;
     margin: 0 auto;
-
     text-align: justify;
+
+    a {
+        font-style: italic;
+    }
 }
 
 #postamble {
@@ -374,3 +418,7 @@ h4 {
         }
     }
 }
+
+blockquote {
+    font-style: italic;
+}