phundrak/langue-phundrak-com
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Dart backend update and upgrade, visual overhaul, additionally some Ñyqy updates that were meant for master branch #1

Merged
phundrak merged 38 commits from develop into master 2020-05-05 11:44:27 +00:00
Conversation 2 Commits 38 Files Changed 44 +148 -59
4 changed files with 148 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1ab53daa10 - Show all commits

24
TODOs.org
View File

@ -1,14 +1,22 @@
* TODO Organization of HTML [1/3]
* TODO Organization of HTML [2/3]
** DONE Add button to display TOC
CLOSED: [2020-04-28 mar. 22:30]
** TODO Add link to images that don’t have any
** TODO Add share links [0/3]
*** TODO Add Twitter share
*** TODO Add Email share
*** TODO Add LinkedIn share
*** TODO Add Facebook share
* TODO Styling [1/3]
** DONE Add share links [5/5]
CLOSED: [2020-04-29 mer. 00:03]
*** DONE Add Twitter share
CLOSED: [2020-04-28 mar. 23:22]
*** DONE Add Reddit share
CLOSED: [2020-04-28 mar. 23:23]
*** DONE Add Facebook share
CLOSED: [2020-04-28 mar. 23:23]
*** DONE Add LinkedIn share
CLOSED: [2020-04-29 mer. 00:03]
*** DONE Add Email share
CLOSED: [2020-04-29 mer. 00:03]
* TODO Styling [2/3]
** TODO Tables
** DONE Hint bubbles for phonetics (Ñyqy)
CLOSED: [2020-04-28 mar. 22:31]
** TODO Links
** DONE Links
CLOSED: [2020-04-29 mer. 00:03]

61
web/dart/reorganize_html.dart
View File

