Theme changer works, now I have to make it permanent

This commit is contained in:
Lucien Cartier-Tilet 2020-04-25 12:15:10 +02:00
parent 37d735cfdd
commit 05e374dd27
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
8 changed files with 90 additions and 64 deletions

3
.gitignore vendored
View File

@ -26,3 +26,6 @@ build/
doc/api/ doc/api/
/web/swadesh /web/swadesh
/web/tibetan-lexicon-layout /web/tibetan-lexicon-layout
/web/style/.sass-cache/
/web/style/*.css
/web/eittland-files/GIS/

View File

@ -1,5 +1,8 @@
import './reorganize_html.dart' show reorganizeHtml; import './reorganize_html.dart' show reorganizeHtml;
import './theme.dart' show makeThemeChanger;
void main() { Future<void> main() async {
reorganizeHtml(); await reorganizeHtml().then((_) {
makeThemeChanger();
});
} }

View File

@ -7,56 +7,6 @@ String getPageTitle() {
return querySelector('title').text; return querySelector('title').text;
} }
class Navbar {
Navbar() {
navbar = Element.ul()..classes.add('navbar-nav');
}
// Inserts the element in a <li class='nav-item'></li>
void addElement(final Element elem, [List<String> classes, String id]) {
var wrapper = Element.li()
..classes.add('nav-item')
..append(elem);
if (classes != null) {
for (var c in classes) {
wrapper.classes.add(c);
}
}
if (id != null) () => wrapper.attributes['id'] = id;
navbar.append(wrapper);
}
Future<Element> makeNavbar() async {
addElement(Element.a()
..attributes['href']
..innerText = 'Accueil');
}
Future<void> addLanguages() async {
var languages = Element.ul()..classes.add('dropdown');
await parseSitemap().then((final sitemap) => {
sitemap.forEach((url, name) {
final link = Element.a()
..attributes['href'] = url
..innerText = name;
final linkLi = Element.li()
..classes.add('dropdown-item')
..insertAdjacentElement('afterBegin', link);
languages.insertAdjacentElement('beforeEnd', linkLi);
})
});
final langLink = Element.a()
..attributes['href'] = '#'
..innerText = 'Langues';
addElement(langLink, ['has-dropdown'], 'langList');
querySelector('#langList').insertAdjacentElement('beforeEnd', languages);
}
Element navbar;
}
Future<Element> addLanguages(Element navbar) async { Future<Element> addLanguages(Element navbar) async {
// Languages // Languages
var languages = Element.ul()..classes.add('dropdown'); var languages = Element.ul()..classes.add('dropdown');
@ -87,7 +37,7 @@ Future<Element> addLanguages(Element navbar) async {
// - One back to home // - One back to home
// - A dropdown to each language detected in the sitemap // - A dropdown to each language detected in the sitemap
Future<Element> makeNavbar() async { Future<Element> makeNavbar() async {
var _navbar = Navbar(); // var _navbar = Navbar();
// Home // Home
var navbar_content = Element.ul()..classes.add('navbar-nav'); var navbar_content = Element.ul()..classes.add('navbar-nav');
@ -121,8 +71,8 @@ Future<Element> makeNavbar() async {
<li class="nav-item has-dropdown"> <li class="nav-item has-dropdown">
<a href="#"><i class="fas fa-sun" id="themeBtn"></i></a> <a href="#"><i class="fas fa-sun" id="themeBtn"></i></a>
<ul class="dropdown" id="theme-dropdown"> <ul class="dropdown" id="theme-dropdown">
<li class="dropdown-item"><i class="fas fa-sun"></i> Clair</li> <li class="dropdown-item"><span id="lightBtn"><i class="fas fa-sun"></i> Clair</span></li>
<li class="dropdown-item"><i class="fas fa-moon"></i> Sombre</li> <li class="dropdown-item"><span id="darkBtn"> <i class="fas fa-moon"></i> Sombre</span></li>
</ul> </ul>
</li>''')); </li>'''));

20
web/dart/theme.dart Normal file
View File

@ -0,0 +1,20 @@
import 'dart:html';
void switchTheme(final Element body, String theme) {
body.classes.clear();
body.classes.add(theme);
}
void makeThemeChanger() {
final darkBtn = querySelector('#darkBtn');
final lightBtn = querySelector('#lightBtn');
final body = querySelector('body');
darkBtn.onClick.listen((_) {
switchTheme(body, 'dark');
});
lightBtn.onClick.listen((_) {
switchTheme(body, 'light');
});
}

View File

@ -1,5 +1,5 @@
# -*- org-confirm-babel-evaluate: nil -*- # -*- org-confirm-babel-evaluate: nil -*-
#+TITLE: Une Grammaire du Ñyqy #+TITLE: Grammaire du Ñyqy
#+SUBTITLE: Un détail de la langue construite prototype du Ñyqy, et une rapide description de son peuple et sa culture #+SUBTITLE: Un détail de la langue construite prototype du Ñyqy, et une rapide description de son peuple et sa culture
#+HTML_HEAD_EXTRA: <meta name="description" content="Grammaire détaillée de la langue construite Ñyqy" /> #+HTML_HEAD_EXTRA: <meta name="description" content="Grammaire détaillée de la langue construite Ñyqy" />
#+HTML_HEAD_EXTRA: <meta property="og:title" content="Grammaire du Ñyqy" /> #+HTML_HEAD_EXTRA: <meta property="og:title" content="Grammaire du Ñyqy" />

View File

@ -1,2 +0,0 @@
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700);@font-face{font-family:"DoulosSIL";font-display:swap;src:url("https://langue.phundrak.com/fonts/DoulosSIL-R.woff")}@font-face{font-family:"Noto Sans Runes";font-display:swap;src:url("../fonts/NotoSansRunic-Regular.ttf")}@font-face{font-family:"Helvetica Neue";font-display:swap;src:url("../fonts/HelveticaNeue.ttf")}body{margin:0;padding:0;font-family:"Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif}ul{list-style-type:none;margin:0;padding:0}a{color:currentColor;text-decoration:none}.navbar{height:70px;width:100%;background:black;color:white}.navbar-nav{display:flex;align-items:center;justify-content:space-evenly;height:100%}header{padding:1em;background:red;margin-bottom:1em;padding-bottom:3.5em;text-align:center;clip-path:polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0)}.dropdown{position:absolute;width:500px;opacity:0;z-index:2;background:blue;border-top:2px solid white;border-bottom-right-radius:8px;border-bottom-left-radius:8px;display:flex;align-items:center;justify-content:space-around;height:3rem;margin-top:2rem;padding:0.5rem;box-shadow:rgba(2,8,20,0.1) 0px 0.175em 0.5em;transform:translateX(-40%);transition:opacity .15s ease-out}#theme-dropdown{width:300px;transform:translateX(-60%)}.has-dropdown:focus-within .dropdown{opacity:1;pointer-events:auto}.dropdown-item a{width:100%;height:100%;size:0.7rem;padding-left:10px;font-weight:bold}
/*# sourceMappingURL=style.css.map */

