diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart
index b32d299..8bc82d3 100644
--- a/web/dart/navbar.dart
+++ b/web/dart/navbar.dart
@@ -1,10 +1,40 @@
import 'dart:html';
+import 'dart:svg';
+
+// Icons from https://materialdesignicons.com/
+final icons = {
+ 'home': SvgElement.svg(''),
+
+ 'pages': SvgElement.svg(''),
+
+ 'toc': SvgElement.svg( ''),
+
+ 'share': SvgElement.svg( ''),
+
+ 'twitter': SvgElement.svg( ''),
+
+ 'reddit': SvgElement.svg( ''),
+
+ 'email': SvgElement.svg( ''),
+
+ 'linkedin': SvgElement.svg( ''),
+
+ 'facebook': SvgElement.svg( ''),
+
+ 'theme': SvgElement.svg( ''),
+
+ 'sun': SvgElement.svg( ''),
+
+ 'lightbulb': SvgElement.svg( ''),
+
+ 'moon': SvgElement.svg( ''),
+};
String getPageTitle() => querySelector('title').text;
-Element makeIcon(List classes, [String id]) {
- final icon = Element.tag('i')..classes.addAll(classes);
- icon.attributes['id'] = id ?? '';
+Element makeIcon(SvgElement elem) {
+ final icon = elem
+ ..classes.add('nav-icon');
return icon;
}
@@ -14,7 +44,7 @@ Future makeToc() async {
..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
- ..append(makeIcon(['fas', 'fa-list-ol'], 'tocBtn')));
+ ..append(makeIcon(icons['toc'])));
}
Future makePages() async {
@@ -24,7 +54,7 @@ Future makePages() async {
return Element.li()
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
- ..append(makeIcon(['fas', 'fa-flag'])))
+ ..append(makeIcon(icons['pages'])))
..classes.addAll(['nav-item', 'has-dropdown'])
..append(pages);
}
@@ -44,23 +74,23 @@ Future makeShare() async {
..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
- ..append(makeIcon(['fas', 'fa-share-alt'])))
+ ..append(makeIcon(icons['share'])))
..append(Element.ul()
..classes.add('dropdown')
..attributes['id'] = 'drop-share'
..append(makeShareLink(
- makeIcon(['fab', 'fa-twitter-square']),
+ makeIcon(icons['twitter']),
'https://twitter.com/share?text=${getPageTitle()}'
'&url=${window.location.href}'))
- ..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']),
+ ..append(makeShareLink(makeIcon(icons['reddit']),
'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}'))
- ..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']),
+ ..append(makeShareLink(makeIcon(icons['email']),
'mailto:?subject=${getPageTitle}&body=${window.location.href}'))
..append(makeShareLink(
- makeIcon(['fab', 'fa-linkedin']),
+ makeIcon(icons['linkedin']),
'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}'
'&title=${getPageTitle()}'))
- ..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']),
+ ..append(makeShareLink(makeIcon(icons['facebook']),
'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
}
@@ -81,17 +111,13 @@ 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-moon', 'fa-stack-1x']))))
+ ..append(makeIcon(icons['theme']))))
..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('lightBtn', makeIcon(icons['sun']), 'Clair'))
+ ..append(makeThemeItem('darkBtn', makeIcon(icons['lightbulb']), 'Sombre'))
+ ..append(makeThemeItem('blackBtn', makeIcon(icons['moon']), 'Noir')));
}
Future makeHome() async {
@@ -101,7 +127,7 @@ Future makeHome() async {
'afterBegin',
Element.a()
..attributes['href'] = '/'
- ..append(makeIcon(['fas', 'fa-home'])));
+ ..append(makeIcon(icons['home'])));
}
// Add a navbar atop of the HTML body, containing two buttons:
diff --git a/web/style/style.scss b/web/style/style.scss
index 78832bb..0f02019 100644
--- a/web/style/style.scss
+++ b/web/style/style.scss
@@ -77,6 +77,10 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
background: $bg-nav;
}
+ .navbar svg {
+ fill: $dark;
+ }
+
.status {
background: $gradient-accent3-light-left;
color: $dark;
@@ -151,6 +155,10 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
background: $bg-nav;
}
+ .navbar svg {
+ fill: $light;
+ }
+
.status {
background: $gradient-accent2-dark-left;
color: $light;
@@ -566,6 +574,11 @@ img {
max-width: 100%;
}
+.nav-icon {
+ max-width: 20px;
+ max-height: 20px;
+}
+
.figure {
padding: 0;
}