Merge pull request 'Final updates for v2.0' (#29) from 1.3 into main

Reviewed-on: #29

.gitignore

@@ -0,0 +1,28 @@
+
+###> symfony/framework-bundle ###
+/.env*
+/config/secrets/prod/prod.decrypt.private.php
+/public/bundles/
+/var/
+/vendor/
+/migrations/
+###< 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/
+composer.lock
+.continue

.gitmessage

@@ -0,0 +1,3 @@
+{type}: {component}
+
+{summary}

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,78 @@
+FROM php:8.5-apache
+
+RUN apt update && \
+    apt upgrade -y && \
+    apt install -y \
+    libzip-dev \
+    unzip \
+    libonig-dev \
+    libxml2-dev \
+    libpng-dev \
+    libjpeg-dev \
+    libicu-dev \
+    libpq-dev \
+    libsqlite3-dev \
+    sqlite3 \
+    curl \
+    git \
+    cron \
+    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 \
+    pdo_mysql \
+    pdo_pgsql \
+    pdo_sqlite
+
+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
+
+ARG CACHEBURST=1
+ARG BRANCH=main
+
+WORKDIR /var/www/html
+RUN git clone -b ${BRANCH} --single-branch https://gitea.rkprather.com/ryan/sermon-notes.git ./
+RUN git config --global --add safe.directory /var/www/html
+
+RUN mv 000-default.conf /etc/apache2/sites-available/
+
+RUN echo "20 1 * * 6 root cd /var/www/html && /usr/local/bin/php bin/console app:get-audio > /proc/1/fd/1 2>&1" > /etc/cron.d/get-audio
+RUN chmod 644 /etc/cron.d/get-audio
+RUN crontab /etc/cron.d/get-audio
+
+RUN COMPOSER_ALLOW_SUPERUSER=1 composer install --no-scripts --no-dev --optimize-autoloader
+RUN mkdir /data
+
+RUN mkdir -p /var/www/html/var/cache/prod
+RUN mkdir -p /var/www/html/var/log
+
+RUN chown -R 33:33 /var/www/html /data
+RUN find /var/www/html -type d -exec chmod 755 '{}' \;
+RUN find /var/www/html -type f -exec chmod 644 '{}' \;
+RUN chmod 755 /data
+RUN a2enmod rewrite setenvif headers
+
+COPY prod.env /var/www/html/.env
+RUN /usr/local/bin/php bin/console importmap:install
+RUN /usr/local/bin/php bin/console asset-map:compile
+RUN rm /var/www/html/.env
+RUN chmod +x /var/www/html/bin/entrypoint.sh
+
+EXPOSE 80
+
+ENTRYPOINT ["/var/www/html/bin/entrypoint.sh"]
+CMD ["apache2-foreground"]

README.md

@@ -1,3 +1,96 @@
 # 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. Make a directory in your `sermon-notes` folder for your database (e.g. `data`)
+3. On your host computer, `docker exec -it sermon-notes bash`
+4. `scp .env {user}@{IP}:{path}`
+5. Authenticate with the password
+6. `cd var/`
+7. `scp data.db {user}@{IP}:{path}/data`
+8. This will copy the file to the host computer
+9. After this then you run the `docker run...` command in Step 3 of the `Installation` instructions below
+
+## 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. Download your preferred compose file (`wget -O compose.yml {link}`)
+    1. [`compose.sqlite.yml`](https://gitea.rkprather.com/ryan/sermon-notes/raw/branch/main/docker/compose.sqlite.yml) - compose file for if you are planning to use SQLite
+    2. [`compose.mysql.yml`](https://gitea.rkprather.com/ryan/sermon-notes/raw/branch/main/docker/compose.mysql.yml) - compose file with an integrated MYSQL database image
+    3. [`compose.mariadb.yml`](https://gitea.rkprather.com/ryan/sermon-notes/raw/branch/main/docker/compose.mariadb.yml) - compose file with an integrate MariaDB database image
+    4. [`compose.pgsql.yml`](https://gitea.rkprather.com/ryan/sermon-notes/raw/branch/main/docker/compose.pgsql.yml) - compose file with an integrate Postgres database image
+    5. [`compose.shared-db.yml`](https://gitea.rkprather.com/ryan/sermon-notes/raw/branch/main/docker/compose.shared-db.yml) - compose file with no database image because you are planning on using an existing database container or bare metal server
+4. Pull the image `docker pull gitea.rkprather.com/ryan/sermon-notes:latest`
+5. **NOTE: IF UPGRADING SKIP THIS STEP!!!** - Run the setup script, this will setup your .env file so that when you start the container everything will be where it is supposed to be.
+    - `docker run --rm -it -v ${PWD}/.env:/var/www/html/.env gitea.rkprather.com/ryan/sermon-notes:latest php /var/www/html/setup.php --{database-type} {--shared}`
+    - `{database-type}` = `sqlite`, `mysql`, `mariadb`, or `pgsql`
+    - If you intend on this being connected to a shared database make sure that you specify `--shared`.
+6. Start the container with compose `docker compose up -d`
+7. **NOTE: IF UPGRADING SKIP THIS STEP!!!** Run `docker exec -it sermon-notes php /var/www/html/install.php`. This will run the `php composer` to populate the database with all the desired reference material.
+    - NOTE: You will see deprecation warnings, you can ignore these
+8. 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,10 @@
+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';
+
+// 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/dark-mode.css

@@ -0,0 +1,18 @@
+:root {
+  --dark: #3d4449;
+  --primary: #00760e;
+  --light: #f5f6f7;
+  --medium: #d1d1d1;
+  --text: var(--light);
+  --background: var(--dark);
+  --recording: #00f;
+  --success: #080;
+  --warning: orange;
+  --error: #f00;
+  --border: var(--primary);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+}/*# sourceMappingURL=dark-mode.css.map */

assets/css/dark-mode.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dark-mode.scss","dark-mode.css"],"names":[],"mappings":"AACA;EACC,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,aAAA;EACA,wBAAA;EAEA,SAAA;EACA,UAAA;EACA,SAAA;EACA,aAAA;EACA,wBAAA;ACDD","file":"dark-mode.css"}

assets/css/dark-mode.scss

@@ -0,0 +1,20 @@
+// dark mode color scheme
+:root {
+	--dark: #3d4449;
+	--primary: #00760e;
+	--light: #f5f6f7;
+	--medium: #d1d1d1;
+	--text: var(--light);
+	--background: var(--dark);
+	--recording: #00f;
+	--success: #080;
+	--warning: orange;
+	--error: #f00;
+	--border: var(--primary);
+
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font: inherit;
+	vertical-align: baseline;
+}

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/lg-screen-style.css

@@ -0,0 +1,121 @@
+@media screen and (min-width: 1501px) {
+  .mobile-note-header {
+    display: none;
+  }
+  #note-list {
+    display: none;
+    overflow-y: scroll;
+  }
+  #note-table_wrapper {
+    width: 97%;
+  }
+  .container #sidebar-link.toggle {
+    left: 25em;
+  }
+  .container {
+    display: grid;
+    height: 100vh;
+    grid-template-columns: 25em 60px 35% 0.98fr;
+    grid-template-rows: 60px 100vh;
+    gap: 5px 5px;
+    grid-auto-flow: row;
+    grid-template-areas: "sidebar-header ref-btn-header ref-header note-header" "sidebar ref-btn ref-text notes";
+    transition: grid-template-columns 0.5s ease-in-out;
+  }
+  .container p {
+    margin: 0 0 1em 0;
+  }
+  .container .fields-container {
+    display: none;
+  }
+  .container.sidebar-collapsed {
+    grid-template-columns: 0px 60px 35% 0.98fr;
+  }
+  .container.sidebar-collapsed #sidebar-link.toggle {
+    left: 0;
+  }
+  .bottom-row {
+    height: calc(100vh - 75px);
+  }
+  .notes {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 100vh;
+    grid-template-rows: 75px 100vh;
+    gap: 2px 0px;
+    grid-template-areas: "fields-container" "note-text";
+    grid-area: notes;
+  }
+  .notes .fields-container {
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    width: 99.5%;
+  }
+  .notes .fields-container input[type=text], .notes .fields-container select {
+    background-color: var(--background);
+    color: var(--text);
+    height: 1.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0.375em;
+    border: solid 1px var(--dark);
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    font-size: 14pt;
+    font-weight: 400;
+    line-height: 1.65;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 2;
+    min-width: 50px;
+    max-width: 200px;
+  }
+  .notes .note-text {
+    height: 100%;
+    width: 100%;
+  }
+  .notes .note-text textarea {
+    height: -webkit-fill-available;
+    height: -moz-available;
+    height: stretch;
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+    border-radius: 10px;
+    background-color: transparent;
+    color: var(--text);
+    font-family: "Roboto Sans";
+  }
+  .note-header, .ref-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .note-header h2, .ref-header h2 {
+    margin: 0;
+  }
+  .note-header select, .ref-header select {
+    background-color: var(--background);
+    color: var(--text);
+    height: 1.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0.375em;
+    border: solid 1px var(--dark);
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    font-size: 14pt;
+    font-weight: 400;
+    line-height: 1.65;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 2;
+    min-width: 50px;
+    max-width: 200px;
+    margin-right: 3px;
+  }
+}/*# sourceMappingURL=lg-screen-style.css.map */

assets/css/lg-screen-style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["lg-screen-style.scss","lg-screen-style.css"],"names":[],"mappings":"AAAA;EACA;IACC,aAAA;ECCC;EDEF;IACC,aAAA;IACA,kBAAA;ECAC;EDGF;IACC,UAAA;ECDC;EDIF;IACI,UAAA;ECFF;EDKF;IACC,aAAA;IACA,aAAA;IACA,2CAAA;IACA,8BAAA;IACA,YAAA;IACA,mBAAA;IACA,4GACC;IAGD,kDAAA;ECNC;EDQD;IACC,iBAAA;ECNA;EDSD;IACC,aAAA;ECPA;EDUD;IACC,0CAAA;ECRA;EDUA;IACC,OAAA;ECRD;EDaF;IACC,0BAAA;ECXC;EDcF;IACC,aAAA;IACA,sBAAA;IACA,4BAAA;IACA,8BAAA;IACA,YAAA;IACA,mDAAA;IAEA,gBAAA;ECbC;EDeD;IACC,6BAAA;IACA,eAAA;IACA,YAAA;ECbA;EDgBA;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;ECdD;EDkBD;IACC,YAAA;IACA,WAAA;EChBA;EDkBA;IACC,8BAAA;IAAA,sBAAA;IAAA,eAAA;IACA,6BAAA;IAAA,qBAAA;IAAA,cAAA;IACA,mBAAA;IACA,6BAAA;IACA,kBAAA;IACA,0BAAA;EChBD;EDqBF;IACC,aAAA;IACA,8BAAA;IACA,mBAAA;ECnBC;EDqBD;IACC,SAAA;ECnBA;EDsBD;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;ECpBA;AACF","file":"lg-screen-style.css"}

assets/css/lg-screen-style.scss

@@ -0,0 +1,141 @@
+@media screen and (min-width: 1501px) {
+.mobile-note-header {
+	display: none;
+}
+
+#note-list {
+	display: none;
+	overflow-y: scroll
+}
+
+#note-table_wrapper {
+	width: 97%;
+}
+
+.container #sidebar-link.toggle {
+    left: 25em;
+}
+
+.container {
+	display: grid;
+	height: 100vh;
+	grid-template-columns: 25em 60px 35% 0.98fr;
+	grid-template-rows: 60px 100vh;
+	gap: 5px 5px;
+	grid-auto-flow: row;
+	grid-template-areas:
+		"sidebar-header ref-btn-header ref-header note-header"
+		"sidebar ref-btn ref-text notes";
+
+	transition: grid-template-columns 0.5s ease-in-out;
+
+	p {
+		margin: 0 0 1em 0;
+	}
+
+	.fields-container {
+		display: none;
+	}
+
+	&.sidebar-collapsed {
+		grid-template-columns: 0px 60px 35% 0.98fr;
+
+		#sidebar-link.toggle {
+			left: 0;
+		}
+	}
+}
+
+.bottom-row { 
+	height: calc(100vh - 75px);
+}
+
+.notes {
+	display: flex;
+	flex-direction: column;
+	grid-template-columns: 100vh;
+	grid-template-rows: 75px 100vh;
+	gap: 2px 0px;
+	grid-template-areas: "fields-container" "note-text";
+
+	grid-area: notes;
+
+	.fields-container {
+		justify-content: space-evenly;
+		flex-wrap: wrap;
+		width: 99.5%;
+		// height: 75px;
+
+		input[type="text"], select {
+			background-color: var(--background);
+			color: var(--text);
+			height: 1.5em;
+			-moz-appearance: none;
+			-webkit-appearance: none;
+			-ms-appearance: none;
+			appearance: none;
+			border-radius: 0.375em;
+			border: solid 1px var(--dark);
+			outline: 0;
+			padding: 0 1em;
+			text-decoration: none;
+			font-size: 14pt;
+			font-weight: 400;
+			line-height: 1.65;
+			flex-basis: auto;
+			flex-grow: 1;
+			flex-shrink: 2;
+			min-width: 50px;
+			max-width: 200px;
+		}
+	}
+
+	.note-text {
+		height: 100%;
+		width: 100%;
+
+		textarea {
+			height: stretch;
+			width: stretch;
+			border-radius: 10px;
+			background-color: transparent;
+			color: var(--text);
+			font-family: 'Roboto Sans';
+		}
+	}
+}
+
+.note-header, .ref-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	h2 {
+		margin: 0;
+	}
+
+	select {
+		background-color: var(--background);
+		color: var(--text);
+		height: 1.5em;
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		border-radius: 0.375em;
+		border: solid 1px var(--dark);
+		outline: 0;
+		padding: 0 1em;
+		text-decoration: none;
+		font-size: 14pt;
+		font-weight: 400;
+		line-height: 1.65;
+		flex-basis: auto;
+		flex-grow: 1;
+		flex-shrink: 2;
+		min-width: 50px;
+		max-width: 200px;
+		margin-right: 3px;
+	}
+}
+}

