Separating this website’s backend from its content

The backend has now its own repo, phundrak/org-website-backend
This commit is contained in:
Lucien Cartier-Tilet 2020-05-05 14:49:57 +02:00
parent 90dd84730b
commit d29cab7a1e
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
55 changed files with 4 additions and 1033 deletions

20
.gitignore vendored
View File

@ -12,20 +12,6 @@
*.toc *.toc
_minted* _minted*
auto-generated* auto-generated*
swadesh
# Files and directories created by pub tibetan-lexicon-layout
.dart_tool/ /ignored-folder/
.packages
# Remove the following pattern if you wish to check in your lock file
pubspec.lock
# Conventional directory for build outputs
build/
# Directory created by dartdoc
doc/api/
/web/swadesh
/web/tibetan-lexicon-layout
/web/style/.sass-cache/
/web/style/*.css
/web/eittland-files/GIS/

View File

@ -1,19 +0,0 @@
FROM google/dart:2.7
WORKDIR /app
# Get Dart dependencies
RUN mkdir -p /pub-cache
ENV PUB_CACHE=/pub-cache
ENV PATH="${PATH}:/pub-cache/bin"
RUN pub global activate webdev
ADD pubspec.* /app/
RUN pub get
RUN pub get --offline
RUN apt update && apt install ruby-sass ruby-dev build-essential -y
RUN gem install sass-listen
ADD . /app/
CMD ["./start.sh"]

View File

@ -1,30 +0,0 @@
* TODO Organization of HTML [4/4]
** DONE Add link to images that dont have any
CLOSED: [2020-05-05 mar. 13:31]
** DONE Add English links detection
CLOSED: [2020-05-05 mar. 13:31]
** DONE Add button to display TOC
CLOSED: [2020-04-28 mar. 22:30]
** 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 [5/5]
** DONE Images
CLOSED: [2020-05-05 mar. 13:31]
** DONE Mobile version
CLOSED: [2020-05-05 mar. 13:31]
** DONE Tables
CLOSED: [2020-05-02 Sat 12:09]
** DONE Hint bubbles for phonetics (Ñyqy)
CLOSED: [2020-04-28 mar. 22:31]
** DONE Links
CLOSED: [2020-04-29 mer. 00:03]

View File

@ -1,14 +0,0 @@
# Defines a default set of lint rules enforced for
# projects at Google. For details and rationale,
# see https://github.com/dart-lang/pedantic#enabled-lints.
include: package:pedantic/analysis_options.yaml
# For lint rules and documentation, see http://dart-lang.github.io/linter/lints.
# Uncomment to specify additional rules.
# linter:
# rules:
# - camel_case_types
analyzer:
# exclude:
# - path/to/excluded/files/**

View File

@ -1,10 +0,0 @@
version: '3'
services:
web:
build: .
ports:
- "8010:8080"
restart: always
volumes:
- ./web/:/app/web/

View File

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

View File

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB

View File

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 56 KiB

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/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: <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="/dart/main.dart.js"></script>
#+HTML_HEAD_EXTRA: <script src="https://kit.fontawesome.com/4d42d0c8c5.js" crossorigin="anonymous"></script> #+HTML_HEAD_EXTRA: <script defer src="https://kit.fontawesome.com/4d42d0c8c5.js" crossorigin="anonymous"></script>
# ### MACROS ################################################################### # ### MACROS ###################################################################
#+MACRO: newline @@latex:\hspace{0pt}\\@@ @@html:<br>@@ #+MACRO: newline @@latex:\hspace{0pt}\\@@ @@html:<br>@@

View File

Before

Width:  |  Height:  |  Size: 203 KiB

After

Width:  |  Height:  |  Size: 203 KiB

View File

Before

Width:  |  Height:  |  Size: 578 KiB

After

Width:  |  Height:  |  Size: 578 KiB

View File

Before

Width:  |  Height:  |  Size: 630 KiB

After

Width:  |  Height:  |  Size: 630 KiB

View File

Before

Width:  |  Height:  |  Size: 579 KiB

After

Width:  |  Height:  |  Size: 579 KiB

View File

Before

Width:  |  Height:  |  Size: 274 KiB

After

Width:  |  Height:  |  Size: 274 KiB

View File

Before

Width:  |  Height:  |  Size: 633 KiB

After

Width:  |  Height:  |  Size: 633 KiB

View File

Before

Width:  |  Height:  |  Size: 913 KiB

After

Width:  |  Height:  |  Size: 913 KiB

View File

Before

Width:  |  Height:  |  Size: 564 KiB

After

Width:  |  Height:  |  Size: 564 KiB

View File

Before

Width:  |  Height:  |  Size: 682 KiB

After

Width:  |  Height:  |  Size: 682 KiB

View File

Before

Width:  |  Height:  |  Size: 389 KiB

After

Width:  |  Height:  |  Size: 389 KiB

View File

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 103 KiB

View File

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 121 KiB

View File

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 94 KiB

View File

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

View File

Before

Width:  |  Height:  |  Size: 389 KiB

After

Width:  |  Height:  |  Size: 389 KiB

View File

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

View File

Before

Width:  |  Height:  |  Size: 119 KiB

After

Width:  |  Height:  |  Size: 119 KiB

View File

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View File

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 59 KiB

View File

Before

Width:  |  Height:  |  Size: 242 KiB

After

Width:  |  Height:  |  Size: 242 KiB

View File

Before

Width:  |  Height:  |  Size: 119 KiB

After

Width:  |  Height:  |  Size: 119 KiB

View File

@ -1,16 +0,0 @@
name: languephundrakcom
description: A bare-bone server for my linguistics website.
version: 1.0.0
homepage: https://langue.phundrak.com
author: Lucien Cartier-Tilet <lucien@phundrak.com>
environment:
sdk: '>=2.5.0 <3.0.0'
dependencies:
html: '^0.14.0+3'
dev_dependencies:
build_runner: ^1.8.0
build_web_compilers: ^2.9.0
pedantic: ^1.9.0

View File

@ -1,3 +0,0 @@
#!/bin/bash
sass --watch web/style/:web/style -tcompressed &
webdev serve --release --hostname 0.0.0.0

7
web/.gitignore vendored
View File

@ -1,7 +0,0 @@
/draconian-2/Vulgar_ Language generator.pdf
/ignored-folder
/css/.sass-cache/
/css/light.css
/css/main.css
/css/dark.css
/css/nyqy.css

View File

@ -1,9 +0,0 @@
import './reorganize_html.dart' show reorganizeHtml;
import './theme.dart' show enableThemeChanger, setTheme;
Future<void> main() async {
await setTheme();
await reorganizeHtml().then((_) {
enableThemeChanger();
});
}

View File

@ -1,149 +0,0 @@
import 'dart:html';
import './parse_sitemap.dart' show parseSitemap;
// Returns the title of the current webpage
String getPageTitle() {
return querySelector('title').text;
}
Element makeIcon(List<String> classes, [String id]) {
final icon = Element.tag('i')..classes.addAll(classes);
if (id != null) {
icon.attributes['id'] = id;
}
return icon;
}
Future<Element> makeToc() async {
return Element.li()
..attributes['id'] = 'toc-drop'
..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-list-ol'], 'tocBtn')));
}
Future<Element> makePages() async {
var pages = Element.ul()
..attributes['id'] = 'drop-page'
..classes.add('dropdown');
await parseSitemap().then((final sitemap) => {
sitemap.forEach((url, name) {
final link = Element.li()
..classes.add('dropdown-item')
..insertAdjacentElement(
'afterBegin',
Element.a()
..attributes['href'] = url
..innerText = name);
pages.insertAdjacentElement('beforeEnd', link);
})
});
return Element.li()
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
..append(makeIcon(['fas', 'fa-flag'])))
..classes.addAll(['nav-item', 'has-dropdown'])
..insertAdjacentElement('beforeEnd', pages);
}
Element makeShareLink(Element icon, String url) {
return Element.li()
..classes.add('dropdown-item')
..append(Element.a()
..attributes['href'] = url
..attributes['target'] = '_blank'
..append(icon));
}
Future<Element> makeShare() async {
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')
..attributes['id'] = 'drop-share'
..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}')));
}
Future<Element> makeThemeChanger() async {
Element makeThemeItem(String t_btnId, Element t_icon, String t_text) {
return Element.li()
..classes.add('dropdown-item')
..append(Element.span()
..attributes['id'] = t_btnId
..append(t_icon)
..appendText(' $t_text'));
}
return Element.li()
..classes.addAll(['nav-item', 'has-dropdown'])
..append(Element.a()
..attributes['href'] = 'javascript:void(0)'
..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')));
}
Future<Element> makeHome() async {
return Element.li()
..classes.add('nav-item')
..insertAdjacentElement(
'afterBegin',
Element.a()
..attributes['href'] = '/'
..append(makeIcon(['fas', 'fa-home'])));
}
// Add a navbar atop of the HTML body, containing two buttons:
// - One back to home
// - A dropdown to each page detected in the sitemap
Future<Element> makeNavbar() async {
final navbar_content = Element.ul()..classes.add('navbar-nav');
final home = await makeHome();
final pages = await makePages();
final toc = await makeToc();
final share = await makeShare();
final theme = await makeThemeChanger();
navbar_content
..append(home)
..append(pages)
..append(toc)
..append(share)
..append(theme);
// Navbar content added to navbar
final navbar = Element.nav()
..classes.add('navbar')
..append(navbar_content);
return navbar;
}

View File

@ -1,43 +0,0 @@
import 'dart:html' show HttpRequest;
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart' show Element;
// Get the sitemap content
Future<String> getSitemap() async {
const path = 'sitemap.html';
try {
return await HttpRequest.getString(path);
} catch (e) {
print('Couldnt open $path');
}
return 'Error';
}
// Parse the list of elements and detect pages from this list
Map<String, String> detectPages(List<Element> sitemap, [String prefix]) {
final links = <String, String>{};
for (var elem in sitemap) {
if (elem.outerHtml.contains('index')) {
continue;
} else if (elem.innerHtml.startsWith('<a')) {
elem = elem.firstChild;
final url = elem.attributes['href'];
final text = elem.firstChild.text;
links[url] = (prefix == null) ? text : '$text ($prefix)';
} else {
final prefix = elem.firstChild.text;
final ul = elem.children[0].children;
links.addAll(detectPages(ul, prefix));
}
}
return links;
}
// This function returns a Map which contains all links to languages detected
// from the sitemap.
Future<Map<String, String>> parseSitemap() async {
final content = await getSitemap();
final sitemap = parse(content).getElementsByClassName('org-ul')[0].children;
return detectPages(sitemap);
}

View File

@ -1,71 +0,0 @@
import 'dart:html';
import './navbar.dart' show makeNavbar;
Future<Element> makeHeader() async {
var header = Element.tag('header');
header
..append(Element.img()
..attributes['src'] =
'https://cdn.phundrak.com/img/mahakala-monochrome.png'
..attributes['alt'] = 'Logo de Phundrak'
..attributes['heigh'] = '150px'
..attributes['width'] = '150px')
..append(querySelector('h1'));
var subt = querySelector('.subtitle');
if (subt != null) {
header.append(subt);
}
return header;
}
Future<void> wrapTables() async {
for (var table in querySelectorAll('table')) {
var largetable = DivElement()..className = 'largetable';
table.before(largetable);
largetable.children.add(table);
}
}
// All images that are not nested inside a link will be linkified to themselves.
void linkifyImg() {
querySelectorAll('img').forEach((img) {
print(img.attributes['src']);
print(img.parent.tagName);
if (img.parent.tagName == 'P') {
final link = Element.a()..attributes['href'] = img.attributes['src'];
img.insertAdjacentElement('beforeBegin', link);
link.append(img);
}
});
}
Future<void> reorganizeHtml() async {
final content = querySelector('#content');
// Make navbar
await makeNavbar().then((navbar) {
querySelector('body').insertAdjacentElement('afterBegin', navbar);
});
// Make header
await makeHeader().then((header) {
content.insertAdjacentElement('beforeBegin', header);
final subtitle = querySelector('.subtitle');
if (subtitle != null) {
header.append(subtitle);
}
});
// wrap tables in container for better SCSS display
await wrapTables();
linkifyImg();
// Add correct class to TOC
querySelector('#toc-drop')
.append(querySelector('#table-of-contents')..classes.add('dropdown'));
// Remove all <br> tags from HTML
querySelectorAll('br').forEach((br) => br.remove());
}

View File

@ -1,53 +0,0 @@
import 'dart:html';
class Theme {
String _name;
String _icon;
Theme(String t_name, String t_icon) {
_name = t_name;
_icon = t_icon;
}
String getIcon() => _icon;
String getName() => _name;
}
final themes = {
'light': Theme('light', 'fa-sun'),
'dark': Theme('dark', 'fa-lightbulb'),
'black': Theme('black', 'fa-moon')
};
final localStorage = window.localStorage;
var currentTheme = themes[localStorage['theme']];
void enableThemeChanger() {
final darkBtn = querySelector('#darkBtn');
final lightBtn = querySelector('#lightBtn');
final blackBtn = querySelector('#blackBtn');
lightBtn.onClick.listen((_) => switchTheme(themes['light']));
darkBtn.onClick.listen((_) => switchTheme(themes['dark']));
blackBtn.onClick.listen((_) => switchTheme(themes['black']));
}
Future<void> setTheme() async {
if (currentTheme == null) {
currentTheme = themes['light'];
localStorage['theme'] = currentTheme.getName();
}
querySelector('body')
..classes.clear()
..classes.add(currentTheme.getName());
}
void switchTheme(Theme currentTheme) {
// Set HTML theme
querySelector('body')
..classes.clear()
..classes.add(currentTheme.getName());
// Set storage theme
localStorage['theme'] = currentTheme.getName();
}

View File

@ -1,591 +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("/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");
}
/* Variables *****************************************************************/
$switch-small-screen: "only screen and (max-width: 600px)";
$switch-smaller-screen: "only screen and (max-width: 400px)";
$navbar-height: 70px;
$postamble-height: 55px;
// Themes /////////////////////////////////////////////////////////////////////
$dark: rgba( 52, 73, 94, 1);
$black: rgba( 0, 0, 0, 1);
$accent1: rgba( 93, 115, 126, 1);
$accent2: rgba( 92, 172, 126, 1);
$accent3: rgba(197, 193, 155, 1);
$light: #eee;
$grey1: #f8f8f8;
$grey2: #dbe1e8;
$grey3: #b2becd;
$grey4: #6c7983;
$grey5: #454e56;
$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);
// Dark
$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);
// 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);
// Dark
$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);
// 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);
// Dark
$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);
.light {
$bg-nav: $gradient-accent3-light-right;
$border-color: $accent1;
color: $dark;
background: $light;
transition: background 500ms ease-in-out, color 1s ease-in-out;
pre {
box-shadow: 3px 3px $dark;
border-color: $light;
}
pre.src {
&::before {
background-color: $light;
color: $dark;
}
}
.navbar, header {
background: $bg-nav;
}
.status {
background: $gradient-accent3-light-left;
color: $dark;
}
.tooltip {
border-bottom: 1px dotted $accent3;
.tooltiptext {
background-color: $accent3;
color: $dark;
&::after {
border-color: $accent3 transparent transparent transparent;
}
}
}
.dropdown {
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;
}
}
}
table, th, td {
border: 1px solid $dark;
}
th {
background: darken($light, 5%);
}
.gentree {
filter: invert(0%);
transition: filter 1s ease-in-out;
}
}
.dark, .black {
$bg-nav: $gradient-accent2-dark-right;
$border-color: $dark;
color: $light;
background: $dark;
transition: background 500ms ease-in-out, color 1s ease-in-out;
pre {
box-shadow: 3px 3px $dark;
border: none;
}
pre.src {
&::before {
background-color: $dark;
color: $light;
}
}
.navbar, header {
background: $bg-nav;
}
.status {
background: $gradient-accent2-dark-left;
color: $light;
}
.tooltip {
border-bottom: 1px dotted $accent1;
.tooltiptext {
background-color: $accent1;
color: $light;
&::after {
border-color: $accent1 transparent transparent transparent;
}
}
}
.dropdown {
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;
}
}
}
table, th, td {
border: 1px solid $accent1;
}
th {
background: darken($dark, 2.5%);
}
.gentree {
filter: invert(100%);
transition: filter 1s ease-in-out;
}
}
.black {
$bg-nav: $gradient-accent1-black-right;
background: $black;
pre {
box-shadow: 3px 3px $light;
border: none;
}
pre.src {
&::before {
background-color: $black;
color: $light;
}
}
.navbar, header {
background: $bg-nav;
}
.status {
background: $gradient-accent1-black-left;
}
.dropdown {
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;
}
}
}
table, th, td {
border: 1px solid $light;
}
th {
background: lighten($black, 15%);
}
}
/* Style *********************************************************************/
* {
outline: none;
}
body {
margin: 0;
padding: 0;
font-family: "Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
font-size: 1.2em;
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 {
list-style-type: none;
margin: 0;
padding: 0;
}
}
}
a {
color: currentColor;
text-decoration: none;
}
.navbar {
position: fixed;
top: 0;
z-index: 4;
height: $navbar-height;
width: 100%;
}
.navbar-nav {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 100%;
}
header {
padding: 1em;
margin-top: $navbar-height;
margin-bottom: 1em;
padding-bottom: 6em;
text-align: center;
clip-path: polygon(50% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
transition: background 500ms ease-in-out;
.title {
font-size: 5em;
margin: 0;
@media #{$switch-small-screen} {
font-size: 3em;
}
}
.subtitle {
font-size: 1.2em;
}
}
.dropdown {
position: absolute;
opacity: 0;
z-index: -1;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
display: flex;
align-items: center;
justify-content: space-around;
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 500ms ease-in-out, top 500ms ease-in-out;
}
.has-dropdown {
&:focus-within {
.dropdown {
opacity: 1;
top: $navbar-height;
z-index: 5;
pointer-events: auto;
}
#table-of-contents {
top: $navbar-height / 1.3;
opacity: 1;
z-index: 5;
height: 500%;
pointer-events: auto;
}
}
}
#theme-dropdown {
width: 250px;
flex-direction: row;
transform: translateX(-75%);
}
#drop-page {
flex-direction: column;
transform: translateX(-40%);
li {
padding: 5px;
}
}
#drop-share {
li {
padding: 10px;
}
}
.dropdown-item {
cursor: pointer;
a {
width: 100%;
height: 100%;
size: 0.7rem;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
}
}
#table-of-contents {
flex-direction: column;
padding: 20px;
float: right;
overflow-y: auto;
height: 0%;
width: 75%;
min-width: 350px;
transform: translateX(-45%);
font-size: 0.9em;
top: -40px;
transition: height 500ms ease-in-out, opacity 500ms ease-in-out, top 500ms ease-in-out;
li {
padding: 5px 0;
}
h2 {
font-size: 1.2em;
}
#text-table-of-contents {
height: 100%;
}
}
#content {
padding: 50px;
padding-top: 0;
max-width: 1000px;
margin: 0 auto;
text-align: justify;
a {
font-style: italic;
}
}
#postamble {
display: grid;
grid-template-areas: 'author email date';
@media #{$switch-small-screen} {
grid-template-areas: 'author date' 'email email';
}
@media #{$switch-smaller-screen} {
grid-template-areas: 'author' 'date' 'email';
}
font-size: 0.8em;
align-content: space-evenly;
text-align: center;
p {
margin: 10px 0;
}
.author {
grid-area: author;
}
.email {
grid-area: email;
}
.date {
grid-area: date;
}
}
h1, h2, h3, h4, h5, h6 {
text-align: center;
}
h2 {
font-size: 2.5em;
@media #{$switch-small-screen} {
font-size: 1.75em;
}
}
h3 {
font-size: 2em;
@media #{$switch-small-screen} {
font-size: 1.5em;
}
}
h4 {
font-size: 1.5em;
@media #{$switch-small-screen} {
font-size: 1.3em;
}
}
h5 {
font-size: 1.25em;
@media #{$switch-small-screen} {
font-size: 1.2em;
}
}
.tooltip {
position: relative;
display: inline-block;
.tooltiptext {
visibility: hidden;
margin-left: -60px; /* Half the width */
bottom: 100%;
left: 10%;
padding: 5px 10px;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 5;
&::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
}
}
&:hover {
.tooltiptext {
visibility: visible;
}
}
}
blockquote {
padding: 0;
margin: 20px;
font-style: italic;
}
.largetable {
overflow-y: auto;
margin-top:20px;
margin-bottom: 20px;
}
table {
margin: 0 auto;
}
th, td {
white-space: nowrap;
padding: 10px;
}
img {
max-height: 600px;
max-width: 100%;
}
.figure {
padding: 0;
}
ul {
padding-inline-start: 20px;
}
pre.src {
overflow-y: auto;
}