Theme changer works, now I have to make it permanent
This commit is contained in:
parent
37d735cfdd
commit
05e374dd27
GPG Key ID:
BD7789E705CB8DCA
3
.gitignore
vendored
3
.gitignore
vendored
@ -26,3 +26,6 @@ build/
|
||||
doc/api/
|
||||
/web/swadesh
|
||||
/web/tibetan-lexicon-layout
|
||||
/web/style/.sass-cache/
|
||||
/web/style/*.css
|
||||
/web/eittland-files/GIS/
|
||||
|
||||
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
@ -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>'''));
|
||||
|
||||
|
||||
20
web/dart/theme.dart
Normal file
20
web/dart/theme.dart
Normal 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');
|
||||
});
|
||||
}
|
||||
@ -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" />
|
||||
|
||||
Binary file not shown.
@ -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 */
|
||||
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user