assets/css/light-mode.css

@@ -0,0 +1,18 @@
+:root {
+  --dark: #3d4449;
+  --primary: #f56a6a;
+  --light: #f5f6f7;
+  --medium: #d1d1d1;
+  --text: var(--dark);
+  --background: var(--light);
+  --recording: #00f;
+  --success: #080;
+  --warning: orange;
+  --error: #f00;
+  --border: var(--primary);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+}/*# sourceMappingURL=light-mode.css.map */

assets/css/light-mode.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["light-mode.scss","light-mode.css"],"names":[],"mappings":"AACA;EACC,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAAA;EACA,0BAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,aAAA;EACA,wBAAA;EAEA,SAAA;EACA,UAAA;EACA,SAAA;EACA,aAAA;EACA,wBAAA;ACDD","file":"light-mode.css"}

assets/css/light-mode.scss

@@ -0,0 +1,20 @@
+// light mode color scheme
+:root {
+	--dark: #3d4449;
+	--primary: #f56a6a;
+	--light: #f5f6f7;
+	--medium: #d1d1d1;
+	--text: var(--dark);
+	--background: var(--light);
+	--recording: #00f;
+	--success: #080;
+	--warning: orange;
+	--error: #f00;
+	--border: var(--primary);
+
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font: inherit;
+	vertical-align: baseline;
+}

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/mid-screen-style.css

@@ -0,0 +1,162 @@
+@media screen and (min-width: 1051px) and (max-width: 1500px) {
+  :root {
+    --sidebar-width: 20em;
+    --sidebar-header-width: 15em;
+    --hidden-sidebar-width: -20em;
+    --hidden-sidebar-header-width: -15em;
+  }
+  .mobile-note-header, #note-list {
+    display: none;
+  }
+  .container #sidebar-link.toggle {
+    left: 20em;
+  }
+  .container {
+    position: relative;
+    height: 100vh;
+    overflow-x: hidden;
+    display: grid;
+    grid-template-columns: 60px 35% 0.95fr;
+    grid-template-rows: 60px 1fr;
+    gap: 5px 5px;
+    grid-auto-flow: row;
+    grid-template-areas: "ref-btn-header ref-header note-header" "ref-btn ref-text notes";
+  }
+  .container #sidebar-header, .container #sidebar {
+    position: absolute;
+    left: 0;
+    z-index: 10000;
+    transition: left 0.5s ease-in-out;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
+    box-sizing: border-box;
+  }
+  .container #sidebar-header {
+    top: 0;
+    width: calc(var(--sidebar-header-width) + 40px);
+    height: 60px;
+    padding: 0 !important;
+    overflow: visible !important;
+  }
+  .container #sidebar {
+    top: 61px;
+    width: var(--sidebar-width);
+    height: calc(100vh - 61px);
+    padding: 15px;
+  }
+  .container #sidebar .inner {
+    width: 100%;
+  }
+  .container #sidebar-header #search {
+    padding: 19px;
+    width: 15em !important;
+  }
+  .container #sidebar-link.toggle {
+    left: calc(var(--sidebar-header-width) + 40px);
+  }
+  .container.sidebar-collapsed #sidebar {
+    left: var(--hidden-sidebar-width);
+    box-shadow: none;
+  }
+  .container.sidebar-collapsed #sidebar-header {
+    left: calc(var(--hidden-sidebar-header-width) - 40px);
+    box-shadow: none;
+  }
+  .container .fields-container {
+    display: none;
+  }
+  .bottom-row {
+    height: calc(100vh - 75px);
+  }
+  .notes {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 75px 1fr;
+    gap: 2px 0px;
+    grid-template-areas: "fields-container" "note-text";
+    grid-area: notes;
+  }
+  .notes .fields-container {
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    width: 99.5%;
+  }
+  .notes .fields-container input[type=text], .notes .fields-container select {
+    background-color: var(--background);
+    color: var(--text);
+    height: 1.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0.375em;
+    border: solid 1px var(--dark);
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    font-size: 14pt;
+    font-weight: 400;
+    line-height: 1.65;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 50px;
+    max-width: 200px;
+  }
+  .notes .note-text {
+    height: 100%;
+    width: 98.5%;
+  }
+  .notes .note-text textarea {
+    height: -webkit-fill-available;
+    height: -moz-available;
+    height: stretch;
+    width: 95.5%;
+    border-radius: 10px;
+    background-color: transparent;
+    color: var(--text);
+    font-family: "Roboto Sans";
+  }
+  .note-header, .ref-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .note-header h2, .ref-header h2 {
+    margin: 0;
+  }
+  .note-header select, .ref-header select {
+    background-color: var(--background);
+    color: var(--text);
+    height: 1.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0.375em;
+    border: solid 1px var(--dark);
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    font-size: 14pt;
+    font-weight: 400;
+    line-height: 1.65;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 2;
+    min-width: 50px;
+    max-width: 200px;
+    margin-right: 3px;
+  }
+  input#query {
+    font-size: 10pt !important;
+    padding: 0 !important;
+  }
+  #old-notes {
+    padding: 15px !important;
+  }
+  #menu {
+    padding: 15px !important;
+  }
+  #sidebar header.major {
+    margin: 0 15px !important;
+  }
+}/*# sourceMappingURL=mid-screen-style.css.map */

assets/css/mid-screen-style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["mid-screen-style.scss","mid-screen-style.css"],"names":[],"mappings":"AAAA;EACA;IACC,qBAAA;IACA,4BAAA;IACA,6BAAA;IACA,oCAAA;ECCC;EDEF;IACC,aAAA;ECAC;EDGF;IACI,UAAA;ECDF;EDIF;IACC,kBAAA;IACA,aAAA;IACA,kBAAA;IAEA,aAAA;IACA,sCAAA;IACA,4BAAA;IACA,YAAA;IACA,mBAAA;IACA,qFACC;ECJA;EDOD;IACC,kBAAA;IACA,OAAA;IACA,cAAA;IACA,iCAAA;IACA,yCAAA;IAEA,sBAAA;ECNA;EDSD;IACC,MAAA;IACA,+CAAA;IACA,YAAA;IACA,qBAAA;IACA,4BAAA;ECPA;EDUD;IACC,SAAA;IACA,2BAAA;IACA,0BAAA;IACA,aAAA;ECRA;EDUA;IACC,WAAA;ECRD;EDYD;IACC,aAAA;IACA,sBAAA;ECVA;EDaD;IACC,8CAAA;ECXA;EDeA;IACC,iCAAA;IACA,gBAAA;ECbD;EDgBA;IACC,qDAAA;IACA,gBAAA;ECdD;EDkBD;IACC,aAAA;EChBA;EDoBF;IACC,0BAAA;EClBC;EDqBF;IACC,aAAA;IACA,sBAAA;IACA,0BAAA;IACA,4BAAA;IACA,YAAA;IACA,mDAAA;IAEA,gBAAA;ECpBC;EDsBD;IACC,6BAAA;IACA,eAAA;IACA,YAAA;ECpBA;EDuBA;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;ECrBD;EDyBD;IACC,YAAA;IACA,YAAA;ECvBA;EDyBA;IACC,8BAAA;IAAA,sBAAA;IAAA,eAAA;IACA,YAAA;IACA,mBAAA;IACA,6BAAA;IACA,kBAAA;IACA,0BAAA;ECvBD;ED4BF;IACC,aAAA;IACA,8BAAA;IACA,mBAAA;EC1BC;ED4BD;IACC,SAAA;EC1BA;ED6BD;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;EC3BA;ED+BF;IACC,0BAAA;IACA,qBAAA;EC7BC;EDgCF;IACC,wBAAA;EC9BC;EDiCF;IACC,wBAAA;EC/BC;EDkCF;IACC,yBAAA;EChCC;AACF","file":"mid-screen-style.css"}

assets/css/mid-screen-style.scss

