Added share buttons, styled urls, updated fontawesome script
This commit is contained in:
parent
7c9e8b1e5f
commit
1ab53daa10
GPG Key ID:
BD7789E705CB8DCA
24
TODOs.org
24
TODOs.org
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>@@
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue