diff --git a/TODOs.org b/TODOs.org index d9217bd..1005148 100644 --- a/TODOs.org +++ b/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] -*** TODO Add Twitter share -*** TODO Add Email share -*** TODO Add LinkedIn share -*** TODO Add Facebook share -* TODO Styling [1/3] +** DONE Add share links [5/5] + CLOSED: [2020-04-29 mer. 00:03] +*** DONE Add Twitter share + CLOSED: [2020-04-28 mar. 23:22] +*** DONE Add Reddit share + 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] diff --git a/web/dart/reorganize_html.dart b/web/dart/reorganize_html.dart index b66902c..9292185 100644 --- a/web/dart/reorganize_html.dart +++ b/web/dart/reorganize_html.dart @@ -15,7 +15,7 @@ Element makeIcon(List classes, [String id]) { return icon; } -Future addLanguages(Element navbar) async { +Future makeLanguages() async { // Languages var languages = Element.ul() ..attributes['id'] = 'drop-lang' @@ -32,14 +32,12 @@ Future 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)); - return navbar; + ..insertAdjacentElement('beforeEnd', languages); } 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(makeIcon(['fas', 'fa-moon']))) + ..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-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(makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir'))); + ..append( + 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 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 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 = addIcon(navbar_content, ['fas', 'fa-share-alt'], 'shareBtn'); + navbar_content.append(makeShare()); // 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 diff --git a/web/headers b/web/headers index 2b85095..c34abba 100644 --- a/web/headers +++ b/web/headers @@ -34,7 +34,7 @@ #+HTML_HEAD_EXTRA: #+HTML_HEAD_EXTRA: #+HTML_HEAD_EXTRA: -#+HTML_HEAD_EXTRA: +#+HTML_HEAD_EXTRA: # ### MACROS ################################################################### #+MACRO: newline @@latex:\hspace{0pt}\\@@ @@html:
@@ diff --git a/web/style/style.scss b/web/style/style.scss index 47d080a..47d12a4 100644 --- a/web/style/style.scss +++ b/web/style/style.scss @@ -32,34 +32,34 @@ $grey6: #12181b; // Accent 1 // Black -$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1); -$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1); +$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1); +$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1); // Dark -$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1); -$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1); +$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1); +$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1); // Light -$gradient-accent1-light-left: linear-gradient(to left, $light, $accent1); -$gradient-accent1-light-right: linear-gradient(to right, $light, $accent1); +$gradient-accent1-light-left: linear-gradient(to left, $light, $accent1); +$gradient-accent1-light-right: linear-gradient(to right, $light, $accent1); // Accent 2 // Black -$gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2); -$gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2); +$gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2); +$gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2); // Dark -$gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2); -$gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2); +$gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2); +$gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2); // Light -$gradient-accent2-light-left: linear-gradient(to left, $light, $accent2); -$gradient-accent2-light-right: linear-gradient(to right, $light, $accent2); +$gradient-accent2-light-left: linear-gradient(to left, $light, $accent2); +$gradient-accent2-light-right: linear-gradient(to right, $light, $accent2); // Accent 3 // Black -$gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3); -$gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3); +$gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3); +$gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3); // Dark -$gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3); -$gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3); +$gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3); +$gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3); // Light -$gradient-accent3-light-left: linear-gradient(to left, $light, $accent3); -$gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); +$gradient-accent3-light-left: linear-gradient(to left, $light, $accent3); +$gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); $navbar-height: 70px; $postamble-height: 55px; @@ -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; +}