@@ -0,0 +1,195 @@
+@media screen and (min-width: 1051px) and (max-width: 1500px) {
+:root {
+	--sidebar-width: 20em;
+	--sidebar-header-width: 15em;
+	--hidden-sidebar-width: -20em;
+	--hidden-sidebar-header-width: -15em;
+}
+
+.mobile-note-header, #note-list {
+	display: none;
+}
+
+.container #sidebar-link.toggle {
+    left: 20em;
+}
+
+.container {
+	position: relative;
+	height: 100vh;
+	overflow-x: hidden;
+
+	display: grid;
+	grid-template-columns: 60px 35% 0.95fr;
+	grid-template-rows: 60px 1fr;
+	gap: 5px 5px;
+	grid-auto-flow: row;
+	grid-template-areas:
+		"ref-btn-header ref-header note-header"
+		"ref-btn ref-text notes";
+
+	#sidebar-header, #sidebar {
+		position: absolute;
+		left: 0;
+		z-index: 10000;
+		transition: left 0.5s ease-in-out;
+		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
+		//display: block;
+		box-sizing: border-box;
+	}
+
+	#sidebar-header {
+		top: 0;
+		width: calc(var(--sidebar-header-width) + 40px);
+		height: 60px;
+		padding: 0 !important;
+		overflow: visible !important;
+	}
+
+	#sidebar {
+		top: 61px;
+		width: var(--sidebar-width);
+		height: calc(100vh - 61px);
+		padding: 15px;
+
+		.inner {
+			width: 100%;
+		}
+	}
+
+	#sidebar-header #search {
+		padding: 19px;
+		width: 15em !important;
+	}
+
+	#sidebar-link.toggle {
+		left: calc(var(--sidebar-header-width) + 40px);
+	}
+
+	&.sidebar-collapsed {
+		#sidebar {
+			left: var(--hidden-sidebar-width);
+			box-shadow: none;
+		}
+
+		#sidebar-header {
+			left: calc(var(--hidden-sidebar-header-width) - 40px);
+			box-shadow: none;
+		}
+	}
+
+	.fields-container {
+		display: none;
+	}
+}
+
+.bottom-row { 
+	height: calc(100vh - 75px);
+}
+
+.notes {
+	display: flex;
+	flex-direction: column;
+	grid-template-columns: 1fr;
+	grid-template-rows: 75px 1fr;
+	gap: 2px 0px;
+	grid-template-areas: "fields-container" "note-text";
+
+	grid-area: notes;
+
+	.fields-container {
+		justify-content: space-evenly;
+		flex-wrap: wrap;
+		width: 99.5%;
+		// height: 75px;
+
+		input[type="text"], select {
+			background-color: var(--background);
+			color: var(--text);
+			height: 1.5em;
+			-moz-appearance: none;
+			-webkit-appearance: none;
+			-ms-appearance: none;
+			appearance: none;
+			border-radius: 0.375em;
+			border: solid 1px var(--dark);
+			outline: 0;
+			padding: 0 1em;
+			text-decoration: none;
+			font-size: 14pt;
+			font-weight: 400;
+			line-height: 1.65;
+			flex-basis: auto;
+			flex-grow: 1;
+			flex-shrink: 1;
+			min-width: 50px;
+			max-width: 200px;
+		}
+	}
+
+	.note-text {
+		height: 100%;
+		width: 98.5%;
+
+		textarea {
+			height: stretch;
+			width: 95.5%;
+			border-radius: 10px;
+			background-color: transparent;
+			color: var(--text);
+			font-family: 'Roboto Sans';
+		}
+	}
+}
+
+.note-header, .ref-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	h2 {
+		margin: 0;
+	}
+
+	select {
+		background-color: var(--background);
+		color: var(--text);
+		height: 1.5em;
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+		border-radius: 0.375em;
+		border: solid 1px var(--dark);
+		outline: 0;
+		padding: 0 1em;
+		text-decoration: none;
+		font-size: 14pt;
+		font-weight: 400;
+		line-height: 1.65;
+		flex-basis: auto;
+		flex-grow: 1;
+		flex-shrink: 2;
+		min-width: 50px;
+		max-width: 200px;
+		margin-right: 3px;
+	}
+}
+
+input#query {
+	font-size: 10pt !important;
+	padding: 0 !important;
+}
+
+#old-notes {
+	padding: 15px !important;
+}
+
+#menu {
+	padding: 15px !important;
+}
+
+#sidebar header.major {
+	margin: 0 15px !important;
+}
+}

assets/css/mobile-style.css

@@ -0,0 +1,97 @@
+@media screen and (max-width: 1050px) {
+  #sidebar {
+    display: none;
+  }
+  .note-header, #note-list, .ref-header, .ref-btn-header, .ref-btn, .fields-container {
+    display: none;
+  }
+  .container {
+    display: grid;
+    height: 100vh;
+    width: 100vw;
+    grid-template-columns: 1fr;
+    grid-template-rows: 50px 50% 1fr;
+    gap: 5px 0;
+    grid-auto-flow: column;
+    grid-template-areas: "mobile-note-header" "notes" "ref-text";
+  }
+  .container .ref-text {
+    height: 100%;
+    width: 98vw;
+    margin-left: 1vw;
+  }
+  .container .ref-text a {
+    color: var(--primary);
+  }
+  .ref-header, .ref-btn-header, .ref-btn, .note-header, .fields-container {
+    display: none;
+  }
+  .mobile-note-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .mobile-note-header h2 {
+    margin: 0 10px;
+  }
+  .mobile-note-header button {
+    margin: 0 10px;
+  }
+  .notes {
+    width: 98vw;
+    margin-left: 1vw;
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 50px;
+    gap: 2px 0;
+    grid-template-areas: "note-text" "fields-container";
+    grid-area: notes;
+  }
+  .notes .fields-container {
+    justify-content: space-between;
+    flex-wrap: wrap;
+    width: 99.5%;
+  }
+  .notes .fields-container input[type=text], .notes .fields-container select {
+    background-color: var(--background);
+    color: var(--text);
+    height: 1.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0.375em;
+    border: solid 1px var(--border);
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    font-size: 14pt;
+    font-weight: 400;
+    line-height: 1.65;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 50px;
+    max-width: 200px;
+  }
+  .notes .note-text {
+    height: 100%;
+    width: 100%;
+  }
+  .notes .note-text textarea {
+    height: 100%;
+    width: 98%;
+    border-radius: 10px;
+    background-color: transparent;
+    color: var(--text);
+    font-family: "Roboto Sans";
+    padding: 0 5px;
+  }
+  #sidebar {
+    position: fixed !important;
+  }
+  #refQuery {
+    height: 150px !important;
+  }
+}/*# sourceMappingURL=mobile-style.css.map */

assets/css/mobile-style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["mobile-style.scss","mobile-style.css"],"names":[],"mappings":"AAAA;EACA;IACC,aAAA;ECCC;EDEF;IACC,aAAA;ECAC;EDGF;IACC,aAAA;IACA,aAAA;IACA,YAAA;IACA,0BAAA;IACA,gCAAA;IACA,UAAA;IACA,sBAAA;IACA,4DACC;ECFA;EDMD;IACC,YAAA;IACA,WAAA;IACA,gBAAA;ECJA;EDMA;IACC,qBAAA;ECJD;EDSF;IACC,aAAA;ECPC;EDUF;IACC,aAAA;IACA,mBAAA;IACA,8BAAA;IACA,mBAAA;ECRC;EDUD;IACC,cAAA;ECRA;EDWD;IACC,cAAA;ECTA;EDaF;IACC,WAAA;IACA,gBAAA;IAEA,aAAA;IACA,sBAAA;IACA,0BAAA;IACA,4BAAA;IACA,UAAA;IACA,mDAAA;IAEA,gBAAA;ECbC;EDeD;IACC,8BAAA;IACA,eAAA;IACA,YAAA;ECbA;EDeA;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,+BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;ECbD;EDiBD;IACC,YAAA;IACA,WAAA;ECfA;EDiBA;IACC,YAAA;IACA,UAAA;IACA,mBAAA;IACA,6BAAA;IACA,kBAAA;IACA,0BAAA;IACA,cAAA;ECfD;EDoBF;IACC,0BAAA;EClBC;EDqBF;IACC,wBAAA;ECnBC;AACF","file":"mobile-style.css"}

assets/css/mobile-style.scss

@@ -0,0 +1,118 @@
+@media screen and (max-width: 1050px) {
+#sidebar {
+	display: none;
+}
+
+.note-header, #note-list, .ref-header, .ref-btn-header, .ref-btn, .fields-container {
+	display: none;
+}
+
+.container {
+	display: grid;
+	height: 100vh;
+	width: 100vw;
+	grid-template-columns: 1fr;
+	grid-template-rows: 50px 50% 1fr;
+	gap: 5px 0;
+	grid-auto-flow: column;
+	grid-template-areas: 
+		"mobile-note-header"
+		"notes"
+		"ref-text";
+
+	.ref-text {
+		height: 100%;
+		width: 98vw;
+		margin-left: 1vw;
+
+		& a {
+			color: var(--primary);
+		}
+	}
+}
+
+.ref-header, .ref-btn-header, .ref-btn, .note-header, .fields-container {
+	display: none;
+}
+
+.mobile-note-header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+
+	h2 {
+		margin: 0 10px;
+	}
+
+	button {
+		margin: 0 10px;
+	}
+}
+
+.notes {
+	width: 98vw;
+	margin-left: 1vw;
+
+	display: flex;
+	flex-direction: column;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr 50px;
+	gap: 2px 0;
+	grid-template-areas: "note-text" "fields-container";
+
+	grid-area: notes;
+
+	.fields-container {
+		justify-content: space-between;
+		flex-wrap: wrap;
+		width: 99.5%;
+		
+		input[type="text"], select {
+			background-color: var(--background);
+			color: var(--text);
+			height: 1.5em;
+			-moz-appearance: none;
+			-webkit-appearance: none;
+			-ms-appearance: none;
+			appearance: none;
+			border-radius: 0.375em;
+			border: solid 1px var(--border);
+			outline: 0;
+			padding: 0 1em;
+			text-decoration: none;
+			font-size: 14pt;
+			font-weight: 400;
+			line-height: 1.65;
+			flex-basis: auto;
+			flex-grow: 1;
+			flex-shrink: 1;
+			min-width: 50px;
+			max-width: 200px;
+		}
+	}
+
+	.note-text {
+		height: 100%;
+		width: 100%;
+
+		textarea {
+			height: 100%;
+			width: 98%;
+			border-radius: 10px;
+			background-color: transparent;
+			color: var(--text);
+			font-family: 'Roboto Sans';
+			padding: 0 5px;
+		}
+	}
+}
+
+#sidebar {
+	position: fixed !important;
+}
+
+#refQuery {
+	height: 150px !important;
+}
+}

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/css/sidebar-style.css

@@ -0,0 +1,198 @@
+/**
+ * Sidebar
+ */
+#sidebar-header {
+  grid-area: sidebar-header;
+  background-color: var(--background);
+  overflow: hidden;
+  min-width: 0;
+  padding: 10px;
+}
+#sidebar-header #search {
+  width: 90%;
+}
+
+#sidebar {
+  grid-area: sidebar;
+  top: 0;
+  z-index: 10000;
+  overflow-y: auto;
+  min-width: 0;
+  border-right: solid 2px var(--border);
+  height: calc(100vh - 60px);
+  background-color: var(--background);
+  color: var(--text);
+  font-size: 0.9em;
+  position: relative;
+  overflow-x: hidden;
+}
+#sidebar .inner {
+  width: 25em;
+}
+
+#sidebar h2 {
+  font-size: 1.38889em;
+  text-align: center;
+  display: block;
+}
+
+.container #sidebar-link.toggle {
+  position: absolute;
+  top: 0;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  z-index: 10001;
+  transition: left 0.5s ease-in-out;
+  background-color: var(--background);
+  text-decoration: none;
+  border: 0;
+  overflow: hidden;
+  text-indent: -9999px;
+}
+.container #sidebar-link.toggle:before {
+  content: "\f0c9";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  text-indent: 0;
+  font-size: 2rem;
+  color: var(--text);
+}
+
+#menu {
+  padding: 25px;
+}
+
+#menu a {
+  color: var(--text);
+}
+
+#menu ul {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  font-family: "Roboto Slab", serif;
+  font-weight: 400;
+  letter-spacing: 0.075em;
+  list-style: none;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+#menu ul li {
+  border-top: solid 1px var(--medium);
+  margin: 0.5em 0 0 0;
+  padding: 0.5em 0 0 0;
+}
+
+#menu ul li:first-child {
+  border-top: 0;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+#menu ul a {
+  border-bottom: 0;
+  color: inherit;
+  cursor: pointer;
+  display: block;
+  font-size: 0.9em;
+  padding: 0.625em 0;
+  text-decoration: none;
+}
+
+input#query {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: var(--background);
+  border-radius: 0.375em;
+  border: solid 1px var(--medium);
+  color: inherit;
+  display: block;
+  outline: 0;
+  padding: 0 1em;
+  text-decoration: none;
+  width: 90%;
+  font-weight: 400;
+  line-height: 1.65;
+  font-size: 14pt;
+  height: 1.5em;
+}
+
+#sidebar header.major {
+  border-bottom: solid 3px var(--border);
+  border-top: solid 3px var(--border);
+  display: block;
+  padding: 10px 0;
+  text-align: center;
+  margin: 0 25px;
+}
+
+#old-notes {
+  padding: 25px;
+}
+
+.mini-posts article {
+  display: block;
+  width: 100%;
+  margin-bottom: 1em;
+  border-top: solid 1px var(--medium);
+  padding-top: 1em;
+}
+.mini-posts article a {
+  font-size: 12pt;
+  border-bottom: dotted 1px;
+  color: var(--primary);
+  text-decoration: none;
+  cursor: pointer;
+}
+.mini-posts article p:last-child {
+  font-size: 12pt;
+  text-indent: 0;
+  margin-top: 0;
+}
+
+.mini-posts article:first-child {
+  border-top: 0;
+  margin-top: 1em;
+  padding-top: 0;
+}
+
+.mini-posts article:last-child {
+  border-bottom: 0;
+  margin-bottom: 1em;
+  padding-bottom: 0;
+}
+
+#old-notes article p:first-child {
+  margin-bottom: 0;
+  font-size: 10pt;
+  text-indent: 0;
+}
+
+ul.contact {
+  list-style: none;
+  padding: 0;
+}
+ul.contact li:before {
+  font-family: "Font Awesome 5 Free";
+  color: var(--text);
+  font-weight: 900;
+  display: inline-block;
+  font-size: 1.5em;
+  height: 1.125em;
+  position: absolute;
+  text-align: center;
+  width: 1.5em;
+}
+ul.contact a {
+  color: var(--primary);
+  margin-left: 35px;
+}/*# sourceMappingURL=sidebar-style.css.map */

