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 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
  • - void addElement(final Element elem, [List 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 makeNavbar() async { - addElement(Element.a() - ..attributes['href'] - ..innerText = 'Accueil'); - } - - Future 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 addLanguages(Element navbar) async { // Languages var languages = Element.ul()..classes.add('dropdown'); @@ -87,7 +37,7 @@ Future addLanguages(Element navbar) async { // - One back to home // - A dropdown to each language detected in the sitemap Future makeNavbar() async { - var _navbar = Navbar(); + // var _navbar = Navbar(); // Home var navbar_content = Element.ul()..classes.add('navbar-nav'); @@ -121,8 +71,8 @@ Future makeNavbar() async {
    • ''')); 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: #+HTML_HEAD_EXTRA: diff --git a/web/style/.sass-cache/56138fd1e36a8566d3251fb8a3699a18f607794c/style.scssc b/web/style/.sass-cache/56138fd1e36a8566d3251fb8a3699a18f607794c/style.scssc deleted file mode 100644 index ff8f2fe..0000000 Binary files a/web/style/.sass-cache/56138fd1e36a8566d3251fb8a3699a18f607794c/style.scssc and /dev/null differ 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 {