upd: home

Add input-error style for validation feedback

.gitignore

@@ -0,0 +1,28 @@
+
+###> symfony/framework-bundle ###
+/.env
+/.env.local
+/.env.local.php
+/.env.*.local
+/config/secrets/prod/prod.decrypt.private.php
+/public/bundles/
+/var/
+/vendor/
+###< symfony/framework-bundle ###
+
+###> phpunit/phpunit ###
+/phpunit.xml
+.phpunit.result.cache
+###< phpunit/phpunit ###
+
+###> symfony/phpunit-bridge ###
+.phpunit.result.cache
+/phpunit.xml
+###< symfony/phpunit-bridge ###
+
+###> symfony/asset-mapper ###
+/public/assets/
+/assets/vendor/
+###< symfony/asset-mapper ###
+
+/references/

000-default.conf

@@ -0,0 +1,29 @@
+<VirtualHost *:80>
+	# The ServerName directive sets the request scheme, hostname and port that
+	# the server uses to identify itself. This is used when creating
+	# redirection URLs. In the context of virtual hosts, the ServerName
+	# specifies what hostname must appear in the request's Host: header to
+	# match this virtual host. For the default virtual host (this file) this
+	# value is not decisive as it is used as a last resort host regardless.
+	# However, you must set it for any further virtual host explicitly.
+	#ServerName www.example.com
+
+	ServerAdmin webmaster@localhost
+	DocumentRoot /var/www/html/public/index.php
+
+	# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
+	# error, crit, alert, emerg.
+	# It is also possible to configure the loglevel for particular
+	# modules, e.g.
+	#LogLevel info ssl:warn
+
+	ErrorLog ${APACHE_LOG_DIR}/error.log
+	CustomLog ${APACHE_LOG_DIR}/access.log combined
+
+	# For most configuration files from conf-available/, which are
+	# enabled or disabled at a global level, it is possible to
+	# include a line for only one particular virtual host. For example the
+	# following line enables the CGI configuration for this host only
+	# after it has been globally disabled with "a2disconf".
+	#Include conf-available/serve-cgi-bin.conf
+</VirtualHost>

Dockerfile

@@ -0,0 +1,57 @@
+FROM php:8.4-apache
+
+RUN apt update && \
+    apt upgrade -y && \
+    apt install -y \
+    libzip-dev \
+    unzip \
+    libonig-dev \
+    libxml2-dev \
+    libpng-dev \
+    libjpeg-dev \
+    libicu-dev \
+    sqlite3 \
+    curl \
+    git \
+    nano
+
+RUN docker-php-ext-configure gd --with-jpeg
+RUN docker-php-ext-configure zip
+
+RUN docker-php-ext-install \
+    zip \
+    mbstring \
+    exif \
+    pcntl \
+    bcmath \
+    xml \
+    intl
+
+RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" && \
+    php composer-setup.php --install-dir=/usr/local/bin --filename=composer && \
+    php -r "unlink('composer-setup.php');"
+
+RUN curl -sS https://get.symfony.com/cli/installer | bash && \
+    mv /root/.symfony5/bin/symfony /usr/local/bin/symfony
+
+COPY . /var/www/html/
+
+RUN mv 000-default.conf /etc/apache2/sites-available/
+RUN rm /var/www/html/.env*
+RUN rm -rf /var/www/html/var/*
+RUN rm -rf /var/www/html/vendor
+RUN rm -rf /var/www/html/tests
+RUN rm -rf /var/www/html/translations
+
+RUN COMPOSER_ALLOW_SUPERUSER=1 composer install --no-scripts --no-dev --optimize-autoloader
+RUN mkdir /data
+COPY data/data.db /data/data.db
+
+RUN mkdir /var/www/html/var/cache
+RUN mkdir /var/www/html/var/log
+RUN symfony console asset-map:compile
+
+RUN chown -R 33:33 /var/www/html /data
+RUN chmod -R 755 /var/www/html /data
+
+EXPOSE 80

README.md

@@ -1,3 +1,83 @@
 # Sermon Notes
 
-A program to
+A program to take notes during a sermon.  The web app was built with PHP and Symfony.
+
+## ATTN: !!!!BREAKING CHANGE!!!! v1.0 -> v1.1
+
+This was my first publicly available docker container so I did not realize what some decisions would do. If you are upgrading from v1 you first need to save your database OR you will lose all your current notes!! Follow the steps below to do that
+
+1. You need to make sure that you have a running SSH server on your host computer
+2. On your host computer, `docker exec -it sermon-notes bash`
+3. `cd var/`
+4. `scp data.db {user}@{host computer IP}:{path}`
+5. Authenticate with the password
+6. This will copy the file over SFTP to the host computer
+7. After this then you run the `docker run...` command in Step 1 of the `Installation` instructions below, once the container is running you need to copy the `data.db` file into the working directory of the docker container.
+    - For example, if you have `~/docker/sermon-notes` as the path for the container on the host computer, you'll copy the `data.db` to `~/docker/sermon-notes/data`
+
+## Installation
+
+1. Make a directory in your desired docker storage folder (e.g. `~/docker/sermon-notes`), then `cd` into it.
+2. Create a file called `.env` in that folder, no need to add anything to it right now.
+3. Run `docker run -d --name sermon-notes -p 80:80 -v $PWD/data:/data -v $PWD/.env:/var/www/html/.env ryanprather/sermon-notes:latest`, this will download and start the container and keep it running in the background.  If you already have something on port 80 change the first `80` to whatever open port you'd like.
+4. Run `docker exec -it sermon-notes bash install.sh`  This will run an install script to create an .env file specific to your install, populate with the beginning factors, and then run a `composer` command to download the necessary package dependancies.
+5. Once complete you have a running system that you can navigate to in your browser with `http://{ip}:{port}`|`http://{hostname}:{port}`.  Then you just need to register for an account.  The first account that is created is made an admin so that you can access the `Reference Editor` and update any reference material if necessary.
+
+## Operation
+
+This is the home page you're first presented with.
+
+![Home](/assets/images/Home.png)
+
+Create an account with "Register".
+
+![Register](/assets/images/Registration.png)
+
+Once you create an account you'll need to login
+
+![Login](/assets/images/Login.png)
+
+Once you get logged in you'll be presented with the main home page
+
+![HomePage](/assets/images/HomePage.png)
+
+If you are accessing on a regular iPad the menu should be collapsed, if not, you may need to do that.  I built this with a iPad 9th Gen in mind so visibility on another device may vary.
+
+![Header](/assets/images/Header.png)
+
+Across the top you will see a "plus" and "minus" buttons that will increase and decrease the size of font for the reference content.  The 3rd button is to open the Reference opener box.  On the right side you will see the "table" that will open the sermon details portion.  The next button is a preview button to preview the notes you have typed.  The final dropdown is to quickly apply a template for you to start taking notes.
+
+![SermonData](/assets/images/SermonData.png)
+
+These fields are meant to hide because you only need to fill them out once and they are the specifics of the sermon itself (e.g. title, date, speaker, series, and passage)
+
+![Template](/assets/images/Template.png)
+
+The notes you take are done in [Markdown](/docs/markdown-cheat-sheet.md).  In the above example, there is an introduction and 3 bullet points.  Each has a sub-bullet unordered list.  Review the Markdown link above for more tips on how to write Markdown.
+
+When you are done with your Notes it will look something like the following.
+
+![Example](/assets/images/MarkdownExample.png)
+
+The tool is built that it will auto-save every 10 seconds and have a 5 second timeout should you be in a place where you don't have good internet service.  When the tool starts to save you will see an orange checkmark appear next to the "Notes" header above where your typing.  When it is done saving it will turn green and fade away.
+
+I built this tool because I needed a way to take notes and have reference material open next to me.  So I built a reference opener to do just that
+
+![ReferenceOpener](/assets/images/ReferenceOpener.png)
+
+I have added many reference options (Bible, various creeds, Belgic Confession, Heidelberg Catechism, Canons of Dort, Westminster Confession of Faith, Westminster Larger Catechism, or Westminster Short Catechism).  I plan to add others in the future.  Simply select the type then filter to the book/chapter/week of the referenced work and hit "Search".  This will open the reference on the left side of the page.
+
+![References](/assets/images/References.png)
+
+You can switch between the references by clicking the button on the left side.  You can double-tap one of the buttons to remove that reference from the list.
+
+Once a note has been saved, it can be retrieved in two different ways.  You can open the open page (by clicking on the Menu (hamburger) then "Open Notes")
+
+![OpenNotes](/assets/images/OpenNotes.png)
+
+or if the note was recently made you will see the most recent 4 notes listed under the menu
+
+![RecentNotes](/assets/images/RecentNotes.png)
+
+By clicking either of the title links it will open the note and display it for you to edit or read.  I can add "Notes" as future reference content.
+

assets/app.js

@@ -0,0 +1,11 @@
+import './bootstrap.js';
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * This file will be included onto the page via the importmap() Twig function,
+ * which should already be in your base.html.twig.
+ */
+import './styles/app.css';
+const $ = require('jquery');
+
+// console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/bootstrap.js

@@ -0,0 +1,5 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,15 @@
+{
+    "controllers": {
+        "@symfony/ux-turbo": {
+            "turbo-core": {
+                "enabled": true,
+                "fetch": "eager"
+            },
+            "mercure-turbo-stream": {
+                "enabled": false,
+                "fetch": "eager"
+            }
+        }
+    },
+    "entrypoints": []
+}

assets/controllers/hello_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    connect() {
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+    }
+}

assets/css/jquery-ui.structure.css