assets/css/sidebar-style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["sidebar-style.scss","sidebar-style.css"],"names":[],"mappings":"AAAA;;EAAA;AAIA;EACI,yBAAA;EACA,mCAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;ACAJ;ADEI;EACI,UAAA;ACAR;;ADIA;EACI,kBAAA;EACA,MAAA;EACA,cAAA;EACA,gBAAA;EACA,YAAA;EACA,qCAAA;EACA,0BAAA;EAEA,mCAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACFJ;ADII;EACI,WAAA;ACFR;;ADMA;EACI,oBAAA;EACA,kBAAA;EACA,cAAA;ACHJ;;ADMA;EACI,kBAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,cAAA;EACA,iCAAA;EACA,mCAAA;EACA,qBAAA;EACA,SAAA;EACA,gBAAA;EACA,oBAAA;ACHJ;ADKI;EACI,gBAAA;EACA,kCAAA;EACA,gBAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;ACHR;;ADOA;EACI,aAAA;ACJJ;;ADOA;EACI,kBAAA;ACJJ;;ADOA;EACC,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,iCAAA;EACA,gBAAA;EACA,uBAAA;EACA,gBAAA;EACA,UAAA;EACA,yBAAA;ACJD;;ADOA;EACC,mCAAA;EACA,mBAAA;EACA,oBAAA;ACJD;;ADOA;EACC,aAAA;EACA,aAAA;EACA,cAAA;ACJD;;ADOA;EACC,gBAAA;EACA,cAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;EACG,qBAAA;ACJJ;;ADOA;EACI,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,6BAAA;EACA,sBAAA;EACA,+BAAA;EACA,cAAA;EACA,cAAA;EACA,UAAA;EACA,cAAA;EACA,qBAAA;EACA,UAAA;EACA,gBAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;ACJJ;;ADOA;EACI,sCAAA;EACA,mCAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;ACJJ;;ADOA;EACI,aAAA;ACJJ;;ADOA;EACI,cAAA;EACA,WAAA;EACA,kBAAA;EAEA,mCAAA;EACA,gBAAA;ACLJ;ADOI;EACI,eAAA;EACA,yBAAA;EACA,qBAAA;EACA,qBAAA;EACA,eAAA;ACLR;ADQI;EACI,eAAA;EACA,cAAA;EACA,aAAA;ACNR;;ADUA;EACI,aAAA;EACA,eAAA;EACA,cAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,kBAAA;EACA,iBAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,eAAA;EACA,cAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,UAAA;ACPJ;ADSI;EACI,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,kBAAA;EACA,YAAA;ACPR;ADUI;EACI,qBAAA;EACA,iBAAA;ACRR","file":"sidebar-style.css"}

assets/css/sidebar-style.scss

@@ -0,0 +1,204 @@
+/**
+ * Sidebar
+ */
+
+#sidebar-header {
+    grid-area: sidebar-header;
+    background-color: var(--background);
+    overflow: hidden;
+    min-width: 0;
+    padding: 10px;
+
+    #search {
+        width: 90%;
+    }
+}
+
+#sidebar {
+    grid-area: sidebar;
+    top: 0;
+    z-index: 10000;
+    overflow-y: auto;
+    min-width: 0;
+    border-right: solid 2px var(--border);
+    height: calc(100vh - 60px);
+    
+    background-color: var(--background);
+    color: var(--text);
+    font-size: 0.9em;
+    position: relative;
+    overflow-x: hidden;
+
+    .inner {
+        width: 25em;
+    }
+}
+
+#sidebar h2 {
+    font-size: 1.38889em;
+    text-align: center;
+    display: block;
+}
+
+.container #sidebar-link.toggle {
+    position: absolute;
+    top: 0;
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+    z-index: 10001;
+    transition: left 0.5s ease-in-out;
+    background-color: var(--background);
+    text-decoration: none;
+    border: 0;
+    overflow: hidden;
+    text-indent: -9999px;
+
+    &:before {
+        content: '\f0c9';
+        font-family: 'Font Awesome 5 Free';
+        font-weight: 900;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        text-indent: 0;
+        font-size: 2rem;
+        color: var(--text);
+    }
+}
+
+#menu {
+    padding: 25px;
+}
+
+#menu a {
+    color: var(--text);
+}
+
+#menu ul {
+	user-select: none;
+	font-family: "Roboto Slab", serif;
+	font-weight: 400;
+	letter-spacing: 0.075em;
+	list-style: none;
+	padding: 0;
+	text-transform: uppercase;
+}
+
+#menu ul li {
+	border-top: solid 1px var(--medium);
+	margin: 0.5em 0 0 0;
+	padding: 0.5em 0 0 0;
+}
+
+#menu ul li:first-child {
+	border-top: 0;
+	margin-top: 0;
+	padding-top: 0;
+}
+
+#menu ul a {
+	border-bottom: 0;
+	color: inherit;
+	cursor: pointer;
+	display: block;
+	font-size: 0.9em;
+	padding: 0.625em 0;
+    text-decoration: none;
+}
+
+input#query {
+    appearance: none;
+    background: var(--background);
+    border-radius: 0.375em;
+    border: solid 1px var(--medium);
+    color: inherit;
+    display: block;
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    width: 90%;
+    font-weight: 400;
+    line-height: 1.65;
+    font-size: 14pt;
+    height: 1.5em;
+}
+
+#sidebar header.major {
+    border-bottom: solid 3px var(--border);
+    border-top: solid 3px var(--border);
+    display: block;
+    padding: 10px 0;
+    text-align: center;
+    margin: 0 25px;
+}
+
+#old-notes {
+    padding: 25px;
+}
+
+.mini-posts article {
+    display: block;
+    width: 100%;
+    margin-bottom: 1em;
+
+    border-top: solid 1px var(--medium);
+    padding-top: 1em;
+
+    a {
+        font-size: 12pt;
+        border-bottom: dotted 1px;
+        color: var(--primary);
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    p:last-child {
+        font-size: 12pt;
+        text-indent: 0;
+        margin-top: 0;
+    }
+}
+
+.mini-posts article:first-child {
+    border-top: 0;
+    margin-top: 1em;
+    padding-top: 0;
+}
+
+.mini-posts article:last-child {
+    border-bottom: 0;
+    margin-bottom: 1em;
+    padding-bottom: 0;
+}
+
+#old-notes article p:first-child {
+    margin-bottom: 0;
+    font-size: 10pt;
+    text-indent: 0;
+}
+
+ul.contact {
+    list-style: none;
+    padding: 0;
+
+    li:before {
+        font-family: 'Font Awesome 5 Free';
+        color: var(--text);
+        font-weight: 900;
+        display: inline-block;
+        font-size: 1.5em;
+        height: 1.125em;
+        position: absolute;
+        text-align: center;
+        width: 1.5em;
+    }
+
+    a {
+        color: var(--primary);
+        margin-left: 35px;
+    }
+}

assets/css/styles.css

@@ -0,0 +1,280 @@
+@import url(mobile-style.css);
+@import url(mid-screen-style.css);
+@import url(lg-screen-style.css);
+@import url(sidebar-style.css);
+@import url(fontawesome-all.min.css);
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");
+/* Global style settings */
+#previewBtn.active,
+#show-hide-btn.active,
+.ref-list button.active,
+#open-ref.active,
+#mobile-open-ref.active {
+  background-color: var(--primary) !important;
+  color: var(--light) !important;
+}
+
+input:focus {
+  border-color: var(--primary);
+}
+
+#save-check {
+  color: var(--success);
+  opacity: 0;
+  font-size: 20pt;
+  margin-left: 15px;
+}
+#save-check.saving {
+  color: var(--warning);
+  opacity: 1;
+}
+#save-check.error {
+  color: var(--error);
+  opacity: 1;
+}
+
+#ui-datepicker-div {
+  z-index: 11 !important;
+}
+
+body {
+  font-family: "Roboto Slab", "Open Sans", sans-serif !important;
+  background-color: var(--background);
+  color: var(--text);
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--text);
+  font-family: "Roboto Slab", serif;
+  font-weight: 700;
+  line-height: 1.5;
+  margin: 0 0 1.5em 0;
+}
+
+h2 {
+  font-size: 1.5em;
+  display: inline-block;
+}
+
+.tab button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  width: 60px;
+  text-align: center;
+  font-size: 14px;
+  margin-bottom: 3px;
+}
+
+button,
+.button {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+  background-color: transparent;
+  border-radius: 0.5em;
+  border: 0;
+  box-shadow: inset 0 0 0 2px var(--primary);
+  color: var(--primary) !important;
+  cursor: pointer;
+  display: inline-block;
+  font-family: "Roboto Slab", serif;
+  font-size: 0.8em;
+  font-weight: 700;
+  height: 3em;
+  letter-spacing: 0.075em;
+  line-height: 3em;
+  padding: 0 2em;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+button.button i {
+  font-size: 1.5em;
+}
+
+.input-warning {
+  border: solid 2px var(--warning) !important;
+}
+
+.input-error {
+  border: solid 2px var(--error) !important;
+}
+
+.ref-btn-header {
+  grid-area: ref-btn-header;
+}
+
+.ref-btn {
+  grid-area: ref-btn;
+}
+.ref-btn .ref-list {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  height: calc(100vh - 80px);
+  padding: 1px;
+  margin: 1px;
+  list-style: none;
+}
+
+.ref-text {
+  grid-area: ref-text;
+  display: block;
+  overflow-y: scroll;
+  border: var(--border) solid 1px;
+  border-radius: 10px;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+  z-index: 1;
+}
+.ref-text h2 {
+  display: block;
+}
+.ref-text a {
+  color: var(--primary);
+}
+
+#refQuery {
+  position: fixed;
+  background-color: var(--background);
+  z-index: 999;
+  width: 400px;
+  height: 200px;
+  border: solid 2px var(--border);
+  border-radius: 10px;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+  margin: 10px 50px;
+  padding: 5px;
+}
+
+#chapter-range, #verse-range {
+  color: var(--text);
+}
+
+.note-header {
+  grid-area: note-header;
+}
+
+.notes {
+  z-index: 10;
+}
+
+#notePreview {
+  display: none;
+  z-index: 9;
+}
+
+.ref-header {
+  grid-area: ref-header;
+}
+
+/** drowndown button */
+.dropdown {
+  position: relative;
+}
+
+.dropdown select {
+  background-color: var(--background);
+  color: var(--text);
+}
+.dropdown select option:hover {
+  background-color: var(--primary);
+  color: var(--text);
+}
+
+/* slider switch */
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 42px;
+  height: 24px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.5s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.5s;
+}
+
+input:checked + .slider {
+  background-color: var(--primary);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--primary);
+}
+
+input:checked + .slider:before {
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 24px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+#passage-popup {
+  position: absolute;
+  z-index: 1000;
+  background-color: var(--background);
+  border: solid 2px var(--border);
+  border-radius: 5px;
+  width: 400px;
+}
+
+#refQuery, #passage-popup, #modal-backdrop, #modal-container {
+  display: none;
+}
+
+h2.dirty {
+  color: darkorange;
+}
+
+textarea {
+  padding: 0.75em 1em;
+}
+
+#note-table a, #note-table a:active {
+  color: var(--text);
+  cursor: pointer;
+}
+
+#increaseFont:active, #decreaseFont:active {
+  background-color: var(--primary);
+  color: var(--background) !important;
+}/*# sourceMappingURL=styles.css.map */

