diff --git a/.gitignore b/.gitignore index f31ad7b..d10e5de 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ /pubspec.lock /.sass-cache/ /build/ +*.scssc diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart index 7993b79..85d46ac 100644 --- a/web/dart/navbar.dart +++ b/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 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 -Future 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 +// Create the dropdown sitemap Future makePages() async { var pages = Element.ul() ..attributes['id'] = 'drop-page' @@ -76,7 +76,7 @@ Future makePages() async { ..append(pages); } -// Make the share icon +// Create the array of share icons Future makeShare() async { // Create a share button Element makeShareLink(Element t_icon, String t_url) { @@ -115,14 +115,12 @@ Future 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 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() - ..attributes['id'] = t_btnId - ..appendText(' $t_text')); + ..append(Element.span()..attributes['id'] = t_btnId); } return Element.li() @@ -137,25 +135,29 @@ Future makeThemeChanger() async { ..append(Element.ul() ..classes.add('dropdown') ..attributes['id'] = 'theme-dropdown' - ..append(makeThemeItem('lightBtn', 'Clair', makeIcon(icons['sun']))) - ..append(makeThemeItem('darkBtn', 'Sombre', makeIcon(icons['lightbulb']))) - ..append(makeThemeItem('blackBtn', 'Noir', makeIcon(icons['moon'])))); + ..append(makeThemeItem('lightBtn', makeIcon(icons['sun']))) + ..append(makeThemeItem('darkBtn', makeIcon(icons['lightbulb']))) + ..append(makeThemeItem('blackBtn', makeIcon(icons['moon'])))); } -// Make home button in navbar -Future makeHome() async { +// Create the dropdown table of contents +Future makeToc() async { return Element.li() - ..classes.add('nav-item') - ..insertAdjacentElement( - 'afterBegin', - Element.a() - ..attributes['href'] = '/' - ..append(makeIcon(icons['home']))); + ..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']))); } -// Add a navbar atop of the HTML body, containing two buttons: -// - One back to home -// - A dropdown to each page detected in the sitemap +// Add a navbar atop of the HTML body, containing: +// - A back to home button +// - A dropdown sitemap +// - A dropdown table of contents +// - A dropdown array of share icons +// - A theme changer Future makeNavbar() async { final navbar_content = Element.ul()..classes.add('navbar-nav'); final home = await makeHome(); diff --git a/web/style/style.scss b/web/style/style.scss index 7f87ac6..22584d1 100644 --- a/web/style/style.scss +++ b/web/style/style.scss @@ -180,8 +180,8 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); } .dropdown { - background: $accent3; - color: $dark; + background: $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;