@@ -0,0 +1,886 @@
+/*!
+ * jQuery UI CSS Framework 1.13.3
+ * https://jqueryui.com
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license.
+ * https://jquery.org/license
+ *
+ * https://api.jqueryui.com/category/theming/
+ */
+.ui-draggable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	-ms-filter: "alpha(opacity=0)"; /* support: IE8 */
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+	pointer-events: none;
+}
+
+
+/* Icons
+----------------------------------*/
+.ui-icon {
+	display: inline-block;
+	vertical-align: middle;
+	margin-top: -.25em;
+	position: relative;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+.ui-widget-icon-block {
+	left: 50%;
+	margin-left: -8px;
+	display: block;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-resizable {
+	position: relative;
+}
+.ui-resizable-handle {
+	position: absolute;
+	font-size: 0.1px;
+	display: block;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-resizable-disabled .ui-resizable-handle,
+.ui-resizable-autohide .ui-resizable-handle {
+	display: none;
+}
+.ui-resizable-n {
+	cursor: n-resize;
+	height: 7px;
+	width: 100%;
+	top: -5px;
+	left: 0;
+}
+.ui-resizable-s {
+	cursor: s-resize;
+	height: 7px;
+	width: 100%;
+	bottom: -5px;
+	left: 0;
+}
+.ui-resizable-e {
+	cursor: e-resize;
+	width: 7px;
+	right: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-w {
+	cursor: w-resize;
+	width: 7px;
+	left: -5px;
+	top: 0;
+	height: 100%;
+}
+.ui-resizable-se {
+	cursor: se-resize;
+	width: 12px;
+	height: 12px;
+	right: 1px;
+	bottom: 1px;
+}
+.ui-resizable-sw {
+	cursor: sw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	bottom: -5px;
+}
+.ui-resizable-nw {
+	cursor: nw-resize;
+	width: 9px;
+	height: 9px;
+	left: -5px;
+	top: -5px;
+}
+.ui-resizable-ne {
+	cursor: ne-resize;
+	width: 9px;
+	height: 9px;
+	right: -5px;
+	top: -5px;
+}
+.ui-selectable {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-selectable-helper {
+	position: absolute;
+	z-index: 100;
+	border: 1px dotted black;
+}
+.ui-sortable-handle {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-accordion .ui-accordion-header {
+	display: block;
+	cursor: pointer;
+	position: relative;
+	margin: 2px 0 0 0;
+	padding: .5em .5em .5em .7em;
+	font-size: 100%;
+}
+.ui-accordion .ui-accordion-content {
+	padding: 1em 2.2em;
+	border-top: 0;
+	overflow: auto;
+}
+.ui-autocomplete {
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: default;
+}
+.ui-menu {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: block;
+	outline: 0;
+}
+.ui-menu .ui-menu {
+	position: absolute;
+}
+.ui-menu .ui-menu-item {
+	margin: 0;
+	cursor: pointer;
+	/* support: IE10, see #8844 */
+	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+}
+.ui-menu .ui-menu-item-wrapper {
+	position: relative;
+	padding: 3px 1em 3px .4em;
+}
+.ui-menu .ui-menu-divider {
+	margin: 5px 0;
+	height: 0;
+	font-size: 0;
+	line-height: 0;
+	border-width: 1px 0 0 0;
+}
+.ui-menu .ui-state-focus,
+.ui-menu .ui-state-active {
+	margin: -1px;
+}
+
+/* icon support */
+.ui-menu-icons {
+	position: relative;
+}
+.ui-menu-icons .ui-menu-item-wrapper {
+	padding-left: 2em;
+}
+
+/* left-aligned */
+.ui-menu .ui-icon {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: .2em;
+	margin: auto 0;
+}
+
+/* right-aligned */
+.ui-menu .ui-menu-icon {
+	left: auto;
+	right: 0;
+}
+.ui-button {
+	padding: .4em 1em;
+	display: inline-block;
+	position: relative;
+	line-height: normal;
+	margin-right: .1em;
+	cursor: pointer;
+	vertical-align: middle;
+	text-align: center;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	/* Support: IE <= 11 */
+	overflow: visible;
+}
+
+.ui-button,
+.ui-button:link,
+.ui-button:visited,
+.ui-button:hover,
+.ui-button:active {
+	text-decoration: none;
+}
+
+/* to make room for the icon, a width needs to be set here */
+.ui-button-icon-only {
+	width: 2em;
+	box-sizing: border-box;
+	text-indent: -9999px;
+	white-space: nowrap;
+}
+
+/* no icon support for input elements */
+input.ui-button.ui-button-icon-only {
+	text-indent: 0;
+}
+
+/* button icon element(s) */
+.ui-button-icon-only .ui-icon {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin-top: -8px;
+	margin-left: -8px;
+}
+
+.ui-button.ui-icon-notext .ui-icon {
+	padding: 0;
+	width: 2.1em;
+	height: 2.1em;
+	text-indent: -9999px;
+	white-space: nowrap;
+
+}
+
+input.ui-button.ui-icon-notext .ui-icon {
+	width: auto;
+	height: auto;
+	text-indent: 0;
+	white-space: normal;
+	padding: .4em 1em;
+}
+
+/* workarounds */
+/* Support: Firefox 5 - 40 */
+input.ui-button::-moz-focus-inner,
+button.ui-button::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+.ui-controlgroup {
+	vertical-align: middle;
+	display: inline-block;
+}
+.ui-controlgroup > .ui-controlgroup-item {
+	float: left;
+	margin-left: 0;
+	margin-right: 0;
+}
+.ui-controlgroup > .ui-controlgroup-item:focus,
+.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
+	z-index: 9999;
+}
+.ui-controlgroup-vertical > .ui-controlgroup-item {
+	display: block;
+	float: none;
+	width: 100%;
+	margin-top: 0;
+	margin-bottom: 0;
+	text-align: left;
+}
+.ui-controlgroup-vertical .ui-controlgroup-item {
+	box-sizing: border-box;
+}
+.ui-controlgroup .ui-controlgroup-label {
+	padding: .4em 1em;
+}
+.ui-controlgroup .ui-controlgroup-label span {
+	font-size: 80%;
+}
+.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
+	border-left: none;
+}
+.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
+	border-top: none;
+}
+.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
+	border-right: none;
+}
+.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
+	border-bottom: none;
+}
+
+/* Spinner specific style fixes */
+.ui-controlgroup-vertical .ui-spinner-input {
+
+	/* Support: IE8 only, Android < 4.4 only */
+	width: 75%;
+	width: calc( 100% - 2.4em );
+}
+.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
+	border-top-style: solid;
+}
+
+.ui-checkboxradio-label .ui-icon-background {
+	box-shadow: inset 1px 1px 1px #ccc;
+	border-radius: .12em;
+	border: none;
+}
+.ui-checkboxradio-radio-label .ui-icon-background {
+	width: 16px;
+	height: 16px;
+	border-radius: 1em;
+	overflow: visible;
+	border: none;
+}
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
+	background-image: none;
+	width: 8px;
+	height: 8px;
+	border-width: 4px;
+	border-style: solid;
+}
+.ui-checkboxradio-disabled {
+	pointer-events: none;
+}
+.ui-datepicker {
+	width: 17em;
+	padding: .2em .2em 0;
+	display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+	position: relative;
+	padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+	position: absolute;
+	top: 2px;
+	width: 1.8em;
+	height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+	top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+	left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+	right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+	left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+	right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	margin-left: -8px;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+	margin: 0 2.3em;
+	line-height: 1.8em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+	font-size: 1em;
+	margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+	width: 45%;
+}
+.ui-datepicker table {
+	width: 100%;
+	font-size: .9em;
+	border-collapse: collapse;
+	margin: 0 0 .4em;
+}
+.ui-datepicker th {
+	padding: .7em .3em;
+	text-align: center;
+	font-weight: bold;
+	border: 0;
+}
+.ui-datepicker td {
+	border: 0;
+	padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+	display: block;
+	padding: .2em;
+	text-align: right;
+	text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+	background-image: none;
+	margin: .7em 0 0 0;
+	padding: 0 .2em;
+	border-left: 0;
+	border-right: 0;
+	border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+	float: right;
+	margin: .5em .2em .4em;
+	cursor: pointer;
+	padding: .2em .6em .3em .6em;
+	width: auto;
+	overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+	float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+	width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+	float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+	width: 95%;
+	margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+	width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+	width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+	width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+	border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+	clear: left;
+}
+.ui-datepicker-row-break {
+	clear: both;
+	width: 100%;
+	font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+	direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+	right: 2px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+	left: 2px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+	right: 1px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+	left: 1px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+	clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+	float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+	float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+	border-right-width: 0;
+	border-left-width: 1px;
+}
+
+/* Icons */
+.ui-datepicker .ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+	left: .5em;
+	top: .3em;
+}
+.ui-dialog {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: .2em;
+	outline: 0;
+}
+.ui-dialog .ui-dialog-titlebar {
+	padding: .4em 1em;
+	position: relative;
+}
+.ui-dialog .ui-dialog-title {
+	float: left;
+	margin: .1em 0;
+	white-space: nowrap;
+	width: 90%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.ui-dialog .ui-dialog-titlebar-close {
+	position: absolute;
+	right: .3em;
+	top: 50%;
+	width: 20px;
+	margin: -10px 0 0 0;
+	padding: 1px;
+	height: 20px;
+}
+.ui-dialog .ui-dialog-content {
+	position: relative;
+	border: 0;
+	padding: .5em 1em;
+	background: none;
+	overflow: auto;
+}
+.ui-dialog .ui-dialog-buttonpane {
+	text-align: left;
+	border-width: 1px 0 0 0;
+	background-image: none;
+	margin-top: .5em;
+	padding: .3em 1em .5em .4em;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+	float: right;
+}
+.ui-dialog .ui-dialog-buttonpane button {
+	margin: .5em .4em .5em 0;
+	cursor: pointer;
+}
+.ui-dialog .ui-resizable-n {
+	height: 2px;
+	top: 0;
+}
+.ui-dialog .ui-resizable-e {
+	width: 2px;
+	right: 0;
+}
+.ui-dialog .ui-resizable-s {
+	height: 2px;
+	bottom: 0;
+}
+.ui-dialog .ui-resizable-w {
+	width: 2px;
+	left: 0;
+}
+.ui-dialog .ui-resizable-se,
+.ui-dialog .ui-resizable-sw,
+.ui-dialog .ui-resizable-ne,
+.ui-dialog .ui-resizable-nw {
+	width: 7px;
+	height: 7px;
+}
+.ui-dialog .ui-resizable-se {
+	right: 0;
+	bottom: 0;
+}
+.ui-dialog .ui-resizable-sw {
+	left: 0;
+	bottom: 0;
+}
+.ui-dialog .ui-resizable-ne {
+	right: 0;
+	top: 0;
+}
+.ui-dialog .ui-resizable-nw {
+	left: 0;
+	top: 0;
+}
+.ui-draggable .ui-dialog-titlebar {
+	cursor: move;
+}
+.ui-progressbar {
+	height: 2em;
+	text-align: left;
+	overflow: hidden;
+}
+.ui-progressbar .ui-progressbar-value {
+	margin: -1px;
+	height: 100%;
+}
+.ui-progressbar .ui-progressbar-overlay {
+	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
+	height: 100%;
+	-ms-filter: "alpha(opacity=25)"; /* support: IE8 */
+	opacity: 0.25;
+}
+.ui-progressbar-indeterminate .ui-progressbar-value {
+	background-image: none;
+}
+.ui-selectmenu-menu {
+	padding: 0;
+	margin: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+.ui-selectmenu-menu .ui-menu {
+	overflow: auto;
+	overflow-x: hidden;
+	padding-bottom: 1px;
+}
+.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
+	font-size: 1em;
+	font-weight: bold;
+	line-height: 1.5;
+	padding: 2px 0.4em;
+	margin: 0.5em 0 0 0;
+	height: auto;
+	border: 0;
+}
+.ui-selectmenu-open {
+	display: block;
+}
+.ui-selectmenu-text {
+	display: block;
+	margin-right: 20px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.ui-selectmenu-button.ui-button {
+	text-align: left;
+	white-space: nowrap;
+	width: 14em;
+}
+.ui-selectmenu-icon.ui-icon {
+	float: right;
+	margin-top: 0;
+}
+.ui-slider {
+	position: relative;
+	text-align: left;
+}
+.ui-slider .ui-slider-handle {
+	position: absolute;
+	z-index: 2;
+	width: 1.2em;
+	height: 1.2em;
+	cursor: pointer;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.ui-slider .ui-slider-range {
+	position: absolute;
+	z-index: 1;
+	font-size: .7em;
+	display: block;
+	border: 0;
+	background-position: 0 0;
+}
+
+/* support: IE8 - See #6727 */
+.ui-slider.ui-state-disabled .ui-slider-handle,
+.ui-slider.ui-state-disabled .ui-slider-range {
+	filter: inherit;
+}
+
+.ui-slider-horizontal {
+	height: .8em;
+}
+.ui-slider-horizontal .ui-slider-handle {
+	top: -.3em;
+	margin-left: -.6em;
+}
+.ui-slider-horizontal .ui-slider-range {
+	top: 0;
+	height: 100%;
+}
+.ui-slider-horizontal .ui-slider-range-min {
+	left: 0;
+}
+.ui-slider-horizontal .ui-slider-range-max {
+	right: 0;
+}
+
+.ui-slider-vertical {
+	width: .8em;
+	height: 100px;
+}
+.ui-slider-vertical .ui-slider-handle {
+	left: -.3em;
+	margin-left: 0;
+	margin-bottom: -.6em;
+}
+.ui-slider-vertical .ui-slider-range {
+	left: 0;
+	width: 100%;
+}
+.ui-slider-vertical .ui-slider-range-min {
+	bottom: 0;
+}
+.ui-slider-vertical .ui-slider-range-max {
+	top: 0;
+}
+.ui-spinner {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+	padding: 0;
+	vertical-align: middle;
+}
+.ui-spinner-input {
+	border: none;
+	background: none;
+	color: inherit;
+	padding: .222em 0;
+	margin: .2em 0;
+	vertical-align: middle;
+	margin-left: .4em;
+	margin-right: 2em;
+}
+.ui-spinner-button {
+	width: 1.6em;
+	height: 50%;
+	font-size: .5em;
+	padding: 0;
+	margin: 0;
+	text-align: center;
+	position: absolute;
+	cursor: default;
+	display: block;
+	overflow: hidden;
+	right: 0;
+}
+/* more specificity required here to override default borders */
+.ui-spinner a.ui-spinner-button {
+	border-top-style: none;
+	border-bottom-style: none;
+	border-right-style: none;
+}
+.ui-spinner-up {
+	top: 0;
+}
+.ui-spinner-down {
+	bottom: 0;
+}
+.ui-tabs {
+	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+	padding: .2em;
+}
+.ui-tabs .ui-tabs-nav {
+	margin: 0;
+	padding: .2em .2em 0;
+}
+.ui-tabs .ui-tabs-nav li {
+	list-style: none;
+	float: left;
+	position: relative;
+	top: 0;
+	margin: 1px .2em 0 0;
+	border-bottom-width: 0;
+	padding: 0;
+	white-space: nowrap;
+}
+.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
+	float: left;
+	padding: .5em 1em;
+	text-decoration: none;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active {
+	margin-bottom: -1px;
+	padding-bottom: 1px;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
+.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
+.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
+	cursor: text;
+}
+.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
+	cursor: pointer;
+}
+.ui-tabs .ui-tabs-panel {
+	display: block;
+	border-width: 0;
+	padding: 1em 1.4em;
+	background: none;
+}
+.ui-tooltip {
+	padding: 8px;
+	position: absolute;
+	z-index: 9999;
+	max-width: 300px;
+}
+body .ui-tooltip {
+	border-width: 2px;
+}

assets/css/login.css

@@ -0,0 +1,60 @@
+/* Container div */
+.container {
+    margin: auto;
+    max-width: 800px;
+}
+
+/* Header */
+header {
+    /* background-color: #333; */
+    color: white;
+    padding: 1rem;
+    text-align: center;
+}
+
+/* Form */
+form {
+    margin: auto;
+    max-width: 800px;
+}
+
+/* Fieldset */
+fieldset {
+    background-color: #f0f0f0;
+    padding: 1rem;
+}
+
+/* Labels */
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+/* Inputs */
+input[type="text"],
+input[type="password"] {
+    background-color: #f8f8f8;
+    border: none;
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+    color: #333;
+    padding: 0.25rem;
+}
+
+/* Buttons */
+button {
+    background-color: #4CAF50;
+    border: none;
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+    color: white;
+    padding: 0.25rem;
+}
+
+/* Footer */
+footer {
+    background-color: #333;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+}

assets/css/register.css

@@ -0,0 +1,60 @@
+/* Container div */
+.container {
+    margin: auto;
+    max-width: 800px;
+}
+
+/* Header */
+header {
+    /* background-color: #333; */
+    color: white;
+    padding: 1rem;
+    text-align: center;
+}
+
+/* Form */
+form {
+    margin: auto;
+    max-width: 800px;
+}
+
+/* Fieldset */
+fieldset {
+    background-color: #f0f0f0;
+    padding: 1rem;
+}
+
+/* Labels */
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+/* Inputs */
+input[type="text"],
+input[type="password"] {
+    background-color: #f8f8f8;
+    border: none;
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+    color: #333;
+    padding: 0.25rem;
+}
+
+/* Buttons */
+button {
+    background-color: #4CAF50;
+    border: none;
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
+    color: white;
+    padding: 0.25rem;
+}
+
+/* Footer */
+footer {
+    background-color: #333;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+}

assets/js/breakpoints.min.js

@@ -0,0 +1,2 @@
+/* breakpoints.js v1.0 | @ajlkn | MIT licensed */
+var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e<t.events.length;e++)n=t.events[e],t.active(n.query)?n.state||(n.state=!0,n.handler()):n.state&&(n.state=!1)}};return e._=t,e.on=function(e,n){t.on(e,n)},e.active=function(e){return t.active(e)},e}();!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.breakpoints=t()}(this,function(){return breakpoints});

assets/js/browser.min.js

@@ -0,0 +1,2 @@
+/* browser.js v1.0.1 | @ajlkn | MIT licensed */
+var browser=function(){"use strict";var t={name:null,version:null,os:null,osVersion:null,touch:null,mobile:null,_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,r=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+r in n||"Webkit"+r in n||"O"+r in n||"ms"+r in n},init:function(){for(var e=navigator.userAgent,n="other",r=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],o=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(RegExp.$1);break}for(t.name=n,t.version=r,n="other",i=[["ios",/([0-9_]+) like Mac OS X/,function(e){return e.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(e){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(e){return e.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null],["linux",/Linux/,null],["bsd",/BSD/,null],["unix",/X11/,null]],o=r=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(i[o][2]?i[o][2](RegExp.$1):RegExp.$1);break}"mac"==n&&"ontouchstart"in window&&(1024==screen.width&&1366==screen.height||834==screen.width&&1112==screen.height||810==screen.width&&1080==screen.height||768==screen.width&&1024==screen.height)&&(n="ios"),t.os=n,t.osVersion=r,t.touch="wp"==t.os?0<navigator.msMaxTouchPoints:!!("ontouchstart"in window),t.mobile="wp"==t.os||"android"==t.os||"ios"==t.os||"bb"==t.os}};return t.init(),t}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser});

assets/js/login.js

@@ -0,0 +1,23 @@
+// script.js
+
+const form = document.querySelector('form');
+const usernameInput = document.querySelector('#username');
+const passwordInput = document.querySelector('#password');
+
+function handleFormSubmit(event) {
+    event.preventDefault();
+
+    const username = usernameInput.value;
+    const password = passwordInput.value;
+
+    if (username === '' || password === '') {
+        alert('Please enter a valid username and password.');
+        return false;
+    }
+
+    // Send an AJAX request to the server with the form data
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', 'https://example.com/login', true);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xhr.send(`username=${username}&password=${password}`);
+}

assets/js/main.js