assets/css/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAQ,6BAAA;AACA,iCAAA;AACA,gCAAA;AACA,8BAAA;AAEA,oCAAA;AACA,gHAAA;AACR,0BAAA;AAEA;;;;;EAKE,2CAAA;EACA,8BAAA;ACDF;;ADIA;EACC,4BAAA;ACDD;;ADIA;EACC,qBAAA;EACA,UAAA;EACA,eAAA;EACA,iBAAA;ACDD;ADGC;EACC,qBAAA;EACA,UAAA;ACDF;ADIC;EACC,mBAAA;EACA,UAAA;ACFF;;ADMA;EACC,sBAAA;ACHD;;ADMA;EACE,8DAAA;EACA,mCAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;ACHF;;ADMA;EACC,kBAAA;EACA,iCAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;ACHD;;ADKA;EACC,gBAAA;EACA,qBAAA;ACFD;;ADKA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;ACFF;;ADKA;;EAEC,qBAAA;EACA,wBAAA;EAEA,gBAAA;EAIA,qEAAA;EACA,6BAAA;EACA,oBAAA;EACA,SAAA;EACA,0CAAA;EACA,gCAAA;EACA,eAAA;EACA,qBAAA;EACA,iCAAA;EACA,gBAAA;EACA,gBAAA;EACA,WAAA;EACA,uBAAA;EACA,gBAAA;EACA,cAAA;EAGA,kBAAA;EACA,qBAAA;EACA,yBAAA;EACA,mBAAA;ACJD;;ADOA;EACC,gBAAA;ACJD;;ADOA;EACC,2CAAA;ACJD;;ADOA;EACC,yCAAA;ACJD;;ADOA;EAAkB,yBAAA;ACHlB;;ADKA;EACC,kBAAA;ACFD;ADIC;EACC,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,0BAAA;EACA,YAAA;EACA,WAAA;EACA,gBAAA;ACFF;;ADMA;EACC,mBAAA;EAEA,cAAA;EACA,kBAAA;EAEA,+BAAA;EACA,mBAAA;EACA,0CAAA;EACA,UAAA;ACLD;ADQC;EACC,cAAA;ACNF;ADSC;EACC,qBAAA;ACPF;;ADWA;EACC,eAAA;EACA,mCAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,+BAAA;EACA,mBAAA;EACA,0CAAA;EACA,iBAAA;EACA,YAAA;ACRD;;ADWA;EACC,kBAAA;ACRD;;ADWA;EACC,sBAAA;ACRD;;ADWA;EACC,WAAA;ACRD;;ADWA;EACC,aAAA;EACA,UAAA;ACRD;;ADWA;EACC,qBAAA;ACRD;;ADWA,sBAAA;AACA;EACC,kBAAA;ACRD;;ADYA;EACC,mCAAA;EACA,kBAAA;ACTD;ADWC;EACC,gCAAA;EACA,kBAAA;ACTF;;ADaA,kBAAA;AACA,2CAAA;AACA;EACE,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;ACVF;;ADaA,+BAAA;AACA;EACE,UAAA;EACA,QAAA;EACA,SAAA;ACVF;;ADaA,eAAA;AACA;EACE,kBAAA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,sBAAA;EAEA,gBAAA;ACVF;;ADaA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,uBAAA;EAEA,gBAAA;ACVF;;ADaA;EACE,gCAAA;ACVF;;ADaA;EACE,kCAAA;ACVF;;ADaA;EAGE,2BAAA;ACVF;;ADaA,oBAAA;AACA;EACE,mBAAA;ACVF;;ADaA;EACE,kBAAA;ACVF;;ADaA;EACC,kBAAA;EACA,aAAA;EACA,mCAAA;EACA,+BAAA;EACA,kBAAA;EACA,YAAA;ACVD;;ADaA;EACC,aAAA;ACVD;;ADaA;EACE,iBAAA;ACVF;;ADaA;EACC,mBAAA;ACVD;;ADaA;EACC,kBAAA;EACA,eAAA;ACVD;;ADaA;EACC,gCAAA;EACA,mCAAA;ACVD","file":"styles.css"}

assets/css/styles.scss

@@ -0,0 +1,299 @@
+@import url(mobile-style.css);
+@import url(mid-screen-style.css);
+@import url(lg-screen-style.css);
+@import url(sidebar-style.css);
+// Set up the global font styles
+@import url(fontawesome-all.min.css);
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");
+/* Global style settings */
+
+#previewBtn.active,
+#show-hide-btn.active,
+.ref-list button.active,
+#open-ref.active,
+#mobile-open-ref.active {
+  background-color: var(--primary) !important;
+  color: var(--light) !important;
+}
+
+input:focus {
+	border-color: var(--primary);
+}
+
+#save-check {
+	color: var(--success);
+	opacity: 0;
+	font-size: 20pt;
+	margin-left: 15px;
+
+	&.saving {
+		color: var(--warning);
+		opacity: 1;
+	}
+
+	&.error {
+		color: var(--error);
+		opacity: 1;
+	}
+}
+
+#ui-datepicker-div {
+	z-index: 11 !important;
+}
+
+body {
+  font-family: 'Roboto Slab', 'Open Sans', sans-serif !important;
+  background-color: var(--background);
+  color: var(--text);
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	color: var(--text);
+	font-family: 'Roboto Slab', serif;
+	font-weight: 700;
+	line-height: 1.5;
+	margin: 0 0 1.5em 0;
+}
+h2 {
+	font-size: 1.5em;
+	display: inline-block;
+}
+
+.tab button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  width: 60px;
+  text-align: center;
+  font-size: 14px;
+  margin-bottom: 3px;
+}
+
+button,
+.button {
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	-ms-appearance: none;
+	appearance: none;
+	-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+	-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+	-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+	background-color: transparent;
+	border-radius: 0.5em;
+	border: 0;
+	box-shadow: inset 0 0 0 2px var(--primary);
+	color: var(--primary) !important;
+	cursor: pointer;
+	display: inline-block;
+	font-family: "Roboto Slab", serif;
+	font-size: 0.8em;
+	font-weight: 700;
+	height: 3em;
+	letter-spacing: 0.075em;
+	line-height: 3em;
+	padding: 0 2em;
+	// min-width: 30px;
+	// max-width: 60px;
+	text-align: center;
+	text-decoration: none;
+	text-transform: uppercase;
+	white-space: nowrap;
+}
+
+button.button i {
+	font-size: 1.5em;
+}
+
+.input-warning {
+	border: solid 2px var(--warning) !important;
+}
+
+.input-error {
+	border: solid 2px var(--error) !important;
+}
+
+.ref-btn-header { grid-area: ref-btn-header; }
+
+.ref-btn {
+	grid-area: ref-btn;
+
+	.ref-list {
+		display: flex;
+		flex-direction: column;
+		align-items: start;
+		height: calc(100vh - 80px);
+		padding: 1px;
+		margin: 1px;
+		list-style: none;
+	}
+}
+
+.ref-text {
+	grid-area: ref-text;
+
+	display: block;
+	overflow-y: scroll;
+	// width: 100%;
+	border: var(--border) solid 1px;
+	border-radius: 10px;
+	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+	z-index: 1;
+	// position: relative;
+
+	h2 {
+		display: block;
+	}
+
+	& a {
+		color: var(--primary);
+	}
+}
+
+#refQuery {
+	position: fixed;
+	background-color: var(--background);
+	z-index: 999;
+	width: 400px;
+	height: 200px;
+	border: solid 2px var(--border);
+	border-radius: 10px;
+	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+	margin: 10px 50px;
+	padding: 5px;
+}
+
+#chapter-range, #verse-range {
+	color: var(--text);
+}
+
+.note-header {
+	grid-area: note-header;
+}
+
+.notes {
+	z-index: 10;
+}
+
+#notePreview {
+	display: none;
+	z-index: 9;
+}
+
+.ref-header {
+	grid-area: ref-header;
+}
+
+/** drowndown button */
+.dropdown {
+	position: relative;
+	// height: 20px;
+}
+
+.dropdown select {
+	background-color: var(--background);
+	color: var(--text);
+
+	option:hover {
+		background-color: var(--primary);
+		color: var(--text);
+	}
+}
+
+/* slider switch */
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 42px;
+  height: 24px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .5s;
+  transition: .5s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+}
+
+input:checked + .slider {
+  background-color: var(--primary);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--primary);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 24px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+#passage-popup {
+	position: absolute;
+	z-index: 1000;
+	background-color: var(--background);
+	border: solid 2px var(--border);
+	border-radius: 5px;
+	width: 400px;
+}
+
+#refQuery, #passage-popup, #modal-backdrop, #modal-container {
+	display: none;
+}
+
+h2.dirty {
+  color: darkorange;
+}
+
+textarea {
+	padding: 0.75em 1em;
+}
+
+#note-table a, #note-table a:active {
+	color: var(--text);
+	cursor: pointer;
+}
+
+#increaseFont:active, #decreaseFont:active {
+	background-color: var(--primary);
+	color: var(--background) !important;
+}

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/home.js

