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

Browse Source 
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;