From b8b763637f151509c9a7a7cfdf4d1e800cfb8b02 Mon Sep 17 00:00:00 2001
From: Are0h <ro@playvicio.us>
Date: Tue, 10 May 2022 17:19:46 -0700
Subject: [PATCH] finished scss stylint refactor for remaining pages

finished up refacting all of the style sheets to be brought in line with
the stylint scss standard. the standard will probably change as i tweak
the rules but the foundation is solid and it's rendering so it's a
great place to start

i'll go through the ui to make sure everything is in tact and i'll make
the necessary adjustments

i should probably refactor some structures as well as they nesting is a
bit overly complicated
---
 brain/views/dash/page-edit.twig        |    4 +-
 public/assets/css/dash.css             |  621 ++++++------
 src/styles/main/_calendar.scss         |  419 +++++----
 src/styles/main/_colors.scss           |   17 +-
 src/styles/main/_editor-highlight.scss |  130 +--
 src/styles/main/_editor.scss           |  198 ++--
 src/styles/main/_error.scss            |   47 +-
 src/styles/main/_forms.scss            |   16 +-
 src/styles/main/_index.scss            |  665 ++++++-------
 src/styles/main/_mixins.scss           |    6 +-
 src/styles/main/_navigation.scss       |  151 +--
 src/styles/main/_normalize.scss        |  471 ++++++----
 src/styles/main/_posts.scss            | 1198 +++++++++++++-----------
 src/styles/main/_settings.scss         |  657 +++++++------
 src/styles/main/_structure.scss        |    4 +-
 src/styles/main/_typography.scss       |   21 +-
 16 files changed, 2541 insertions(+), 2084 deletions(-)

diff --git a/brain/views/dash/page-edit.twig b/brain/views/dash/page-edit.twig
index 60eb09e..d7037dd 100644
--- a/brain/views/dash/page-edit.twig
+++ b/brain/views/dash/page-edit.twig
@@ -118,7 +118,7 @@
 					<div id="post-header-wrapper" class="columns">
 						<div id="post-title" class="column">
 							<label>TITLE</label>
-							<textarea id="post_title" type="text" name="post_title" class="post-edit" placeholder="TITLE">
+							<textarea id="post-title-text " type="text" name="post-title-text " class="post-edit" placeholder="TITLE">
 								{{ - _title - }}
 							</textarea>
 
@@ -142,7 +142,7 @@
 						</div>
 						<div id="post-meta" class="column">
 							<label>TAGS</label>
-							<textarea id="post_tags" type="text" name="post_tags" class="form-control" placeholder="tags [comma seperated]">
+							<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">
 								{{ - tags - }}
 							</textarea>
 							<label>OPTIONS</label>
diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css
index ab11598..3654467 100644
--- a/public/assets/css/dash.css
+++ b/public/assets/css/dash.css
@@ -1644,96 +1644,126 @@
   }
 }
 
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
 html {
   line-height: 1.15;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
+  /* 1 */
 }
 
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
 body {
   margin: 0;
 }
 
-article,
-aside,
-footer,
-header,
-nav,
-section {
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
   display: block;
 }
 
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
-  line-height: 1em;
-}
-
-figcaption,
-figure,
-main {
-  display: block;
-}
-
-figure {
-  margin: 1em 40px;
 }
 
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
 hr {
   box-sizing: content-box;
+  /* 1 */
   height: 0;
+  /* 1 */
   overflow: visible;
+  /* 2 */
 }
 
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
 pre {
-  font-family: monospace, monospace;
+  font-family: monospace;
+  /* 1 */
   font-size: 1em;
+  /* 2 */
 }
 
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
 a {
   background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-
-a:active,
-a:hover {
-  outline-width: 0;
 }
 
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
 abbr[title] {
   border-bottom: none;
+  /* 1 */
   text-decoration: underline;
+  /* 2 */
   text-decoration: underline dotted;
+  /* 2 */
 }
 
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
 b,
 strong {
-  font-weight: inherit;
   font-weight: bolder;
 }
 
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
 kbd,
 samp {
-  font-family: monospace, monospace;
+  font-family: monospace;
+  /* 1 */
   font-size: 1em;
+  /* 2 */
 }
 
-dfn {
-  font-style: italic;
-}
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
+/**
+ * Add the correct font size in all browsers.
+ */
 small {
   font-size: 80%;
 }
 
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
 sub,
 sup {
-  font-size: 60%;
+  font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
@@ -1744,142 +1774,194 @@ sub {
 }
 
 sup {
-  top: -0.55em;
-  background: #1d3040;
-  color: #1d3040;
-  border-radius: 2px;
-  padding: 0 2px 0 2px;
-  margin: 0 2px 0 0;
-}
-
-audio,
-video {
-  display: inline-block;
-}
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
+  top: -0.5em;
 }
 
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
 img {
   border-style: none;
 }
 
-svg:not(:root) {
-  overflow: hidden;
-}
-
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
 button,
 input,
 optgroup,
 select,
 textarea {
-  font-family: sans-serif;
+  font-family: inherit;
+  /* 1 */
   font-size: 100%;
+  /* 1 */
   line-height: 1.15;
+  /* 1 */
   margin: 0;
+  /* 2 */
 }
 
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
 button,
 input {
+  /* 1 */
   overflow: visible;
 }
 
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
 button,
 select {
+  /* 1 */
   text-transform: none;
 }
 
-button,
-html [type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button;
-}
-
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
 [type=button]::-moz-focus-inner,
 [type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner,
-button::-moz-focus-inner {
+[type=submit]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
 [type=button]:-moz-focusring,
 [type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring,
-button:-moz-focusring {
+[type=submit]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
+/**
+ * Correct the padding in Firefox.
+ */
 fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  padding: 0.35em 0.75em 0.625em;
 }
 
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
 legend {
   box-sizing: border-box;
+  /* 1 */
   color: inherit;
+  /* 2 */
   display: table;
+  /* 1 */
   max-width: 100%;
+  /* 1 */
   padding: 0;
+  /* 3 */
   white-space: normal;
+  /* 1 */
 }
 
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
 progress {
-  display: inline-block;
   vertical-align: baseline;
 }
 
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
 textarea {
   overflow: auto;
 }
 
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
 [type=checkbox],
 [type=radio] {
   box-sizing: border-box;
+  /* 1 */
   padding: 0;
+  /* 2 */
 }
 
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
 [type=number]::-webkit-inner-spin-button,
 [type=number]::-webkit-outer-spin-button {
   height: auto;
 }
 
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
 [type=search] {
-  -webkit-appearance: textfield;
   outline-offset: -2px;
+  /* 2 */
 }
 
-[type=search]::-webkit-search-cancel-button,
-[type=search]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
   font: inherit;
+  /* 2 */
 }
 
-details,
-menu {
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
   display: block;
 }
 
+/*
+ * Add the correct display in all browsers.
+ */
 summary {
   display: list-item;
 }
 
-canvas {
-  display: inline-block;
-}
-
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
 template {
   display: none;
 }
 
+/**
+ * Add the correct display in IE 10.
+ */
 [hidden] {
   display: none;
 }
@@ -1908,12 +1990,12 @@ h3 {
 html,
 body {
   background: #1d3040 linear-gradient(0deg, #1d3040 0%, #2d4a63 100%) no-repeat;
-  font: 400 1em Helvetica, Arial, sans-serif;
+  font: 400 1em helvetica, arial, sans-serif;
   height: 100%;
 }
 
 a {
-  font: 300 1em Helvetica, Arial, sans-serif;
+  font: 300 1em helvetica, arial, sans-serif;
   color: #b2cce5;
   text-decoration: underline;
   transition: all 0.2s linear;
@@ -1936,7 +2018,7 @@ svg.icons {
   padding: 0;
   margin-top: -55px;
 }
-#notifications #notifyMessage {
+#notifications #notify-message {
   margin: 0 auto;
   transition: all 0.6s cubic-bezier(0.83, 0.05, 0.28, 1);
   height: 50px;
@@ -1950,53 +2032,51 @@ svg.icons {
   transform-origin: 50% 0;
   overflow: hidden;
 }
-#notifications #notifyMessage #notify-good,
-#notifications #notifyMessage #notify-lame,
-#notifications #notifyMessage #notify-working {
+#notifications #notify-message #notify-good,
+#notifications #notify-message #notify-lame,
+#notifications #notify-message #notify-working {
   display: block;
 }
-#notifications #notifyMessage #notify-working-icon {
-  -webkit-animation: spin 2s linear infinite;
-  -moz-animation: spin 2s linear infinite;
+#notifications #notify-message #notify-working-icon {
   animation: spin 2s linear infinite;
 }
 @keyframes spin {
   transform: rotate(360deg);
 }
-#notifications #notifyMessage .notify-icon {
+#notifications #notify-message .notify-icon {
   background: #32302f;
-  padding: 8px 5px 5px 5px;
+  padding: 8px 5px 5px;
   border-radius: 5px 0 0 5px;
   height: 30px;
   width: 30px;
   text-align: center;
   border: 2px solid #efebe3;
 }
-#notifications #notifyMessage #notify-text {
+#notifications #notify-message #notify-text {
   color: #efebe3;
   background: #32302f;
   width: 400px;
   height: 28px;
-  padding: 15px 0 0 0;
+  padding: 15px 0 0;
   border-radius: 0 5px 5px 0;
   border: 2px solid #efebe3;
   text-align: center;
   overflow: hidden;
   position: relative;
 }
-#notifications #notifyMessage #notify-text #notify-progress {
+#notifications #notify-message #notify-text #notify-progress {
   width: 0;
   background: #fc6399;
   height: 43px;
   position: absolute;
-  top: 0px;
+  top: 0;
 }
-#notifications #notifyMessage #notify-text p {
+#notifications #notify-message #notify-text p {
   top: -15px;
   display: block;
   position: relative;
 }
-#notifications #notifyMessage .icons {
+#notifications #notify-message .icons {
   fill: #efebe3;
 }
 
@@ -2066,12 +2146,6 @@ svg.icons {
 }
 
 /* Mozilla based browsers */
-::-moz-selection {
-  background-color: #fc6399;
-  color: #efebe3;
-}
-
-/* Works in Safari */
 ::selection {
   background-color: #fc6399;
   color: #efebe3;
@@ -2154,7 +2228,7 @@ svg.icons {
 #dash-index-content #dash-index #dash-index-wrapper .dash-init form input,
 #dash-index-content #dash-index #dash-index-wrapper .dash-restore form input {
   width: 290px;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
   height: 30px;
 }
 #dash-index-content #dash-index #dash-index-wrapper .dash-init form button,
@@ -2203,7 +2277,7 @@ svg.icons {
 #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form input,
 #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-reset input {
   width: 290px;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
   height: 30px;
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form button,
@@ -2245,7 +2319,7 @@ svg.icons {
   width: 100%;
   max-width: 900px;
   height: 100%;
-  padding: 5px 0 0 0;
+  padding: 5px 0 0;
   margin: 0 auto;
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list {
@@ -2384,19 +2458,19 @@ svg.icons {
   margin: 0 10px 0 0;
   bottom: -15px;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(3) {
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(3) {
   width: 100%;
   margin-bottom: 20px;
   height: 500px;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) {
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(4),
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(6) {
   width: 48.6%;
   height: 350px;
   margin: 0 10px 20px 0;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5),
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(7) {
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(5),
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(7) {
   width: 48.6%;
   height: 350px;
   margin: 0 0 20px 10px;
@@ -2421,13 +2495,13 @@ svg.icons {
   #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu {
     width: 60%;
   }
-  #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(3),
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5),
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6),
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(7) {
+  #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(3),
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(4),
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(5),
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(6),
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(7) {
     width: 100%;
-    margin: 15px 0 0 0;
+    margin: 15px 0 0;
     height: 400px;
   }
 }
@@ -2450,7 +2524,7 @@ svg.icons {
   color: #efebe3;
   border-radius: 3px;
   width: 40px;
-  margin: 0 10px 0 10px;
+  margin: 0 10px;
 }
 #settings-actions #buttons button svg {
   width: 25px;
@@ -2490,8 +2564,8 @@ svg.icons {
 #settings-index #settings-index-wrapper #token-settings,
 #settings-index #settings-index-wrapper #backup-settings {
   background: #efebe3;
-  padding: 0px;
-  border-radius: 5px 0 5px 0;
+  padding: 0;
+  border-radius: 5px 0;
   width: 100%;
   margin: 20px auto;
 }
@@ -2500,7 +2574,7 @@ svg.icons {
 #settings-index #settings-index-wrapper #option-settings label,
 #settings-index #settings-index-wrapper #token-settings label,
 #settings-index #settings-index-wrapper #backup-settings label {
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: helvetica, arial, sans-serif;
   color: #1d3040;
   font-weight: bold;
 }
@@ -2538,7 +2612,7 @@ svg.icons {
   color: #efebe3;
   padding: 8px;
   border-radius: 3px;
-  margin: 5px 0 0 0;
+  margin: 5px 0 0;
   text-align: center;
 }
 #settings-index #settings-index-wrapper #member-settings #member-images,
@@ -2546,7 +2620,7 @@ svg.icons {
 #settings-index #settings-index-wrapper #option-settings #member-images,
 #settings-index #settings-index-wrapper #token-settings #member-images,
 #settings-index #settings-index-wrapper #backup-settings #member-images {
-  padding: 10px 15px 0 15px;
+  padding: 10px 15px 0;
 }
 #settings-index #settings-index-wrapper #member-settings #member-images #member-avatar-drop,
 #settings-index #settings-index-wrapper #feature-settings #member-images #member-avatar-drop,
@@ -2554,7 +2628,7 @@ svg.icons {
 #settings-index #settings-index-wrapper #token-settings #member-images #member-avatar-drop,
 #settings-index #settings-index-wrapper #backup-settings #member-images #member-avatar-drop {
   display: inline-block;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
 #settings-index #settings-index-wrapper #member-settings #member-images #member-avatar-drop img,
 #settings-index #settings-index-wrapper #feature-settings #member-images #member-avatar-drop img,
@@ -2595,7 +2669,7 @@ svg.icons {
 #settings-index #settings-index-wrapper #option-settings #member-images #site-background,
 #settings-index #settings-index-wrapper #token-settings #member-images #site-background,
 #settings-index #settings-index-wrapper #backup-settings #member-images #site-background {
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
 #settings-index #settings-index-wrapper #member-settings #member-images #site-background img,
 #settings-index #settings-index-wrapper #feature-settings #member-images #site-background img,
@@ -2621,7 +2695,7 @@ svg.icons {
 #settings-index #settings-index-wrapper #option-settings #member-meta,
 #settings-index #settings-index-wrapper #token-settings #member-meta,
 #settings-index #settings-index-wrapper #backup-settings #member-meta {
-  padding: 10px 15px 0 15px;
+  padding: 10px 15px 0;
   position: relative;
   top: -30px;
 }
@@ -2630,7 +2704,70 @@ svg.icons {
 #settings-index #settings-index-wrapper #option-settings #features,
 #settings-index #settings-index-wrapper #token-settings #features,
 #settings-index #settings-index-wrapper #backup-settings #features {
-  padding: 10px 15px 0 15px;
+  padding: 10px 15px 0;
+}
+#settings-index #settings-index-wrapper #mail-settings {
+  min-height: 240px;
+  /*
+  input {
+      margin: 0 5px 5px 0;
+      vertical-align: top;
+  }
+  */
+}
+#settings-index #settings-index-wrapper #mail-settings a.mail-option {
+  float: right;
+  font-family: "Lucida Console", monaco, monospace;
+  font-size: 0.9em;
+  border-radius: 3px;
+  text-decoration: none;
+  margin: 0 0 0 5px;
+}
+#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled=true] {
+  color: #fc6399;
+}
+#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled=false] {
+  color: #1d3040;
+}
+#settings-index #settings-index-wrapper #mail-settings div[data-enabled=false] {
+  display: none;
+  visibility: hidden;
+}
+#settings-index #settings-index-wrapper #mail-settings #settings-api {
+  background: #1d3040;
+  border-radius: 3px;
+  padding: 10px;
+}
+#settings-index #settings-index-wrapper #mail-settings #settings-api span {
+  color: #efebe3 !important;
+  margin: -13px 0 0 5px;
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+  font-weight: bold;
+}
+#settings-index #settings-index-wrapper #mail-settings #settings-api button {
+  color: #efebe3;
+  border-radius: 3px;
+  width: 40px;
+  margin: 0;
+}
+#settings-index #settings-index-wrapper #mail-settings #settings-api button svg {
+  width: 25px;
+  height: 20px;
+  fill: #efebe3;
+}
+#settings-index #settings-index-wrapper #mail-settings #settings-api button[data-enabled=false] {
+  background: #b2cce5;
+}
+#settings-index #settings-index-wrapper #mail-settings #settings-api button[data-enabled=false] svg {
+  fill: #1d3040;
+}
+#settings-index #settings-index-wrapper #mail-settings #settings-api button[data-enabled=true] {
+  background: #fc6399;
+}
+#settings-index #settings-index-wrapper #mail-settings #settings-api button[data-enabled=true] svg {
+  fill: #efebe3;
 }
 #settings-index #settings-index-wrapper textarea {
   background: #1d3040;