@@ -0,0 +1,383 @@
+import * as note from './note.js';
+import { state } from './state.js';
+import * as ref from './reference.js';
+
+// Get the link element
+var tabs = [];
+let controller;
+
+// Function to change the CSS file based on checkbox state
+/**
+ * Method to toggle dark/light mode
+ * 
+ * @param {*} event 
+ */
+export function toggleDarkMode(event) {
+    let mainCssLink = $('link[data-css="mode"');
+    if(mainCssLink.length > 0) {
+        mainCssLink[0].href = (event.target.checked ? mainCssLink.data('dark') : mainCssLink.data('light'));
+    }
+}
+
+/**
+ * Toggles the visibility of the fields container and updates the active state of the show/hide button.
+ *
+ * @param Event e
+ * @param boolean forceShow
+ * @return {void}
+ */
+export function toggleFields(e, forceShow = false) {
+    const fieldsContainer = document.querySelector('.fields-container');
+    let showHideBtn = document.getElementById('show-hide-btn');
+    let mobileShowHideBtn = document.getElementById('mobile-show-hide-btn');
+
+    if (forceShow || !fieldsContainer.classList.contains('show')) {
+        fieldsContainer.classList.add('show');
+        fieldsContainer.style.display = 'flex';
+        showHideBtn.classList.add('active');
+        mobileShowHideBtn.classList.add('active');
+    } else {
+        fieldsContainer.classList.remove('show');
+        fieldsContainer.style.display = 'none';
+        showHideBtn.classList.remove('active');
+        mobileShowHideBtn.classList.remove('active');
+    }
+}
+
+/**
+ * Increases the font size of the element with the id 'ref' by 1 point.
+ *
+ * @return {void} This function does not return a value.
+ */
+export function increaseFont() {
+    var currentSize = document.querySelector('#ref-text').style.fontSize;
+    const newSize = parseInt(currentSize) + 1;
+    document.querySelector('#ref-text').style.fontSize = newSize + 'pt';
+    document.querySelector('#notes').style.fontSize = newSize + 'pt';
+    document.querySelector('#notePreview').style.fontSize = newSize + 'pt';
+}
+
+/**
+ * Decreases the font size of the element with the id 'ref' by 1 point.
+ *
+ * @return {void} This function does not return a value.
+ */
+export function decreaseFont() {
+    var currentSize = document.querySelector('#ref-text').style.fontSize;
+    const newSize = parseInt(currentSize) - 1;
+    document.querySelector('#ref-text').style.fontSize = newSize + 'pt';
+    document.querySelector('#notes').style.fontSize = newSize + 'pt';
+    document.querySelector('#notePreview').style.fontSize = newSize + 'pt';
+}
+
+/**
+ * Previews a note by rendering the markdown content of the note in a preview section.
+ * Toggles between the note text and preview sections.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function previewNote() {
+    var noteText = document.querySelector('#notes');
+    var notePreview = document.querySelector('#notePreview');
+    var previewButton = document.querySelector('#previewBtn');
+
+    const title = document.querySelector('#noteTitle');
+    const speaker = document.querySelector('#speaker');
+    const passage = document.querySelector('#passage');
+
+    const markdownPreview = "# " + title.value + " - " +
+        speaker.options[speaker.selectedIndex].text + " - " + passage.value + "\n\n" + noteText.value;
+
+    notePreview.innerHTML = state.md.render(markdownPreview);
+
+    if (previewButton.classList.contains('active')) {
+        document.querySelector('.note-text').style.display = 'block';
+        notePreview.style.display = 'none';
+        previewButton.classList.remove('active');
+    } else {
+        document.querySelector('.note-text').style.display = 'none';
+        notePreview.style.display = 'block';
+        previewButton.classList.add('active');
+    }
+
+    note.findLinks();
+}
+
+/**
+ * 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();
+        }
+    });
+
+    document.querySelector('#notes').addEventListener('keyup', function (event) {
+        let key = event.keyCode;
+
+        if (key == 8 || key >= 48 && key <= 90 || key >= 96 && key <= 111 || key >= 186 && key <= 222) {
+            state.saved = false
+            state.textDirty = true;
+            document.querySelector('.mobile-note-header h2').classList.add('dirty');
+            document.querySelector('.note-header h2').classList.add('dirty');
+
+            if(state.failureCount > 0 && !state.to) {
+                state.to = setTimeout(note.saveNote, state.saveTimeout);
+            }
+        }
+    });
+
+    document.getElementById('dark-mode-checkbox').addEventListener('click', toggleDarkMode);
+    document.getElementById('mobile-dark-mode-checkbox').addEventListener('click', toggleDarkMode);
+
+    document.getElementById('show-hide-btn').addEventListener('click', toggleFields);
+    document.getElementById('mobile-show-hide-btn').addEventListener('click', toggleFields);
+
+    document.getElementById('increaseFont').addEventListener('click', increaseFont);
+    document.getElementById('decreaseFont').addEventListener('click', decreaseFont);
+
+    const openRefBtn = document.getElementById('open-ref');
+    openRefBtn.addEventListener('click', openRef);
+    openRefBtn.closeSidebar = true;
+    const mobileOpenRefBtn = document.getElementById('mobile-open-ref');
+    mobileOpenRefBtn.addEventListener('click', openRef);
+    mobileOpenRefBtn.closeSidebar = true;
+
+    document.getElementById('previewBtn').addEventListener('click', previewNote);
+    //document.getElementById('shareBtn').addEventListener('click', note.openShareNote);
+    document.getElementById('searchBtn').addEventListener('click', ref.queryRef);
+    document.getElementById('closeSearch').addEventListener('click', closeRef);
+}
+
+export function initHome() {
+    setBooks();
+    setEventListeners();
+
+    // expand the sidebar by default if we are on a large screen
+    if(document.body.clientWidth >= 1501) {
+        document.querySelector('.container').classList.remove('sidebar-collapsed');
+    }
+
+    $('#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")
+            },
+        ]
+    });
+    $('#note-table').css('width', '100%');
+    $('#shareBtn').on('click', note.openShareNote);
+    $('#modal-backdrop').on('click', note.closeShareNote);
+
+    state.md = new markdownit({
+        html: true,
+        linkify: true,
+        breaks: true
+    });
+
+    if ($('#noteDate')) {
+        $('#noteDate').datepicker();
+    }
+
+    if ($('#query')) {
+        document.querySelector('#query').addEventListener('keyup', function (event) {
+            if (event.key == "Enter") {
+                search();
+            }
+        });
+    }
+    
+    // Assuming 'to' and 'saveInterval' are declared globally elsewhere in your script
+    if (typeof state.to === 'undefined' || !state.to) {
+        state.to = setTimeout(note.saveNote, state.saveInterval);
+    }
+}
+
+/**
+ * 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) => {
+            state.BOOKS = data;
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+}
+
+/**
+ * Opens the reference with the option to close the sidebar.
+ */
+export function openRef(e) {
+    document.querySelector('#open-ref').classList.add('active');
+    document.querySelector('#mobile-open-ref').classList.add('active');
+
+    let refQuery = document.querySelector('#refQuery');
+    refQuery.style.display = 'block';
+
+    let closeSidebar = false;
+    if(typeof e.currentTarget.closeSidebar !== 'undefined') {
+        closeSidebar = e.currentTarget.closeSidebar;
+    }
+
+    if (closeSidebar && !document.querySelector('.container').classList.contains('sidebar-collapsed')) {
+        document.querySelector('.toggle').click();
+    }
+
+    let ref = document.querySelector('#ref-text');
+    refQuery.style.left = ref.offsetLeft + 'px';
+    refQuery.style.top = ref.offsetTop + 'px';
+}
+
+/**
+ * Closes the reference query and resets the reference search form.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function closeRef() {
+    document.querySelector('#referenceSearch').value = '';
+    document.querySelector('#referenceSearch').style.display = '';
+    document.querySelector('#referenceType').value = '';
+    document.querySelector('#referenceBook').value = '';
+    document.querySelector('#referenceBook').style.display = 'none';
+    document.querySelector('#chapter-range').innerText = '';
+    document.querySelector('#verse-range').innerText = '';
+
+    document.querySelector('#refQuery').style.display = 'none';
+    document.querySelector('#open-ref').classList.remove('active');
+    document.querySelector('#mobile-open-ref').classList.remove('active');
+}
+
+/**
+ * A function to create a button element with the specified title and event listeners for click and double click actions.
+ *
+ * @param {string} title - The title to be displayed on the button.
+ * @return {Element} The created button element.
+ */
+export function makeButton(title) {
+    var btn = document.createElement('button');
+    btn.innerText = title;
+    btn.class = 'button';
+    btn.style = 'line-height:normal;'
+    btn.addEventListener('click', function () {
+        removeActiveRef();
+        document.querySelector('#ref-text').innerHTML = state.md.render(state.references[title]);
+        this.classList.add('active');
+        note.findRefLinks();
+    });
+
+    btn.addEventListener('dblclick', function () {
+        document.querySelector('#ref-text').innerHTML = '';
+        delete state.references[title];
+        var list = this.parentElement;
+        list.remove();
+        state.saved = false;
+        state.textDirty = true;
+        note.saveNote();
+    });
+
+    removeActiveRef();
+    btn.classList.add('active');
+
+    return btn;
+}
+
+/**
+ * Removes the 'active' class from all elements with the class 'active'.
+ *
+ * @return {void} This function does not return a value.
+ */
+export function removeActiveRef() {
+    tabs = document.querySelectorAll('#ref-list .active');
+    for (var t in tabs) {
+        if (isFinite(parseInt(t))) {
+            tabs[t].classList.remove('active');
+        }
+    }
+}
+
+/**
+ * Generates a random UUIDv4 string.
+ *
+ * @return {string} The generated UUIDv4 string.
+ */
+export function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
+        .replace(/[xy]/g, function (c) {
+            const r = Math.random() * 16 | 0,
+                v = c == 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+}
+
+/**
+ * Searches for notes based on the query entered in the search field.
+ * Sends a POST request to the '/search' endpoint with the query as a JSON payload.
+ * Updates the '#old-notes' element with the search results.
+ *
+ * @return {Promise} A Promise that resolves with the search results.
+ */
+export function search() {
+    query = document.querySelector('#query').value;
+    fetch('/search', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'query': query
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            var oldNotes = document.querySelector('#old-notes');
+            oldNotes.innerHTML = '';
+            for (var n in results) {
+                var link = document.createElement('a');
+                link.href = '#';
+                link.setAttribute('onclick', "note.retrieveNote('" + results[n].id + "');note.openNote();");
+                link.innerHTML = results[n].title;
+
+                var p = document.createElement('p');
+                p.innerHTML = results[n].passage;
+
+                var article = document.createElement('article');
+                article.appendChild(link);
+                article.appendChild(p);
+
+                oldNotes.append(article);
+            }
+        });
+}
+
+/**
+ * Closes the passage popup by clearing its content and hiding it.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function closePopup() {
+    const popup = document.querySelector('#passage-popup');
+    popup.innerHTML = '';
+    popup.style.display = 'none';
+}

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/note.js

@@ -0,0 +1,507 @@
+import { state } from './state.js';
+import { toggleFields, makeButton } from './home.js';
+
+var failureCount = state.saveFailureCount;
+
+/**
+ * Retrieves a note from the server based on the provided ID.
+ *
+ * @param {string} id - The ID of the note to retrieve.
+ * @param {boolean} [runOpen=true] - Whether to open the note sidebar after retrieving the note.
+ * @return {Promise<void>} A promise that resolves when the note is successfully retrieved and the UI is updated.
+ */
+export function retrieveNote(id, runOpen = true) {
+    fetch('/get-note', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'id': id
+        })
+    })
+        .then(response => response.json())
+        .then(result => {
+            var dt = new Date(result.date.date);
+
+            document.querySelector('#notes').value = result.text;
+            document.querySelector('#passage').value = result.passage;
+            document.querySelector('#series').value = result.series.id;
+            document.querySelector('#speaker').value = result.speaker.id;
+            document.querySelector('#noteTitle').value = result.title;
+            document.querySelector('#noteDate').value = '';
+            document.querySelector('#noteDate').value =
+                (dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '/' +
+                (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()) + '/' +
+                dt.getFullYear();
+            document.querySelector('#noteId').value = result.id;
+
+            if (result.recording) {
+                document.querySelector('#recording').value = result.recording;
+            }
+
+            if (result.refs) {
+                state.references = result.refs;
+            }
+
+            const list = document.querySelector('#ref-list');
+            list.innerHTML = '';
+            var newList = null;
+            for (var x in state.references) {
+                var newList = document.createElement('li');
+                newList.className = 'tab';
+                var button = makeButton(x);
+                newList.appendChild(button);
+                list.appendChild(newList);
+            }
+
+            if (runOpen) {
+                note.openNote(false);
+            }
+        });
+}
+
+/**
+ * Toggles the visibility of the note list and reference elements.
+ *
+ * @param {boolean} [openSidebar=true] - Whether to open the sidebar after toggling the visibility.
+ * @return {void}
+ */
+export function openNote(openSidebar = true) {
+    const noteList = document.querySelector('#note-list');
+    const refs = document.querySelector('#ref-text');
+
+    if (noteList.style.display == 'block') {
+        noteList.style.display = 'none';
+        refs.style.display = 'block';
+    } else {
+        noteList.style.display = 'block';
+        refs.style.display = 'none';
+    }
+
+    if (openSidebar && !document.querySelector('.container').classList.contains('sidebar-collapsed')) {
+        document.querySelector('.container').classList.add('sidebar-collapsed');
+    }
+}
+
+/**
+ * Starts the save process by updating the save-check element's classList, removing error, fa-times-circle, and fa-save classes,
+ * adding the 'saving' and 'fa-save' classes, and setting the opacity to 1.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function startSave() {
+    document.querySelector('#save-check').classList.remove('error', 'fa-times-circle', 'fa-save');
+    document.querySelector('#save-check').classList.add('saving', 'fa-save');
+    document.querySelector('#save-check').style.opacity = 1;
+}
+
+/**
+ * Displays a checkmark animation on the screen.
+ *
+ * @param {none} - This function does not take any parameters.
+ * @return {none} - This function does not return any value.
+ */
+export function showSave() {
+    if (state.saved) { return; }
+
+    var checkmark = document.getElementById("save-check");
+    checkmark.classList.add('fa-save');
+
+    // Schedule the animation to run every 1 second (which is equivalent to a 1-second delay between each iteration)
+    var si = setInterval(function () {
+        // Increment the opacity of the checkmark by 0.01 each time
+        let op = parseFloat(checkmark.style.opacity);
+        checkmark.style.opacity = op - 0.1;
+
+        // If the opacity is greater than or equal to 1, reset it back to 0 and stop the animation
+        if (checkmark.style.opacity == 0.1) {
+            checkmark.style.opacity = 0;
+            clearInterval(si);
+            state.saved = false;
+        }
+    }, 100);
+}
+
+/**
+ * function to discard the note by clearing all input fields and closing the menu.
+ */
+export function deleteNote(noteId, link) {
+    document.querySelector('#noteTitle').value = '';
+    document.querySelector('#speaker').value = 0;
+    document.querySelector('#series').value = 0;
+    document.querySelector('#template').value = 0;
+    document.querySelector('#passage').value = '';
+    document.querySelector('#notes').value = '';
+    document.querySelector('#recording').value = '';
+    document.querySelector('#noteDate').value = '';
+    document.querySelector('#noteId').value = '';
+
+    var row = link.parentElement.parentElement;
+
+    fetch('/delete-note', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'id': noteId
+        })
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.msg != 'deleted') {
+                return;
+            }
+
+            alert('Note deleted.');
+            row.remove();
+        });
+}
+
+/**
+ * Validates a note by checking if all required fields are filled.
+ *
+ * @return {boolean} Returns true if all required fields are filled, false otherwise.
+ */
+export function validateNote() {
+    const note = document.querySelector('#notes');
+    const date = document.querySelector('#noteDate');
+    const speaker = document.querySelector('#speaker');
+    const series = document.querySelector('#series');
+    const title = document.querySelector('#noteTitle');
+    const psg = document.querySelector('#passage');
+
+    let ret = true;
+
+    if (!title.value.length) { title.classList.add('input-error'); ret = false; }
+    if (!date.value) { date.classList.add('input-error'); ret = false; }
+    if (!parseInt(speaker.value)) { speaker.classList.add('input-error'); ret = false; }
+    if (!parseInt(series.value)) { series.classList.add('input-error'); ret = false; }
+    if (!psg.value) { psg.classList.add('input-error'); ret = false; }
+    if (!note.value.length) { note.classList.add('input-error'); ret = false; }
+
+    if (!ret) {
+        toggleFields(null, true);
+    }
+
+    return ret;
+}
+
+/**
+ * Resets the state of the note editor by clearing the text and form fields,
+ * resetting the references, and removing any dirty classes. It also sets the
+ * date to the current date, clears the speaker, series, template, passage,
+ * recording, and note ID fields. Finally, it clears the reference list and
+ * reference display.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function newNote() {
+    var notes = document.querySelector('#notes');
+    notes.text = '';
+    notes.value = '';
+    state.references = {};
+    state.saved = true;
+    state.textDirty = false;
+    document.querySelector('.note-header-column h2').classList.remove('dirty');
+
+    var dt = new Date();
+    document.querySelector('#noteDate').value = dt.getFullYear() + '-' +
+        (dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '-' +
+        (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate());
+    document.querySelector('#noteTitle').value = '';
+    document.querySelector('#speaker').value = 0;
+    document.querySelector('#series').value = 0;
+    document.querySelector('#template').value = 0;
+    document.querySelector('#passage').value = '';
+    document.querySelector('#recording').value = '';
+    document.querySelector('#noteId').value = '';
+
+    document.querySelector('#ref-list').innerHTML = '';
+    document.querySelector('#ref-text').innerHTML = '';
+    document.querySelector('.container').classList.add('sidebar-collapsed');
+}
+
+/**
+ * Save a note by sending it to the server for storage.
+ *
+ * @param {Event} event - The event object triggering the save action.
+ * @return {void} No explicit return value.
+ */
+export function saveNote(event) {
+    //console.debug('called saveNote '+new Date());
+    if (event) {
+        event.preventDefault();
+    }
+
+    if (!state.textDirty) {
+        clearTimeout(state.to);
+        state.to = setTimeout(saveNote, state.saveInterval);
+        return;
+    }
+
+    document.querySelector('#noteTitle').classList.remove('input-error');
+    document.querySelector('#noteDate').classList.remove('input-error');
+    document.querySelector('#speaker').classList.remove('input-error');
+    document.querySelector('#series').classList.remove('input-error');
+    document.querySelector('#passage').classList.remove('input-error');
+    document.querySelector('#notes').classList.remove('input-error');
+
+    if (!validateNote()) {
+        clearTimeout(state.to);
+        state.to = setTimeout(saveNote, state.saveInterval);
+        return;
+    }
+
+    let saveCheck = document.querySelector('#save-check');
+    var noteText = document.querySelector('#notes').value;
+
+    startSave();
+
+    var note = {
+        id: document.querySelector("#noteId").value,
+        date: document.querySelector('#noteDate').value,
+        title: document.querySelector('#noteTitle').value,
+        speaker: document.querySelector('#speaker').value,
+        series: document.querySelector('#series').value,
+        passage: document.querySelector('#passage').value,
+        note: document.querySelector('#notes').value,
+        recording: document.querySelector('#recording').value,
+        refs: state.references
+    };
+    $.ajax({
+        url: '/save-note',
+        method: 'POST',
+        contentType: 'application/json',
+        data: JSON.stringify(note),
+        dataType: 'json',
+        timeout: state.saveTimeout
+    })
+        .done(function (data) {
+            if (data.msg == 'saved' && !state.saved) {
+                saveCheck.classList.remove('saving', 'error', 'fa-times-circle', 'fa-save');
+                showSave();
+                if (noteText == document.querySelector('#notes').value) {
+                    state.saved = true;
+                    state.textDirty = false;
+                    document.querySelector('.note-header h2').classList.remove('dirty');
+                    document.querySelector('.mobile-note-header h2').classList.remove('dirty');
+                }
+
+                if (data.new) {
+                    document.querySelector('#noteId').value = data.id;
+                }
+            }
+        })
+        .fail(function (xhr, status, error) {
+            state.failureCount--;
+            saveCheck.classList.remove('saving', 'fa-save');
+            saveCheck.classList.add('fa-times-circle', 'error');
+            console.error(error);
+        })
+        .always(function (xhr, status) {
+            if (status == 'timeout') {
+                saveCheck.classList.remove('saving', 'fa-save');
+                saveCheck.classList.add('error', 'fa-times-circle');
+            }
+            clearTimeout(state.to);
+            if (state.failureCount > 0) {
+                state.to = setTimeout(saveNote, state.saveInterval);
+            } else {
+                state.failureCount = state.saveFailureCount;
+            }
+        });
+}
+
+/**
+ * Function that finds reference links and fetches passage data when clicked.
+ */
+export function findRefLinks() {
+    var links = document.querySelector('#ref-text').querySelectorAll('a');
+
+    for (var i = 0; i < links.length; i++) {
+        links[i].addEventListener('click', function (e) {
+            e.preventDefault();
+            if (!this.href.includes('get-passage')) {
+                return;
+            }
+            var passage = this.href.split('/');
+            passage = passage[passage.length - 1];
+
+            fetch(this.href, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    'passage': passage
+                })
+            })
+                .then(response => response.text())
+                .then(result => {
+                    let psg, book, cv;
+
+                    passage = passage.replace(/\+/g, ' ');
+                    psg = passage.split(' ');
+                    if (psg.length > 2) {
+                        book = psg[0] + ' ' + psg[1];
+                        cv = psg[2];
+                    } else {
+                        book = psg[0];
+                        cv = psg[1];
+                    }
+                    showPassage(
+                        e,
+                        "<button onclick='note.closePopup()'>Close</button>&nbsp;&nbsp;" +
+                        "<button onclick=\"ref.queryRef(event, 'bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
+                        result);
+                });
+        });
+    }
+}
+
+/**
+ * Finds all links in the note preview and adds event listeners to them.
+ *
+ * @return {void}
+ */
+export function findLinks() {
+    var links = document.querySelector('#notePreview').querySelectorAll('a');
+
+    for (var i = 0; i < links.length; i++) {
+        links[i].addEventListener('click', function (e) {
+            e.preventDefault();
+            if (!this.href.includes('get-passage')) {
+                return;
+            }
+            var passage = this.href.split('/');
+            passage = passage[passage.length - 1];
+
+            fetch(this.href, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    'passage': passage
+                })
+            })
+                .then(response => response.text())
+                .then(result => {
+                    passage = passage.replace(/\+/g, ' ');
+                    psg = passage.split(' ');
+                    if (psg.length > 2) {
+                        book = psg[0] + ' ' + psg[1];
+                        cv = psg[2];
+                    } else {
+                        book = psg[0];
+                        cv = psg[1];
+                    }
+                    showPassage(
+                        e,
+                        "<button onclick='note.closePopup()'>Close</button>&nbsp;&nbsp;" +
+                        "<button onclick=\"ref.queryRef(event, 'bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
+                        result);
+                });
+        });
+    }
+}
+
+/**
+ * Shows a passage in a popup element relative to the cursor position.
+ *
+ * @param {Event} event - The event that triggered the function.
+ * @param {string} text - The text to be displayed in the popup.
+ * @return {void} This function does not return a value.
+ */
+export function showPassage(event, text) {
+    // Create a new div element for the popup
+    const popup = document.querySelector('#passage-popup');
+    popup.innerHTML = state.md.render(text);
+    
+    // Position the popup relative to the cursor
+    let x = event.clientX + window.scrollX;
+    let y = event.clientY + window.scrollY;
+
+    // Set the position of the popup element
+    popup.style.top = `${y}px`;
+    popup.style.left = `${x}px`;
+    popup.style.display = 'block';
+    popup.style.position = 'absolute';
+}
+
+/**
+ * Closes the passage popup by clearing its content and hiding it.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function closePopup() {
+    const popup = document.querySelector('#passage-popup');
+    popup.innerHTML = '';
+    popup.style.display = 'none';
+}
+
+/**
+ * Opens the share note functionality.
+ */
+export function openShareNote() {
+    let id = document.querySelector('#noteId').value;
+    if (!id) {
+        alert('No Open Note Found');
+        return;
+    }
+
+    let bd = document.querySelector('#modal-backdrop');
+    bd.style.display = 'block';
+    let cont = document.querySelector('#modal-container');
+    cont.style.display = bd.style.display;
+
+    let emailCont = document.querySelector('#modal-container');
+    emailCont.style.left = ((window.innerWidth / 2) - (emailCont.clientWidth / 2)) + 'px';
+    emailCont.style.top = ((window.innerHeight / 2) - (emailCont.clientHeight / 2)) + 'px';
+}
+
+/**
+ * Closes the share note modal by hiding the backdrop and container,
+ * and clears the email input value.
+ */
+export function closeShareNote() {
+    var bd = document.querySelector('#modal-backdrop');
+    var cont = document.querySelector('#modal-container');
+    bd.style.display = 'none';
+    cont.style.display = 'none';
+    document.querySelector('#shareEmail').value = '';
+}
+
+/**
+ * Function to share a note by sending the note ID and email to the server.
+ */
+export function shareNote(event) {
+    var id = document.querySelector('#noteId').value;
+    var email = document.querySelector('#shareEmail').value;
+    if (!id || !email) {
+        alert('Invalid Input');
+        return;
+    }
+
+    fetch('/share-note', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'id': id,
+            'email': email
+        })
+    })
+        .then(response => response.json())
+        .then(result => {
+            if (result) {
+                alert(result.msg);
+            }
+        });
+
+    closeShareNote();
+}
+