@ -15,7 +15,7 @@ Element makeIcon(List<String> classes, [String id]) {
return icon;
}
Future<Element> addLanguages(Element navbar) async {
Future<Element> makeLanguages() async {
// Languages
var languages = Element.ul()
..attributes['id'] = 'drop-lang'
@ -32,14 +32,12 @@ Future<Element> addLanguages(Element navbar) async {
languages.insertAdjacentElement('beforeEnd', link);
})
});
navbar.append(Element.li()
return Element.li()
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-language'])))
// ..innerText = 'Langues')
..classes.addAll(['nav-item', 'has-dropdown'])
..insertAdjacentElement('beforeEnd', languages));
return navbar;
..insertAdjacentElement('beforeEnd', languages);
}
Element makeTocDropDown() {
@ -65,20 +63,58 @@ Element makeThemeChanger() {
..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-sun']))
..append(makeIcon(['fas', 'fa-moon'])))
..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(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('darkBtn', makeIcon(['fas', 'fa-lightbulb']), 'Sombre'))
..append(
makeThemeItem('blackBtn', makeIcon(['fas', 'fa-moon']), 'Noir')));
}
// Add a navbar atop of the HTML body, containing two buttons:
// - One back to home
// - A dropdown to each language detected in the sitemap
Future<Element> makeNavbar() async {
Element makeShare() {
Element makeShareLink(Element icon, String url) {
return Element.li()
..classes.add('dropdown-item')
..append(Element.a()
..attributes['href'] = url
..attributes['target'] = '_blank'
..append(icon));
}
return Element.li()
..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-share-alt'])))
..append(Element.ul()
..classes.add('dropdown')
..append(makeShareLink(
makeIcon(['fab', 'fa-twitter-square']),
'https://twitter.com/share?text=${getPageTitle()}'
'&url=${window.location.href}'))
..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']),
'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}'))
..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']),
'mailto:?subject=${getPageTitle}&body=${window.location.href}'))
..append(makeShareLink(
makeIcon(['fab', 'fa-linkedin']),
'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}'
'&title=${getPageTitle()}'))
..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']),
'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
}
var navbar_content = Element.ul()..classes.add('navbar-nav');
// Home
@ -94,15 +130,12 @@ Future<Element> makeNavbar() async {
navbar_content.append(makeTocDropDown());
// Add languages
navbar_content = await addLanguages(navbar_content);
navbar_content.append(await makeLanguages());
// Share icon
// TODO Add dropdown for sharing on multiple platforms
navbar_content = addIcon(navbar_content, ['fas', 'fa-share-alt'], 'shareBtn');
navbar_content.append(makeShare());
// Theme changer
var theme = window.localStorage['theme'];
theme = (theme == null || theme == 'light') ? 'fa-moon' : 'fa-sun';
navbar_content.append(makeThemeChanger());
// Navbar content added to navbar

2
web/headers
View File

@ -34,7 +34,7 @@
#+HTML_HEAD_EXTRA: <link rel="shortcut icon" href="https://cdn.phundrak.com/img/mahakala-128x128.png" type="img/png" media="screen" />
#+HTML_HEAD_EXTRA: <link rel="shortcut icon" href="https://cdn.phundrak.com/img/favicon.ico" type="image/x-icon" media="screen" />
#+HTML_HEAD_EXTRA: <script defer src="dart/main.dart.js"></script>
#+HTML_HEAD_EXTRA: <script defer src="https://kit.fontawesome.com/4d42d0c8c5.js"></script>
#+HTML_HEAD_EXTRA: <script src="https://kit.fontawesome.com/4d42d0c8c5.js" crossorigin="anonymous"></script>
# ### MACROS ###################################################################
#+MACRO: newline @@latex:\hspace{0pt}\\@@ @@html:<br>@@

120
web/style/style.scss
View File

@ -32,34 +32,34 @@ $grey6: #12181b;
// Accent 1
// Black
$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1);
$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1);
$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1);
$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1);
// Dark
$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1);
$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1);
$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1);
$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1);
// Light
$gradient-accent1-light-left: linear-gradient(to left, $light, $accent1);
$gradient-accent1-light-right: linear-gradient(to right, $light, $accent1);
$gradient-accent1-light-left: linear-gradient(to left, $light, $accent1);
$gradient-accent1-light-right: linear-gradient(to right, $light, $accent1);
// Accent 2
// Black
$gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2);
$gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2);
$gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2);
$gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2);
// Dark
$gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2);
$gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2);
$gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2);
$gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2);
// Light
$gradient-accent2-light-left: linear-gradient(to left, $light, $accent2);
$gradient-accent2-light-right: linear-gradient(to right, $light, $accent2);
$gradient-accent2-light-left: linear-gradient(to left, $light, $accent2);
$gradient-accent2-light-right: linear-gradient(to right, $light, $accent2);
// Accent 3
// Black
$gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3);
$gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3);
$gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3);
$gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3);
// Dark
$gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3);
$gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3);
$gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3);
$gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3);
// Light
$gradient-accent3-light-left: linear-gradient(to left, $light, $accent3);
$gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
$gradient-accent3-light-left: linear-gradient(to left, $light, $accent3);
$gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
$navbar-height: 70px;
$postamble-height: 55px;
@ -99,6 +99,18 @@ $postamble-height: 55px;
background: $accent3;
color: $dark;
}
#content {
a {
box-shadow: inset 0 -3px 0 $accent3;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent3;
transition: box-shadow 300ms ease-in-out;
}
}
}
}
.dark, .black {
@ -136,6 +148,18 @@ $postamble-height: 55px;
background: $accent3;
color: $dark;
}
#content {
a {
box-shadow: inset 0 -3px 0 $accent2;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent2;
transition: box-shadow 300ms ease-in-out;
}
}
}
}
.black {
@ -155,6 +179,18 @@ $postamble-height: 55px;
background: $dark;
color: $light;
}
#content {
a {
box-shadow: inset 0 -3px 0 $accent1;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent1;
transition: box-shadow 300ms ease-in-out;
}
}
}
}
/* Style *********************************************************************/
@ -215,7 +251,7 @@ header {
.dropdown {
position: absolute;
opacity: 0;
z-index: 5;
z-index: -1;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
@ -226,11 +262,31 @@ header {
min-height: 3rem;
margin-top: 1rem;
padding: 0.5rem;
top: 0;
box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em;
transform: translateX(-40%);
transition: opacity .15s ease-out;
transition: opacity 500ms ease-in-out, top 500ms ease-in-out;
}
.has-dropdown {
&:focus-within {
.dropdown {
opacity: 1;
top: $navbar-height / 1.5;
z-index: 5;
pointer-events: auto;
}
#table-of-contents {
opacity: 1;
top: $navbar-height / 1.5;
z-index: 5;
height: 500%;
pointer-events: auto;
}
}
}
#theme-dropdown {
@ -244,21 +300,6 @@ header {
transform: translateX(-40%);
}
.has-dropdown {
&:focus-within {
.dropdown {
opacity: 1;
pointer-events: auto;
}
#table-of-contents {
opacity: 1;
height: 500%;
pointer-events: auto;
}
}
}
.dropdown-item {
cursor: pointer;
@ -297,8 +338,11 @@ header {
padding-top: 0;
max-width: 700px;
margin: 0 auto;
text-align: justify;
a {
font-style: italic;
}
}
#postamble {
@ -374,3 +418,7 @@ h4 {
}
}
}
blockquote {
font-style: italic;
}