Separating this website’s backend from its content

The backend has now its own repo, phundrak/org-website-backend

.gitignore

@@ -12,20 +12,6 @@
 *.toc
 _minted*
 auto-generated*
-
-# Files and directories created by pub
-.dart_tool/
-.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/
+swadesh
+tibetan-lexicon-layout
+/ignored-folder/

Dockerfile

@@ -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"]

TODOs.org

@@ -1,30 +0,0 @@
-* TODO Organization of HTML [4/4]
-** DONE Add link to images that don’t 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]

analysis_options.yaml

@@ -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/**

docker-compose.yml

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

headers

@@ -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 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 ###################################################################
 #+MACRO: newline @@latex:\hspace{0pt}\\@@ @@html:<br>@@

pubspec.yaml

@@ -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

start.sh

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

web/.gitignore

@@ -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

web/dart/main.dart

@@ -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();
-  });
-}

web/dart/navbar.dart

@@ -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;
-}

web/dart/parse_sitemap.dart

@@ -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('Couldn’t 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);
-}

web/dart/reorganize_html.dart

@@ -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());
-}

web/dart/theme.dart

@@ -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();
-}

web/style/style.scss

@@ -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;
-
-}