assets/js/reference.js

@@ -0,0 +1,293 @@
+import { state } from './state.js';
+import { closeRef, makeButton } from './home.js';
+import { saveNote, findRefLinks, closePopup } from './note.js';
+
+/**
+ * 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',
+        headers: {
+            '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",
+        headers: {
+            "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',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            refId: ref.value,
+            text: cont.value
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            document.querySelector('#reference').value = '';
+            document.querySelector('#referenceType').value = '';
+            document.querySelector('#referenceSeries').value = '';
+        });
+}
+
+/**
+ * Retrieves the list of books based on the selected reference type.
+ *
+ * @return {void}
+ */
+export function retrieveBooks() {
+    document.querySelector('#chapter-range').innerText = '';
+    document.querySelector('#verse-range').innerText = '';
+    document.querySelector('#referenceSearch').value = '';
+    document.querySelector('#referenceSearch').style.display = 'none';
+    const selectedType = document.querySelector('#referenceType').value;
+    if (!selectedType) { return; }
+
+    var bookList = document.querySelector('#referenceBook');
+    bookList.style.display = "block";
+    bookList.innerHTML = '';
+    if (selectedType == 'bible') {
+        document.querySelector('#referenceSearch').style.display = 'block';
+        var none = document.createElement("option");
+        none.value = '';
+        none.text = '-- Select --';
+        bookList.appendChild(none);
+        for (var x in state.BOOKS.bible) {
+            var newBook = document.createElement("option");
+            newBook.text = x;
+            bookList.appendChild(newBook);
+        }
+    } else if (selectedType == 'creed') {
+        var none = document.createElement('option');
+        none.value = '';
+        none.text = '-- Select --';
+        bookList.appendChild(none);
+        for (var x in state.BOOKS.creed) {
+            var newBook = document.createElement('option');
+            newBook.value = x;
+            newBook.text = state.BOOKS.creed[x];
+            bookList.appendChild(newBook);
+        }
+    } else if (selectedType == 'cd') {
+        var none = document.createElement("option");
+        none.value = '';
+        none.text = '-- Select --';
+        bookList.appendChild(none);
+        for (var x in state.BOOKS.cd) {
+            var newBook = document.createElement("option");
+            newBook.text = state.BOOKS.cd[x];
+            bookList.appendChild(newBook);
+        }
+    } else if (selectedType == 'hc') {
+        var none = document.createElement("option");
+        none.value = '';
+        none.text = '-- Select --';
+        bookList.appendChild(none);
+        for (var x in state.BOOKS[selectedType]) {
+            var newBook = document.createElement("optgroup");
+            newBook.label = "Lord's Day " + (parseInt(x) + 1)
+            var ld = document.createElement("option");
+            ld.value = 'ld' + (parseInt(x) + 1);
+            ld.text = "LD " + (parseInt(x) + 1) + " All";
+            newBook.appendChild(ld);
+
+            for (var y in state.BOOKS[selectedType][x]) {
+                var question = document.createElement("option");
+                question.value = 'hc' + state.BOOKS[selectedType][x][y];
+                question.text = "HC" + state.BOOKS[selectedType][x][y];
+                newBook.appendChild(question);
+            }
+            bookList.appendChild(newBook);
+        }
+    } else if (selectedType == 'note') {
+        var none = document.createElement("option");
+        none.value = '';
+        none.text = '-- Select --';
+        bookList.appendChild(none);
+
+        fetch('/retrieve-reference', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                'type': 'note'
+            })
+        })
+            .then(response => response.json())
+            .then(results => {
+                for (var x in results) {
+                    var newBook = document.createElement("option");
+                    newBook.value = results[x].id;
+                    newBook.text = results[x].title;
+                    bookList.appendChild(newBook);
+                }
+            });
+    } else {
+        var min = state.BOOKS[selectedType][0];
+        var max = state.BOOKS[selectedType][1];
+        var none = document.createElement("option");
+        none.value = '';
+        none.text = '-- Select --';
+        bookList.appendChild(none);
+        for (var x = min; x <= max; x++) {
+            var newBook = document.createElement("option");
+            newBook.value = x;
+            newBook.text = x;
+            bookList.appendChild(newBook);
+        }
+    }
+}
+
+/**
+ * Filters the books based on the selected reference type and updates the chapter range.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function filterBooks() {
+    document.querySelector('#chapter-range').innerText = '';
+    document.querySelector('#verse-range').innerText = '';
+    if (document.querySelector('#referenceType').value != 'bible') {
+        return;
+    }
+
+    var bookList = document.querySelector('#referenceBook');
+    var book = state.BOOKS.bible[bookList.value];
+    var max = Object.keys(book).length;
+
+    var chapterRange = document.querySelector('#chapter-range');
+    chapterRange.innerText = 'Chapters: ' + max;
+}
+
+/**
+ * Filters the verse based on the selected book and chapter.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function filterVerse() {
+    if (document.querySelector('#referenceType').value != 'bible') {
+        return;
+    }
+
+    var bookList = document.querySelector('#referenceBook').value;
+    var search = document.querySelector('#referenceSearch').value;
+    var chapter = search.split(':')[0];
+    var verseRange = document.querySelector('#verse-range');
+
+    if (!state.BOOKS.bible[bookList] || !state.BOOKS.bible[bookList][chapter]) {
+        verseRange.innerText = 'Unknown Chapter';
+        return;
+    }
+    var verse = state.BOOKS.bible[bookList][chapter];
+    verseRange.innerText = 'Verse: ' + verse;
+}
+
+/**
+ * Fetches a reference based on the provided type, book, and input.
+ *
+ * @param {string} type - The type of reference.
+ * @param {string} book - The book of the reference.
+ * @param {string} input - The input for the reference.
+ * @return {void} This function does not return anything directly, but processes the fetched reference data.
+ */
+export function queryRef(e, type = null, book = null, input = null) {
+    if (!input) {
+        var input = document.querySelector('#refQuery #referenceSearch').value;
+    }
+    if (!type) {
+        var type = document.querySelector('#referenceType').value;
+    }
+    if (!book) {
+        var book = document.querySelector('#referenceBook').value;
+    }
+    fetch('/retrieve-reference', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'type': type,
+            'book': book,
+            'reference': input,
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            const list = document.querySelector('#ref-list');
+            var newList = document.createElement('li');
+            newList.className = 'tab';
+            let button = makeButton(results.title);
+            newList.appendChild(button);
+            list.appendChild(newList);
+
+            const ref = document.querySelector('#ref-text');
+            ref.innerHTML = state.md.render(results.text);
+
+            state.references[results.title] = results.text;
+
+            closeRef();
+            closePopup();
+
+            state.saved = false;
+            state.textDirty = true;
+            saveNote();
+            findRefLinks();
+        });
+}
+