@@ -0,0 +1,262 @@
+/*
+    Editorial by HTML5 UP
+    html5up.net | @ajlkn
+    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+(function ($) {
+
+    var $window = $(window),
+        $head = $('head'),
+        $body = $('body');
+
+    // Breakpoints.
+    breakpoints({
+        xlarge: ['1281px', '1680px'],
+        large: ['981px', '1280px'],
+        medium: ['737px', '980px'],
+        small: ['481px', '736px'],
+        xsmall: ['361px', '480px'],
+        xxsmall: [null, '360px'],
+        'xlarge-to-max': '(min-width: 1681px)',
+        'small-to-xlarge': '(min-width: 481px) and (max-width: 1680px)'
+    });
+
+    // Stops animations/transitions until the page has ...
+
+    // ... loaded.
+    $window.on('load', function () {
+        window.setTimeout(function () {
+            $body.removeClass('is-preload');
+        }, 100);
+    });
+
+    // ... stopped resizing.
+    var resizeTimeout;
+
+    $window.on('resize', function () {
+
+        // Mark as resizing.
+        $body.addClass('is-resizing');
+
+        // Unmark after delay.
+        clearTimeout(resizeTimeout);
+
+        resizeTimeout = setTimeout(function () {
+            $body.removeClass('is-resizing');
+        }, 100);
+
+    });
+
+    // Fixes.
+
+    // Object fit images.
+    if (!browser.canUse('object-fit')
+        || browser.name == 'safari')
+        $('.image.object').each(function () {
+
+            var $this = $(this),
+                $img = $this.children('img');
+
+            // Hide original image.
+            $img.css('opacity', '0');
+
+            // Set background.
+            $this
+                .css('background-image', 'url("' + $img.attr('src') + '")')
+                .css('background-size', $img.css('object-fit') ? $img.css('object-fit') : 'cover')
+                .css('background-position', $img.css('object-position') ? $img.css('object-position') : 'center');
+
+        });
+
+    // Sidebar.
+    var $sidebar = $('#sidebar'),
+        $sidebar_inner = $sidebar.children('.inner');
+
+    // Inactive by default on <= large.
+    breakpoints.on('<=large', function () {
+        $sidebar.addClass('inactive');
+    });
+
+    breakpoints.on('>large', function () {
+        $sidebar.removeClass('inactive');
+    });
+
+    // Hack: Workaround for Chrome/Android scrollbar position bug.
+    if (browser.os == 'android'
+        && browser.name == 'chrome')
+        $('<style>#sidebar .inner::-webkit-scrollbar { display: none; }</style>')
+            .appendTo($head);
+
+    // Toggle.
+    $('<a href="#sidebar" class="toggle">Toggle</a>')
+        .appendTo($sidebar)
+        .on('click', function (event) {
+
+            // Prevent default.
+            event.preventDefault();
+            event.stopPropagation();
+
+            // Toggle.
+            $sidebar.toggleClass('inactive');
+
+        });
+
+    // Events.
+
+    // Link clicks.
+    $sidebar.on('click', 'a', function (event) {
+
+        // >large? Bail.
+        if (breakpoints.active('>large'))
+            return;
+
+        // Vars.
+        var $a = $(this),
+            href = $a.attr('href'),
+            target = $a.attr('target');
+
+        // Prevent default.
+        event.preventDefault();
+        event.stopPropagation();
+
+        // Check URL.
+        if (!href || href == '#' || href == '')
+            return;
+
+        // Hide sidebar.
+        $sidebar.addClass('inactive');
+
+        // Redirect to href.
+        setTimeout(function () {
+
+            if (target == '_blank')
+                window.open(href);
+            else
+                window.location.href = href;
+
+        }, 500);
+
+    });
+
+    // Prevent certain events inside the panel from bubbling.
+    $sidebar.on('click touchend touchstart touchmove', function (event) {
+
+        // >large? Bail.
+        if (breakpoints.active('>large'))
+            return;
+
+        // Prevent propagation.
+        event.stopPropagation();
+
+    });
+
+    // Hide panel on body click/tap.
+    $body.on('click touchend', function (event) {
+
+        // >large? Bail.
+        if (breakpoints.active('>large'))
+            return;
+
+        // Deactivate.
+        $sidebar.addClass('inactive');
+
+    });
+
+    // Scroll lock.
+    // Note: If you do anything to change the height of the sidebar's content, be sure to
+    // trigger 'resize.sidebar-lock' on $window so stuff doesn't get out of sync.
+
+    $window.on('load.sidebar-lock', function () {
+
+        var sh, wh, st;
+
+        // Reset scroll position to 0 if it's 1.
+        if ($window.scrollTop() == 1)
+            $window.scrollTop(0);
+
+        $window
+            .on('scroll.sidebar-lock', function () {
+
+                var x, y;
+
+                // <=large? Bail.
+                if (breakpoints.active('<=large')) {
+
+                    $sidebar_inner
+                        .data('locked', 0)
+                        .css('position', '')
+                        .css('top', '');
+
+                    return;
+
+                }
+
+                // Calculate positions.
+                x = Math.max(sh - wh, 0);
+                y = Math.max(0, $window.scrollTop() - x);
+
+                // Lock/unlock.
+                if ($sidebar_inner.data('locked') == 1) {
+
+                    if (y <= 0)
+                        $sidebar_inner
+                            .data('locked', 0)
+                            .css('position', '')
+                            .css('top', '');
+                    else
+                        $sidebar_inner
+                            .css('top', -1 * x);
+
+                }
+                else {
+
+                    if (y > 0)
+                        $sidebar_inner
+                            .data('locked', 1)
+                            .css('position', 'fixed')
+                            .css('top', -1 * x);
+
+                }
+
+            })
+            .on('resize.sidebar-lock', function () {
+
+                // Calculate heights.
+                wh = $window.height();
+                sh = $sidebar_inner.outerHeight() + 30;
+
+                // Trigger scroll.
+                $window.trigger('scroll.sidebar-lock');
+
+            })
+            .trigger('resize.sidebar-lock');
+
+    });
+
+    // Menu.
+    var $menu = $('#menu'),
+        $menu_openers = $menu.children('ul').find('.opener');
+
+    // Openers.
+    $menu_openers.each(function () {
+
+        var $this = $(this);
+
+        $this.on('click', function (event) {
+
+            // Prevent default.
+            event.preventDefault();
+
+            // Toggle.
+            $menu_openers.not($this).removeClass('active');
+            $this.toggleClass('active');
+
+            // Trigger resize (sidebar lock).
+            $window.triggerHandler('resize.sidebar-lock');
+
+        });
+
+    });
+
+})(jQuery);

assets/js/reference.js

@@ -0,0 +1,85 @@
+/**
+ * Retrieves the reference type from the server and populates the reference series dropdown.
+ *
+ * @param {HTMLElement} el - The element that triggered the function.
+ * @return {Promise} A promise that resolves with the response from the server.
+ */
+export function retrieveReferenceType(el) {
+    fetch('/reference/' + el.value, {
+        method: 'GET',
+        header: {
+            'Content-Type': 'application/json'
+        }
+    })
+        .then(response => response.json())
+        .then(results => {
+            document.querySelector('#referenceSeries').innerHTML = '';
+            var none = document.createElement('option');
+            none.value = '';
+            none.text = '-- Select --';
+            document.querySelector('#referenceSeries').appendChild(none);
+
+            for (var x in results) {
+                var newSeries = document.createElement('option');
+                newSeries.value = results[x].id;
+                newSeries.text = results[x].label;
+                document.querySelector('#referenceSeries').appendChild(newSeries);
+            }
+        });
+}
+
+/**
+ * Retrieves a reference based on the provided element value.
+ *
+ * @param {Element} el - The element triggering the reference retrieval
+ * @return {void} No return value
+ */
+export function retrieveReference(el) {
+    if (el.value == 'new') {
+        document.querySelector('#refName').style.display = 'inline-block';
+        return;
+    }
+    fetch('/get-reference', {
+        method: "POST",
+        header: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            id: el.value
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            document.querySelector('#reference').value = results.text;
+        });
+}
+
+/**
+ * Saves a reference by sending a POST request to the server with the selected type,
+ * file, and text values. Displays an alert with the response message, and clears
+ * the reference and file input fields.
+ *
+ * @return {Promise} A Promise that resolves with the response message from the server.
+ */
+export function saveReference() {
+    let ref = document.querySelector('#referenceSeries');
+    let cont = document.querySelector('#reference');
+    fetch('/save-reference', {
+        method: 'POST',
+        header: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            refId: ref.value,
+            text: cont.value
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            //alert(results.msg);
+
+            document.querySelector('#reference').value = '';
+            document.querySelector('#referenceType').value = '';
+            document.querySelector('#referenceSeries').value = '';
+        });
+}

assets/js/register.js

@@ -0,0 +1,48 @@
+// Get references to the form elements
+const nameInput = document.getElementById("registration_form_name");
+const emailInput = document.getElementById("registration_form_email");
+const passwordInput = document.getElementById("registration_form_plainPassword");
+const csrfToken = document.getElementById("registration_form__token").value;
+
+// Add event listeners to the form
+const registerBtn = document.querySelector("#register-btn");
+registerBtn.addEventListener("click", handleSubmit);
+
+// Function to handle form submission
+function handleSubmit(event) {
+    // Prevent default form submission behavior
+    event.preventDefault();
+
+    // Validate input
+    const name = nameInput.value;
+    const email = emailInput.value;
+    const password = passwordInput.value;
+
+    if (name === "" || email === "" || password === "") {
+        alert("Please fill in all fields.");
+        return;
+    }
+
+    // Send data to server for processing
+    const data = {
+        "name": name,
+        "email": email,
+        "plainPassword": password,
+        "_token": csrfToken
+    };
+
+    fetch("/register", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    })
+        .then((response) => response.json())
+        .then((data) => {
+            console.log("User registration successful.");
+        })
+        .catch((error) => {
+            console.error("Error registering user:", error);
+        });
+}

assets/js/site.js

@@ -0,0 +1,116 @@
+export function initHome() {
+    setHeight();
+    setBooks();
+    setEventListeners();
+    $('#note-table').DataTable({
+        paging: false,
+        ajax: {
+            url: '/get-notes',
+            type: 'POST'
+        },
+        columns: [
+            { data: 'link' },
+            { data: 'speaker.name' },
+            { data: 'passage' },
+            {
+                data: 'date.date',
+                render: DataTable.render.date("L")
+            },
+        ]
+    });
+    $('#shareBtn').on('click', openShareNote);
+    $('#modal-backdrop').on('click', closeShareNote);
+}
+
+/**
+ * Fetches data from '/js/data.json', assigns it to BOOKS, and handles errors.
+ *
+ * @return {void}
+ */
+export function setBooks() {
+    fetch('js/data.json')
+        .then((res) => {
+            if (!res.ok) {
+                throw new Error('HTTP Error: Status: ${res.status}');
+            }
+            return res.json();
+        })
+        .then((data) => {
+            BOOKS = data;
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+}
+
+/**
+ * Sets event listeners for keyup events on the document and the '#notes' element.
+ *
+ * @return {void}
+ */
+export function setEventListeners() {
+    document.addEventListener('keyup', function (event) {
+        if (event.key == "F3") {
+            openRef(false);
+        }
+    });
+
+    document.querySelector('#notes').addEventListener('keyup', function (event) {
+        let key = event.keyCode;
+
+        if (key >= 48 && key <= 90 || key >= 96 && key <= 111 || key >= 186 && key <= 222) {
+            textDirty = true;
+            document.querySelector('#note-header-left h2').classList.add('dirty');
+        }
+    });
+}
+
+/**
+ * Sets the height of various elements on the page based on the window's inner height.
+ * Also initializes a datepicker and event listener for the search input field.
+ *
+ * @return {void}
+ */
+export function setHeight() {
+    md = new markdownit({
+        html: true,
+        linkify: true,
+        breaks: true
+    });
+
+    var body = document.querySelector('body');
+    body.style.height = window.innerHeight + 'px';
+
+    var cont = document.querySelector('#main');
+    cont.style.height = (window.innerHeight) + 'px';
+
+    var tabs = document.querySelector('.ref-tab');
+    tabs.style.height = (window.innerHeight - 13) + 'px';
+
+    var ref = document.querySelector('.ref');
+    ref.style.height = (window.innerHeight - 60) + 'px';
+
+    var noteList = document.querySelector('#note-list');
+    noteList.style.height = (window.innerHeight - 60) + 'px';
+
+    var notes = document.querySelector('.notes');
+    notes.style.height = (window.innerHeight - 60) + 'px';
+
+    var notePreview = document.querySelector('#notePreview');
+    notePreview.style.height = (window.innerHeight - 50) + 'px';
+
+    if ($('#noteDate')) {
+        $('#noteDate').datepicker();
+    }
+
+    if ($('#query')) {
+        document.querySelector('#query').addEventListener('keyup', function (event) {
+            if (event.key == "Enter") {
+                search();
+            }
+        });
+    }
+    if (!to) {
+        to = setTimeout(saveNote, saveInterval);
+    }
+}

assets/js/template.js

@@ -0,0 +1,49 @@
+/**
+ * Retrieves a template from the server and sets it as the value of a specified destination element.
+ *
+ * @param {string} orig - The ID of the element containing the original template value.
+ * @param {string} dest - The ID of the destination element where the retrieved template will be set.
+ * @return {Promise} A Promise that resolves when the template is successfully retrieved and set as the value of the destination element.
+ */
+export function retrieveTemplate(orig, dest) {
+    const temp = document.querySelector('#' + orig);
+    if (temp.value == '0') {
+        document.querySelector('#' + dest).value = '';
+        return;
+    }
+    fetch('/retrieve-template', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'plain/text'
+        },
+        body: JSON.stringify({
+            'template': temp.value
+        })
+    })
+        .then(response => response.text())
+        .then(results => {
+            const div = document.querySelector('#' + dest);
+            div.value = results;
+        });
+}
+
+/**
+ * Saves the template by sending a POST request to the server with template data.
+ */
+export function saveTemplate() {
+    fetch('/save-template', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'plain/text'
+        },
+        body: JSON.stringify({
+            'template_id': document.querySelector('#template_id').value,
+            'template_name': document.querySelector('#template_name').value,
+            'template_value': document.querySelector('#template_value').value,
+        })
+    })
+        .then(response => response.text())
+        .then(results => {
+            alert(results);
+        });
+}

assets/js/util.js