@@ -2666,8 +2803,8 @@ svg.icons {
   height: 200px;
   font-size: 1em;
 }
-#settings-index #settings-index-wrapper #feature-settings #feature-api button svg,
-#settings-index #settings-index-wrapper #feature-settings #dynamic-api button svg {
+#settings-index #settings-index-wrapper #feature-settings #feature-api button svg.icons,
+#settings-index #settings-index-wrapper #feature-settings #dynamic-api button svg.icons {
   width: 100px;
   height: 90px;
   fill: #efebe3;
@@ -2705,7 +2842,7 @@ svg.icons {
   fill: #efebe3;
 }
 #settings-index #settings-index-wrapper #token-settings #keys-tokens {
-  padding: 10px 15px 0 15px;
+  padding: 10px 15px 0;
 }
 #settings-index #settings-index-wrapper #token-settings #keys-tokens #member-api-key,
 #settings-index #settings-index-wrapper #token-settings #keys-tokens #form-token {
@@ -2742,67 +2879,6 @@ svg.icons {
   display: inline-block;
   float: right;
 }
-#settings-index #settings-index-wrapper #option-settings #mail-settings {
-  min-height: 240px;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option {
-  float: right;
-  font-family: "Lucida Console", Monaco, monospace;
-  font-size: 0.9em;
-  border-radius: 3px;
-  text-decoration: none;
-  margin: 0 0 0 5px;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled=true] {
-  color: #fc6399;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled=false] {
-  color: #1d3040;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings input {
-  margin: 0 5px 5px 0;
-  vertical-align: top;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings div[data-enabled=false] {
-  display: none;
-  visibility: hidden;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api {
-  background: #1d3040;
-  border-radius: 3px;
-  padding: 10px;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api span {
-  color: #efebe3 !important;
-  margin: -13px 0 0 5px;
-  position: relative;
-  vertical-align: middle;
-  display: inline-block;
-  font-weight: bold;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button {
-  color: #efebe3;
-  border-radius: 3px;
-  width: 40px;
-  margin: 0;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button svg {
-  width: 25px;
-  height: 20px;
-  fill: #efebe3;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button[data-enabled=false] {
-  background: #b2cce5;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button[data-enabled=false] svg {
-  fill: #1d3040;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button[data-enabled=true] {
-  background: #fc6399;
-}
-#settings-index #settings-index-wrapper #option-settings #mail-settings #settings-api button[data-enabled=true] svg {
-  fill: #efebe3;
-}
 
 @media only screen and (max-width: 480px) {
   #settings-actions {
@@ -2813,7 +2889,7 @@ svg.icons {
     background: none;
   }
   #settings-actions #buttons button {
-    margin: 0 5px 0 5px;
+    margin: 0 5px;
   }
 }
 #error-index {
@@ -2854,7 +2930,7 @@ svg.icons {
   color: #fc6399;
   height: 30px;
   padding: 10px;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
   font-size: 1.5em;
   cursor: move;
 }
@@ -2879,7 +2955,7 @@ svg.icons {
   color: #efebe3;
   border-radius: 3px;
   width: 40px;
-  margin: 0 10px 0 10px;
+  margin: 0 10px;
 }
 #nav-index #nav-index-wrapper #nav-pages #nav-btns button svg {
   fill: #efebe3;
@@ -2895,7 +2971,7 @@ svg.icons {
   #nav-index #nav-index-wrapper #nav-pages .nav-item label {
     width: 40%;
     vertical-align: top;
-    margin-top: 0px;
+    margin-top: 0;
     line-height: 1em;
   }
 }
@@ -2907,7 +2983,7 @@ svg.icons {
   #nav-index #nav-index-wrapper #nav-pages .nav-item label {
     width: 37%;
     vertical-align: top;
-    margin-top: 0px;
+    margin-top: 0;
     line-height: 1em;
   }
 }
@@ -2933,7 +3009,7 @@ input[type=text] {
   border-radius: 5px;
   padding: 5px;
   margin: 10px 5px 0 0;
-  font: 18px Helvetica, Arial, sans-serif;
+  font: 18px helvetica, arial, sans-serif;
   display: inline-block;
   background: #1d3040;
   color: #f5ab35;
@@ -2943,7 +3019,7 @@ textarea {
   border: 0;
   border-radius: 3px;
   color: #efebe3;
-  font: 15px Helvetica, Arial, sans-serif;
+  font: 15px helvetica, arial, sans-serif;
   background: #1d3040;
 }
 
@@ -2951,7 +3027,7 @@ button,
 input[type=submit] {
   background: #fc6399;
   color: #1d3040;
-  font: 20px Helvetica, Arial, sans-serif;
+  font: 20px helvetica, arial, sans-serif;
   border-radius: 5px;
   position: relative;
   cursor: pointer;
@@ -2961,7 +3037,7 @@ input[type=submit] {
 }
 
 select {
-  font: 14px Helvetica, Arial, sans-serif;
+  font: 14px helvetica, arial, sans-serif;
   border: 1px solid #b2cce5;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2970,24 +3046,24 @@ select {
 }
 
 ::-webkit-input-placeholder {
-  font: 25px Helvetica, Arial, sans-serif;
+  font: 25px helvetica, arial, sans-serif;
   color: #efebe3;
 }
 
 :-moz-placeholder {
   /* Firefox 18- */
-  font: 25px Helvetica, Arial, sans-serif;
+  font: 25px helvetica, arial, sans-serif;
   color: #efebe3;
 }
 
 ::-moz-placeholder {
   /* Firefox 19+ */
-  font: 15px Helvetica, Arial, sans-serif;
+  font: 15px helvetica, arial, sans-serif;
   color: #efebe3;
 }
 
 :-ms-input-placeholder {
-  font: 25px Helvetica, Arial, sans-serif;
+  font: 25px helvetica, arial, sans-serif;
   color: #efebe3;
 }
 
@@ -3000,7 +3076,7 @@ select {
   overflow: hidden;
 }
 #post-index #post-index-wrapper #post-index-header {
-  margin: 10px 0 0 0;
+  margin: 10px 0 0;
 }
 #post-index #post-index-wrapper #post-index-header #post-index-header-left {
   text-transform: capitalize;
@@ -3031,7 +3107,7 @@ select {
   text-decoration-color: #b2cce5;
 }
 #post-index #post-index-wrapper #posts-list {
-  margin: 20px 0 0 0;
+  margin: 20px 0 0;
 }
 #post-index #post-index-wrapper #posts-list a.page-link {
   background: #efebe3;
@@ -3039,7 +3115,7 @@ select {
   vertical-align: top;
   width: 100%;
   text-decoration: none;
-  margin: 0 0 20px 0;
+  margin: 0 0 20px;
   border-radius: 3px;
   overflow: hidden;
   color: black;
@@ -3082,12 +3158,12 @@ select {
 #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta,
 #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta {
   width: 100%;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0065) 100%);
   border-radius: 3px;
   margin: auto;
   bottom: 0;
   position: absolute;
-  padding: 0 0 20px 0;
+  padding: 0 0 20px;
 }
 #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options,
 #post-index #post-index-wrapper #posts-list a.page-link div.page-video #meta #options {
@@ -3160,7 +3236,7 @@ select {
   bottom: -15px;
 }
 #post-index #post-index-wrapper #posts-list a.page-link p {
-  padding: 5px 10px 5px 10px;
+  padding: 5px 10px;
   font-size: 1.2em;
   font-weight: 400;
 }
@@ -3169,7 +3245,7 @@ select {
   display: block;
   margin: 0 auto;
 }
-#post-index #post-index-wrapper .paginate a {
+#post-index #post-index-wrapper .paginate a.paginate-link {
   display: inline-block;
   vertical-align: top;
 }
