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

Moved subtitle out of h1 tag, some more styling for mobile users 

there has been also some code formatting
This commit is contained in:
Lucien Cartier-Tilet 2020-05-02 19:00:39 +02:00
parent a70bf19002
commit e8e18d6084
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
2 changed files with 61 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
web/dart/reorganize_html.dart
View File

@ -66,7 +66,8 @@ Future<Element> makeThemeChanger() async {
..append(Element.span() ..append(Element.span()
..classes.add('fa-stack') ..classes.add('fa-stack')
..style.verticalAlign = 'top' ..style.verticalAlign = 'top'
..append(makeIcon(['fas', 'fa-sun', 'fa-stack-1x'])..style.fontSize = '0.9em') ..append(makeIcon(['fas', 'fa-sun', 'fa-stack-1x'])
..style.fontSize = '0.9em')
..append(makeIcon(['fas', 'fa-moon', 'fa-stack-1x'])))) ..append(makeIcon(['fas', 'fa-moon', 'fa-stack-1x']))))
..append(Element.ul() ..append(Element.ul()
..classes.add('dropdown') ..classes.add('dropdown')
@ -80,35 +81,36 @@ Future<Element> makeThemeChanger() async {
Element makeShareLink(Element icon, String url) { Element makeShareLink(Element icon, String url) {
return Element.li() return Element.li()
..classes.add('dropdown-item') ..classes.add('dropdown-item')
..append(Element.a() ..append(Element.a()
..attributes['href'] = url ..attributes['href'] = url
..attributes['target'] = '_blank' ..attributes['target'] = '_blank'
..append(icon)); ..append(icon));
} }
Future<Element> makeShare() async { Future<Element> makeShare() async {
return Element.li() return Element.li()
..classes.addAll(['nav-item', 'has-dropdown']) ..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a() ..append(Element.a()
..attributes['href'] = 'javascript:void(0)' ..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-share-alt']))) ..append(makeIcon(['fas', 'fa-share-alt'])))
..append(Element.ul() ..append(Element.ul()
..classes.add('dropdown') ..classes.add('dropdown')
..append(makeShareLink( ..attributes['id'] = 'drop-share'
makeIcon(['fab', 'fa-twitter-square']), ..append(makeShareLink(
'https://twitter.com/share?text=${getPageTitle()}' makeIcon(['fab', 'fa-twitter-square']),
'&url=${window.location.href}')) 'https://twitter.com/share?text=${getPageTitle()}'
..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']), '&url=${window.location.href}'))
'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}')) ..append(makeShareLink(makeIcon(['fab', 'fa-reddit-square']),
..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']), 'https://www.reddit.com/submit?title=${getPageTitle()}s&url=${window.location.href}'))
'mailto:?subject=${getPageTitle}&body=${window.location.href}')) ..append(makeShareLink(makeIcon(['fas', 'fa-envelope-square']),
..append(makeShareLink( 'mailto:?subject=${getPageTitle}&body=${window.location.href}'))
makeIcon(['fab', 'fa-linkedin']), ..append(makeShareLink(
'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}' makeIcon(['fab', 'fa-linkedin']),
'&title=${getPageTitle()}')) 'https://www.linkedin.com/shareArticle?mini=true&url=${window.location.href}'
..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']), '&title=${getPageTitle()}'))
'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}'))); ..append(makeShareLink(makeIcon(['fab', 'fa-facebook-square']),
'https://www.facebook.com/sharer/sharer.php?u=${window.location.href}')));
} }
// Add a navbar atop of the HTML body, containing two buttons: // Add a navbar atop of the HTML body, containing two buttons:
@ -185,6 +187,8 @@ Future<void> reorganizeHtml() async {
await makeNavbar().then((navbar) { await makeNavbar().then((navbar) {
querySelector('body').insertAdjacentElement('afterBegin', navbar); querySelector('body').insertAdjacentElement('afterBegin', navbar);
querySelector('nav').insertAdjacentElement('afterEnd', makeHeader()); querySelector('nav').insertAdjacentElement('afterEnd', makeHeader());
querySelector('.title')
.insertAdjacentElement('afterEnd', querySelector('.subtitle'));
querySelector('#toc-drop') querySelector('#toc-drop')
.append(querySelector('#table-of-contents')..classes.add('dropdown')); .append(querySelector('#table-of-contents')..classes.add('dropdown'));
}); });

35
web/style/style.scss
View File

@ -248,7 +248,6 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
} }
} }
@ -276,10 +275,19 @@ header {
padding: 1em; padding: 1em;
margin-top: $navbar-height; margin-top: $navbar-height;
margin-bottom: 1em; margin-bottom: 1em;
padding-bottom: 3.5em; padding-bottom: 6em;
text-align: center; text-align: center;
clip-path: polygon(50% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%, 0 0); clip-path: polygon(50% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
transition: background 500ms ease-in-out; transition: background 500ms ease-in-out;
.title {
font-size: 5em;
margin: 0;
}
.subtitle {
font-size: 1.2em;
}
} }
.dropdown { .dropdown {
@ -337,6 +345,12 @@ header {
} }
} }
#drop-share {
li {
padding: 10px;
}
}
.dropdown-item { .dropdown-item {
cursor: pointer; cursor: pointer;
@ -417,18 +431,33 @@ h1, h2, h3, h4, h5, h6 {
h2 { h2 {
font-size: 2.5em; font-size: 2.5em;
@media only screen and (max-width: 600px) {
font-size: 1.75em;
}
} }
h3 { h3 {
font-size: 2em; font-size: 2em;
@media only screen and (max-width: 600px) {
font-size: 1.5em;
}
} }
h4 { h4 {
font-size: 1.5em; font-size: 1.5em;
@media only screen and (max-width: 600px) {
font-size: 1.3em;
}
} }
h5 { h5 {
font-size: 1.25em; font-size: 1.25em;
@media only screen and (max-width: 600px) {
font-size: 1.2em;
}
} }
.tooltip { .tooltip {
@ -445,8 +474,6 @@ h5 {
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
white-space: nowrap;
position: absolute; position: absolute;
z-index: 5; z-index: 5;