@@ -0,0 +1,587 @@
+(function($) {
+
+	/**
+	 * Generate an indented list of links from a nav. Meant for use with panel().
+	 * @return {jQuery} jQuery object.
+	 */
+	$.fn.navList = function() {
+
+		var	$this = $(this);
+			$a = $this.find('a'),
+			b = [];
+
+		$a.each(function() {
+
+			var	$this = $(this),
+				indent = Math.max(0, $this.parents('li').length - 1),
+				href = $this.attr('href'),
+				target = $this.attr('target');
+
+			b.push(
+				'<a ' +
+					'class="link depth-' + indent + '"' +
+					( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
+					( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
+				'>' +
+					'<span class="indent-' + indent + '"></span>' +
+					$this.text() +
+				'</a>'
+			);
+
+		});
+
+		return b.join('');
+
+	};
+
+	/**
+	 * Panel-ify an element.
+	 * @param {object} userConfig User config.
+	 * @return {jQuery} jQuery object.
+	 */
+	$.fn.panel = function(userConfig) {
+
+		// No elements?
+			if (this.length == 0)
+				return $this;
+
+		// Multiple elements?
+			if (this.length > 1) {
+
+				for (var i=0; i < this.length; i++)
+					$(this[i]).panel(userConfig);
+
+				return $this;
+
+			}
+
+		// Vars.
+			var	$this = $(this),
+				$body = $('body'),
+				$window = $(window),
+				id = $this.attr('id'),
+				config;
+
+		// Config.
+			config = $.extend({
+
+				// Delay.
+					delay: 0,
+
+				// Hide panel on link click.
+					hideOnClick: false,
+
+				// Hide panel on escape keypress.
+					hideOnEscape: false,
+
+				// Hide panel on swipe.
+					hideOnSwipe: false,
+
+				// Reset scroll position on hide.
+					resetScroll: false,
+
+				// Reset forms on hide.
+					resetForms: false,
+
+				// Side of viewport the panel will appear.
+					side: null,
+
+				// Target element for "class".
+					target: $this,
+
+				// Class to toggle.
+					visibleClass: 'visible'
+
+			}, userConfig);
+
+			// Expand "target" if it's not a jQuery object already.
+				if (typeof config.target != 'jQuery')
+					config.target = $(config.target);
+
+		// Panel.
+
+			// Methods.
+				$this._hide = function(event) {
+
+					// Already hidden? Bail.
+						if (!config.target.hasClass(config.visibleClass))
+							return;
+
+					// If an event was provided, cancel it.
+						if (event) {
+
+							event.preventDefault();
+							event.stopPropagation();
+
+						}
+
+					// Hide.
+						config.target.removeClass(config.visibleClass);
+
+					// Post-hide stuff.
+						window.setTimeout(function() {
+
+							// Reset scroll position.
+								if (config.resetScroll)
+									$this.scrollTop(0);
+
+							// Reset forms.
+								if (config.resetForms)
+									$this.find('form').each(function() {
+										this.reset();
+									});
+
+						}, config.delay);
+
+				};
+
+			// Vendor fixes.
+				$this
+					.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
+					.css('-webkit-overflow-scrolling', 'touch');
+
+			// Hide on click.
+				if (config.hideOnClick) {
+
+					$this.find('a')
+						.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
+
+					$this
+						.on('click', 'a', function(event) {
+
+							var $a = $(this),
+								href = $a.attr('href'),
+								target = $a.attr('target');
+
+							if (!href || href == '#' || href == '' || href == '#' + id)
+								return;
+
+							// Cancel original event.
+								event.preventDefault();
+								event.stopPropagation();
+
+							// Hide panel.
+								$this._hide();
+
+							// Redirect to href.
+								window.setTimeout(function() {
+
+									if (target == '_blank')
+										window.open(href);
+									else
+										window.location.href = href;
+
+								}, config.delay + 10);
+
+						});
+
+				}
+
+			// Event: Touch stuff.
+				$this.on('touchstart', function(event) {
+
+					$this.touchPosX = event.originalEvent.touches[0].pageX;
+					$this.touchPosY = event.originalEvent.touches[0].pageY;
+
+				})
+
+				$this.on('touchmove', function(event) {
+
+					if ($this.touchPosX === null
+					||	$this.touchPosY === null)
+						return;
+
+					var	diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
+						diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
+						th = $this.outerHeight(),
+						ts = ($this.get(0).scrollHeight - $this.scrollTop());
+
+					// Hide on swipe?
+						if (config.hideOnSwipe) {
+
+							var result = false,
+								boundary = 20,
+								delta = 50;
+
+							switch (config.side) {
+
+								case 'left':
+									result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
+									break;
+
+								case 'right':
+									result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
+									break;
+
+								case 'top':
+									result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
+									break;
+
+								case 'bottom':
+									result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
+									break;
+
+								default:
+									break;
+
+							}
+
+							if (result) {
+
+								$this.touchPosX = null;
+								$this.touchPosY = null;
+								$this._hide();
+
+								return false;
+
+							}
+
+						}
+
+					// Prevent vertical scrolling past the top or bottom.
+						if (($this.scrollTop() < 0 && diffY < 0)
+						|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
+
+							event.preventDefault();
+							event.stopPropagation();
+
+						}
+
+				});
+
+			// Event: Prevent certain events inside the panel from bubbling.
+				$this.on('click touchend touchstart touchmove', function(event) {
+					event.stopPropagation();
+				});
+
+			// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
+				$this.on('click', 'a[href="#' + id + '"]', function(event) {
+
+					event.preventDefault();
+					event.stopPropagation();
+
+					config.target.removeClass(config.visibleClass);
+
+				});
+
+		// Body.
+
+			// Event: Hide panel on body click/tap.
+				$body.on('click touchend', function(event) {
+					$this._hide(event);
+				});
+
+			// Event: Toggle.
+				$body.on('click', 'a[href="#' + id + '"]', function(event) {
+
+					event.preventDefault();
+					event.stopPropagation();
+
+					config.target.toggleClass(config.visibleClass);
+
+				});
+
+		// Window.
+
+			// Event: Hide on ESC.
+				if (config.hideOnEscape)
+					$window.on('keydown', function(event) {
+
+						if (event.keyCode == 27)
+							$this._hide(event);
+
+					});
+
+		return $this;
+
+	};
+
+	/**
+	 * Apply "placeholder" attribute polyfill to one or more forms.
+	 * @return {jQuery} jQuery object.
+	 */
+	$.fn.placeholder = function() {
+
+		// Browser natively supports placeholders? Bail.
+			if (typeof (document.createElement('input')).placeholder != 'undefined')
+				return $(this);
+
+		// No elements?
+			if (this.length == 0)
+				return $this;
+
+		// Multiple elements?
+			if (this.length > 1) {
+
+				for (var i=0; i < this.length; i++)
+					$(this[i]).placeholder();
+
+				return $this;
+
+			}
+
+		// Vars.
+			var $this = $(this);
+
+		// Text, TextArea.
+			$this.find('input[type=text],textarea')
+				.each(function() {
+
+					var i = $(this);
+
+					if (i.val() == ''
+					||  i.val() == i.attr('placeholder'))
+						i
+							.addClass('polyfill-placeholder')
+							.val(i.attr('placeholder'));
+
+				})
+				.on('blur', function() {
+
+					var i = $(this);
+
+					if (i.attr('name').match(/-polyfill-field$/))
+						return;
+
+					if (i.val() == '')
+						i
+							.addClass('polyfill-placeholder')
+							.val(i.attr('placeholder'));
+
+				})
+				.on('focus', function() {
+
+					var i = $(this);
+
+					if (i.attr('name').match(/-polyfill-field$/))
+						return;
+
+					if (i.val() == i.attr('placeholder'))
+						i
+							.removeClass('polyfill-placeholder')
+							.val('');
+
+				});
+
+		// Password.
+			$this.find('input[type=password]')
+				.each(function() {
+
+					var i = $(this);
+					var x = $(
+								$('<div>')
+									.append(i.clone())
+									.remove()
+									.html()
+									.replace(/type="password"/i, 'type="text"')
+									.replace(/type=password/i, 'type=text')
+					);
+
+					if (i.attr('id') != '')
+						x.attr('id', i.attr('id') + '-polyfill-field');
+
+					if (i.attr('name') != '')
+						x.attr('name', i.attr('name') + '-polyfill-field');
+
+					x.addClass('polyfill-placeholder')
+						.val(x.attr('placeholder')).insertAfter(i);
+
+					if (i.val() == '')
+						i.hide();
+					else
+						x.hide();
+
+					i
+						.on('blur', function(event) {
+
+							event.preventDefault();
+
+							var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
+
+							if (i.val() == '') {
+
+								i.hide();
+								x.show();
+
+							}
+
+						});
+
+					x
+						.on('focus', function(event) {
+
+							event.preventDefault();
+
+							var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
+
+							x.hide();
+
+							i
+								.show()
+								.focus();
+
+						})
+						.on('keypress', function(event) {
+
+							event.preventDefault();
+							x.val('');
+
+						});
+
+				});
+
+		// Events.
+			$this
+				.on('submit', function() {
+
+					$this.find('input[type=text],input[type=password],textarea')
+						.each(function(event) {
+
+							var i = $(this);
+
+							if (i.attr('name').match(/-polyfill-field$/))
+								i.attr('name', '');
+
+							if (i.val() == i.attr('placeholder')) {
+
+								i.removeClass('polyfill-placeholder');
+								i.val('');
+
+							}
+
+						});
+
+				})
+				.on('reset', function(event) {
+
+					event.preventDefault();
+
+					$this.find('select')
+						.val($('option:first').val());
+
+					$this.find('input,textarea')
+						.each(function() {
+
+							var i = $(this),
+								x;
+
+							i.removeClass('polyfill-placeholder');
+
+							switch (this.type) {
+
+								case 'submit':
+								case 'reset':
+									break;
+
+								case 'password':
+									i.val(i.attr('defaultValue'));
+
+									x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
+
+									if (i.val() == '') {
+										i.hide();
+										x.show();
+									}
+									else {
+										i.show();
+										x.hide();
+									}
+
+									break;
+
+								case 'checkbox':
+								case 'radio':
+									i.attr('checked', i.attr('defaultValue'));
+									break;
+
+								case 'text':
+								case 'textarea':
+									i.val(i.attr('defaultValue'));
+
+									if (i.val() == '') {
+										i.addClass('polyfill-placeholder');
+										i.val(i.attr('placeholder'));
+									}
+
+									break;
+
+								default:
+									i.val(i.attr('defaultValue'));
+									break;
+
+							}
+						});
+
+				});
+
+		return $this;
+
+	};
+
+	/**
+	 * Moves elements to/from the first positions of their respective parents.
+	 * @param {jQuery} $elements Elements (or selector) to move.
+	 * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
+	 */
+	$.prioritize = function($elements, condition) {
+
+		var key = '__prioritize';
+
+		// Expand $elements if it's not already a jQuery object.
+			if (typeof $elements != 'jQuery')
+				$elements = $($elements);
+
+		// Step through elements.
+			$elements.each(function() {
+
+				var	$e = $(this), $p,
+					$parent = $e.parent();
+
+				// No parent? Bail.
+					if ($parent.length == 0)
+						return;
+
+				// Not moved? Move it.
+					if (!$e.data(key)) {
+
+						// Condition is false? Bail.
+							if (!condition)
+								return;
+
+						// Get placeholder (which will serve as our point of reference for when this element needs to move back).
+							$p = $e.prev();
+
+							// Couldn't find anything? Means this element's already at the top, so bail.
+								if ($p.length == 0)
+									return;
+
+						// Move element to top of parent.
+							$e.prependTo($parent);
+
+						// Mark element as moved.
+							$e.data(key, $p);
+
+					}
+
+				// Moved already?
+					else {
+
+						// Condition is true? Bail.
+							if (condition)
+								return;
+
+						$p = $e.data(key);
+
+						// Move element back to its original location (using our placeholder).
+							$e.insertAfter($p);
+
+						// Unmark element as moved.
+							$e.removeData(key);
+
+					}
+
+			});
+
+	};
+
+})(jQuery);

assets/sass/base/_page.scss

@@ -0,0 +1,48 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Basic */
+
+	// MSIE: Required for IEMobile.
+		@-ms-viewport {
+			width: device-width;
+		}
+
+	// MSIE: Prevents scrollbar from overlapping content.
+		body {
+			-ms-overflow-style: scrollbar;
+		}
+
+	// Ensures page width is always >=320px.
+		@include breakpoint('<=xsmall') {
+			html, body {
+				min-width: 320px;
+			}
+		}
+
+	// Set box model to border-box.
+	// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+		html {
+			box-sizing: border-box;
+		}
+
+		*, *:before, *:after {
+			box-sizing: inherit;
+		}
+
+	body {
+		background: _palette(bg);
+
+		// Stops initial animations until page loads or stops resizing.
+			&.is-preload,
+			&.is-resizing {
+				*, *:before, *:after {
+					@include vendor('animation', 'none !important');
+					@include vendor('transition', 'none !important');
+				}
+			}
+
+	}

assets/sass/base/_reset.scss

@@ -0,0 +1,76 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
+
+	html, body, div, span, applet, object,
+	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
+	pre, a, abbr, acronym, address, big, cite,
+	code, del, dfn, em, img, ins, kbd, q, s, samp,
+	small, strike, strong, sub, sup, tt, var, b,
+	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
+	form, label, legend, table, caption, tbody,
+	tfoot, thead, tr, th, td, article, aside,
+	canvas, details, embed, figure, figcaption,
+	footer, header, hgroup, menu, nav, output, ruby,
+	section, summary, time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline;
+	}
+
+	article, aside, details, figcaption, figure,
+	footer, header, hgroup, menu, nav, section {
+		display: block;
+	}
+
+	body {
+		line-height: 1;
+	}
+
+	ol, ul {
+		list-style:none;
+	}
+
+	blockquote,	q {
+		quotes: none;
+
+		&:before,
+		&:after {
+			content: '';
+			content: none;
+		}
+	}
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	body {
+		-webkit-text-size-adjust: none;
+	}
+
+	mark {
+		background-color: transparent;
+		color: inherit;
+	}
+
+	input::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+
+	input, select, textarea {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+	}

assets/sass/base/_typography.scss

@@ -0,0 +1,187 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Type */
+
+	body, input, select, textarea {
+		color: _palette(fg);
+		font-family: _font(family);
+		font-size: 13pt;
+		font-weight: _font(weight);
+		line-height: 1.65;
+
+		@include breakpoint('<=xlarge') {
+			font-size: 11pt;
+		}
+
+		@include breakpoint('<=large') {
+			font-size: 10pt;
+		}
+
+		@include breakpoint('<=xxsmall') {
+			font-size: 9pt;
+		}
+	}
+
+	a {
+		@include vendor('transition', (
+			'color #{_duration(transition)} ease-in-out',
+			'border-bottom-color #{_duration(transition)} ease-in-out'
+		));
+		border-bottom: dotted 1px;
+		color: _palette(accent);
+		text-decoration: none;
+
+		&:hover {
+			border-bottom-color: _palette(accent);
+			color: _palette(accent) !important;
+
+			strong {
+				color: inherit;
+			}
+		}
+	}
+
+	strong, b {
+		color: _palette(fg-bold);
+		font-weight: _font(weight-bold);
+	}
+
+	em, i {
+		font-style: italic;
+	}
+
+	p {
+		margin: 0 0 _size(element-margin) 0;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		color: _palette(fg-bold);
+		font-family: _font(family-heading);
+		font-weight: _font(weight-heading);
+		line-height: 1.5;
+		margin: 0 0 (_size(element-margin) * 0.5) 0;
+
+		a {
+			color: inherit;
+			text-decoration: none;
+			border-bottom: 0;
+		}
+	}
+
+	h1 {
+		font-size: 4em;
+		margin: 0 0 (_size(element-margin) * 0.25) 0;
+		line-height: 1.3;
+	}
+
+	h2 {
+		font-size: 1.75em;
+	}
+
+	h3 {
+		font-size: 1.25em;
+	}
+
+	h4 {
+		font-size: 1.1em;
+	}
+
+	h5 {
+		font-size: 0.9em;
+	}
+
+	h6 {
+		font-size: 0.7em;
+	}
+
+	@include breakpoint('<=xlarge') {
+		h1 {
+			font-size: 3.5em;
+		}
+	}
+
+	@include breakpoint('<=medium') {
+		h1 {
+			font-size: 3.25em;
+		}
+	}
+
+	@include breakpoint('<=small') {
+		h1 {
+			font-size: 2em;
+			line-height: 1.4;
+		}
+
+		h2 {
+			font-size: 1.5em;
+		}
+	}
+
+	sub {
+		font-size: 0.8em;
+		position: relative;
+		top: 0.5em;
+	}
+
+	sup {
+		font-size: 0.8em;
+		position: relative;
+		top: -0.5em;
+	}
+
+	blockquote {
+		border-left: solid 3px _palette(border);
+		font-style: italic;
+		margin: 0 0 _size(element-margin) 0;
+		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+	}
+
+	code {
+		background: _palette(border-bg);
+		border-radius: _size(border-radius);
+		border: solid 1px _palette(border);
+		font-family: _font(family-fixed);
+		font-size: 0.9em;
+		margin: 0 0.25em;
+		padding: 0.25em 0.65em;
+	}
+
+	pre {
+		-webkit-overflow-scrolling: touch;
+		font-family: _font(family-fixed);
+		font-size: 0.9em;
+		margin: 0 0 _size(element-margin) 0;
+
+		code {
+			display: block;
+			line-height: 1.75;
+			padding: 1em 1.5em;
+			overflow-x: auto;
+		}
+	}
+
+	hr {
+		border: 0;
+		border-bottom: solid 1px _palette(border);
+		margin: _size(element-margin) 0;
+
+		&.major {
+			margin: (_size(element-margin) * 1.5) 0;
+		}
+	}
+
+	.align-left {
+		text-align: left;
+	}
+
+	.align-center {
+		text-align: center;
+	}
+
+	.align-right {
+		text-align: right;
+	}

assets/sass/components/_actions.scss