View File

@ -15,12 +15,19 @@
src: url("../fonts/HelveticaNeue.ttf"); src: url("../fonts/HelveticaNeue.ttf");
} }
/* Colors ********************************************************************/ // Themes /////////////////////////////////////////////////////////////////////
$dark: rgba(52, 73, 94, 1); $dark: rgba(52, 73, 94, 1);
$accent1: rgba(66, 191, 221, 1); $accent1: rgba(66, 191, 221, 1);
$accent2: rgba(92, 172, 126, 1); $accent2: rgba(92, 172, 126, 1);
$accent3: rgba(197, 193, 155, 1); $accent3: rgba(197, 193, 155, 1);
$light: rgba(250, 250, 255, 1); $light: #ddd;
$grey1: #f8f8f8;
$grey2: #dbe1e8;
$grey3: #b2becd;
$grey4: #6c7983;
$grey5: #454e56;
$grey6: #12181b;
$gradient-top: linear-gradient(0deg, $dark, $accent1, $accent2, $accent3, $light); $gradient-top: linear-gradient(0deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-right: linear-gradient(90deg, $dark, $accent1, $accent2, $accent3, $light); $gradient-right: linear-gradient(90deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-bottom: linear-gradient(180deg, $dark, $accent1, $accent2, $accent3, $light); $gradient-bottom: linear-gradient(180deg, $dark, $accent1, $accent2, $accent3, $light);
@ -31,10 +38,54 @@ $gradient-top-left: linear-gradient(225deg, $dark, $accent1, $accent2, $acce
$gradient-bottom-left: linear-gradient(315deg, $dark, $accent1, $accent2, $accent3, $light); $gradient-bottom-left: linear-gradient(315deg, $dark, $accent1, $accent2, $accent3, $light);
$gradient-radial: radial-gradient( $dark, $accent1, $accent2, $accent3, $light); $gradient-radial: radial-gradient( $dark, $accent1, $accent2, $accent3, $light);
.light {
$bg-nav: linear-gradient(to right, $grey1, $grey3);
$bg-dropdown: $grey1;
$text: $light;
$border-color: $accent1;
$bg-solar: $accent3;
transition: background 500ms ease-in-out, color 1s ease-in-out;
color: $dark;
background: $light;
.navbar {
background: $grey3;
}
}
.dark {
$background: $dark;
$foreground: $light;
$bg-nav: linear-gradient(to right, $grey5, $grey6);
$bg-dropdown: $grey6;
$text: $dark;
$border-color: $dark;
$bg-solar: $accent3;
transition: background 500ms ease-in-out, color 1s ease-in-out;
color: $light;
background: $dark;
.navbar {
color: $light;
background: $grey6;
}
}
/* Style *********************************************************************/
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif; font-family: "Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
transition: background 500ms ease-in-out, color 1s ease-in-out;
header, .navbar {
transition: background 500ms ease-in-out, color 1s ease-in-out;
}
} }
ul { ul {
@ -51,8 +102,6 @@ a {
.navbar { .navbar {
height: 70px; height: 70px;
width: 100%; width: 100%;
background: black;
color: white;
} }
.navbar-nav { .navbar-nav {
@ -60,15 +109,18 @@ a {
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
height: 100%; height: 100%;
background: $accent3;
color: $dark;
} }
header { header {
padding: 1em; padding: 1em;
background: red;
margin-bottom: 1em; margin-bottom: 1em;
padding-bottom: 3.5em; padding-bottom: 3.5em;
text-align: center; text-align: center;
clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0); clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0);
color: $light;
background: $accent2;
} }
.dropdown { .dropdown {
@ -97,7 +149,7 @@ header {
#theme-dropdown { #theme-dropdown {
width: 300px; width: 300px;
transform: translateX(-60%); transform: translateX(-95%);
} }
.has-dropdown { .has-dropdown {