assets/js/register.js

@@ -0,0 +1,46 @@
+// 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) {
+    // Validate input
+    const name = nameInput.value;
+    const email = emailInput.value;
+    const password = passwordInput.value;
+
+    if (name === "" || email === "" || password === "") {
+        event.preventDefault();
+        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/series.js

@@ -0,0 +1,54 @@
+import { state } from './state.js';
+
+/**
+ * A description of the entire function.
+ */
+export function newSeries() {
+    if (document.querySelector('#series').value == 'new') {
+        document.querySelector('#newSeries').style.display = 'inline-block';
+        document.querySelector('#series').style.display = 'none';
+    }
+
+    state.saved = false;
+    state.textDirty = true;
+}
+
+/**
+ * Saves a series by making a POST request to '/save-series' with the series name as the request body.
+ *
+ * @param {Event} event - The keydown event.
+ * @return {Promise} A Promise that resolves with the response from the server.
+ */
+export function saveSeries(event) {
+    if (event.keyCode == 27) {
+        document.querySelector('#newSeries').style.display = 'none';
+        document.querySelector('#series').style.display = 'inline-block';
+        document.querySelector('#series').value = 0;
+    }
+    if (event.keyCode == 13 && document.querySelector('#newSeries').value != '') {
+        fetch('/save-series', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                'seriesName': document.querySelector('#newSeries').value
+            })
+        })
+            .then(response => response.json())
+            .then(results => {
+                var newSeries = document.createElement('option');
+                newSeries.text = document.querySelector('#newSeries').value;
+                newSeries.value = results.id;
+                document.querySelector('#series').add(newSeries);
+
+                alert(results.msg);
+                document.querySelector('#newSeries').style.display = 'none';
+                document.querySelector('#series').style.display = 'inline-block';
+
+                document.querySelector('#newSeries').value = '';
+                document.querySelector('#series').value = results.id;
+            });
+    }
+}
+

assets/js/speaker.js

@@ -0,0 +1,54 @@
+import { state } from './state.js';
+/**
+ * Toggles the display of the new speaker input field and hides the speaker select field.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function newSpeaker() {
+    if (document.querySelector('#speaker').value == 'new') {
+        document.querySelector('#newSpeaker').style.display = 'inline-block';
+        document.querySelector('#speaker').style.display = 'none';
+    }
+
+    state.saved = false;
+    state.textDirty = true;
+}
+
+/**
+ * Saves a new speaker to the database and updates the UI with the new speaker option.
+ *
+ * @param {Event} event - The keydown event triggered by the user.
+ * @return {Promise} A Promise that resolves with the results of the fetch request.
+ */
+export function saveSpeaker(event) {
+    if (event.keyCode == 27) {
+        document.querySelector('#newSpeaker').style.display = 'none';
+        document.querySelector('#speaker').style.display = 'inline-block';
+        document.querySelector('#speaker').value = 0;
+    }
+    if (event.keyCode == 13 && document.querySelector('#newSpeaker').value != '') {
+        fetch('/save-speaker', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                'speakerName': document.querySelector('#newSpeaker').value
+            })
+        })
+            .then(response => response.json())
+            .then(results => {
+                var newSpeaker = document.createElement('option');
+                newSpeaker.text = document.querySelector('#newSpeaker').value;
+                newSpeaker.value = results.id;
+                document.querySelector('#speaker').add(newSpeaker);
+
+                alert(results.msg);
+                document.querySelector('#newSpeaker').style.display = 'none';
+                document.querySelector('#speaker').style.display = 'inline-block';
+
+                document.querySelector('#newSpeaker').value = '';
+                document.querySelector('#speaker').value = results.id;
+            });
+    }
+}

assets/js/state.js

@@ -0,0 +1,12 @@
+export let state = {
+    textDirty: false,
+    saved: true,
+    references: {},
+    saveTimeout: null,
+    saveInterval: 5000,
+    saveFailureCount: 0,
+    to: null,
+    BOOKS: {},
+    md: null,
+    failureCount: 0,
+}

assets/js/template.js

@@ -0,0 +1,52 @@
+import { state } from "./state.js";
+
+/**
+ * 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;
+            state.textDirty = true;
+        });
+}
+
+/**
+ * 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;
+					}
+				}
+			}
+		}
+	}