From 05e374dd27e5d58819e6e8012a9144d1e8e4af2a Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Sat, 25 Apr 2020 12:15:10 +0200
Subject: [PATCH] Theme changer works, now I have to make it permanent

---
 .gitignore                                    |   3 +
 web/dart/main.dart                            |   7 +-
 web/dart/reorganize_html.dart                 |  56 +--------------
 web/dart/theme.dart                           |  20 ++++++
 web/nyqy.org                                  |   2 +-
 .../style.scssc                               | Bin 34856 -> 0 bytes
 web/style/style.css                           |   2 -
 web/style/style.scss                          |  64 ++++++++++++++++--
 8 files changed, 90 insertions(+), 64 deletions(-)
 create mode 100644 web/dart/theme.dart
 delete mode 100644 web/style/.sass-cache/56138fd1e36a8566d3251fb8a3699a18f607794c/style.scssc
 delete mode 100644 web/style/style.css

diff --git a/.gitignore b/.gitignore
index 1a2180d..8062a9f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,6 @@ build/
 doc/api/
 /web/swadesh
 /web/tibetan-lexicon-layout
+/web/style/.sass-cache/
+/web/style/*.css
+/web/eittland-files/GIS/
diff --git a/web/dart/main.dart b/web/dart/main.dart
index 4c8022c..8f0b60d 100644
--- a/web/dart/main.dart
+++ b/web/dart/main.dart
@@ -1,5 +1,8 @@
 import './reorganize_html.dart' show reorganizeHtml;
+import './theme.dart' show makeThemeChanger;
 
-void main() {
-  reorganizeHtml();
+Future<void> main() async {
+  await reorganizeHtml().then((_) {
+    makeThemeChanger();
+  });
 }
diff --git a/web/dart/reorganize_html.dart b/web/dart/reorganize_html.dart
index f589f85..8f9c769 100644
--- a/web/dart/reorganize_html.dart
+++ b/web/dart/reorganize_html.dart
@@ -7,56 +7,6 @@ String getPageTitle() {
   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 {
   // Languages
   var languages = Element.ul()..classes.add('dropdown');
@@ -87,7 +37,7 @@ Future<Element> addLanguages(Element navbar) async {
 // - One back to home
 // - A dropdown to each language detected in the sitemap
 Future<Element> makeNavbar() async {
-  var _navbar = Navbar();
+  // var _navbar = Navbar();
 
   // Home
   var navbar_content = Element.ul()..classes.add('navbar-nav');
@@ -121,8 +71,8 @@ Future<Element> makeNavbar() async {
 <li class="nav-item has-dropdown">
   <a href="#"><i class="fas fa-sun" id="themeBtn"></i></a>
   <ul class="dropdown" id="theme-dropdown">
-    <li class="dropdown-item"><i class="fas fa-sun"></i> Clair</li>
-    <li class="dropdown-item"><i class="fas fa-moon"></i> Sombre</li>
+    <li class="dropdown-item"><span id="lightBtn"><i class="fas fa-sun"></i> Clair</span></li>
+    <li class="dropdown-item"><span id="darkBtn"> <i class="fas fa-moon"></i> Sombre</span></li>
   </ul>
 </li>'''));
 
diff --git a/web/dart/theme.dart b/web/dart/theme.dart
new file mode 100644
index 0000000..37d5e76
--- /dev/null
+++ b/web/dart/theme.dart
@@ -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');
+  });
+}
diff --git a/web/nyqy.org b/web/nyqy.org
index dad55da..63c2ec1 100644
--- a/web/nyqy.org
+++ b/web/nyqy.org
@@ -1,5 +1,5 @@
 # -*- 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
 #+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" />
diff --git a/web/style/.sass-cache/56138fd1e36a8566d3251fb8a3699a18f607794c/style.scssc b/web/style/.sass-cache/56138fd1e36a8566d3251fb8a3699a18f607794c/style.scssc
deleted file mode 100644
index ff8f2feedb5ec8da377bd5bbabd3c75daa0add8c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 34856
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

diff --git a/web/style/style.css b/web/style/style.css
deleted file mode 100644
index 29a60aa..0000000
--- a/web/style/style.css
+++ /dev/null
@@ -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 */
diff --git a/web/style/style.scss b/web/style/style.scss
index 3a9daa0..bbb30db 100644
--- a/web/style/style.scss
+++ b/web/style/style.scss
@@ -15,12 +15,19 @@
     src: url("../fonts/HelveticaNeue.ttf");
 }
 
-/* Colors ********************************************************************/
+// Themes /////////////////////////////////////////////////////////////////////
+
 $dark:    rgba(52, 73, 94, 1);
 $accent1: rgba(66, 191, 221, 1);
 $accent2: rgba(92, 172, 126, 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-right:        linear-gradient(90deg,  $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-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 {
     margin: 0;
     padding: 0;
     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 {
@@ -51,8 +102,6 @@ a {
 .navbar {
     height: 70px;
     width: 100%;
-    background: black;
-    color: white;
 }
 
 .navbar-nav {
@@ -60,15 +109,18 @@ a {
     align-items: center;
     justify-content: space-evenly;
     height: 100%;
+    background: $accent3;
+    color: $dark;
 }
 
 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);
+    color: $light;
+    background: $accent2;
 }
 
 .dropdown {
@@ -97,7 +149,7 @@ header {
 
 #theme-dropdown {
     width: 300px;
-    transform: translateX(-60%);
+    transform: translateX(-95%);
 }
 
 .has-dropdown {