@@ -3201,25 +3277,25 @@ select {
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper label {
   color: #efebe3;
   font-size: 0.9em;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: helvetica, arial, sans-serif;
   font-weight: 600;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper span {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper span#post-span {
   color: #1d3040;
   font-size: 0.9em;
   font-weight: 600;
   text-transform: uppercase;
   float: right;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #post_title {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #post-title-text {
   background: #efebe3;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: helvetica, arial, sans-serif;
   width: 97.6%;
   height: 80px;
   font-size: 2em;
   color: #1d3040;
   padding: 5px;
-  margin: 0 0 5px 0;
+  margin: 0 0 5px;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #calendar-icon {
   background: #05090b;
@@ -3233,38 +3309,38 @@ select {
   color: #b2cce5;
   border-radius: 3px;
   border-color: #1d3040;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
   width: 100%;
   height: 45px;
   padding: 5px;
   font-size: 1.5em;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post_tags {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-tags {
   background: #efebe3;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: helvetica, arial, sans-serif;
   width: 97.6%;
   height: 80px;
   color: #1d3040;
   padding: 5px;
-  margin: 0 0 5px 0;
+  margin: 0 0 5px;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options {
   display: inline-block;
   vertical-align: top;
   width: 100%;
   padding: 0;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button:nth-child(1) {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.option-button:nth-child(1) {
   border-radius: 3px 0 0 3px;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button:nth-child(4) {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.option-button:nth-child(4) {
   border-radius: 0 3px 3px 0;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options a button {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options a button.button-link {
   border-radius: 0 3px 3px 0 !important;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.option-btn {
   width: 25%;
   height: 45px;
   transition: all 0.3s linear;
@@ -3274,16 +3350,16 @@ select {
   vertical-align: top;
   text-align: center;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=false] {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.btn-active[data-active=false] {
   background: #1d3040;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=false] svg {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.btn-active[data-active=false] svg.svg-toggle {
   fill: #b2cce5;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=true] {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.btn-active[data-active=true] {
   background: #f5ab35;
 }
-#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=true] svg {
+#post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button.btn-active[data-active=true] svg.svg-toggle {
   fill: #1d3040;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #page-files-upload,
@@ -3304,7 +3380,7 @@ select {
   padding: 10px;
   margin: 0 auto;
   font-weight: bold;
-  font-color: #1d3040;
+  color: #1d3040;
   font-size: 1em;
 }
 #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-file-drop {
@@ -3317,7 +3393,7 @@ select {
   color: #1d3040;
   vertical-align: middle;
   border-radius: 5px;
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
 #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-file-drop label {
   cursor: pointer;
@@ -3331,7 +3407,7 @@ select {
 }
 #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list,
 #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-files-list {
-  padding: 10px 0 0 0;
+  padding: 10px 0 0;
 }
 #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .img-item,
 #post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-files-list .img-item {
@@ -3429,7 +3505,7 @@ select {
   margin: 0;
 }
 #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight pre code {
-  font-family: "Lucida Console", Monaco, monospace;
+  font-family: "Lucida Console", monaco, monospace;
   padding: 5px;
   border-radius: 5px;
   line-height: 1.6em;
@@ -3487,7 +3563,7 @@ select {
   }
 
   #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
-    margin: 5px 0 0 0;
+    margin: 5px 0 0;
     width: 100%;
     padding: 0;
   }
@@ -3507,18 +3583,18 @@ select {
     visibility: hidden;
   }
 
-  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post_title {
+  #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-title-text {
     width: 96.4%;
   }
   #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
-    margin: 5px 0 0 0;
+    margin: 5px 0 0;
     width: 100%;
     padding: 0;
   }
   #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
     width: 83.1%;
   }
-  #post-edit-index #post-edit-index-wrapper #post-header #post-meta #post_tags {
+  #post-edit-index #post-edit-index-wrapper #post-header #post-meta #post-tags {
     width: 96.4%;
   }
   #post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control .content-editor-btn-icon svg.icons {
@@ -3553,7 +3629,7 @@ select {
   -webkit-tap-highlight-color: transparent;
 }
 
-.dp:before {
+.dp::before {
   content: " ";
   height: 6px;
   position: absolute;
@@ -3569,7 +3645,7 @@ select {
   box-shadow: none;
 }
 
-.dp-permanent .dp:before {
+.dp-permanent .dp::before {
   display: none;
 }
 
@@ -3652,14 +3728,6 @@ select {
   background: transparent;
 }
 
-.dp-next:focus,
-.dp-prev:focus,
-.dp-next:hover,
-.dp-prev:hover {
-  outline: none;
-  color: inherit;
-}
-
 .dp-prev {
   left: 24px;
 }
@@ -3668,8 +3736,16 @@ select {
   right: 24px;
 }
 
-.dp-prev:before,
-.dp-next:before {
+.dp-next:focus,
+.dp-prev:focus,
+.dp-next:hover,
+.dp-prev:hover {
+  outline: none;
+  color: inherit;
+}
+
+.dp-prev::before,
+.dp-next::before {
   content: "";
   border: 2px solid;
   width: 10px;
@@ -3680,12 +3756,12 @@ select {
   margin: 9px 0 40px 4px;
 }
 
-.dp-prev:before {
+.dp-prev::before {
   border-right: 0;
   border-bottom: 0;
 }
 
-.dp-next:before {
+.dp-next::before {
   border-left: 0;
   border-top: 0;
   margin-left: 0;
@@ -3705,7 +3781,7 @@ select {
   background: #0d161d;
 }
 
-.dp-day-today:after {
+.dp-day-today::after {
   content: "";
   height: 0;
   width: 0;
@@ -3767,7 +3843,7 @@ select {
 }
 .dp-col-header,
 .dp-day {
-  width: 14.28571429%;
+  width: 14.2857%;
   display: inline-block;
   padding: 8px;
   text-align: center;
@@ -3797,11 +3873,11 @@ select {
   color: #aaa;
 }
 
+.dp-current,
 .dp-day:hover,
 .dp-month:hover,
 .dp-year:hover,
 .dp-current:focus,
-.dp-current,
 .dp-day:focus,
 .dp-month:focus,
 .dp-year:focus {
@@ -3862,12 +3938,6 @@ select {
   margin-top: 30px;
   z-index: 2000;
 }
-#edit-control button:nth-child(1) {
-  border-radius: 3px 0 0 3px;
-}
-#edit-control button:nth-child(10) {
-  border-radius: 0 3px 3px 0;
-}
 #edit-control button {
   background: #b2cce5;
   width: 10%;
@@ -3879,11 +3949,17 @@ select {
   vertical-align: top;
   text-align: center;
 }
+#edit-control button:nth-child(1) {
+  border-radius: 3px 0 0 3px;
+}
+#edit-control button:nth-child(10) {
+  border-radius: 0 3px 3px 0;
+}
 #edit-control button:hover {
   background: #6699cb;
 }
 #edit-control #option-update {
-  padding: 5px 5px 1px 5px;
+  padding: 5px 5px 1px;
   display: inline-block;
   vertical-align: top;
   text-align: center;
@@ -3921,10 +3997,10 @@ select {
   fill: #efebe3;
 }
 #edit-control .content-editor-btn-icon {
-  padding: 5px 5px 1px 5px;
+  padding: 5px 5px 1px;
   color: #1d3040;
 }
-#edit-control .content-editor-btn-icon svg {
+#edit-control .content-editor-btn-icon svg.edit-btn-icon {
   fill: #1d3040;
 }
 #edit-control .content-editor-btn-text {
@@ -3959,12 +4035,7 @@ pre[class*=language-] {
   word-break: normal;
   word-wrap: normal;
   line-height: 1.5;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
   tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
 }
 
diff --git a/src/styles/main/_calendar.scss b/src/styles/main/_calendar.scss
index bf9432b..4fa433e 100644
--- a/src/styles/main/_calendar.scss
+++ b/src/styles/main/_calendar.scss
@@ -1,181 +1,208 @@
 .dp-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 2000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2000;
 }
+
 .dp {
-  position: relative;
-  background: $primary;
-  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
-  line-height: 1.4;
-  border-radius: 4px;
-  max-height: 400px;
-  z-index: 5000;
-  padding-top: 6px;
-  overflow: hidden;
-  -webkit-tap-highlight-color: transparent;
-}
-.dp:before {
-  content: " ";
-  height: 6px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: $highlight;
+    position: relative;
+    background: $primary;
+    box-shadow: 2px 2px 16px rgba(#000, 0.25);
+    line-height: 1.4;
+    border-radius: 4px;
+    max-height: 400px;
+    z-index: 5000;
+    padding-top: 6px;
+    overflow: hidden;
+    -webkit-tap-highlight-color: transparent;
 }
+
+.dp::before {
+    content: ' ';
+    height: 6px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: $highlight;
+}
+
 .dp-permanent .dp {
-  padding-top: 0;
-  border: 1px solid #eee;
-  box-shadow: none;
+    padding-top: 0;
+    border: 1px solid #eee;
+    box-shadow: none;
 }
-.dp-permanent .dp:before {
-  display: none;
+
+.dp-permanent .dp::before {
+    display: none;
 }
+
 .dp-cal {
-  min-height: 300px;
+    min-height: 300px;
 }
+
 .dp-below {
-  position: absolute;
-  font-size: 0.8em;
-  width: 400px;
-  max-width: 90vw;
+    position: absolute;
+    font-size: 0.8em;
+    width: 400px;
+    max-width: 90vw;
 }
+
 .dp-permanent {
-  position: relative;
-  font-size: 0.8em;
-  width: 400px;
-  max-width: 100vw;
+    position: relative;
+    font-size: 0.8em;
+    width: 400px;
+    max-width: 100vw;
 }
+
 .dp-permanent .dp {
-  z-index: 0;
+    z-index: 0;
 }
+
 .dp-modal .dp {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  max-width: 600px;
-  width: calc(100% - 4em);
-  transform: translate(-50%, -50%);
-  animation: slide-up 0.3s forwards;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    max-width: 600px;
+    width: calc(100% - 4em);
+    transform: translate(-50%, -50%);
+    animation: slide-up 0.3s forwards;
 }
+
 .dp-months {
-  padding: 24px;
+    padding: 24px;
 }
+
 .dp-years {
-  box-sizing: border-box;
-  max-height: 400px;
-  padding: 8px 0;
-  /* HACK for Chrome on Android */
-  overflow: auto !important;
+    box-sizing: border-box;
+    max-height: 400px;
+    padding: 8px 0;
+
+    /* HACK for Chrome on Android */
+    overflow: auto !important;
 }
+
 .dp-cal-month,
 .dp-cal-year,
 .dp-day,
 .dp-month,
 .dp-year {
-  box-sizing: border-box;
-  text-align: center;
-  text-decoration: none;
-  position: relative;
-  color: $white;
-  border-radius: 2px;
-  border: 0;
-  background: transparent;
+    box-sizing: border-box;
+    text-align: center;
+    text-decoration: none;
+    position: relative;
+    color: $white;
+    border-radius: 2px;
+    border: 0;
+    background: transparent;
 }
+
 .dp-cal-header {
-  position: relative;
-  text-align: center;
-  padding-bottom: 16px;
-  background: color.adjust($primary, $lightness: -10%);
+    position: relative;
+    text-align: center;
+    padding-bottom: 16px;
+    background: color.adjust($primary, $lightness: -10%);
 }
+
 .dp-next,
 .dp-prev {
-  position: absolute;
-  width: 30px;
-  height: 30px;
-  overflow: hidden;
-  top: 14px;
-  color: color.adjust($primary, $lightness: -50%);
-  border-radius: 2px;
-  border: 0;
-  background: transparent;
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    overflow: hidden;
+    top: 14px;
+    color: color.adjust($primary, $lightness: -50%);
+    border-radius: 2px;
+    border: 0;
+    background: transparent;
+}
+
+.dp-prev {
+    left: 24px;
+}
+
+.dp-next {
+    right: 24px;
 }
+
 .dp-next:focus,
 .dp-prev:focus,
 .dp-next:hover,
 .dp-prev:hover {
-  outline: none;
-  color: inherit;
+    outline: none;
+    color: inherit;
 }
-.dp-prev {
-  left: 24px;
+
+.dp-prev::before,
+.dp-next::before {
+    content: '';
+    border: 2px solid;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    transform: rotate(-45deg);
+    transition: border-color 0.2s;
+    margin: 9px 0 40px 4px;
 }
-.dp-next {
-  right: 24px;
-}
-.dp-prev:before,
-.dp-next:before {
-  content: "";
-  border: 2px solid;
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-  transform: rotate(-45deg);
-  transition: border-color 0.2s;
-  margin: 9px 0 40px 4px;
-}
-.dp-prev:before {
-  border-right: 0;
-  border-bottom: 0;
-}
-.dp-next:before {
-  border-left: 0;
-  border-top: 0;
-  margin-left: 0;
-  margin-right: 4px;
+
+.dp-prev::before {
+    border-right: 0;
+    border-bottom: 0;
+}
+
+.dp-next::before {
+    border-left: 0;
+    border-top: 0;
+    margin-left: 0;
+    margin-right: 4px;
 }
+
 .dp-cal-month,
 .dp-cal-year {
-  display: inline-block;
-  font-size: 1.4em;
-  padding: 16px 8px 8px;
-  outline: none;
+    display: inline-block;
+    font-size: 1.4em;
+    padding: 16px 8px 8px;
+    outline: none;
 }
+
 .dp-cal-footer {
-  text-align: center;
-  background: color.adjust($primary, $lightness: -10%);
-}
-.dp-day-today:after {
-  content: "";
-  height: 0;
-  width: 0;
-  border: 7px solid $highlight;
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
+    text-align: center;
+    background: color.adjust($primary, $lightness: -10%);
+}
+
+.dp-day-today::after {
+    content: '';
+    height: 0;
+    width: 0;
+    border: 7px solid $highlight;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+    position: absolute;
+    top: 0;
+    right: 0;
 }
+
 .dp-close,
 .dp-clear,
 .dp-today {
-  box-sizing: border-box;
-  display: inline-block;
-  width: 33%;
-  padding: 8px;
-  text-decoration: none;
-  color: color.adjust($primary, $lightness: -50%);
-  border: 0;
-  background: transparent;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 33%;
+    padding: 8px;
+    text-decoration: none;
+    color: color.adjust($primary, $lightness: -50%);
+    border: 0;
+    background: transparent;
 }
+
 .dp-permanent .dp-close,
 .dp-permanent .dp-clear {
-  display: none;
+    display: none;
 }
+
 .dp-close:active,
 .dp-clear:active,
 .dp-today:active,
@@ -183,106 +210,118 @@
 .dp-prev:active,
 .dp-cal-month:active,
 .dp-cal-year:active {
-  background: $highlight;
-  color: $white;
-}
-@media screen and (min-device-width: 1200px) {
-  .dp-close:hover,
-  .dp-close:focus,
-  .dp-clear:hover,
-  .dp-clear:focus,
-  .dp-today:hover,
-  .dp-today:focus,
-  .dp-next:hover,
-  .dp-next:focus,
-  .dp-prev:hover,
-  .dp-prev:focus,
-  .dp-cal-month:focus,
-  .dp-cal-month:hover,
-  .dp-cal-year:hover,
-  .dp-cal-year:focus {
     background: $highlight;
     color: $white;
-  }
+}
+@media screen and (min-device-width: 1200px) {
+    .dp-close:hover,
+    .dp-close:focus,
+    .dp-clear:hover,
+    .dp-clear:focus,
+    .dp-today:hover,
+    .dp-today:focus,
+    .dp-next:hover,
+    .dp-next:focus,
+    .dp-prev:hover,
+    .dp-prev:focus,
+    .dp-cal-month:focus,
+    .dp-cal-month:hover,
+    .dp-cal-year:hover,
+    .dp-cal-year:focus {
+        background: $highlight;
+        color: $white;
+    }
 }
 
 .dp-col-header,
 .dp-day {
-  width: 14.28571429%;
-  display: inline-block;
-  padding: 8px;
-  text-align: center;
+    width: 14.2857%;
+    display: inline-block;
+    padding: 8px;
+    text-align: center;
 }
+
 .dp-col-header {
-  color: #aaa;
-  text-transform: uppercase;
-  font-weight: 300;
-  font-size: 0.8em;
-  padding: 8px 0;
+    color: #aaa;
+    text-transform: uppercase;
+    font-weight: 300;
+    font-size: 0.8em;
+    padding: 8px 0;
 }
+
 .dp-month {
-  width: 33%;
-  display: inline-block;
-  padding: 8px;
+    width: 33%;
+    display: inline-block;
+    padding: 8px;
 }
+
 .dp-year {
-  display: block;
-  padding: 8px 40px;
-  width: 100%;
+    display: block;
+    padding: 8px 40px;
+    width: 100%;
 }
+
 .dp-edge-day {
-  color: #aaa;
+    color: #aaa;
 }
+
+.dp-current,
 .dp-day:hover,
 .dp-month:hover,
 .dp-year:hover,
 .dp-current:focus,
-.dp-current,
 .dp-day:focus,
 .dp-month:focus,
 .dp-year:focus {
-  outline: none;
-  background: color.adjust($primary, $lightness: -40%);
-  color: $white;
+    outline: none;
+    background: color.adjust($primary, $lightness: -40%);
+    color: $white;
 }
+
 .dp-selected:hover,
 .dp-selected:focus,
 .dp-selected {
-  background: $highlight;
-  color: color.adjust($primary, $lightness: -60%);
+    background: $highlight;
+    color: color.adjust($primary, $lightness: -60%);
 }
+
 .dp-day-disabled {
-  background: transparent;
-  color: #ddd;
+    background: transparent;
+    color: #ddd;
 }
+
 .dp-day-disabled:focus,
 .dp-day-disabled:hover {
-  background: #ddd;
+    background: #ddd;
 }
+
 .dp-focuser {
-  position: absolute;
-  z-index: 0;
-  top: 50%;
-  left: 50%;
+    position: absolute;
+    z-index: 0;
+    top: 50%;
+    left: 50%;
 }
+
 // Responsive
 @media (max-width: 480px), (max-height: 480px) {
-  .dp-modal .dp {
-    font-size: 0.9em;
-    width: auto;
-    width: 100%;
-  }
-  .dp-day-of-week,
-  .dp-day {
-    padding: 8px;
-  }
+    .dp-modal .dp {
+        font-size: 0.9em;
+        width: auto;
+        width: 100%;
+    }
+
+    .dp-day-of-week,
+    .dp-day {
+        padding: 8px;
+    }
 }
 
 @keyframes slide-up {
-  0% {
-    transform: translate(-50%, 100%);
-  }
-  100% {
-    transform: translate(-50%, -50%);
-  }
+    0% {
+        transform: translate(-50%, 100%);
+    }
+
+    100% {
+        transform: translate(-50%, -50%);
+    }
 } ;
diff --git a/src/styles/main/_colors.scss b/src/styles/main/_colors.scss
index b78c14c..9a0c053 100644
--- a/src/styles/main/_colors.scss
+++ b/src/styles/main/_colors.scss
@@ -6,12 +6,11 @@ $white: #efebe3;
 $grey: #abb7b7;
 $black: #32302f;
 
-//editor colors
-$eventCool: #32cd32;
-$eventLame: #f64747;
-
-$editorPrimary: #fde3a7;
-$editorSecondary: #e7903c;
-$editorTertiary: #6bb9f0;
-$editorString: #dcc6e0;
-$editorTag: #e73c4e;
+// editor colors
+$event-cool: #32cd32;
+$event-lame: #f64747;
+$editor-primary: #fde3a7;
+$editor-secondary: #e7903c;
+$editor-tertiary: #6bb9f0;
+$editor-string: #dcc6e0;
+$editor-tag: #e73c4e;
diff --git a/src/styles/main/_editor-highlight.scss b/src/styles/main/_editor-highlight.scss
index 481dd01..bbbf5f9 100644
--- a/src/styles/main/_editor-highlight.scss
+++ b/src/styles/main/_editor-highlight.scss
@@ -1,105 +1,117 @@
-code[class*="language-"],
-pre[class*="language-"] {
-  color: $editorPrimary;
-  background: none;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  font-size: 1em;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
+code[class*='language-'],
+pre[class*='language-'] {
+    color: $editor-primary;
+    background: none;
+    text-shadow: 0 1px rgba(#000, 0.3);
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    tab-size: 4;
+    hyphens: none;
 }
-pre[class*="language-"] {
-  //padding: 1em
-  margin: 0.1em 0;
-  overflow: auto;
-  border-radius: 0.3em;
+
+pre[class*='language-'] {
+    // padding: 1em
+    margin: 0.1em 0;
+    overflow: auto;
+    border-radius: 0.3em;
 }
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: $primary;
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+    background: $primary;
 }
+
 :not(pre) {
-  & > code[class*="language-"] {
-    padding: 0.1em;
-    border-radius: 0.3em;
-    white-space: normal;
-  }
+    & > code[class*='language-'] {
+        padding: 0.1em;
+        border-radius: 0.3em;
+        white-space: normal;
+    }
 }
+
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #8292a2;
+    color: #8292a2;
 }
+
 .token {
-  &.punctuation {
-    color: $editorSecondary;
-  }
-  &.namespace {
-    opacity: 0.6;
-  }
-  &.keyword {
-    color: #66d9ef;
-  }
-  &.italic {
-    font-style: italic;
-  }
-  &.entity {
-    cursor: help;
-  }
-  &.content {
-    color: $editorTertiary;
-  }
+    &.punctuation {
+        color: $editor-secondary;
+    }
+
+    &.namespace {
+        opacity: 0.6;
+    }
+
+    &.keyword {
+        color: #66d9ef;
+    }
+
+    &.italic {
+        font-style: italic;
+    }
+
+    &.entity {
+        cursor: help;
+    }
+
+    &.content {
+        color: $editor-tertiary;
+    }
 }
+
 .token.property,
 .token.tag,
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: $editorTag;
+    color: $editor-tag;
 }
+
 .token.boolean,
 .token.number {
-  color: #ae81ff;
+    color: #ae81ff;
 }
+
 .token.selector,
 .token.attr-name,
 .token.string,
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: #a6e22e;
+    color: #a6e22e;
 }
+
 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string,
 .token.variable {
-  color: $editorString;
+    color: $editor-string;
 }
+
 .token.atrule,
 .token.attr-value,
 .token.function,
 .token.class-name {
-  color: #e6db74;
+    color: #e6db74;
 }
+
 .token.regex,
 .token.important {
-  color: $editorSecondary;
+    color: $editor-secondary;
 }
+
 .token.important,
 .token.bold {
-  font-weight: bold;
+    font-weight: bold;
 }
diff --git a/src/styles/main/_editor.scss b/src/styles/main/_editor.scss
index c7cf376..cc2aff9 100644
--- a/src/styles/main/_editor.scss
+++ b/src/styles/main/_editor.scss
@@ -1,100 +1,116 @@
 #edit-control {
-  // margin 10px
-  top: 1px;
-  border-radius: 3px;
-  width: 100%;
-  max-width: 880px;
-  margin-top: 30px;
-  z-index: 2000;
-
-  button:nth-child(1) {
-    border-radius: 3px 0 0 3px;
-  }
-  button:nth-child(10) {
-    border-radius: 0 3px 3px 0;
-  }
-  button {
-    background: $secondary;
-    width: 10%;
-    height: 39px;
-    transition: all 0.3s linear;
-    margin: 0;
-    border-radius: 0;
-    display: inline-block;
-    vertical-align: top;
-    text-align: center;
-  }
-  button:hover {
-    background: color.adjust($secondary, $lightness: -20%);
-  }
-  #option-update {
-    padding: 5px 5px 1px 5px;
-    display: inline-block;
-    vertical-align: top;
-    text-align: center;
-  }
-  .icon-hide {
-    display: none;
-    visibility: hidden;
-  }
-  .submit-start {
-    background: $white;
-
-    svg {
-      fill: $eventCool;
+    // margin 10px
+    top: 1px;
+    border-radius: 3px;
+    width: 100%;
+    max-width: 880px;
+    margin-top: 30px;
+    z-index: 2000;
+
+    button {
+        background: $secondary;
+        width: 10%;
+        height: 39px;
+        transition: all 0.3s linear;
+        margin: 0;
+        border-radius: 0;
+        display: inline-block;
+        vertical-align: top;
+        text-align: center;
+    }
+
+    button:nth-child(1) {
+        border-radius: 3px 0 0 3px;
+    }
+
+    button:nth-child(10) {
+        border-radius: 0 3px 3px 0;
+    }
+
+    button:hover {
+        background: color.adjust($secondary, $lightness: -20%);
+    }
+
+    #option-update {
+        padding: 5px 5px 1px;
+        display: inline-block;
+        vertical-align: top;
+        text-align: center;
+    }
+
+    .icon-hide {
+        display: none;
+        visibility: hidden;
+    }
+
+    .submit-start {
+        background: $white;
+
+        svg {
+            fill: $event-cool;
+        }
+    }
+
+    .submit-cool {
+        background: $event-cool;
+
+        svg {
+            fill: $white;
+        }
     }
-  }
-  .submit-cool {
-    background: $eventCool;
 
-    svg {
-      fill: $white;
+    .submit-delete {
+        background: $event-lame !important;
+
+        svg {
+            fill: $white !important;
+        }
     }
-  }
-  .submit-delete {
-    background: $eventLame !important;
 
-    svg {
-      fill: $white !important;
+    #option-date {
+        height: 30px;
+        padding-top: 6px;
+
+        svg {
+            margin: -13px 5px 0 0;
+            display: inline-block;
+            vertical-align: top;
+            fill: $white;
+        }
     }
-  }
-  #option-date {
-    height: 30px;
-    padding-top: 6px;
-
-    svg {
-      margin: -13px 5px 0 0;
-      display: inline-block;
-      vertical-align: top;
-      fill: $white;
+
+    .content-editor-btn-icon {
+        padding: 5px 5px 1px;
+
+        // border-radius 20px
+        color: $primary;
+
+        svg.edit-btn-icon {
+            fill: $primary;
+        }
     }
-  }
-  .content-editor-btn-icon {
-    padding: 5px 5px 1px 5px;
-    // border-radius 20px
-    color: $primary;
-
-    svg {
-      fill: $primary;
+
+    .content-editor-btn-text {
+        padding: 5px;
+
+        // border-radius 20px
+        color: $primary;
+    }
+
+    #option-bold {
+        font-weight: bold;
+        text-decoration: none;
+    }
+
+    #option-italic {
+        font-weight: bold;
+        text-decoration: none;
+        font-style: italic;
+    }
+
+    #option-strikethrough {
+        font-weight: bold;
+        text-decoration: line-through;
+        font-style: italic;
     }
-  }
-  .content-editor-btn-text {
-    padding: 5px;
-    // border-radius 20px
-    color: $primary;
-  }
-  #option-bold {
-    font-weight: bold;
-    text-decoration: none;
-  }
-  #option-italic {
-    font-weight: bold;
-    text-decoration: none;
-    font-style: italic;
-  }
-  #option-strikethrough {
-    font-weight: bold;
-    text-decoration: line-through;
-    font-style: italic;
-  }
 }
diff --git a/src/styles/main/_error.scss b/src/styles/main/_error.scss
index 256d1cc..6029389 100644
--- a/src/styles/main/_error.scss
+++ b/src/styles/main/_error.scss
@@ -1,24 +1,27 @@
 #error-index {
-  width: 100%;
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 10px;
-  height: 100%;
-  z-index: 10;
-  position: relative;
-  label#title {
-    font-size: 100px;
-    color: $highlight;
-    font-weight: 500;
-  }
-  label#message {
-    font-size: 50px;
-    color: $tertiary;
-    font-weight: 500;
-  }
-  label#error {
-    font-size: 25px;
-    color: $eventLame;
-    font-weight: 500;
-  }
+    width: 100%;
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 10px;
+    height: 100%;
+    z-index: 10;
+    position: relative;
+
+    label#title {
+        font-size: 100px;
+        color: $highlight;
+        font-weight: 500;
+    }
+
+    label#message {
+        font-size: 50px;
+        color: $tertiary;
+        font-weight: 500;
+    }
+
+    label#error {
+        font-size: 25px;
+        color: $event-lame;
+        font-weight: 500;
+    }
 }
diff --git a/src/styles/main/_forms.scss b/src/styles/main/_forms.scss
index f5e1083..4f0782b 100644
--- a/src/styles/main/_forms.scss
+++ b/src/styles/main/_forms.scss
@@ -19,7 +19,7 @@ input[type="text"] {
   border-radius: 5px;
   padding: 5px;
   margin: 10px 5px 0 0;
-  font: 18px $baseType;
+  font: 18px $basetype;
   display: inline-block;
   background: $primary;
   color: $tertiary;
@@ -28,14 +28,14 @@ textarea {
   border: 0;
   border-radius: 3px;
   color: $white;
-  font: 15px $baseType;
+  font: 15px $basetype;
   background: $primary;
 }
 button,
 input[type="submit"] {
   background: $highlight;
   color: $primary;
-  font: 20px $baseType;
+  font: 20px $basetype;
   border-radius: 5px;
   position: relative;
   cursor: pointer;
@@ -44,7 +44,7 @@ input[type="submit"] {
   transition: all 0.3s linear;
 }
 select {
-  font: 14px $baseType;
+  font: 14px $basetype;
   border: 1px solid $secondary;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -52,20 +52,20 @@ select {
   color: $primary;
 }
 ::-webkit-input-placeholder {
-  font: 25px $baseType;
+  font: 25px $basetype;
   color: $white;
 }
 :-moz-placeholder {
   /* Firefox 18- */
-  font: 25px $baseType;
+  font: 25px $basetype;
   color: $white;
 }
 ::-moz-placeholder {
   /* Firefox 19+ */
-  font: 15px $baseType;
+  font: 15px $basetype;
   color: $white;
 }
 :-ms-input-placeholder {
-  font: 25px $baseType;
+  font: 25px $basetype;
   color: $white;
 }
diff --git a/src/styles/main/_index.scss b/src/styles/main/_index.scss
index db37566..2a1c7e7 100644
--- a/src/styles/main/_index.scss
+++ b/src/styles/main/_index.scss
@@ -1,346 +1,381 @@
 #dash-index-content {
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
-
-  #dash-index {
     width: 100%;
     height: 100%;
-    z-index: 10;
-    position: relative;
-
-    #dash-index-wrapper {
-      width: 100%;
-      height: 100%;
-      margin: 0 auto;
+    margin: 0 auto;
 
-      .dash-init,
-      .dash-restore {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: $primary;
-
-        form {
-          background: $white;
-          padding: 15px;
-          width: 300px;
-          border-radius: 5px;
-          text-align: center;
-          #the-logo {
-            width: 40px;
-            margin: 20px;
-          }
-          input {
-            width: 290px;
-            margin: 0 0 10px 0;
-            height: 30px;
-          }
-          button {
-            width: 300px;
-          }
-          div {
-            background: $primary;
-            color: $white;
-            border-radius: 3px;
-            padding: 5px;
-            label {
-              display: block;
-              padding: 5px;
-              color: $tertiary;
-            }
-          }
-        }
-      }
-      .dash-restore {
-        display: none;
-        visibility: hidden;
-      }
-      #dash-login {
-        width: 100%;
-        height: 100%;
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        #dash-form,
-        #dash-reset {
-          width: 300px;
-          padding: 0.75em;
-          background: $white;
-          border-radius: 5px;
-          color: $white;
-          text-align: center;
-          #the-logo {
-            width: 40px;
-            margin: 20px;
-          }
-          input {
-            width: 290px;
-            margin: 0 0 10px 0;
-            height: 30px;
-          }
-          button {
-            width: 300px;
-          }
-        }
-      }
-      #dash-menu {
-        padding: 10px;
-        width: 90%;
-        max-width: 900px;
-        margin: 50px auto;
-
-        a {
-          display: inline-block;
-          vertical-align: top;
-          background: color.adjust($primary, $lightness: -60%);
-          width: 30%;
-          padding: 5px;
-          border-radius: 3px;
-          color: $white;
-          margin: 0 10px 10px 0;
-
-          &:hover {
-            background: color.adjust($primary, $lightness: -60%);
-          }
-          svg {
-            display: inline-block;
-            vertical-align: top;
-            fill: $white;
-          }
-          label {
-            display: inline-block;
-            margin-top: 5px;
-            width: 85%;
-            text-align: center;
-            cursor: pointer;
-          }
-        }
-      }
-      #dash-recent {
+    #dash-index {
         width: 100%;
-        max-width: 900px;
         height: 100%;
-        padding: 5px 0 0 0;
-        margin: 0 auto;
-
-        #recent-list {
-          //padding: 5px
-          position: relative;
-
-          .recent-header {
-            height: 50px;
-            margin-top: 5px;
-            .index-header-left {
-              vertical-align: top;
-              display: inline-block;
-              width: 50%;
-              color: $white;
-              font-size: 3em;
-            }
-            .index-header-right {
-              width: 50%;
-              text-align: right;
-              vertical-align: top;
-              display: inline-block;
-              right: 10px;
-              color: $white;
-              a {
-                button {
-                  border-radius: 3px;
-                  margin-left: 10px;
-                  svg {
-                    transition: all 0.2s linear;
-                    width: 40px;
-                    height: 20px;
-                    fill: $white;
-                  }
+        z-index: 10;
+        position: relative;
+
+        #dash-index-wrapper {
+            width: 100%;
+            height: 100%;
+            margin: 0 auto;
+
+            .dash-init,
+            .dash-restore {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: $primary;
+
+                form {
+                    background: $white;
+                    padding: 15px;
+                    width: 300px;
+                    border-radius: 5px;
+                    text-align: center;
+
+                    #the-logo {
+                        width: 40px;
+                        margin: 20px;
+                    }
+
+                    input {
+                        width: 290px;
+                        margin: 0 0 10px;
+                        height: 30px;
+                    }
+
+                    button {
+                        width: 300px;
+                    }
+
+                    div {
+                        background: $primary;
+                        color: $white;
+                        border-radius: 3px;
+                        padding: 5px;
+
+                        label {
+                            display: block;
+                            padding: 5px;
+                            color: $tertiary;
+                        }
+                    }
                 }
-              }
             }
-          }
-          a.post-link,
-          a.post-video-link {
-            font-size: 1.5em;
-            font-weight: 300;
-            display: inline-block;
-            border-radius: 3px;
-            vertical-align: top;
-            text-decoration: none;
-            position: relative;
-            overflow: hidden;
-            .post-video {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-              position: absolute;
-            }
-            label {
-              font-size: 1.4em;
-              font-weight: 700;
-              color: $white;
-              padding: 5px;
-              vertical-align: top;
-              display: inline-block;
-              word-wrap: break-word;
-              width: 100%;
-              text-align: center;
-              position: relative;
-              top: 35%;
-              text-shadow: 2px 2px 0 rgba($black, 1);
+
+            .dash-restore {
+                display: none;
+                visibility: hidden;
             }
-            div#options {
-              width: 100%;
-              position: absolute;
-              bottom: 0;
-              border-radius: 0 0 3px 3px;
-              background: linear-gradient(
-                to bottom,
-                rgba(0, 0, 0, 0) 0%,
-                rgba(0, 0, 0, 0.65) 100%
-              );
-
-              #option-left {
-                display: inline-block;
-                vertical-align: top;
-                width: 50%;
-                position: relative;
-                background: none;
-                button {
-                  border-radius: 3px;
-                  background: $primary;
-                  margin: 0 0 10px 10px;
-                  svg {
-                    //@include object-transitions(0.1s)
-                    width: 40px;
-                    height: 20px;
-                    fill: $secondary;
-                  }
-                }
-                .item-options {
-                  border-radius: 3px;
-                  margin: 5px;
-                  display: inline-block;
-                }
-                button[data-active="false"] {
-                  background: $primary;
-                  svg {
-                    fill: $secondary;
-                  }
+
+            #dash-login {
+                width: 100%;
+                height: 100%;
+                margin: 0 auto;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                #dash-form,
+                #dash-reset {
+                    width: 300px;
+                    padding: 0.75em;
+                    background: $white;
+                    border-radius: 5px;
+                    color: $white;
+                    text-align: center;
+
+                    #the-logo {
+                        width: 40px;
+                        margin: 20px;
+                    }
+
+                    input {
+                        width: 290px;
+                        margin: 0 0 10px;
+                        height: 30px;
+                    }
+
+                    button {
+                        width: 300px;
+                    }
                 }
-                button[data-active="true"] {
-                  background: $tertiary;
-                  svg {
-                    fill: $primary;
-                  }
+            }
+
+            #dash-menu {
+                padding: 10px;
+                width: 90%;
+                max-width: 900px;
+                margin: 50px auto;
+
+                a {
+                    display: inline-block;
+                    vertical-align: top;
+                    background: color.adjust($primary, $lightness: -60%);
+                    width: 30%;
+                    padding: 5px;
+                    border-radius: 3px;
+                    color: $white;
+                    margin: 0 10px 10px 0;
+
+                    &:hover {
+                        background: color.adjust($primary, $lightness: -60%);
+                    }
+
+                    svg {
+                        display: inline-block;
+                        vertical-align: top;
+                        fill: $white;
+                    }
+
+                    label {
+                        display: inline-block;
+                        margin-top: 5px;
+                        width: 85%;
+                        text-align: center;
+                        cursor: pointer;
+                    }
                 }
-              }
-              #option-right {
-                display: inline-block;
-                width: 50%;
-                text-align: right;
-                span {
-                  font-weight: bold;
-                  display: block;
-                  background: $white;
-                  color: $primary;
-                  border-radius: 3px;
-                  font-size: 0.6em;
-                  text-align: center;
-                  position: relative;
-                  padding: 5px;
-                  float: right;
-                  margin: 0 10px 0 0;
-                  bottom: -15px;
+            }
+
+            #dash-recent {
+                width: 100%;
+                max-width: 900px;
+                height: 100%;
+                padding: 5px 0 0;
+                margin: 0 auto;
+
+                #recent-list {
+                    // padding: 5px
+                    position: relative;
+
+                    .recent-header {
+                        height: 50px;
+                        margin-top: 5px;
+
+                        .index-header-left {
+                            vertical-align: top;
+                            display: inline-block;
+                            width: 50%;
+                            color: $white;
+                            font-size: 3em;
+                        }
+
+                        .index-header-right {
+                            width: 50%;
+                            text-align: right;
+                            vertical-align: top;
+                            display: inline-block;
+                            right: 10px;
+                            color: $white;
+
+                            a {
+                                button {
+                                    border-radius: 3px;
+                                    margin-left: 10px;
+
+                                    svg {
+                                        transition: all 0.2s linear;
+                                        width: 40px;
+                                        height: 20px;
+                                        fill: $white;
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    a.post-link,
+                    a.post-video-link {
+                        font-size: 1.5em;
+                        font-weight: 300;
+                        display: inline-block;
+                        border-radius: 3px;
+                        vertical-align: top;
+                        text-decoration: none;
+                        position: relative;
+                        overflow: hidden;
+
+                        .post-video {
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                            position: absolute;
+                        }
+
+                        label {
+                            font-size: 1.4em;
+                            font-weight: 700;
+                            color: $white;
+                            padding: 5px;
+                            vertical-align: top;
+                            display: inline-block;
+                            word-wrap: break-word;
+                            width: 100%;
+                            text-align: center;
+                            position: relative;
+                            top: 35%;
+                            text-shadow: 2px 2px 0 rgba($black, 1);
+                        }
+
+                        div#options {
+                            width: 100%;
+                            position: absolute;
+                            bottom: 0;
+                            border-radius: 0 0 3px 3px;
+                            background: linear-gradient(
+                                to bottom,
+                                rgba(#000, 0) 0%,
+                                rgba(#000, 0.65) 100%
+                            );
+
+                            #option-left {
+                                display: inline-block;
+                                vertical-align: top;
+                                width: 50%;
+                                position: relative;
+                                background: none;
+
+                                button {
+                                    border-radius: 3px;
+                                    background: $primary;
+                                    margin: 0 0 10px 10px;
+
+                                    svg {
+                                        // @include object-transitions(0.1s)
+                                        width: 40px;
+                                        height: 20px;
+                                        fill: $secondary;
+                                    }
+                                }
+
+                                .item-options {
+                                    border-radius: 3px;
+                                    margin: 5px;
+                                    display: inline-block;
+                                }
+
+                                button[data-active='false'] {
+                                    background: $primary;
+
+                                    svg {
+                                        fill: $secondary;
+                                    }
+                                }
+
+                                button[data-active='true'] {
+                                    background: $tertiary;
+
+                                    svg {
+                                        fill: $primary;
+                                    }
+                                }
+                            }
+
+                            #option-right {
+                                display: inline-block;
+                                width: 50%;
+                                text-align: right;
+
+                                span {
+                                    font-weight: bold;
+                                    display: block;
+                                    background: $white;
+                                    color: $primary;
+                                    border-radius: 3px;
+                                    font-size: 0.6em;
+                                    text-align: center;
+                                    position: relative;
+                                    padding: 5px;
+                                    float: right;
+                                    margin: 0 10px 0 0;
+                                    bottom: -15px;
+                                }
+                            }
+                        }
+                    }
+
+                    a.dash-link:nth-child(3) {
+                        width: 100%;
+                        margin-bottom: 20px;
+                        height: 500px;
+                    }
+
+                    a.dash-link:nth-child(4),
+                    a.dash-link:nth-child(6) {
+                        width: 48.6%;
+                        height: 350px;
+                        margin: 0 10px 20px 0;
+                    }
+
+                    a.dash-link:nth-child(5),
+                    a.dash-link:nth-child(7) {
+                        width: 48.6%;
+                        height: 350px;
+                        margin: 0 0 20px 10px;
+                    }
                 }
-              }
             }
-          }
-          a:nth-child(3) {
-            width: 100%;
-            margin-bottom: 20px;
-            height: 500px;
-          }
-          a:nth-child(4),
-          a:nth-child(6) {
-            width: 48.6%;
-            height: 350px;
-            margin: 0 10px 20px 0;
-          }
-          a:nth-child(5),
-          a:nth-child(7) {
-            width: 48.6%;
-            height: 350px;
-            margin: 0 0 20px 10px;
-          }
-          //Reponsive
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 768px) {
-  #dash-index-content {
-    #dash-index {
-      #dash-index-wrapper {
-        #dash-recent {
-          #recent-list {
-            a:nth-child(4),
-            a:nth-child(6) {
-              width: 48.9%;
+    #dash-index-content {
+        #dash-index {
+            #dash-index-wrapper {
+                #dash-recent {
+                    #recent-list {
+                        a:nth-child(4),
+                        a:nth-child(6) {
+                            width: 48.9%;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 640px) {
-  #dash-index-content {
-    #dash-index {
-      #dash-index-wrapper {
-        #dash-recent {
-          #recent-list {
-            a:nth-child(4),
-            a:nth-child(6) {
-              width: 48.5%;
+    #dash-index-content {
+        #dash-index {
+            #dash-index-wrapper {
+                #dash-recent {
+                    #recent-list {
+                        a:nth-child(4),
+                        a:nth-child(6) {
+                            width: 48.5%;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 480px) {
-  #dash-index-content {
-    #dash-index {
-      #dash-index-wrapper {
-        #dash-recent {
-          #recent-list {
-            .recent-header {
-              h3 {
-                width: 40%;
-              }
-              .index-menu {
-                width: 60%;
-              }
-            }
-            a:nth-child(3),
-            a:nth-child(4),
-            a:nth-child(5),
-            a:nth-child(6),
-            a:nth-child(7) {
-              width: 100%;
-              margin: 15px 0 0 0;
-              height: 400px;
+    #dash-index-content {
+        #dash-index {
+            #dash-index-wrapper {
+                #dash-recent {
+                    #recent-list {
+                        .recent-header {
+                            h3 {
+                                width: 40%;
+                            }
+
+                            .index-menu {
+                                width: 60%;
+                            }
+                        }
+
+                        a.dash-link:nth-child(3),
+                        a.dash-link:nth-child(4),
+                        a.dash-link:nth-child(5),
+                        a.dash-link:nth-child(6),
+                        a.dash-link:nth-child(7) {
+                            width: 100%;
+                            margin: 15px 0 0;
+                            height: 400px;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 } ;
diff --git a/src/styles/main/_mixins.scss b/src/styles/main/_mixins.scss
index 0a5b591..09a68fc 100644
--- a/src/styles/main/_mixins.scss
+++ b/src/styles/main/_mixins.scss
@@ -1,7 +1,7 @@
 @mixin background-opacity($rgb_value, $opacity) {
-  background: rgba($rgb_value, $opacity);
+    background: rgba($rgb_value, $opacity);
 }
 @mixin custom-header($weight, $size, $line_height, $color) {
-  font: $weight $size/$line_height $bodyTypeSans;
-  color: $color;
+    font: $weight $size/$line_height $bodyTypeSans;
+    color: $color;
 }
diff --git a/src/styles/main/_navigation.scss b/src/styles/main/_navigation.scss
index b3b2081..b7c08b1 100644
--- a/src/styles/main/_navigation.scss
+++ b/src/styles/main/_navigation.scss
@@ -1,88 +1,93 @@
 #nav-index {
-  width: 100%;
-  max-width: 900px;
-  margin: 0 auto;
+    width: 100%;
+    max-width: 900px;
+    margin: 0 auto;
 
-  #nav-index-wrapper {
-    #nav-pages {
-      .nav-item {
-        display: block;
-        width: 98%;
-        background: $white;
-        border-radius: 3px;
-        color: $highlight;
-        height: 30px;
-        padding: 10px;
-        margin: 0 0 10px 0;
-        font-size: 1.5em;
-        cursor: move;
-        #item-arrows {
-          fill: $primary;
-          width: 40px;
-          height: 30px;
-        }
-      }
-      label {
-        display: inline-block;
-        vertical-align: middle;
-        padding: 0;
-        margin: -15px 0 0 10px;
-        cursor: move;
-      }
-      #nav-btns {
-        float: right;
-        top: -5px;
-        position: relative;
-        button {
-          color: $white;
-          border-radius: 3px;
-          width: 40px;
-          margin: 0 10px 0 10px;
-          svg {
-            fill: $white;
-            width: 25px;
-            height: 20px;
-          }
+    #nav-index-wrapper {
+        #nav-pages {
+            .nav-item {
+                display: block;
+                width: 98%;
+                background: $white;
+                border-radius: 3px;
+                color: $highlight;
+                height: 30px;
+                padding: 10px;
+                margin: 0 0 10px;
+                font-size: 1.5em;
+                cursor: move;
+
+                #item-arrows {
+                    fill: $primary;
+                    width: 40px;
+                    height: 30px;
+                }
+            }
+
+            label {
+                display: inline-block;
+                vertical-align: middle;
+                padding: 0;
+                margin: -15px 0 0 10px;
+                cursor: move;
+            }
+
+            #nav-btns {
+                float: right;
+                top: -5px;
+                position: relative;
+
+                button {
+                    color: $white;
+                    border-radius: 3px;
+                    width: 40px;
+                    margin: 0 10px;
+
+                    svg {
+                        fill: $white;
+                        width: 25px;
+                        height: 20px;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 375px) {
-  #nav-index {
-    #nav-index-wrapper {
-      #nav-pages {
-        .nav-item {
-          width: 94.5%;
-          font-size: 1em;
+    #nav-index {
+        #nav-index-wrapper {
+            #nav-pages {
+                .nav-item {
+                    width: 94.5%;
+                    font-size: 1em;
 
-          label {
-            width: 40%;
-            vertical-align: top;
-            margin-top: 0px;
-            line-height: 1em;
-          }
+                    label {
+                        width: 40%;
+                        vertical-align: top;
+                        margin-top: 0;
+                        line-height: 1em;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 320px) {
-  #nav-index {
-    #nav-index-wrapper {
-      #nav-pages {
-        .nav-item {
-          width: 94.5%;
-          font-size: 1em;
+    #nav-index {
+        #nav-index-wrapper {
+            #nav-pages {
+                .nav-item {
+                    width: 94.5%;
+                    font-size: 1em;
 
-          label {
-            width: 37%;
-            vertical-align: top;
-            margin-top: 0px;
-            line-height: 1em;
-          }
+                    label {
+                        width: 37%;
+                        vertical-align: top;
+                        margin-top: 0;
+                        line-height: 1em;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 } ;
diff --git a/src/styles/main/_normalize.scss b/src/styles/main/_normalize.scss
index 9a435a9..8794a15 100644
--- a/src/styles/main/_normalize.scss
+++ b/src/styles/main/_normalize.scss
@@ -1,202 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
 html {
-  line-height: 1.15;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
+    line-height: 1.15; /* 1 */
+    //  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
 body {
-  margin: 0;
-}
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
+    margin: 0;
 }
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-  line-height: 1em;
-}
-figcaption,
-figure,
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
 main {
-  display: block;
-}
-figure {
-  margin: 1em 40px;
-}
+    display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
 hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
 pre {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
+    font-family: monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
 a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
+    background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
 abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
 b,
 strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-//code,
+    font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
 kbd,
 samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-dfn {
-  font-style: italic;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
+    font-family: monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
 small {
-  font-size: 80%;
-}
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
 sub,
 sup {
-  font-size: 60%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
 }
+
 sub {
-  bottom: -0.25em;
+    bottom: -0.25em;
 }
+
 sup {
-  top: -0.55em;
-  background: $primary;
-  color: $primary;
-  border-radius: 2px;
-  padding: 0 2px 0 2px;
-  margin: 0 2px 0 0;
-}
-audio,
-video {
-  display: inline-block;
-}
-audio {
-  &:not([controls]) {
-    display: none;
-    height: 0;
-  }
-}
+    top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
 img {
-  border-style: none;
-}
-svg {
-  &:not(:root) {
-    overflow: hidden;
-  }
-}
+    border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
 button,
 input,
 optgroup,
 select,
 textarea {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
 button,
 input {
-  overflow: visible;
-}
+    /* 1 */
+    overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
 button,
 select {
-  text-transform: none;
-}
+    /* 1 */
+    text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
 button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
+[type='button'],
+[type='reset'],
+[type='submit'] {
+    // -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
 fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
 legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
 progress {
-  display: inline-block;
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
 textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
+    overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+    // -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+    // -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-details,
-menu {
-  display: block;
-}
+    // -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
 summary {
-  display: list-item;
-}
-canvas {
-  display: inline-block;
-}
+    display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
 template {
-  display: none;
+    display: none;
 }
+
+/**
+ * Add the correct display in IE 10.
+ */
+
 [hidden] {
-  display: none;
+    display: none;
 }
diff --git a/src/styles/main/_posts.scss b/src/styles/main/_posts.scss
index 8a94baa..0d2e3db 100644
--- a/src/styles/main/_posts.scss
+++ b/src/styles/main/_posts.scss
@@ -1,622 +1,692 @@
 #post-index {
-  width: 100%;
-  max-width: 900px;
-  margin: 0 auto;
-  #post-index-wrapper {
-    //padding: 0.75rem
-    overflow: hidden;
-    #post-index-header {
-      margin: 10px 0 0 0;
-      #post-index-header-left {
-        text-transform: capitalize;
-        display: inline-block;
-        width: 50%;
-        color: $white;
-        font-size: 3em;
-      }
-      #post-index-header-right {
-        text-align: right;
-        display: inline-block;
-        width: 50%;
-        a {
-          button {
-            color: $white;
-            border-radius: 3px;
-            margin-left: 10px;
-            width: 55px;
-          }
-          svg {
-            transition: all 0.1s linear;
-            width: 20px;
-            height: 17px;
-            fill: $white;
-          }
-        }
-        .current-filter {
-          color: $highlight;
-          text-decoration-color: $secondary;
-        }
-      }
-    }
-    #posts-list {
-      margin: 20px 0 0 0;
+    width: 100%;
+    max-width: 900px;
+    margin: 0 auto;
 
-      a.page-link {
-        background: $white;
-        display: inline-block;
-        vertical-align: top;
-        width: 100%;
-        text-decoration: none;
-        margin: 0 0 20px 0;
-        border-radius: 3px;
+    #post-index-wrapper {
+        // padding: 0.75rem
         overflow: hidden;
-        color: color.adjust($primary, $lightness: -60%);
-
-        label {
-          font-size: 2em;
-          font-weight: 500;
-          padding: 10px;
-          display: inline-block;
-          vertical-align: top;
-          width: 100%;
-        }
-        div.page-bg,
-        div.page-video {
-          video {
-            width: 100%;
-            position: absolute;
-          }
-          width: 100%;
-          height: 350px;
-          background-color: $highlight;
-          position: relative;
-          label {
-            font-size: 2em;
-            font-weight: 700;
-            color: $white;
-            padding: 5px;
-            vertical-align: top;
-            display: inline-block;
-            word-wrap: break-word;
-            width: 100%;
-            text-align: center;
-            position: relative;
-            top: 35%;
-            text-shadow: 2px 2px 0 rgba($black, 1);
-          }
-          #meta {
-            width: 100%;
-            background: linear-gradient(
-              to bottom,
-              rgba(0, 0, 0, 0) 0%,
-              rgba(0, 0, 0, 0.65) 100%
-            );
-            border-radius: 3px;
-            margin: auto;
-            bottom: 0;
-            position: absolute;
-            padding: 0 0 20px 0;
-            #options {
-              width: 100%;
-              bottom: 0;
-              position: absolute;
-              #option-left {
+
+        #post-index-header {
+            margin: 10px 0 0;
+
+            #post-index-header-left {
+                text-transform: capitalize;
                 display: inline-block;
-                vertical-align: top;
                 width: 50%;
-                position: relative;
-                background: none;
-                button {
-                  border-radius: 3px;
-                  background: $primary;
-                  margin: 0 0 10px 10px;
-                }
-                svg {
-                  transition: all 0.2s linear;
-                  width: 40px;
-                  height: 20px;
-                  fill: $secondary;
+                color: $white;
+                font-size: 3em;
+            }
+
+            #post-index-header-right {
+                text-align: right;
+                display: inline-block;
+                width: 50%;
+
+                a {
+                    button {
+                        color: $white;
+                        border-radius: 3px;
+                        margin-left: 10px;
+                        width: 55px;
+                    }
+
+                    svg {
+                        transition: all 0.1s linear;
+                        width: 20px;
+                        height: 17px;
+                        fill: $white;
+                    }
                 }
-                .item-options {
-                  border-radius: 3px;
-                  margin: 5px;
-                  display: inline-block;
+
+                .current-filter {
+                    color: $highlight;
+                    text-decoration-color: $secondary;
                 }
-                button[data-active="false"] {
-                  background: $primary;
-                  svg {
-                    fill: $secondary;
-                  }
+            }
+        }
+
+        #posts-list {
+            margin: 20px 0 0;
+
+            a.page-link {
+                background: $white;
+                display: inline-block;
+                vertical-align: top;
+                width: 100%;
+                text-decoration: none;
+                margin: 0 0 20px;
+                border-radius: 3px;
+                overflow: hidden;
+                color: color.adjust($primary, $lightness: -60%);
+
+                label {
+                    font-size: 2em;
+                    font-weight: 500;
+                    padding: 10px;
+                    display: inline-block;
+                    vertical-align: top;
+                    width: 100%;
                 }
-                button[data-active="true"] {
-                  background: $tertiary;
-                  svg {
-                    fill: $primary;
-                  }
+
+                div.page-bg,
+                div.page-video {
+                    video {
+                        width: 100%;
+                        position: absolute;
+                    }
+
+                    width: 100%;
+                    height: 350px;
+                    background-color: $highlight;
+                    position: relative;
+
+                    label {
+                        font-size: 2em;
+                        font-weight: 700;
+                        color: $white;
+                        padding: 5px;
+                        vertical-align: top;
+                        display: inline-block;
+                        word-wrap: break-word;
+                        width: 100%;
+                        text-align: center;
+                        position: relative;
+                        top: 35%;
+                        text-shadow: 2px 2px 0 rgba($black, 1);
+                    }
+
+                    #meta {
+                        width: 100%;
+                        background: linear-gradient(
+                            to bottom,
+                            rgba(#000, 0%) 0%,
+                            rgba(#000, 0.65%) 100%
+                        );
+                        border-radius: 3px;
+                        margin: auto;
+                        bottom: 0;
+                        position: absolute;
+                        padding: 0 0 20px;
+
+                        #options {
+                            width: 100%;
+                            bottom: 0;
+                            position: absolute;
+
+                            #option-left {
+                                display: inline-block;
+                                vertical-align: top;
+                                width: 50%;
+                                position: relative;
+                                background: none;
+
+                                button {
+                                    border-radius: 3px;
+                                    background: $primary;
+                                    margin: 0 0 10px 10px;
+                                }
+
+                                svg {
+                                    transition: all 0.2s linear;
+                                    width: 40px;
+                                    height: 20px;
+                                    fill: $secondary;
+                                }
+
+                                .item-options {
+                                    border-radius: 3px;
+                                    margin: 5px;
+                                    display: inline-block;
+                                }
+
+                                button[data-active='false'] {
+                                    background: $primary;
+
+                                    svg {
+                                        fill: $secondary;
+                                    }
+                                }
+
+                                button[data-active='true'] {
+                                    background: $tertiary;
+
+                                    svg {
+                                        fill: $primary;
+                                    }
+                                }
+                            }
+
+                            #option-right {
+                                display: inline-block;
+                                width: 50%;
+                                text-align: right;
+
+                                span {
+                                    font-weight: bold;
+                                    display: block;
+                                    background: $white;
+                                    color: $primary;
+                                    border-radius: 3px;
+                                    font-size: 0.6em;
+                                    text-align: center;
+                                    position: relative;
+                                    padding: 5px;
+                                    float: right;
+                                    margin: 0 10px 0 0;
+                                    bottom: -15px;
+                                }
+                            }
+                        }
+                    }
                 }
-              }
-              #option-right {
-                display: inline-block;
-                width: 50%;
-                text-align: right;
-                span {
-                  font-weight: bold;
-                  display: block;
-                  background: $white;
-                  color: $primary;
-                  border-radius: 3px;
-                  font-size: 0.6em;
-                  text-align: center;
-                  position: relative;
-                  padding: 5px;
-                  float: right;
-                  margin: 0 10px 0 0;
-                  bottom: -15px;
+
+                p {
+                    padding: 5px 10px;
+                    font-size: 1.2em;
+                    font-weight: 400;
                 }
-              }
             }
-          }
         }
-        p {
-          padding: 5px 10px 5px 10px;
-          font-size: 1.2em;
-          font-weight: 400;
+
+        .paginate {
+            width: 260px;
+            display: block;
+            margin: 0 auto;
+
+            a.paginate-link {
+                display: inline-block;
+                vertical-align: top;
+            }
+
+            span.count {
+                text-align: center;
+                padding: 5px;
+                margin-top: -2px;
+                display: inline-block;
+                width: 190px;
+                font-size: 1.5em;
+                color: $tertiary;
+            }
         }
-      }
-    }
-    .paginate {
-      width: 260px;
-      display: block;
-      margin: 0 auto;
-      a {
-        display: inline-block;
-        vertical-align: top;
-      }
-      span.count {
-        text-align: center;
-        padding: 5px;
-        margin-top: -2px;
-        display: inline-block;
-        width: 190px;
-        font-size: 1.5em;
-        color: $tertiary;
-      }
     }
-  }
 }
-#post-edit-index {
-  width: 100%;
-  overflow: hidden;
 
-  #post-edit-index-wrapper {
+#post-edit-index {
     width: 100%;
-    #post-header {
-      // width 100%
-
-      background: $highlight;
-      #post-header-wrapper {
-        max-width: 900px;
-        margin: 0 auto;
-        padding: 0.75rem;
-        label {
-          color: $white;
-          font-size: 0.9em;
-          font-family: $baseType;
-          font-weight: 600;
-        }
-        span {
-          color: $primary;
-          font-size: 0.9em;
-          font-weight: 600;
-          text-transform: uppercase;
-          float: right;
-        }
-        #post-title {
-          #post_title {
-            background: $white;
-            font-family: $baseType;
-            width: 97.6%;
-            height: 80px;
-            font-size: 2em;
-            color: $primary;
-            padding: 5px;
-            margin: 0 0 5px 0;
-          }
-          #calendar-icon {
-            background: color.adjust($primary, $lightness: -15%);
-            border-radius: 3px 0 0 3px;
-            display: inline-block;
-            padding: 5.2px;
-            color: $secondary;
-          }
-          #layouts {
-            select {
-              background: $primary;
-              color: $secondary;
-              border-radius: 3px;
-              border-color: $primary;
-              margin: 0 0 10px 0;
-              width: 100%;
-              height: 45px;
-              padding: 5px;
-              font-size: 1.5em;
+    overflow: hidden;
+
+    #post-edit-index-wrapper {
+        width: 100%;
+
+        #post-header {
+            // width 100%
+
+            background: $highlight;
+
+            #post-header-wrapper {
+                max-width: 900px;
+                margin: 0 auto;
+                padding: 0.75rem;
+
+                label {
+                    color: $white;
+                    font-size: 0.9em;
+                    font-family: $basetype;
+                    font-weight: 600;
+                }
+
+                span#post-span {
+                    color: $primary;
+                    font-size: 0.9em;
+                    font-weight: 600;
+                    text-transform: uppercase;
+                    float: right;
+                }
+
+                #post-title {
+                    #post-title-text {
+                        background: $white;
+                        font-family: $basetype;
+                        width: 97.6%;
+                        height: 80px;
+                        font-size: 2em;
+                        color: $primary;
+                        padding: 5px;
+                        margin: 0 0 5px;
+                    }
+
+                    #calendar-icon {
+                        background: color.adjust($primary, $lightness: -15%);
+                        border-radius: 3px 0 0 3px;
+                        display: inline-block;
+                        padding: 5.2px;
+                        color: $secondary;
+                    }
+
+                    #layouts {
+                        select {
+                            background: $primary;
+                            color: $secondary;
+                            border-radius: 3px;
+                            border-color: $primary;
+                            margin: 0 0 10px;
+                            width: 100%;
+                            height: 45px;
+                            padding: 5px;
+                            font-size: 1.5em;
+                        }
+                    }
+                }
+
+                #post-meta {
+                    #post-tags {
+                        background: $white;
+                        font-family: $basetype;
+                        width: 97.6%;
+                        height: 80px;
+                        color: $primary;
+                        padding: 5px;
+                        margin: 0 0 5px;
+                    }
+
+                    #post-options {
+                        display: inline-block;
+                        vertical-align: top;
+                        width: 100%;
+                        padding: 0;
+                        margin: 0 0 10px;
+
+                        button.option-button:nth-child(1) {
+                            border-radius: 3px 0 0 3px;
+                        }
+
+                        button.option-button:nth-child(4) {
+                            border-radius: 0 3px 3px 0;
+                        }
+
+                        a {
+                            button.button-link {
+                                border-radius: 0 3px 3px 0 !important;
+                            }
+                        }
+
+                        button.option-btn {
+                            width: 25%;
+                            height: 45px;
+                            transition: all 0.3s linear;
+                            margin: 0;
+                            border-radius: 0;
+                            display: inline-block;
+                            vertical-align: top;
+                            text-align: center;
+                        }
+
+                        button.btn-active[data-active='false'] {
+                            background: $primary;
+
+                            svg.svg-toggle {
+                                fill: $secondary;
+                            }
+                        }
+
+                        button.btn-active[data-active='true'] {
+                            background: $tertiary;
+
+                            svg.svg-toggle {
+                                fill: $primary;
+                            }
+                        }
+                    }
+
+                    #page-files-upload,
+                    #post-image-upload {
+                        display: none;
+                    }
+                }
             }