@@ -0,0 +1,63 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Actions */
+
+	ul.actions {
+		@include vendor('display', 'flex');
+		cursor: default;
+		list-style: none;
+		margin-left: (_size(element-margin) * -0.5);
+		padding-left: 0;
+
+		li {
+			padding: 0 0 0 (_size(element-margin) * 0.5);
+			vertical-align: middle;
+		}
+
+		&.special {
+			@include vendor('justify-content', 'center');
+			width: 100%;
+			margin-left: 0;
+
+			li {
+				&:first-child {
+					padding-left: 0;
+				}
+			}
+		}
+
+		&.stacked {
+			@include vendor('flex-direction', 'column');
+			margin-left: 0;
+
+			li {
+				padding: (_size(element-margin) * 0.65) 0 0 0;
+
+				&:first-child {
+					padding-top: 0;
+				}
+			}
+		}
+
+		&.fit {
+			width: calc(100% + #{_size(element-margin) * 0.5});
+
+			li {
+				@include vendor('flex-grow', '1');
+				@include vendor('flex-shrink', '1');
+				width: 100%;
+
+				> * {
+					width: 100%;
+				}
+			}
+
+			&.stacked {
+				width: 100%;
+			}
+		}
+	}

assets/sass/components/_box.scss

@@ -0,0 +1,26 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Box */
+
+	.box {
+		border-radius: _size(border-radius);
+		border: solid 1px _palette(border);
+		margin-bottom: _size(element-margin);
+		padding: 1.5em;
+
+		> :last-child,
+		> :last-child > :last-child,
+		> :last-child > :last-child > :last-child {
+			margin-bottom: 0;
+		}
+
+		&.alt {
+			border: 0;
+			border-radius: 0;
+			padding: 0;
+		}
+	}

assets/sass/components/_button.scss

@@ -0,0 +1,85 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		@include vendor('appearance', 'none');
+		@include vendor('transition', (
+			'background-color #{_duration(transition)} ease-in-out',
+			'color #{_duration(transition)} ease-in-out'
+		));
+		background-color: transparent;
+		border-radius: _size(border-radius);
+		border: 0;
+		box-shadow: inset 0 0 0 2px _palette(accent);
+		color: _palette(accent) !important;
+		cursor: pointer;
+		display: inline-block;
+		font-family: _font(family-heading);
+		font-size: 0.8em;
+		font-weight: _font(weight-heading);
+		height: 3.5em;
+		letter-spacing: _font(kerning-heading);
+		line-height: 3.5em;
+		padding: 0 2.25em;
+		text-align: center;
+		text-decoration: none;
+		text-transform: uppercase;
+		white-space: nowrap;
+
+		&:hover {
+			background-color: transparentize(_palette(accent), 0.95);
+		}
+
+		&:active {
+			background-color: transparentize(_palette(accent), 0.85);
+		}
+
+		&.icon {
+			&:before {
+				margin-right: 0.5em;
+			}
+		}
+
+		&.fit {
+			width: 100%;
+		}
+
+		&.small {
+			font-size: 0.6em;
+		}
+
+		&.large {
+			font-size: 1em;
+			height: 3.65em;
+			line-height: 3.65em;
+		}
+
+		&.primary {
+			background-color: _palette(accent);
+			box-shadow: none;
+			color: _palette(bg) !important;
+
+			&:hover {
+				background-color: lighten(_palette(accent), 3);
+			}
+
+			&:active {
+				background-color: darken(_palette(accent), 3);
+			}
+		}
+
+		&.disabled,
+		&:disabled {
+			@include vendor('pointer-events', 'none');
+			opacity: 0.25;
+		}
+	}

assets/sass/components/_contact.scss

@@ -0,0 +1,47 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Contact */
+
+	ul.contact {
+		list-style: none;
+		padding: 0;
+
+		li {
+			@include icon;
+			border-top: solid 1px _palette(border);
+			margin: 1.5em 0 0 0;
+			padding: 1.5em 0 0 3em;
+			position: relative;
+
+			&:before {
+				color: _palette(accent);
+				display: inline-block;
+				font-size: 1.5em;
+				height: 1.125em;
+				left: 0;
+				line-height: 1.125em;
+				position: absolute;
+				text-align: center;
+				top: (1.5em / 1.5);
+				width: 1.5em;
+			}
+
+			&:first-child {
+				border-top: 0;
+				margin-top: 0;
+				padding-top: 0;
+
+				&:before {
+					top: 0;
+				}
+			}
+
+			a {
+				color: inherit;
+			}
+		}
+	}

assets/sass/components/_features.scss

@@ -0,0 +1,156 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Features */
+
+	.features {
+		$gutter: _size(gutter);
+
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+		margin: 0 0 _size(element-margin) ($gutter * -1);
+		width: calc(100% + #{$gutter});
+
+		article {
+			@include vendor('align-items', 'center');
+			@include vendor('display', 'flex');
+			margin: 0 0 $gutter $gutter;
+			position: relative;
+			width: calc(50% - #{$gutter});
+
+			&:nth-child(2n - 1) {
+				margin-right: ($gutter * 0.5);
+			}
+
+			&:nth-child(2n) {
+				margin-left: ($gutter * 0.5);
+			}
+
+			&:nth-last-child(1),
+			&:nth-last-child(2) {
+				margin-bottom: 0;
+			}
+
+			.icon {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				display: block;
+				height: 10em;
+				line-height: 10em;
+				margin: 0 _size(element-margin) 0 0;
+				text-align: center;
+				width: 10em;
+
+				&:before {
+					color: _palette(accent);
+					font-size: 2.75rem;
+					position: relative;
+					top: 0.05em;
+				}
+
+				&:after {
+					@include vendor('transform', 'rotate(45deg)');
+					border-radius: 0.25rem;
+					border: solid 2px _palette(border);
+					content: '';
+					display: block;
+					height: 7em;
+					left: 50%;
+					margin: -3.5em 0 0 -3.5em;
+					position: absolute;
+					top: 50%;
+					width: 7em;
+				}
+			}
+
+			.content {
+				@include vendor('flex-grow', '1');
+				@include vendor('flex-shrink', '1');
+				width: 100%;
+
+				> :last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			margin: 0 0 _size(element-margin) 0;
+			width: 100%;
+
+			article {
+				margin: 0 0 $gutter 0;
+				width: 100%;
+
+				&:nth-child(2n - 1) {
+					margin-right: 0;
+				}
+
+				&:nth-child(2n) {
+					margin-left: 0;
+				}
+
+				&:nth-last-child(1),
+				&:nth-last-child(2) {
+					margin-bottom: $gutter;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+
+				.icon {
+					height: 8em;
+					line-height: 8em;
+					width: 8em;
+
+					&:before {
+						font-size: 2.25rem;
+					}
+
+					&:after {
+						height: 6em;
+						margin: -3em 0 0 -3em;
+						width: 6em;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			article {
+				@include vendor('flex-direction', 'column');
+				@include vendor('align-items', 'flex-start');
+
+				.icon {
+					height: 6em;
+					line-height: 6em;
+					margin: 0 0 (_size(element-margin) * 0.75) 0;
+					width: 6em;
+
+					&:before {
+						font-size: 1.5rem;
+					}
+
+					&:after {
+						height: 4em;
+						margin: -2em 0 0 -2em;
+						width: 4em;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			article {
+				.icon {
+					&:before {
+						font-size: 1.25rem;
+					}
+				}
+			}
+		}
+	}

assets/sass/components/_form.scss

@@ -0,0 +1,179 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Form */
+
+	form {
+		margin: 0 0 _size(element-margin) 0;
+	}
+
+	label {
+		color: _palette(fg-bold);
+		display: block;
+		font-size: 0.9em;
+		font-weight: _font(weight-bold);
+		margin: 0 0 (_size(element-margin) * 0.5) 0;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	input[type="tel"],
+	input[type="search"],
+	input[type="url"],
+	select,
+	textarea {
+		@include vendor('appearance', 'none');
+		background: _palette(bg);
+		border-radius: _size(border-radius);
+		border: none;
+		border: solid 1px _palette(border);
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0 1em;
+		text-decoration: none;
+		width: 100%;
+
+		&:invalid {
+			box-shadow: none;
+		}
+
+		&:focus {
+			border-color: _palette(accent);
+			box-shadow: 0 0 0 1px _palette(accent);
+		}
+	}
+
+	select {
+		background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
+		background-size: 1.25em;
+		background-repeat: no-repeat;
+		background-position: calc(100% - 1em) center;
+		height: _size(element-height);
+		padding-right: _size(element-height);
+		text-overflow: ellipsis;
+
+		option {
+			color: _palette(fg-bold);
+			background: _palette(bg);
+		}
+
+		&:focus {
+			&::-ms-value {
+				background-color: transparent;
+			}
+		}
+
+		&::-ms-expand {
+			display: none;
+		}
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	input[type="tel"],
+	input[type="search"],
+	input[type="url"],
+	select {
+		height: _size(element-height);
+	}
+
+	textarea {
+		padding: 0.75em 1em;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"], {
+		@include vendor('appearance', 'none');
+		display: block;
+		float: left;
+		margin-right: -2em;
+		opacity: 0;
+		width: 1em;
+		z-index: -1;
+
+		& + label {
+			@include icon(false, solid);
+			color: _palette(fg);
+			cursor: pointer;
+			display: inline-block;
+			font-size: 1em;
+			font-weight: _font(weight);
+			padding-left: (_size(element-height) * 0.6) + 0.75em;
+			padding-right: 0.75em;
+			position: relative;
+
+			&:before {
+				background: _palette(bg);
+				border-radius: _size(border-radius);
+				border: solid 1px _palette(border);
+				content: '';
+				display: inline-block;
+				font-size: 0.8em;
+				height: (_size(element-height) * 0.75);
+				left: 0;
+				line-height: (_size(element-height) * 0.75);
+				position: absolute;
+				text-align: center;
+				top: 0;
+				width: (_size(element-height) * 0.75);
+			}
+		}
+
+		&:checked + label {
+			&:before {
+				background: _palette(fg-bold);
+				border-color: _palette(fg-bold);
+				color: _palette(bg);
+				content: '\f00c';
+			}
+		}
+
+		&:focus + label {
+			&:before {
+				border-color: _palette(accent);
+				box-shadow: 0 0 0 1px _palette(accent);
+			}
+		}
+	}
+
+	input[type="checkbox"] {
+		& + label {
+			&:before {
+				border-radius: _size(border-radius);
+			}
+		}
+	}
+
+	input[type="radio"] {
+		& + label {
+			&:before {
+				border-radius: 100%;
+			}
+		}
+	}
+
+	::-webkit-input-placeholder {
+		color: _palette(fg-light) !important;
+		opacity: 1.0;
+	}
+
+	:-moz-placeholder {
+		color: _palette(fg-light) !important;
+		opacity: 1.0;
+	}
+
+	::-moz-placeholder {
+		color: _palette(fg-light) !important;
+		opacity: 1.0;
+	}
+
+	:-ms-input-placeholder {
+		color: _palette(fg-light) !important;
+		opacity: 1.0;
+	}

assets/sass/components/_icon.scss

@@ -0,0 +1,33 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icon */
+
+	.icon {
+		@include icon;
+		border-bottom: none;
+		position: relative;
+
+		> .label {
+			display: none;
+		}
+
+		&:before {
+			line-height: inherit;
+		}
+
+		&.solid {
+			&:before {
+				font-weight: 900;
+			}
+		}
+
+		&.brands {
+			&:before {
+				font-family: 'Font Awesome 5 Brands';
+			}
+		}
+	}

assets/sass/components/_icons.scss

@@ -0,0 +1,30 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icons */
+
+	ul.icons {
+		cursor: default;
+		list-style: none;
+		padding-left: 0;
+
+		li {
+			display: inline-block;
+			padding: 0 1em 0 0;
+
+			&:last-child {
+				padding-right: 0;
+			}
+
+			.icon {
+				color: inherit;
+
+				&:before {
+					font-size: 1.25em;
+				}
+			}
+		}
+	}

assets/sass/components/_image.scss

@@ -0,0 +1,74 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Image */
+
+	.image {
+		border-radius: _size(border-radius);
+		border: 0;
+		display: inline-block;
+		position: relative;
+
+		img {
+			border-radius: _size(border-radius);
+			display: block;
+		}
+
+		&.left,
+		&.right {
+			max-width: 40%;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&.left {
+			float: left;
+			padding: 0 1.5em 1em 0;
+			top: 0.25em;
+		}
+
+		&.right {
+			float: right;
+			padding: 0 0 1em 1.5em;
+			top: 0.25em;
+		}
+
+		&.fit {
+			display: block;
+			margin: 0 0 _size(element-margin) 0;
+			width: 100%;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&.main {
+			display: block;
+			margin: 0 0 (_size(element-margin) * 1.5) 0;
+			width: 100%;
+
+			img {
+				width: 100%;
+			}
+		}
+	}
+
+	a.image {
+		overflow: hidden;
+
+		img {
+			@include vendor('transition', 'transform #{_duration(transition)} ease');
+		}
+
+		&:hover {
+			img {
+				@include vendor('transform', 'scale(1.075)');
+			}
+		}
+	}

assets/sass/components/_list.scss

@@ -0,0 +1,56 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* List */
+
+	ol {
+		list-style: decimal;
+		margin: 0 0 _size(element-margin) 0;
+		padding-left: 1.25em;
+
+		li {
+			padding-left: 0.25em;
+		}
+	}
+
+	ul {
+		list-style: disc;
+		margin: 0 0 _size(element-margin) 0;
+		padding-left: 1em;
+
+		li {
+			padding-left: 0.5em;
+		}
+
+		&.alt {
+			list-style: none;
+			padding-left: 0;
+
+			li {
+				border-top: solid 1px _palette(border);
+				padding: 0.5em 0;
+
+				&:first-child {
+					border-top: 0;
+					padding-top: 0;
+				}
+			}
+		}
+	}
+
+	dl {
+		margin: 0 0 _size(element-margin) 0;
+
+		dt {
+			display: block;
+			font-weight: _font(weight-bold);
+			margin: 0 0 (_size(element-margin) * 0.5) 0;
+		}
+
+		dd {
+			margin-left: _size(element-margin);
+		}
+	}

assets/sass/components/_mini-posts.scss

@@ -0,0 +1,31 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Mini Posts */
+
+	.mini-posts {
+		article {
+			border-top: solid 1px _palette(border);
+			margin-top: _size(element-margin);
+			padding-top: _size(element-margin);
+
+			.image {
+				display: block;
+				margin: 0 0 (_size(element-margin) * 0.75) 0;
+
+				img {
+					display: block;
+					width: 100%;
+				}
+			}
+
+			&:first-child {
+				border-top: 0;
+				margin-top: 0;
+				padding-top: 0;
+			}
+		}
+	}

assets/sass/components/_pagination.scss

@@ -0,0 +1,70 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Pagination */
+
+	ul.pagination {
+		cursor: default;
+		list-style: none;
+		padding-left: 0;
+
+		li {
+			display: inline-block;
+			padding-left: 0;
+			vertical-align: middle;
+
+			> .page {
+				@include vendor('transition', (
+					'background-color #{_duration(transition)} ease-in-out',
+					'color #{_duration(transition)} ease-in-out'
+				));
+				border-bottom: 0;
+				border-radius: _size(border-radius);
+				display: inline-block;
+				font-size: 0.8em;
+				font-weight: _font(weight-bold);
+				height: 2em;
+				line-height: 2em;
+				margin: 0 0.125em;
+				min-width: 2em;
+				padding: 0 0.5em;
+				text-align: center;
+
+				&.active {
+					background-color: _palette(accent);
+					color: _palette(bg) !important;
+
+					&:hover {
+						background-color: lighten(_palette(accent), 3);
+					}
+
+					&:active {
+						background-color: darken(_palette(accent), 3);
+					}
+				}
+			}
+
+			&:first-child {
+				padding-right: 0.75em;
+			}
+
+			&:last-child {
+				padding-left: 0.75em;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			li {
+				&:nth-child(n+2):nth-last-child(n+2) {
+					display: none;
+				}
+
+				&:first-child {
+					padding-right: 0;
+				}
+			}
+		}
+	}

assets/sass/components/_posts.scss

@@ -0,0 +1,179 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Posts */
+
+	.posts {
+		$gutter: (_size(gutter) * 2);
+
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+		margin: 0 0 _size(element-margin) ($gutter * -1);
+		width: calc(100% + #{$gutter});
+
+		article {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '1');
+			margin: 0 0 $gutter $gutter;
+			position: relative;
+			width: calc(#{(100% / 3)} - #{$gutter});
+
+			&:before {
+				background: _palette(border);
+				content: '';
+				display: block;
+				height: calc(100% + #{$gutter});
+				left: ($gutter * -0.5);
+				position: absolute;
+				top: 0;
+				width: 1px;
+			}
+
+			&:after {
+				background: _palette(border);
+				bottom: ($gutter * -0.5);
+				content: '';
+				display: block;
+				height: 1px;
+				position: absolute;
+				right: 0;
+				width: calc(100% + #{$gutter});
+			}
+
+			> :last-child {
+				margin-bottom: 0;
+			}
+
+			.image {
+				display: block;
+				margin: 0 0 _size(element-margin) 0;
+
+				img {
+					display: block;
+					width: 100%;
+				}
+			}
+		}
+
+		@include breakpoint('xlarge-to-max') {
+			article {
+				&:nth-child(3n + 1) {
+					&:before {
+						display: none;
+					}
+
+					&:after {
+						width: 100%;
+					}
+				}
+
+				&:nth-last-child(1),
+				&:nth-last-child(2),
+				&:nth-last-child(3) {
+					margin-bottom: 0;
+
+					&:before {
+						height: 100%;
+					}
+
+					&:after {
+						display: none;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=xlarge') {
+			article {
+				width: calc(50% - #{$gutter});
+
+				&:nth-last-child(3) {
+					margin-bottom: $gutter;
+				}
+			}
+		}
+
+		@include breakpoint('small-to-xlarge') {
+			article {
+				&:nth-child(2n + 1) {
+					&:before {
+						display: none;
+					}
+
+					&:after {
+						width: 100%;
+					}
+				}
+
+				&:nth-last-child(1),
+				&:nth-last-child(2) {
+					margin-bottom: 0;
+
+					&:before {
+						height: 100%;
+					}
+
+					&:after {
+						display: none;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			$gutter: _size(gutter) * 1.5;
+
+			margin: 0 0 _size(element-margin) ($gutter * -1);
+			width: calc(100% + #{$gutter});
+
+			article {
+				margin: 0 0 $gutter $gutter;
+				width: calc(50% - #{$gutter});
+
+				&:before {
+					height: calc(100% + #{$gutter});
+					left: ($gutter * -0.5);
+				}
+
+				&:after {
+					bottom: ($gutter * -0.5);
+					width: calc(100% + #{$gutter});
+				}
+
+				&:nth-last-child(3) {
+					margin-bottom: $gutter;
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			$gutter: _size(gutter) * 1.5;
+
+			margin: 0 0 _size(element-margin) 0;
+			width: 100%;
+
+			article {
+				margin: 0 0 $gutter 0;
+				width: 100%;
+
+				&:before {
+					display: none;
+				}
+
+				&:after {
+					width: 100%;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+
+					&:after {
+						display: none;
+					}
+				}
+			}
+		}
+	}

assets/sass/components/_row.scss

@@ -0,0 +1,31 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Row */
+
+	.row {
+		@include html-grid(1.5em);
+
+		@include breakpoint('<=xlarge') {
+			@include html-grid(1.5em, 'xlarge');
+		}
+
+		@include breakpoint('<=large') {
+			@include html-grid(1.5em, 'large');
+		}
+
+		@include breakpoint('<=medium') {
+			@include html-grid(1.5em, 'medium');
+		}
+
+		@include breakpoint('<=small') {
+			@include html-grid(1.5em, 'small');
+		}
+
+		@include breakpoint('<=xsmall') {
+			@include html-grid(1.5em, 'xsmall');
+		}
+	}

assets/sass/components/_section.scss

@@ -0,0 +1,39 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Section/Article */
+
+	section, article {
+		&.special {
+			text-align: center;
+		}
+	}
+
+	header {
+		p {
+			font-family: _font(family-heading);
+			font-size: 1em;
+			font-weight: _font(weight-heading-alt);
+			letter-spacing: _font(kerning-heading);
+			margin-top: -0.5em;
+			text-transform: uppercase;
+		}
+
+		&.major {
+			> :last-child {
+				border-bottom: solid 3px _palette(accent);
+				display: inline-block;
+				margin: 0 0 _size(element-margin) 0;
+			 	padding: 0 0.75em 0.5em 0;
+			}
+		}
+
+		&.main {
+			> :last-child {
+				margin: 0 0 (_size(element-margin) * 0.5) 0;
+			}
+		}
+	}

assets/sass/components/_table.scss

@@ -0,0 +1,81 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Table */
+
+	.table-wrapper {
+		-webkit-overflow-scrolling: touch;
+		overflow-x: auto;
+	}
+
+	table {
+		margin: 0 0 _size(element-margin) 0;
+		width: 100%;
+
+		tbody {
+			tr {
+				border: solid 1px _palette(border);
+				border-left: 0;
+				border-right: 0;
+
+				&:nth-child(2n + 1) {
+					background-color: _palette(border-bg);
+				}
+			}
+		}
+
+		td {
+			padding: 0.75em 0.75em;
+		}
+
+		th {
+			color: _palette(fg-bold);
+			font-size: 0.9em;
+			font-weight: _font(weight-bold);
+			padding: 0 0.75em 0.75em 0.75em;
+			text-align: left;
+		}
+
+		thead {
+			border-bottom: solid 2px _palette(border);
+		}
+
+		tfoot {
+			border-top: solid 2px _palette(border);
+		}
+
+		&.alt {
+			border-collapse: separate;
+
+			tbody {
+				tr {
+					td {
+						border: solid 1px _palette(border);
+						border-left-width: 0;
+						border-top-width: 0;
+
+						&:first-child {
+							border-left-width: 1px;
+						}
+					}
+
+					&:first-child {
+						td {
+							border-top-width: 1px;
+						}
+					}
+				}
+			}
+
+			thead {
+				border-bottom: 0;
+			}
+
+			tfoot {
+				border-top: 0;
+			}
+		}
+	}

assets/sass/layout/_banner.scss

@@ -0,0 +1,75 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Banner */
+
+	#banner {
+		@include padding(6em, 0);
+		@include vendor('display', 'flex');
+
+		h1 {
+			margin-top: -0.125em;
+		}
+
+		.content {
+			@include vendor('flex-grow', '1');
+			@include vendor('flex-shrink', '1');
+			width: 50%;
+		}
+
+		.image {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+			display: block;
+			margin: 0 0 _size(element-margin) (_size(element-margin) * 2);
+			width: 50%;
+
+			img {
+				height: 100%;
+				-moz-object-fit: cover;
+				-webkit-object-fit: cover;
+				-ms-object-fit: cover;
+				object-fit: cover;
+				-moz-object-position: center;
+				-webkit-object-position: center;
+				-ms-object-position: center;
+				object-position: center;
+				width: 100%;
+			}
+		}
+
+		@include orientation(portrait) {
+			@include vendor('flex-direction', 'column-reverse');
+
+			h1 {
+				br {
+					display: none;
+				}
+			}
+
+			.content {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				width: 100%;
+			}
+
+			.image {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				margin: 0 0 (_size(element-margin) * 2) 0;
+				height: 25em;
+				max-height: 50vh;
+				min-height: 18em;
+				width: 100%;
+			}
+
+			@include breakpoint('<=xsmall') {
+				.image {
+					max-height: 35vh;
+				}
+			}
+		}
+	}

assets/sass/layout/_footer.scss

@@ -0,0 +1,18 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Footer */
+
+	#footer {
+		.copyright {
+			color: _palette(fg-light);
+			font-size: 0.9em;
+
+			a {
+				color: inherit;
+			}
+		}
+	}

assets/sass/layout/_header.scss

@@ -0,0 +1,51 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Header */
+
+	#header {
+		@include vendor('display', 'flex');
+		border-bottom: solid 5px _palette(accent);
+		padding: 6em 0 1em 0;
+		position: relative;
+
+		> * {
+			@include vendor('flex', '1');
+			margin-bottom: 0;
+		}
+
+		.logo {
+			border-bottom: 0;
+			color: inherit;
+			font-family: _font(family-heading);
+			font-size: 1.125em;
+		}
+
+		.icons {
+			text-align: right;
+		}
+
+		@include breakpoint('<=xlarge') {
+			padding-top: 5em;
+		}
+
+		@include breakpoint('<=small') {
+			padding-top: 6.5em;
+
+			.logo {
+				font-size: 1.25em;
+				margin: 0;
+			}
+
+			.icons {
+				height: (6.25em / 1.25);
+				line-height: (6.25em / 1.25);
+				position: absolute;
+				right: (-0.625em / 1.25);
+				top: 0;
+			}
+		}
+	}

assets/sass/layout/_main.scss

@@ -0,0 +1,58 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Main */
+
+	#main {
+		@include vendor('flex-grow', '1');
+		@include vendor('flex-shrink', '1');
+		width: 100%;
+
+		> .inner {
+			@include padding(0, 6em);
+			margin: 0 auto;
+			max-width: 110em;
+
+			> section {
+				@include padding(6em, 0);
+				border-top: solid 2px _palette(border);
+
+				&:first-of-type {
+				 	border-top: 0 !important;
+				}
+			}
+		}
+
+		@include breakpoint('<=xlarge') {
+			> .inner {
+				@include padding(0, 5em);
+
+				> section {
+					@include padding(5em, 0);
+				}
+			}
+		}
+
+		@include breakpoint('<=large') {
+			> .inner {
+				@include padding(0, 4em);
+
+				> section {
+					@include padding(4em, 0);
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			> .inner {
+				@include padding(0, 2em);
+
+				> section {
+					@include padding(3em, 0);
+				}
+			}
+		}
+	}

assets/sass/layout/_menu.scss

@@ -0,0 +1,98 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Menu */
+
+	#menu {
+		ul {
+			@include vendor('user-select', 'none');
+			color: _palette(fg-bold);
+			font-family: _font(family-heading);
+			font-weight: _font(weight-heading-alt);
+			letter-spacing: _font(kerning-heading);
+			list-style: none;
+			margin-bottom: 0;
+			padding: 0;
+			text-transform: uppercase;
+
+			a, span {
+				border-bottom: 0;
+				color: inherit;
+				cursor: pointer;
+				display: block;
+				font-size: 0.9em;
+				padding: 0.625em 0;
+
+				&:hover {
+					color: _palette(accent);
+				}
+
+				&.opener {
+					@include vendor('transition', 'color #{_duration(transition)} ease-in-out');
+					@include icon(false, solid);
+					-webkit-tap-highlight-color: rgba(255,255,255,0);
+					position: relative;
+
+					&:before {
+						@include vendor('transition', (
+							'color #{_duration(transition)} ease-in-out',
+							'transform #{_duration(transition)} ease-in-out'
+						));
+						color: _palette(fg-light);
+						content: '\f078';
+						position: absolute;
+						right: 0;
+					}
+
+					&:hover {
+						&:before {
+							color: _palette(accent);
+						}
+					}
+
+					&.active {
+						& + ul {
+							display: block;
+						}
+
+						&:before {
+							@include vendor('transform', 'rotate(-180deg)');
+						}
+					}
+				}
+			}
+		}
+
+		> ul {
+			> li {
+				border-top: solid 1px _palette(border);
+				margin: 0.5em 0 0 0;
+				padding: 0.5em 0 0 0;
+
+				> ul {
+					color: _palette(fg-light);
+					display: none;
+					margin: 0.5em 0 1.5em 0;
+					padding-left: 1em;
+
+					a, span {
+						font-size: 0.8em;
+					}
+
+					> li {
+						margin: 0.125em 0 0 0;
+						padding: 0.125em 0 0 0;
+					}
+				}
+
+				&:first-child {
+					border-top: 0;
+					margin-top: 0;
+					padding-top: 0;
+				}
+			}
+		}
+	}

assets/sass/layout/_sidebar.scss

@@ -0,0 +1,223 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Sidebar */
+
+	#search {
+		form {
+			@include icon(false, solid);
+			position: relative;
+
+			&:before {
+				@include vendor('transform', 'scaleX(-1)');
+				color: _palette(fg);
+				content: '\f002';
+				cursor: default;
+				display: block;
+				font-size: 1.5em;
+				height: _size(element-height) / 1.375;
+				line-height: _size(element-height) / 1.375;
+				opacity: 0.325;
+				position: absolute;
+				right: 0;
+				text-align: center;
+				top: 0;
+				width: _size(element-height) / 1.375;
+			}
+
+			input[type="text"] {
+				padding-right: _size(element-height);
+			}
+		}
+	}
+
+	#sidebar {
+		$pad: 2em / 0.9;
+
+		@include vendor('flex-grow', '0');
+		@include vendor('flex-shrink', '0');
+		@include vendor('transition', (
+			'margin-left 0.5s ease',
+			'box-shadow 0.5s ease'
+		));
+		background-color: _palette(bg-alt);
+		font-size: 0.9em;
+		position: relative;
+		width: _size(sidebar-width);
+
+		h2 {
+			font-size: (1.25em / 0.9);
+		}
+
+		> .inner {
+			@include padding($pad, $pad, (0, 0, $pad, 0));
+			position: relative;
+			width: _size(sidebar-width);
+
+			> * {
+				border-bottom: solid 2px _palette(border);
+				margin: 0 0 (_size(element-margin) * 1.75) 0;
+				padding: 0 0 (_size(element-margin) * 1.75) 0;
+
+				> :last-child {
+					margin-bottom: 0;
+				}
+
+				&:last-child {
+					border-bottom: 0;
+					margin-bottom: 0;
+					padding-bottom: 0;
+				}
+			}
+
+			> .alt {
+				background-color: darken(_palette(bg-alt), 2);
+				border-bottom: 0;
+				margin: ($pad * -1) 0 ($pad * 2) ($pad * -1);
+				padding: $pad;
+				width: calc(100% + #{$pad * 2});
+			}
+		}
+
+		.toggle {
+			@include icon(false, solid);
+			@include vendor('transition', 'left 0.5s ease');
+			-webkit-tap-highlight-color: rgba(255,255,255,0);
+			border: 0;
+			display: block;
+			height: 7.5em;
+			left: _size(sidebar-width);
+			line-height: 7.5em;
+			outline: 0;
+			overflow: hidden;
+			position: absolute;
+			text-align: center;
+			text-indent: -15em;
+			white-space: nowrap;
+			top: 0;
+			width: 6em;
+			z-index: _misc(z-index-base);
+
+			&:before {
+				content: '\f0c9';
+				font-size: 2rem;
+				height: inherit;
+				left: 0;
+				line-height: inherit;
+				position: absolute;
+				text-indent: 0;
+				top: 0;
+				width: inherit;
+			}
+		}
+
+		&.inactive {
+			margin-left: (_size(sidebar-width) * -1);
+		}
+
+		@include breakpoint('<=xlarge') {
+			$pad: 1.5em / 0.9;
+
+			width: _size(sidebar-width-alt);
+
+			> .inner {
+				@include padding($pad, $pad, (0, 0, $pad, 0));
+				width: _size(sidebar-width-alt);
+
+				> .alt {
+					margin: ($pad * -1) 0 ($pad * 2) ($pad * -1);
+					padding: $pad;
+					width: calc(100% + #{$pad * 2});
+				}
+			}
+
+			.toggle {
+				height: 6.25em;
+				left: _size(sidebar-width-alt);
+				line-height: 6.25em;
+				text-indent: 5em;
+				width: 5em;
+
+				&:before {
+					font-size: 1.5rem;
+				}
+			}
+
+			&.inactive {
+				margin-left: (_size(sidebar-width-alt) * -1);
+			}
+		}
+
+		@include breakpoint('<=large') {
+			box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
+			height: 100%;
+			left: 0;
+			position: fixed;
+			top: 0;
+			z-index: _misc(z-index-base);
+
+			&.inactive {
+				box-shadow: none;
+			}
+
+			> .inner {
+				-webkit-overflow-scrolling: touch;
+				height: 100%;
+				left: 0;
+				overflow-x: hidden;
+				overflow-y: auto;
+				position: absolute;
+				top: 0;
+
+				&:after {
+					content: '';
+					display: block;
+					height: 4em;
+					width: 100%;
+				}
+			}
+
+			.toggle {
+				text-indent: 6em;
+				width: 6em;
+
+				&:before {
+					font-size: 1.5rem;
+					margin-left: (-0.875em / 2);
+				}
+			}
+
+			body.is-preload & {
+				display: none;
+			}
+		}
+
+		@include breakpoint('<=small') {
+			.toggle {
+				text-indent: 7.25em;
+				width: 7.25em;
+
+				&:before {
+					color: _palette(fg);
+					margin-left: (-0.125em / 2);
+					margin-top: (-0.5em / 2);
+					font-size: 1.1rem;
+					z-index: 1;
+				}
+
+				&:after {
+					background: transparentize(lighten(_palette(fg), 35), 0.25);
+					border-radius: _size(border-radius);
+					content: '';
+					height: 3.5em;
+					left: 1em;
+					position: absolute;
+					top: 1em;
+					width: 5em;
+				}
+			}
+		}
+	}

assets/sass/layout/_wrapper.scss

@@ -0,0 +1,13 @@
+///
+/// Editorial by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Wrapper */
+
+	#wrapper {
+		@include vendor('display', 'flex');
+		@include vendor('flex-direction', 'row-reverse');
+		min-height: 100vh;
+	}

assets/sass/libs/_breakpoints.scss

@@ -0,0 +1,223 @@
+// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+	/// Breakpoints.
+	/// @var {list}
+	$breakpoints: () !global;
+
+// Mixins.
+
+	/// Sets breakpoints.
+	/// @param {map} $x Breakpoints.
+	@mixin breakpoints($x: ()) {
+		$breakpoints: $x !global;
+	}
+
+	/// Wraps @content in a @media block targeting a specific orientation.
+	/// @param {string} $orientation Orientation.
+	@mixin orientation($orientation) {
+		@media screen and (orientation: #{$orientation}) {
+			@content;
+		}
+	}
+
+	/// Wraps @content in a @media block using a given query.
+	/// @param {string} $query Query.
+	@mixin breakpoint($query: null) {
+
+		$breakpoint: null;
+		$op: null;
+		$media: null;
+
+		// Determine operator, breakpoint.
+
+			// Greater than or equal.
+				@if (str-slice($query, 0, 2) == '>=') {
+
+					$op: 'gte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Less than or equal.
+				@elseif (str-slice($query, 0, 2) == '<=') {
+
+					$op: 'lte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Greater than.
+				@elseif (str-slice($query, 0, 1) == '>') {
+
+					$op: 'gt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Less than.
+				@elseif (str-slice($query, 0, 1) == '<') {
+
+					$op: 'lt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Not.
+				@elseif (str-slice($query, 0, 1) == '!') {
+
+					$op: 'not';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Equal.
+				@else {
+
+					$op: 'eq';
+					$breakpoint: $query;
+
+				}
+
+		// Build media.
+			@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+
+				$a: map-get($breakpoints, $breakpoint);
+
+				// Range.
+					@if (type-of($a) == 'list') {
+
+						$x: nth($a, 1);
+						$y: nth($a, 2);
+
+						// Max only.
+							@if ($x == null) {
+
+								// Greater than or equal (>= 0 / anything)
+									@if ($op == 'gte') {
+										$media: 'screen';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< 0 / invalid)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Not (> y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (<= y)
+									@else {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+							}
+
+						// Min only.
+							@else if ($y == null) {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= inf / anything)
+									@elseif ($op == 'lte') {
+										$media: 'screen';
+									}
+
+								// Greater than (> inf / invalid)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Equal (>= x)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+							}
+
+						// Min and max.
+							@else {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x and > y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (>= x and <= y)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
+									}
+
+							}
+
+					}
+
+				// String.
+					@else {
+
+						// Missing a media type? Prefix with "screen".
+							@if (str-slice($a, 0, 1) == '(') {
+								$media: 'screen and ' + $a;
+							}
+
+						// Otherwise, use as-is.
+							@else {
+								$media: $a;
+							}
+
+					}
+
+			}
+
+		// Output.
+	        @media #{$media} {
+				@content;
+			}
+
+	}

assets/sass/libs/_functions.scss

@@ -0,0 +1,90 @@
+/// Removes a specific item from a list.
+/// @author Hugo Giraudel
+/// @param {list} $list List.
+/// @param {integer} $index Index.
+/// @return {list} Updated list.
+@function remove-nth($list, $index) {
+
+	$result: null;
+
+	@if type-of($index) != number {
+		@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+	}
+	@else if $index == 0 {
+		@warn "List index 0 must be a non-zero integer for `remove-nth`.";
+	}
+	@else if abs($index) > length($list) {
+		@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+	}
+	@else {
+
+		$result: ();
+		$index: if($index < 0, length($list) + $index + 1, $index);
+
+		@for $i from 1 through length($list) {
+
+			@if $i != $index {
+				$result: append($result, nth($list, $i));
+			}
+
+		}
+
+	}
+
+	@return $result;
+
+}
+
+/// Gets a value from a map.
+/// @author Hugo Giraudel
+/// @param {map} $map Map.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function val($map, $keys...) {
+
+	@if nth($keys, 1) == null {
+		$keys: remove-nth($keys, 1);
+	}
+
+	@each $key in $keys {
+		$map: map-get($map, $key);
+	}
+
+	@return $map;
+
+}
+
+/// Gets a duration value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _duration($keys...) {
+	@return val($duration, $keys...);
+}
+
+/// Gets a font value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _font($keys...) {
+	@return val($font, $keys...);
+}
+
+/// Gets a misc value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _misc($keys...) {
+	@return val($misc, $keys...);
+}
+
+/// Gets a palette value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _palette($keys...) {
+	@return val($palette, $keys...);
+}
+
+/// Gets a size value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _size($keys...) {
+	@return val($size, $keys...);
+}

assets/sass/libs/_html-grid.scss

@@ -0,0 +1,149 @@
+// html-grid.scss v1.0 | @ajlkn | MIT licensed */
+
+// Mixins.
+
+	/// Initializes the current element as an HTML grid.
+	/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
+	/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
+	@mixin html-grid($gutters: 1.5em, $suffix: '') {
+
+		// Initialize.
+			$cols: 12;
+			$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
+			$unit: 100% / $cols;
+
+			// Suffixes.
+				$suffixes: null;
+
+				@if (type-of($suffix) == 'list') {
+					$suffixes: $suffix;
+				}
+				@else {
+					$suffixes: ($suffix);
+				}
+
+			// Gutters.
+				$guttersCols: null;
+				$guttersRows: null;
+
+				@if (type-of($gutters) == 'list') {
+
+					$guttersCols: nth($gutters, 1);
+					$guttersRows: nth($gutters, 2);
+
+				}
+				@else {
+
+					$guttersCols: $gutters;
+					$guttersRows: 0;
+
+				}
+
+		// Row.
+			display: flex;
+			flex-wrap: wrap;
+			box-sizing: border-box;
+			align-items: stretch;
+
+			// Columns.
+				> * {
+					box-sizing: border-box;
+				}
+
+			// Gutters.
+				&.gtr-uniform {
+					> * {
+						> :last-child {
+							margin-bottom: 0;
+						}
+					}
+				}
+
+			// Alignment.
+				&.aln-left {
+					justify-content: flex-start;
+				}
+
+				&.aln-center {
+					justify-content: center;
+				}
+
+				&.aln-right {
+					justify-content: flex-end;
+				}
+
+				&.aln-top {
+					align-items: flex-start;
+				}
+
+				&.aln-middle {
+					align-items: center;
+				}
+
+				&.aln-bottom {
+					align-items: flex-end;
+				}
+
+		// Step through suffixes.
+			@each $suffix in $suffixes {
+
+				// Suffix.
+					@if ($suffix != '') {
+						$suffix: '-' + $suffix;
+					}
+					@else {
+						$suffix: '';
+					}
+
+				// Row.
+
+					// Important.
+						> .imp#{$suffix} {
+							order: -1;
+						}
+
+					// Columns, offsets.
+						@for $i from 1 through $cols {
+							> .col-#{$i}#{$suffix} {
+								width: $unit * $i;
+							}
+
+							> .off-#{$i}#{$suffix} {
+								margin-left: $unit * $i;
+							}
+						}
+
+					// Step through multipliers.
+						@each $multiplier in $multipliers {
+
+							// Gutters.
+								$class: null;
+
+								@if ($multiplier != 1) {
+									$class: '.gtr-' + ($multiplier * 100);
+								}
+
+								&#{$class} {
+									margin-top: ($guttersRows * $multiplier * -1);
+									margin-left: ($guttersCols * $multiplier * -1);
+
+									> * {
+										padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
+									}
+
+									// Uniform.
+										&.gtr-uniform {
+											margin-top: $guttersCols * $multiplier * -1;
+
+											> * {
+												padding-top: $guttersCols * $multiplier;
+											}
+										}
+
+								}
+
+						}
+
+			}
+
+	}

assets/sass/libs/_mixins.scss

@@ -0,0 +1,78 @@
+/// Makes an element's :before pseudoelement a FontAwesome icon.
+/// @param {string} $content Optional content value to use.
+/// @param {string} $category Optional category to use.
+/// @param {string} $where Optional pseudoelement to target (before or after).
+@mixin icon($content: false, $category: regular, $where: before) {
+
+	text-decoration: none;
+
+	&:#{$where} {
+
+		@if $content {
+			content: $content;
+		}
+
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		display: inline-block;
+		font-style: normal;
+		font-variant: normal;
+		text-rendering: auto;
+		line-height: 1;
+		text-transform: none !important;
+
+		@if ($category == brands) {
+			font-family: 'Font Awesome 5 Brands';
+		}
+		@elseif ($category == solid) {
+			font-family: 'Font Awesome 5 Free';
+			font-weight: 900;
+		}
+		@else {
+			font-family: 'Font Awesome 5 Free';
+			font-weight: 400;
+		}
+
+	}
+
+}
+
+/// Applies padding to an element, taking the current element-margin value into account.
+/// @param {mixed} $tb Top/bottom padding.
+/// @param {mixed} $lr Left/right padding.
+/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
+/// @param {bool} $important If true, adds !important.
+@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
+
+	@if $important {
+		$important: '!important';
+	}
+
+	$x: 0.1em;
+
+	@if unit(_size(element-margin)) == 'rem' {
+		$x: 0.1rem;
+	}
+
+	padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
+
+}
+
+/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
+/// @param {string} $svg SVG data URL.
+/// @return {string} Encoded SVG data URL.
+@function svg-url($svg) {
+
+	$svg: str-replace($svg, '"', '\'');
+	$svg: str-replace($svg, '%', '%25');
+	$svg: str-replace($svg, '<', '%3C');
+	$svg: str-replace($svg, '>', '%3E');
+	$svg: str-replace($svg, '&', '%26');
+	$svg: str-replace($svg, '#', '%23');
+	$svg: str-replace($svg, '{', '%7B');
+	$svg: str-replace($svg, '}', '%7D');
+	$svg: str-replace($svg, ';', '%3B');
+
+	@return url("data:image/svg+xml;charset=utf8,#{$svg}");
+
+}

assets/sass/libs/_vars.scss

@@ -0,0 +1,44 @@
+// Misc.
+	$misc: (
+		z-index-base:		10000
+	);
+
+// Duration.
+	$duration: (
+		nav:				0.5s,
+		transition:			0.2s
+	);
+
+// Size.
+	$size: (
+		border-radius:		0.375em,
+		element-height:		2.75em,
+		element-margin:		2em,
+		sidebar-width:		26em,
+		sidebar-width-alt:	24em,
+		gutter:				3em
+	);
+
+// Font.
+	$font: (
+		family:				('Open Sans', sans-serif),
+		family-heading:		('Roboto Slab', serif),
+		family-fixed:		('Courier New', monospace),
+		weight:				400,
+		weight-bold:		600,
+		weight-heading:		700,
+		weight-heading-alt:	400,
+		kerning-heading:	0.075em
+	);
+
+// Palette.
+	$palette: (
+		bg:					#ffffff,
+		bg-alt:				#f5f6f7,
+		fg:					#7f888f,
+		fg-bold:			#3d4449,
+		fg-light:			#9fa3a6,
+		border:				rgba(210,215,217,0.75),
+		border-bg:			transparentize(#e6ebed, 0.75),
+		accent:				#f56a6a
+	);

assets/sass/libs/_vendor.scss

@@ -0,0 +1,376 @@
+// vendor.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+	/// Vendor prefixes.
+	/// @var {list}
+	$vendor-prefixes: (
+		'-moz-',
+		'-webkit-',
+		'-ms-',
+		''
+	);
+
+	/// Properties that should be vendorized.
+	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+	/// @var {list}
+	$vendor-properties: (
+
+		// Animation.
+			'animation',
+			'animation-delay',
+			'animation-direction',
+			'animation-duration',
+			'animation-fill-mode',
+			'animation-iteration-count',
+			'animation-name',
+			'animation-play-state',
+			'animation-timing-function',
+
+		// Appearance.
+			'appearance',
+
+		// Backdrop filter.
+			'backdrop-filter',
+
+		// Background image options.
+			'background-clip',
+			'background-origin',
+			'background-size',
+
+		// Box sizing.
+			'box-sizing',
+
+		// Clip path.
+			'clip-path',
+
+		// Filter effects.
+			'filter',
+
+		// Flexbox.
+			'align-content',
+			'align-items',
+			'align-self',
+			'flex',
+			'flex-basis',
+			'flex-direction',
+			'flex-flow',
+			'flex-grow',
+			'flex-shrink',
+			'flex-wrap',
+			'justify-content',
+			'order',
+
+		// Font feature.
+			'font-feature-settings',
+			'font-language-override',
+			'font-variant-ligatures',
+
+		// Font kerning.
+			'font-kerning',
+
+		// Fragmented borders and backgrounds.
+			'box-decoration-break',
+
+		// Grid layout.
+			'grid-column',
+			'grid-column-align',
+			'grid-column-end',
+			'grid-column-start',
+			'grid-row',
+			'grid-row-align',
+			'grid-row-end',
+			'grid-row-start',
+			'grid-template-columns',
+			'grid-template-rows',
+
+		// Hyphens.
+			'hyphens',
+			'word-break',
+
+		// Masks.
+			'mask',
+			'mask-border',
+			'mask-border-outset',
+			'mask-border-repeat',
+			'mask-border-slice',
+			'mask-border-source',
+			'mask-border-width',
+			'mask-clip',
+			'mask-composite',
+			'mask-image',
+			'mask-origin',
+			'mask-position',
+			'mask-repeat',
+			'mask-size',
+
+		// Multicolumn.
+			'break-after',
+			'break-before',
+			'break-inside',
+			'column-count',
+			'column-fill',
+			'column-gap',
+			'column-rule',
+			'column-rule-color',
+			'column-rule-style',
+			'column-rule-width',
+			'column-span',
+			'column-width',
+			'columns',
+
+		// Object fit.
+			'object-fit',
+			'object-position',
+
+		// Regions.
+			'flow-from',
+			'flow-into',
+			'region-fragment',
+
+		// Scroll snap points.
+			'scroll-snap-coordinate',
+			'scroll-snap-destination',
+			'scroll-snap-points-x',
+			'scroll-snap-points-y',
+			'scroll-snap-type',
+
+		// Shapes.
+			'shape-image-threshold',
+			'shape-margin',
+			'shape-outside',
+
+		// Tab size.
+			'tab-size',
+
+		// Text align last.
+			'text-align-last',
+
+		// Text decoration.
+			'text-decoration-color',
+			'text-decoration-line',
+			'text-decoration-skip',
+			'text-decoration-style',
+
+		// Text emphasis.
+			'text-emphasis',
+			'text-emphasis-color',
+			'text-emphasis-position',
+			'text-emphasis-style',
+
+		// Text size adjust.
+			'text-size-adjust',
+
+		// Text spacing.
+			'text-spacing',
+
+		// Transform.
+			'transform',
+			'transform-origin',
+
+		// Transform 3D.
+			'backface-visibility',
+			'perspective',
+			'perspective-origin',
+			'transform-style',
+
+		// Transition.
+			'transition',
+			'transition-delay',
+			'transition-duration',
+			'transition-property',
+			'transition-timing-function',
+
+		// Unicode bidi.
+			'unicode-bidi',
+
+		// User select.
+			'user-select',
+
+		// Writing mode.
+			'writing-mode',
+
+	);
+
+	/// Values that should be vendorized.
+	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+	/// @var {list}
+	$vendor-values: (
+
+		// Cross fade.
+			'cross-fade',
+
+		// Element function.
+			'element',
+
+		// Filter function.
+			'filter',
+
+		// Flexbox.
+			'flex',
+			'inline-flex',
+
+		// Grab cursors.
+			'grab',
+			'grabbing',
+
+		// Gradients.
+			'linear-gradient',
+			'repeating-linear-gradient',
+			'radial-gradient',
+			'repeating-radial-gradient',
+
+		// Grid layout.
+			'grid',
+			'inline-grid',
+
+		// Image set.
+			'image-set',
+
+		// Intrinsic width.
+			'max-content',
+			'min-content',
+			'fit-content',
+			'fill',
+			'fill-available',
+			'stretch',
+
+		// Sticky position.
+			'sticky',
+
+		// Transform.
+			'transform',
+
+		// Zoom cursors.
+			'zoom-in',
+			'zoom-out',
+
+	);
+
+// Functions.
+
+	/// Removes a specific item from a list.
+	/// @author Hugo Giraudel
+	/// @param {list} $list List.
+	/// @param {integer} $index Index.
+	/// @return {list} Updated list.
+	@function remove-nth($list, $index) {
+
+		$result: null;
+
+		@if type-of($index) != number {
+			@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+		}
+		@else if $index == 0 {
+			@warn "List index 0 must be a non-zero integer for `remove-nth`.";
+		}
+		@else if abs($index) > length($list) {
+			@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+		}
+		@else {
+
+			$result: ();
+			$index: if($index < 0, length($list) + $index + 1, $index);
+
+			@for $i from 1 through length($list) {
+
+				@if $i != $index {
+					$result: append($result, nth($list, $i));
+				}
+
+			}
+
+		}
+
+		@return $result;
+
+	}
+
+	/// Replaces a substring within another string.
+	/// @author Hugo Giraudel
+	/// @param {string} $string String.
+	/// @param {string} $search Substring.
+	/// @param {string} $replace Replacement.
+	/// @return {string} Updated string.
+	@function str-replace($string, $search, $replace: '') {
+
+		$index: str-index($string, $search);
+
+		@if $index {
+			@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+		}
+
+		@return $string;
+
+	}
+
+	/// Replaces a substring within each string in a list.
+	/// @param {list} $strings List of strings.
+	/// @param {string} $search Substring.
+	/// @param {string} $replace Replacement.
+	/// @return {list} Updated list of strings.
+	@function str-replace-all($strings, $search, $replace: '') {
+
+		@each $string in $strings {
+			$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
+		}
+
+		@return $strings;
+
+	}
+
+// Mixins.
+
+	/// Wraps @content in vendorized keyframe blocks.
+	/// @param {string} $name Name.
+	@mixin keyframes($name) {
+
+		@-moz-keyframes #{$name} { @content; }
+		@-webkit-keyframes #{$name} { @content; }
+		@-ms-keyframes #{$name} { @content; }
+		@keyframes #{$name} { @content; }
+
+	}
+
+	/// Vendorizes a declaration's property and/or value(s).
+	/// @param {string} $property Property.
+	/// @param {mixed} $value String/list of value(s).
+	@mixin vendor($property, $value) {
+
+		// Determine if property should expand.
+			$expandProperty: index($vendor-properties, $property);
+
+		// Determine if value should expand (and if so, add '-prefix-' placeholder).
+			$expandValue: false;
+
+			@each $x in $value {
+				@each $y in $vendor-values {
+					@if $y == str-slice($x, 1, str-length($y)) {
+
+						$value: set-nth($value, index($value, $x), '-prefix-' + $x);
+						$expandValue: true;
+
+					}
+				}
+			}
+
+		// Expand property?
+			@if $expandProperty {
+			    @each $vendor in $vendor-prefixes {
+			        #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
+			    }
+			}
+
+		// Expand just the value?
+			@elseif $expandValue {
+			    @each $vendor in $vendor-prefixes {
+			        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
+			    }
+			}
+
+		// Neither? Treat them as a normal declaration.
+			@else {
+		        #{$property}: #{$value};
+			}
+
+	}

assets/sass/main.scss

@@ -0,0 +1,62 @@
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'libs/html-grid';
+@import 'fontawesome-all.min.css';
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700');
+
+/*
+	Editorial by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+// Breakpoints.
+
+	@include breakpoints((
+		xlarge:   ( 1281px,  1680px ),
+		large:    ( 981px,   1280px ),
+		medium:   ( 737px,   980px  ),
+		small:    ( 481px,   736px  ),
+		xsmall:   ( 361px,   480px  ),
+		xxsmall:  ( null,    360px  ),
+		xlarge-to-max:    '(min-width: 1681px)',
+		small-to-xlarge:  '(min-width: 481px) and (max-width: 1680px)'
+	));
+
+// Base.
+
+	@import 'base/reset';
+	@import 'base/page';
+	@import 'base/typography';
+
+// Component.
+
+	@import 'components/row';
+	@import 'components/section';
+	@import 'components/form';
+	@import 'components/box';
+	@import 'components/icon';
+	@import 'components/image';
+	@import 'components/list';
+	@import 'components/actions';
+	@import 'components/icons';
+	@import 'components/contact';
+	@import 'components/pagination';
+	@import 'components/table';
+	@import 'components/button';
+	@import 'components/mini-posts';
+	@import 'components/features';
+	@import 'components/posts';
+
+// Layout.
+
+	@import 'layout/wrapper';
+	@import 'layout/main';
+	@import 'layout/sidebar';
+	@import 'layout/header';
+	@import 'layout/banner';
+	@import 'layout/footer';
+	@import 'layout/menu';

assets/styles/app.css

@@ -0,0 +1,3 @@
+body {
+    background-color: skyblue;
+}

assets/styles/style.css

@@ -0,0 +1,296 @@
+/* Style for the 3-column layout */
+body {
+  margin: 0;
+}
+
+/* Style for hamburger menu */
+.inner {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: stretch;
+  align-content: flex-start;
+  max-width: 1060px;
+  /* Adjust to your desired width */
+  margin: 0 auto;
+}
+
+.ref-tab {
+  width: 60px;
+  padding-top: 60px !important;
+}
+
+.ref-tab ul {
+  margin: 0;
+  padding: 0;
+}
+
+.ref-tab ul li {
+  list-style: none;
+  list-style-type: none;
+}
+
+.tab {
+  margin-bottom: 3px;
+}
+
+/**/
+.tab button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  margin-bottom: 3px;
+}
+
+.ref {
+  width: 36%;
+}
+
+.ref > div#ref {
+  vertical-align: top;
+  justify-content: flex-start;
+  align-content: flex-start;
+  overflow-y: scroll;
+  width: 100%;
+  height: 100%;
+  border: black solid 1px;
+  border-radius: 3px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+#ref {
+  padding: 3px 3px 3px 3px;
+}
+
+#passage {
+  width: 100px;
+}
+
+#newSpeaker {
+  display: none;
+  width: 110px;
+}
+
+#newSeries {
+  display: none;
+  width: 110px;
+}
+
+#fields-container {
+  display: none;
+}
+
+#fields-container.show {
+  display: block;
+}
+
+.notes {
+  width: 57%;
+}
+
+textarea#notes {
+  width: 100%;
+  height: 100%;
+  font-size: 14pt;
+}
+
+#notePreview {
+  display: none;
+  overflow-x: scroll;
+  padding-left: 10px;
+}
+
+#notePreview ul,
+#notePreview ol {
+  list-style-position: inside;
+}
+
+#previewBtn.active,
+#show-hide-btn.active,
+.tab button.active,
+#openRefBtn.active {
+  background-color: #f56a6a !important;
+  color: white !important;
+}
+
+#note-header-left {
+  display: inline-flex;
+  flex-direction: row;
+  width: 25%;
+}
+
+#note-header-right {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  width: 74%;
+}
+
+#note-header-left h2.dirty {
+  color: darkorange;
+}
+
+#note-list {
+  display: none;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+#note-list ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  list-style: none;
+}
+
+div#refQuery {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, 0.8);
+  width: 400px;
+  height: 200px;
+}
+
+div#refQuery #referenceSearch {
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #333;
+  background-color: #f4f4f4;
+  width: 150px;
+  height: 25px;
+  cursor: pointer;
+  display: none;
+}
+
+#passage-popup {
+  display: none;
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  color: black;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  width: 300px;
+  height: 300px;
+  overflow-x: scroll;
+}
+
+#save-check {
+  opacity: 0;
+  text-align: right;
+  font-size: 20pt;
+  margin-left: 15px;
+  color: green;
+}
+
+#save-check.saving {
+  color: orange;
+}
+
+#save-check.error {
+  color: red;
+}
+
+#fields-container input,
+#fields-container select {
+  width: 32.5%;
+  display: inline-block;
+}
+
+#old-notes article p:first-child {
+  margin-bottom: 0 !important;
+  font-size: 10pt;
+}
+
+#old-notes article a {
+  font-size: 12pt;
+}
+
+#old-notes article p:last-child {
+  font-size: 12pt;
+}
+
+.inner {
+  padding-left: 0;
+}
+
+.ref h2 {
+  display: inline-block;
+}
+
+#ref {
+  font-size: 12pt;
+}
+
+#ref ol,
+#ref ul {
+  list-style-position: inside;
+}
+
+#referenceBook {
+  display: none;
+}
+
+.recording-link {
+  font-size: 8pt;
+  color: blue;
+  text-decoration: none;
+}
+
+.fas-trash-alt {
+  color: red;
+  cursor: pointer;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 0.5;
+  z-index: 1000;
+}
+
+.modal-container {
+  position: absolute;
+  width: 300px;
+  /* adjust this to your desired modal width */
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  z-index: 1001;
+}
+
+.modal-header {
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.modal-footer {
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-top: 1px solid #ddd;
+}
+
+.btn-secondary {
+  color: #337ab7;
+}/*# sourceMappingURL=style.css.map */

assets/styles/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACAJ;;ADGA;EACI,WAAA;EACA,4BAAA;ACAJ;;ADGA;EACI,SAAA;EACA,UAAA;ACAJ;;ADGA;EACI,gBAAA;EACA,qBAAA;ACAJ;;ADGA;EACI,kBAAA;ACAJ;;ADGA,GAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;ACAJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,mBAAA;EACA,2BAAA;EACA,yBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACDJ;;ADIA;EACI,wBAAA;ACDJ;;ADIA;EACI,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,WAAA;EACA,YAAA;EACA,eAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,kBAAA;ACDJ;;ADIA;;EAEI,2BAAA;ACDJ;;ADIA;;;;EAII,oCAAA;EACA,uBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,mBAAA;EACA,UAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,2BAAA;EACA,UAAA;ACDJ;;ADIA;EACI,iBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,SAAA;EACA,UAAA;EACA,qBAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;EACA,YAAA;EACA,aAAA;ACDJ;;ADIA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;EACA,aAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,wCAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;;EAEI,YAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,2BAAA;EACA,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,qBAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;;EAEI,2BAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,cAAA;EACA,WAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,eAAA;ACDJ;;ADIA;EACI,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;ACDJ;;ADIA;EACI,kBAAA;EACA,YAAA;EACA,4CAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,sBAAA;EACA,uCAAA;EACA,aAAA;ACDJ;;ADIA;EACI,yBAAA;EACA,aAAA;EACA,6BAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,yBAAA;EACA,aAAA;EACA,0BAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ","file":"style.css"}

assets/styles/style.scss

@@ -0,0 +1,298 @@
+/* Style for the 3-column layout */
+body {
+    margin: 0;
+}
+
+/* Style for hamburger menu */
+
+.inner {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: stretch;
+    align-content: flex-start;
+    max-width: 1060px;
+    /* Adjust to your desired width */
+    margin: 0 auto;
+}
+
+.ref-tab {
+    width: 60px;
+    padding-top: 60px !important;
+}
+
+.ref-tab ul {
+    margin: 0;
+    padding: 0;
+}
+
+.ref-tab ul li {
+    list-style: none;
+    list-style-type: none;
+}
+
+.tab {
+    margin-bottom: 3px;
+}
+
+/**/
+.tab button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 80px;
+    width: 100%;
+    text-align: center;
+    font-size: 14px;
+    margin-bottom: 3px;
+}
+
+
+.ref {
+    width: 36%;
+}
+
+.ref>div#ref {
+    vertical-align: top;
+    justify-content: flex-start;
+    align-content: flex-start;
+    overflow-y: scroll;
+    width: 100%;
+    height: 100%;
+    border: black solid 1px;
+    border-radius: 3px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+#ref {
+    padding: 3px 3px 3px 3px;
+}
+
+#passage {
+    width: 100px;
+}
+
+#newSpeaker {
+    display: none;
+    width: 110px;
+}
+
+#newSeries {
+    display: none;
+    width: 110px;
+}
+
+#fields-container {
+    display: none;
+}
+
+#fields-container.show {
+    display: block;
+}
+
+.notes {
+    width: 57%
+}
+
+textarea#notes {
+    width: 100%;
+    height: 100%;
+    font-size: 14pt;
+}
+
+#notePreview {
+    display: none;
+    overflow-x: scroll;
+    padding-left: 10px;
+}
+
+#notePreview ul,
+#notePreview ol {
+    list-style-position: inside;
+}
+
+#previewBtn.active,
+#show-hide-btn.active,
+.tab button.active,
+#openRefBtn.active {
+    background-color: #f56a6a !important;
+    color: white !important;
+}
+
+#note-header-left {
+    display: inline-flex;
+    flex-direction: row;
+    width: 25%;
+}
+
+#note-header-right {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    width: 74%;
+}
+
+#note-header-left h2.dirty {
+    color: darkorange;
+}
+
+#note-list {
+    display: none;
+    height: 100%;
+    overflow-y: scroll;
+}
+
+#note-list ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    list-style: none;
+}
+
+div#refQuery {
+    display: none;
+    position: absolute;
+    z-index: 100;
+    background-color: rgba(0, 0, 0, 0.8);
+    width: 400px;
+    height: 200px;
+}
+
+div#refQuery #referenceSearch {
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333;
+    background-color: #f4f4f4;
+    width: 150px;
+    height: 25px;
+    cursor: pointer;
+    display: none;
+}
+
+#passage-popup {
+    display: none;
+    position: absolute;
+    z-index: 100;
+    background-color: #fff;
+    color: black;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    width: 300px;
+    height: 300px;
+    overflow-x: scroll;
+}
+
+#save-check {
+    opacity: 0;
+    text-align: right;
+    font-size: 20pt;
+    margin-left: 15px;
+    color: green;
+}
+
+#save-check.saving {
+    color: orange;
+}
+
+#save-check.error {
+    color: red;
+}
+
+#fields-container input,
+#fields-container select {
+    width: 32.5%;
+    display: inline-block;
+}
+
+#old-notes article p:first-child {
+    margin-bottom: 0 !important;
+    font-size: 10pt;
+}
+
+#old-notes article a {
+    font-size: 12pt;
+}
+
+#old-notes article p:last-child {
+    font-size: 12pt;
+}
+
+.inner {
+    padding-left: 0;
+}
+
+.ref h2 {
+    display: inline-block;
+}
+
+#ref {
+    font-size: 12pt;
+}
+
+#ref ol,
+#ref ul {
+    list-style-position: inside;
+}
+
+#referenceBook {
+    display: none;
+}
+
+.recording-link {
+    font-size: 8pt;
+    color: blue;
+    text-decoration: none;
+}
+
+.fas-trash-alt {
+    color: red;
+    cursor: pointer;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #000;
+    opacity: 0.5;
+    z-index: 1000;
+}
+
+.modal-container {
+    position: absolute;
+    width: 300px;
+    /* adjust this to your desired modal width */
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    z-index: 1001;
+}
+
+.modal-header {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+}
+
+.modal-body {
+    padding: 20px;
+}
+
+.modal-footer {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+}
+
+.btn-secondary {
+    color: #337ab7;
+}