-          }
         }
-        #post-meta {
-          #post_tags {
-            background: $white;
-            font-family: $baseType;
-            width: 97.6%;
-            height: 80px;
-            color: $primary;
-            padding: 5px;
-            margin: 0 0 5px 0;
-          }
-          #post-options {
-            display: inline-block;
-            vertical-align: top;
+
+        #post-feature {
             width: 100%;
-            padding: 0;
-            margin: 0 0 10px 0;
 
-            button:nth-child(1) {
-              border-radius: 3px 0 0 3px;
-            }
-            button:nth-child(4) {
-              border-radius: 0 3px 3px 0;
-            }
-            a {
-              button {
-                border-radius: 0 3px 3px 0 !important;
-              }
-            }
-            button {
-              width: 25%;
-              height: 45px;
-              transition: all 0.3s linear;
-              margin: 0;
-              border-radius: 0;
-              display: inline-block;
-              vertical-align: top;
-              text-align: center;
-            }
-            button[data-active="false"] {
-              background: $primary;
-              svg {
-                fill: $secondary;
-              }
-            }
-            button[data-active="true"] {
-              background: $tertiary;
-              svg {
-                fill: $primary;
-              }
+            #page-file-manager {
+                background: $tertiary;
+                width: 100%;
+                min-height: 300px;
+
+                #page-file-wrapper {
+                    width: 100%;
+                    max-width: 900px;
+                    padding: 10px;
+                    margin: 0 auto;
+                    font-weight: bold;
+                    color: $primary;
+                    font-size: 1em;
+
+                    #page-file-drop {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 100%;
+                        min-height: 100px;
+                        background: $white;
+                        color: $primary;
+                        vertical-align: middle;
+                        border-radius: 5px;
+                        margin: 0 0 10px;
+
+                        label {
+                            cursor: pointer;
+                            font-weight: 600px;
+                            text-transform: capitalize;
+                        }
+
+                        img {
+                            width: 100%;
+                            margin: 0;
+                            padding: 0;
+                        }
+                    }
+
+                    #page-images-list,
+                    #page-files-list {
+                        padding: 10px 0 0;
+
+                        .img-item {
+                            height: 150px;
+                            width: 23.8%;
+                            border-radius: 3px;
+                            margin: 0 10px 10px 0;
+                            display: inline-block;
+                            cursor: pointer;
+                        }
+
+                        .audio-item {
+                            height: 150px;
+                            width: 23.8%;
+                            border-radius: 3px;
+                            margin: 0 10px 10px 0;
+                            display: inline-block;
+                            cursor: pointer;
+                            background: $primary;
+                            background: url('/assets/images/global/upload-audio.png')
+                                no-repeat center center / cover;
+                        }
+
+                        .video-item {
+                            height: 150px;
+                            width: 23.8%;
+                            border-radius: 3px;
+                            margin: 0 10px 10px 0;
+                            display: inline-block;
+                            cursor: pointer;
+                            background: $primary;
+                            background: url('/assets/images/global/upload-video.png')
+                                no-repeat center center / cover;
+                        }
+
+                        .file-item {
+                            height: 150px;
+                            width: 23.8%;
+                            border-radius: 3px;
+                            margin: 0 10px 10px 0;
+                            display: inline-block;
+                            cursor: pointer;
+                            background: $primary;
+                            background: url('/assets/images/global/upload-doc.png')
+                                no-repeat center center / cover;
+                        }
+                    }
+                }
             }
-          }
-          #page-files-upload,
-          #post-image-upload {
-            display: none;
-          }
         }
-      }
-    }
-    #post-feature {
-      width: 100%;
 
-      #page-file-manager {
-        background: $tertiary;
-        width: 100%;
-        min-height: 300px;
-        #page-file-wrapper {
-          width: 100%;
-          max-width: 900px;
-          padding: 10px;
-          margin: 0 auto;
-          font-weight: bold;
-          font-color: $primary;
-          font-size: 1em;
-          #page-file-drop {
-            display: flex;
-            align-items: center;
-            justify-content: center;
+        #edit-post {
             width: 100%;
-            min-height: 100px;
-            background: $white;
-            color: $primary;
-            vertical-align: middle;
-            border-radius: 5px;
-            margin: 0 0 10px 0;
-
-            label {
-              cursor: pointer;
-              font-weight: 600px;
-              text-transform: capitalize;
-            }
-            img {
-              width: 100%;
-              margin: 0;
-              padding: 0;
-            }
-          }
-          #page-images-list,
-          #page-files-list {
-            padding: 10px 0 0 0;
-            .img-item {
-              height: 150px;
-              width: 23.8%;
-              border-radius: 3px;
-              margin: 0 10px 10px 0;
-              display: inline-block;
-              cursor: pointer;
-            }
-            .audio-item {
-              height: 150px;
-              width: 23.8%;
-              border-radius: 3px;
-              margin: 0 10px 10px 0;
-              display: inline-block;
-              cursor: pointer;
-              background: $primary;
-              background: url("/assets/images/global/upload-audio.png")
-                no-repeat center center / cover;
-            }
-            .video-item {
-              height: 150px;
-              width: 23.8%;
-              border-radius: 3px;
-              margin: 0 10px 10px 0;
-              display: inline-block;
-              cursor: pointer;
-              background: $primary;
-              background: url("/assets/images/global/upload-video.png")
-                no-repeat center center / cover;
-            }
-            .file-item {
-              height: 150px;
-              width: 23.8%;
-              border-radius: 3px;
-              margin: 0 10px 10px 0;
-              display: inline-block;
-              cursor: pointer;
-              background: $primary;
-              background: url("/assets/images/global/upload-doc.png") no-repeat
-                center center / cover;
-            }
-          }
-        }
-      }
-    }
-    #edit-post {
-      width: 100%;
-      max-width: 880px;
-      margin: 0 auto;
+            max-width: 880px;
+            margin: 0 auto;
 
-      #edit-post-wrapper {
-        width: 100%;
-        max-width: 900px;
-        border-radius: 5px;
-        //background $primary - 10%
-        //margin: 10px 0 50px 0
-        position: relative;
-        //editor sometimes scrolls throwing it all out of wack
-        //turning of scrolling keeps it aligned
-        textarea:focus {
-          outline: none;
-          border-color: $highlight;
-        }
-        #edit,
-        #highlight {
-          border: 0;
-          width: 100%;
-          min-height: 300px;
-          height: auto;
-          position: absolute;
-          top: 0;
-          left: 0;
-          overflow: auto;
-          word-wrap: normal;
-          white-space: pre-wrap;
-          line-break: normal;
-        }
-        #highlight-content {
-          word-wrap: normal;
-          white-space: pre-wrap;
-          line-break: normal;
-        }
-        #edit,
-        #highlight,
-        #hightlight * {
-          font-size: 1.2em;
-          font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-          line-height: 22pt;
-        }
-        #edit {
-          z-index: 1;
-          color: transparent;
-          background: transparent;
-          caret-color: $highlight;
-        }
-        #highlight {
-          z-index: 0;
-
-          pre {
-            margin: 0;
-            code {
-              font-family: $monoType;
-              padding: 5px;
-              border-radius: 5px;
-              line-height: 1.6em;
-              font-size: 1.25em;
-              color: $editorPrimary;
-              word-wrap: normal;
-              white-space: pre-wrap;
-              line-break: normal;
-              -webkit-line-break: normal;
-              -o-line-break: normal;
-              -moz-line-break: normal;
-              display: inline-block;
-              width: 100%;
-              max-width: 900px;
-              min-height: 200px;
-              caret-color: $highlight;
+            #edit-post-wrapper {
+                width: 100%;
+                max-width: 900px;
+                border-radius: 5px;
+                position: relative;
+
+                textarea:focus {
+                    outline: none;
+                    border-color: $highlight;
+                }
+
+                #edit,
+                #highlight {
+                    border: 0;
+                    width: 100%;
+                    min-height: 300px;
+                    height: auto;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    overflow: auto;
+                    word-wrap: normal;
+                    white-space: pre-wrap;
+                    line-break: normal;
+                }
+
+                #highlight-content {
+                    word-wrap: normal;
+                    white-space: pre-wrap;
+                    line-break: normal;
+                }
+
+                #edit,
+                #highlight,
+                #hightlight * {
+                    font-size: 1.2em;
+                    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+                    line-height: 22pt;
+                }
+
+                #edit {
+                    z-index: 1;
+                    color: transparent;
+                    background: transparent;
+                    caret-color: $highlight;
+                }
+
+                #highlight {
+                    z-index: 0;
+
+                    pre {
+                        margin: 0;
+
+                        code {
+                            font-family: $monotype;
+                            padding: 5px;
+                            border-radius: 5px;
+                            line-height: 1.6em;
+                            font-size: 1.25em;
+                            color: $editor-primary;
+                            word-wrap: normal;
+                            white-space: pre-wrap;
+                            line-break: normal;
+                            -webkit-line-break: normal;
+                            -o-line-break: normal;
+                            -moz-line-break: normal;
+                            display: inline-block;
+                            width: 100%;
+                            max-width: 900px;
+                            min-height: 200px;
+                            caret-color: $highlight;
+                        }
+                    }
+                }
             }
-            //Responsive
-          }
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 800px) {
-  #post-edit-index {
-    #post-edit-index-wrapper {
-      #post-header {
-        #post-title {
-          #post-date {
-            width: 37.6%;
-          }
+    #post-edit-index {
+        #post-edit-index-wrapper {
+            #post-header {
+                #post-title {
+                    #post-date {
+                        width: 37.6%;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 768px) {
-  #post-edit-index {
-    #post-edit-index-wrapper {
-      #post-header {
-        #post-title {
-          #post-date {
-            width: 43.1%;
-          }
-        }
-        #post-meta {
-          #edit-control {
-            max-width: 100%;
+    #post-edit-index {
+        #post-edit-index-wrapper {
+            #post-header {
+                #post-title {
+                    #post-date {
+                        width: 43.1%;
+                    }
+                }
+
+                #post-meta {
+                    #edit-control {
+                        max-width: 100%;
 
-            button {
-              width: 9.91%;
+                        button {
+                            width: 9.91%;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 640px) {
-  #post-edit-index {
-    #post-edit-index-wrapper {
-      #post-header {
-        #post-title {
-          #post-date {
-            width: 42%;
-          }
+    #post-edit-index {
+        #post-edit-index-wrapper {
+            #post-header {
+                #post-title {
+                    #post-date {
+                        width: 42%;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 480px) {
-  #post-index {
-    #post-index-wrapper {
-      #post-index-header {
-        #post-index-header-left {
-          font-size: 1.35em;
-          width: 30%;
-        }
-        #post-index-header-right {
-          width: 70%;
-          vertical-align: top;
-        }
-      }
-      #post-index-menu {
-        a {
-          font-size: 0.95em;
-
-          label {
-            display: none;
-            visibility: hidden;
-          }
+    #post-index {
+        #post-index-wrapper {
+            #post-index-header {
+                #post-index-header-left {
+                    font-size: 1.35em;
+                    width: 30%;
+                }
+
+                #post-index-header-right {
+                    width: 70%;
+                    vertical-align: top;
+                }
+            }
+
+            #post-index-menu {
+                a {
+                    font-size: 0.95em;
+
+                    label {
+                        display: none;
+                        visibility: hidden;
+                    }
+                }
+            }
         }
-      }
     }
-  }
-  #post-edit-index {
-    #post-edit-index-wrapper {
-      #post-header {
-        #post-title {
-          #post-options {
-            margin: 5px 0 0 0;
-            width: 100%;
-            padding: 0;
-          }
-          #post-date {
-            width: 89.2%;
-          }
-        }
-        #post-meta {
-          #edit-control {
-            button {
-              width: 9.91%;
+
+    #post-edit-index {
+        #post-edit-index-wrapper {
+            #post-header {
+                #post-title {
+                    #post-options {
+                        margin: 5px 0 0;
+                        width: 100%;
+                        padding: 0;
+                    }
+
+                    #post-date {
+                        width: 89.2%;
+                    }
+                }
+
+                #post-meta {
+                    #edit-control {
+                        button {
+                            width: 9.91%;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 @media only screen and (max-width: 320px) {
-  #post-index {
-    #post-index-wrapper {
-      #post-index-menu {
-        a {
-          font-size: 0.95em;
-
-          label {
-            display: none;
-            visibility: hidden;
-          }
+    #post-index {
+        #post-index-wrapper {
+            #post-index-menu {
+                a {
+                    font-size: 0.95em;
+
+                    label {
+                        display: none;
+                        visibility: hidden;
+                    }
+                }
+            }
         }
-      }
     }
-  }
-  #post-edit-index {
-    #post-edit-index-wrapper {
-      #post-header {
-        #post-title {
-          #post_title {
-            width: 96.4%;
-          }
-          #post-options {
-            margin: 5px 0 0 0;
-            width: 100%;
-            padding: 0;
-          }
-          #post-date {
-            width: 83.1%;
-          }
-        }
-        #post-meta {
-          #post_tags {
-            width: 96.4%;
-          }
-          #edit-control {
-            .content-editor-btn-icon {
-              svg.icons {
-                width: 20px;
-              }
-            }
-            .post-sumbit-btn {
-              svg.icons {
-                width: 20px;
-              }
-            }
-            button {
-              width: 10%;
+
+    #post-edit-index {
+        #post-edit-index-wrapper {
+            #post-header {
+                #post-title {
+                    #post-title-text {
+                        width: 96.4%;
+                    }
+
+                    #post-options {
+                        margin: 5px 0 0;
+                        width: 100%;
+                        padding: 0;
+                    }
+
+                    #post-date {
+                        width: 83.1%;
+                    }
+                }
+
+                #post-meta {
+                    #post-tags {
+                        width: 96.4%;
+                    }
+
+                    #edit-control {
+                        .content-editor-btn-icon {
+                            svg.icons {
+                                width: 20px;
+                            }
+                        }
+
+                        .post-sumbit-btn {
+                            svg.icons {
+                                width: 20px;
+                            }
+                        }
+
+                        button {
+                            width: 10%;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 } ;
diff --git a/src/styles/main/_settings.scss b/src/styles/main/_settings.scss
index bb82328..29c09a1 100644
--- a/src/styles/main/_settings.scss
+++ b/src/styles/main/_settings.scss
@@ -1,328 +1,383 @@
 #settings-actions {
-  position: fixed;
-  width: 40%;
-  margin-top: -85px;
-  left: 50%;
-  margin-left: -20%;
-  #buttons {
-    width: 185px;
-    margin: 28px auto;
-    text-align: center;
-    background: $white;
-    padding: 2px;
-    border-radius: 3px;
-    button {
-      color: $white;
-      border-radius: 3px;
-      width: 40px;
-      margin: 0 10px 0 10px;
-      svg {
-        width: 25px;
-        height: 20px;
-        fill: $white;
-      }
-    }
-    button[data-render="false"] {
-      background: $secondary;
-      svg {
-        fill: $primary;
-      }
-    }
-    button[data-render="true"] {
-      background: $highlight;
-      svg {
-        fill: $white;
-      }
-    }
-  }
-}
-#settings-index {
-  width: 94%;
-  max-width: 900px;
-  margin: 0 auto;
-  overflow: hidden;
-  #settings-index-wrapper {
-    padding: 0;
-
-    button {
-      margin-top: 5px;
-      width: 100%;
-      height: 33px;
-    }
-    #member-settings,
-    #feature-settings,
-    #option-settings,
-    #token-settings,
-    #backup-settings {
-      background: $white;
-      padding: 0px;
-      border-radius: 5px 0 5px 0;
-      width: 100%;
-      margin: 20px auto;
-
-      label {
-        font-family: $baseType;
-        color: $primary;
-        font-weight: bold;
-      }
-      span {
-        color: $secondary;
-      }
-      input {
-        width: 95%;
-        margin: 0 5px 10px 0;
-        height: 30px;
-        padding: 10px;
-      }
-      input#backup-upload {
-        visibility: hidden;
-        display: none;
-      }
-      .backup-meta {
-        background: $primary;
-        color: $white;
-        padding: 8px;
-        border-radius: 3px;
-        margin: 5px 0 0 0;
-        text-align: center;
-      }
-      #member-images {
-        padding: 10px 15px 0 15px;
-
-        #member-avatar-drop {
-          display: inline-block;
-          margin: 0 0 10px 0;
+    position: fixed;
+    width: 40%;
+    margin-top: -85px;
+    left: 50%;
+    margin-left: -20%;
 
-          img {
-            width: 100%;
-            border-radius: 5px;
-            overflow: hidden;
-            cursor: pointer;
-            display: block;
-            margin-bottom: 2px;
-          }
-          input {
-            visibility: hidden;
-            display: none;
-          }
-          #privacy-toggle {
-            width: 50%;
-          }
-          #render-toggle {
-            width: 50%;
-          }
-        }
-        #site-background {
-          margin: 0 0 10px 0;
-
-          img {
-            width: 92.1%;
-            height: 292px;
-            border-radius: 3px;
-            overflow: hidden;
-            cursor: pointer;
-          }
-          input {
-            visibility: hidden;
-            display: none;
-          }
-        }
-      }
-      #member-meta {
-        padding: 10px 15px 0 15px;
-        position: relative;
-        top: -30px;
-      }
-      #features {
-        padding: 10px 15px 0 15px;
-      }
-    }
-    textarea {
-      background: $primary;
-      width: 70%;
-      height: 89.5px;
-      color: $tertiary;
-      padding: 10px;
-      display: inline-block;
-      margin-bottom: 10px;
-    }
-    span#key {
-      color: $white;
-      background: $primary;
-      font-size: 0.9em;
-      border-radius: 3px;
-      padding: 5px;
-      display: block;
-      width: 95%;
-      overflow: hidden;
-    }
-    #feature-settings {
-      #feature-api,
-      #dynamic-api {
+    #buttons {
+        width: 185px;
+        margin: 28px auto;
+        text-align: center;
         background: $white;
+        padding: 2px;
         border-radius: 3px;
-        padding: 5px;
 
         button {
-          color: $white;
-          border-radius: 3px;
-          width: 200px;
-          margin: 0;
-          height: 200px;
-          font-size: 1em;
-          svg {
-            width: 100px;
-            height: 90px;
-            fill: $white;
-            position: relative;
-            display: block;
-            margin: 12px auto;
-          }
-          span {
             color: $white;
-            margin: 6px 0 0 5px;
-            position: relative;
-            vertical-align: middle;
-            display: inline-block;
-            font-weight: bold;
-          }
+            border-radius: 3px;
+            width: 40px;
+            margin: 0 10px;
+
+            svg {
+                width: 25px;
+                height: 20px;
+                fill: $white;
+            }
         }
-        button[data-enabled="false"] {
-          background: $secondary;
-          svg {
-            fill: $primary;
-          }
-          span {
-            color: $primary;
-          }
+
+        button[data-render='false'] {
+            background: $secondary;
+
+            svg {
+                fill: $primary;
+            }
         }
-        button[data-enabled="true"] {
-          background: $highlight;
-          svg {
-            fill: $white;
-          }
+
+        button[data-render='true'] {
+            background: $highlight;
+
+            svg {
+                fill: $white;
+            }
         }
-      }
     }
-    #token-settings {
-      #keys-tokens {
-        padding: 10px 15px 0 15px;
-        #member-api-key,
-        #form-token {
-          background: $primary;
-          border-radius: 3px;
-          padding: 5px;
-          color: $white;
+}
+
+#settings-index {
+    width: 94%;
+    max-width: 900px;
+    margin: 0 auto;
+    overflow: hidden;
+
+    #settings-index-wrapper {
+        padding: 0;
+
+        button {
+            margin-top: 5px;
+            width: 100%;
+            height: 33px;
         }
-      }
-    }
-    #option-settings {
-      #theme-settings {
-        a {
-          width: 95%;
-          margin: 0 5px 5px 0;
-          height: 15px;
-          padding: 10px;
-          display: inline-block;
+
+        #member-settings,
+        #feature-settings,
+        #option-settings,
+        #token-settings,
+        #backup-settings {
+            background: $white;
+            padding: 0;
+            border-radius: 5px 0;
+            width: 100%;
+            margin: 20px auto;
+
+            label {
+                font-family: $basetype;
+                color: $primary;
+                font-weight: bold;
+            }
+
+            span {
+                color: $secondary;
+            }
+
+            input {
+                width: 95%;
+                margin: 0 5px 10px 0;
+                height: 30px;
+                padding: 10px;
+            }
+
+            input#backup-upload {
+                visibility: hidden;
+                display: none;
+            }
+
+            .backup-meta {
+                background: $primary;
+                color: $white;
+                padding: 8px;
+                border-radius: 3px;
+                margin: 5px 0 0;
+                text-align: center;
+            }
+
+            #member-images {
+                padding: 10px 15px 0;
+
+                #member-avatar-drop {
+                    display: inline-block;
+                    margin: 0 0 10px;
+
+                    img {
+                        width: 100%;
+                        border-radius: 5px;
+                        overflow: hidden;
+                        cursor: pointer;
+                        display: block;
+                        margin-bottom: 2px;
+                    }
+
+                    input {
+                        visibility: hidden;
+                        display: none;
+                    }
+
+                    #privacy-toggle {
+                        width: 50%;
+                    }
+
+                    #render-toggle {
+                        width: 50%;
+                    }
+                }
+
+                #site-background {
+                    margin: 0 0 10px;
+
+                    img {
+                        width: 92.1%;
+                        height: 292px;
+                        border-radius: 3px;
+                        overflow: hidden;
+                        cursor: pointer;
+                    }
+
+                    input {
+                        visibility: hidden;
+                        display: none;
+                    }
+                }
+            }
+
+            #member-meta {
+                padding: 10px 15px 0;
+                position: relative;
+                top: -30px;
+            }
+
+            #features {
+                padding: 10px 15px 0;
+            }
         }
-        a[data-enabled="false"] {
-          background: $white;
-          color: $primary;
-          border-radius: 3px;
-          font-weight: bold;
-          border-top: 1px $highlight solid;
-          border-bottom: 1px $highlight solid;
+
+        #mail-settings {
+            min-height: 240px;
+
+            /*
+            input {
+                margin: 0 5px 5px 0;
+                vertical-align: top;
+            }
+            */
+
+            a.mail-option {
+                float: right;
+                font-family: $monotype;
+                font-size: 0.9em;
+                border-radius: 3px;
+                text-decoration: none;
+                margin: 0 0 0 5px;
+            }
+
+            a.mail-option[data-enabled='true'] {
+                color: $highlight;
+            }
+
+            a.mail-option[data-enabled='false'] {
+                color: $primary;
+            }
+
+            div[data-enabled='false'] {
+                display: none;
+                visibility: hidden;
+            }
+
+            #settings-api {
+                background: $primary;
+                border-radius: 3px;
+                padding: 10px;
+
+                span {
+                    color: $white !important;
+                    margin: -13px 0 0 5px;
+                    position: relative;
+                    vertical-align: middle;
+                    display: inline-block;
+                    font-weight: bold;
+                }
+
+                button {
+                    color: $white;
+                    border-radius: 3px;
+                    width: 40px;
+                    margin: 0;
+
+                    svg {
+                        width: 25px;
+                        height: 20px;
+                        fill: $white;
+                    }
+                }
+
+                button[data-enabled='false'] {
+                    background: $secondary;
+
+                    svg {
+                        fill: $primary;
+                    }
+                }
+
+                button[data-enabled='true'] {
+                    background: $highlight;
+
+                    svg {
+                        fill: $white;
+                    }
+                }
+            }
         }
-        a[data-enabled="true"] {
-          background: $highlight;
-          color: $primary;
-          border-radius: 3px;
-          font-weight: bold;
-          border-top: 1px $primary solid;
-          border-bottom: 1px $primary solid;
-          svg {
-            fill: $primary;
+
+        textarea {
+            background: $primary;
+            width: 70%;
+            height: 89.5px;
+            color: $tertiary;
+            padding: 10px;
             display: inline-block;
-            float: right;
-          }
-        }
-      }
-      #mail-settings {
-        min-height: 240px;
-
-        a.mail-option {
-          float: right;
-          font-family: $monoType;
-          font-size: 0.9em;
-          border-radius: 3px;
-          text-decoration: none;
-          margin: 0 0 0 5px;
-        }
-        a.mail-option[data-enabled="true"] {
-          color: $highlight;
+            margin-bottom: 10px;
         }
-        a.mail-option[data-enabled="false"] {
-          color: $primary;
-        }
-        input {
-          // width 94%
-          margin: 0 5px 5px 0;
-          vertical-align: top;
-        }
-        div[data-enabled="false"] {
-          display: none;
-          visibility: hidden;
-        }
-        #settings-api {
-          background: $primary;
-          border-radius: 3px;
-          padding: 10px;
-          span {
-            color: $white !important;
-            margin: -13px 0 0 5px;
-            position: relative;
-            vertical-align: middle;
-            display: inline-block;
-            font-weight: bold;
-          }
-          button {
+
+        span#key {
             color: $white;
+            background: $primary;
+            font-size: 0.9em;
             border-radius: 3px;
-            width: 40px;
-            margin: 0;
-            svg {
-              width: 25px;
-              height: 20px;
-              fill: $white;
+            padding: 5px;
+            display: block;
+            width: 95%;
+            overflow: hidden;
+        }
+
+        #feature-settings {
+            #feature-api,
+            #dynamic-api {
+                background: $white;
+                border-radius: 3px;
+                padding: 5px;
+
+                button {
+                    color: $white;
+                    border-radius: 3px;
+                    width: 200px;
+                    margin: 0;
+                    height: 200px;
+                    font-size: 1em;
+
+                    svg.icons {
+                        width: 100px;
+                        height: 90px;
+                        fill: $white;
+                        position: relative;
+                        display: block;
+                        margin: 12px auto;
+                    }
+
+                    span {
+                        color: $white;
+                        margin: 6px 0 0 5px;
+                        position: relative;
+                        vertical-align: middle;
+                        display: inline-block;
+                        font-weight: bold;
+                    }
+                }
+
+                button[data-enabled='false'] {
+                    background: $secondary;
+
+                    svg {
+                        fill: $primary;
+                    }
+
+                    span {
+                        color: $primary;
+                    }
+                }
+
+                button[data-enabled='true'] {
+                    background: $highlight;
+
+                    svg {
+                        fill: $white;
+                    }
+                }
             }
-          }
-          button[data-enabled="false"] {
-            background: $secondary;
-            svg {
-              fill: $primary;
+        }
+
+        #token-settings {
+            #keys-tokens {
+                padding: 10px 15px 0;
+
+                #member-api-key,
+                #form-token {
+                    background: $primary;
+                    border-radius: 3px;
+                    padding: 5px;
+                    color: $white;
+                }
             }
-          }
-          button[data-enabled="true"] {
-            background: $highlight;
-            svg {
-              fill: $white;
+        }
+
+        #option-settings {
+            #theme-settings {
+                a {
+                    width: 95%;
+                    margin: 0 5px 5px 0;
+                    height: 15px;
+                    padding: 10px;
+                    display: inline-block;
+                }
+
+                a[data-enabled='false'] {
+                    background: $white;
+                    color: $primary;
+                    border-radius: 3px;
+                    font-weight: bold;
+                    border-top: 1px $highlight solid;
+                    border-bottom: 1px $highlight solid;
+                }
+
+                a[data-enabled='true'] {
+                    background: $highlight;
+                    color: $primary;
+                    border-radius: 3px;
+                    font-weight: bold;
+                    border-top: 1px $primary solid;
+                    border-bottom: 1px $primary solid;
+
+                    svg {
+                        fill: $primary;
+                        display: inline-block;
+                        float: right;
+                    }
+                }
             }
-            // responsive
-          }
         }
-      }
     }
-  }
 }
+
+// Responsive for Settings
 @media only screen and (max-width: 480px) {
-  #settings-actions {
-    margin-left: -42%;
-    #buttons {
-      width: 150px;
-      background: none;
-      button {
-        margin: 0 5px 0 5px;
-      }
+    #settings-actions {
+        margin-left: -42%;
+
+        #buttons {
+            width: 150px;
+            background: none;
+
+            button {
+                margin: 0 5px;
+            }
+        }
     }
-  }
 } ;
diff --git a/src/styles/main/_structure.scss b/src/styles/main/_structure.scss
index 240e024..6be96be 100644
--- a/src/styles/main/_structure.scss
+++ b/src/styles/main/_structure.scss
@@ -7,12 +7,12 @@ body {
             rgba(color.adjust($primary, $lightness: 10%), 1) 100%
         )
         no-repeat;
-    font: 400 1em $baseType;
+    font: 400 1em $basetype;
     height: 100%;
 }
 
 a {
-    font: 300 1em $baseType;
+    font: 300 1em $basetype;
     color: $secondary;
     text-decoration: underline;
     transition: all 0.2s linear;
diff --git a/src/styles/main/_typography.scss b/src/styles/main/_typography.scss
index 6300a98..f9140ff 100644
--- a/src/styles/main/_typography.scss
+++ b/src/styles/main/_typography.scss
@@ -1,20 +1,23 @@
-$baseType: Helvetica, Arial, sans-serif;
-$monoType: "Lucida Console", Monaco, monospace;
+$basetype: helvetica, arial, sans-serif;
+$monotype: 'Lucida Console', monaco, monospace;
 
 h1,
 h2,
 h3 {
-  color: $white;
+    color: $white;
 }
+
 h1 {
-  font-size: 2em;
-  font-weight: 400;
+    font-size: 2em;
+    font-weight: 400;
 }
+
 h2 {
-  font-size: 1.75em;
-  font-weight: 400;
+    font-size: 1.75em;
+    font-weight: 400;
 }
+
 h3 {
-  font-size: 1.5em;
-  font-weight: 300;
+    font-size: 1.5em;
+    font-weight: 300;
 }