updated styles for dash index and settings pages

themes/dash/assets/css/dash.css

@@ -1811,16 +1811,26 @@ svg.icons {
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a label {
   font-size: 0.7em;
-  font-weight: 500;
+  font-weight: 700;
   color: #161d23;
   padding: 5px;
   vertical-align: top;
-  display: block;
+  display: inline-block;
+  width: 60%;
+}
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a span {
+  float: right;
+  vertical-align: top;
+  display: inline-block;
+  font-family: "Apercu-mono";
+  font-size: 0.5em;
+  padding: 7px;
+  color: #161d23;
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a div {
   width: 100%;
   background-size: cover;
-  border-radius: 3px;
+  border-radius: 3px 3px 0 0;
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(2) {
   width: 100%;
@@ -1838,7 +1848,7 @@ svg.icons {
 }
 #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) {
-  width: 50%;
+  width: 50.6%;
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4) div,
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) div {
@@ -1847,83 +1857,6 @@ svg.icons {
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) {
   margin: -305px 0 0 49.3%;
 }
-.folio-project-form {
-  display: inline-block;
-  width: 56%;
-}
-.folio-project-form input[type=email],
-.folio-project-form input[type=password],
-.folio-project-form input[type=text],
-.folio-project-form select {
-  width: 400px;
-}
-.folio-project-form select {
-  margin: 10px 0 0 0;
-}
-.folio-project-form textarea {
-  width: 400px;
-  height: 133px;
-}
-.folio-hub {
-  padding: 20px;
-}
-.folio-hub span {
-  margin: 10px 10px 0 0;
-}
-.folio-hub .btn-add-project span {
-  font: 20px $bodyType;
-  margin: -35px 0 0 40px;
-  display: block;
-  height: 50px;
-}
-.folio-hub .project-list {
-  width: 95%;
-}
-.folio-hub .project-list span.drag-handle {
-  padding: 10px;
-  color: #f5ab35;
-  cursor: pointer;
-}
-.folio-hub .project-list .project-item {
-  width: 100%;
-  display: inline-block;
-  background: #28343e;
-  padding: 5px;
-  margin-bottom: 10px;
-  border-radius: 5px;
-  -moz-transition: all 0.3s linear;
-  -webkit-transition: all 0.3s linear;
-  -o-transition: all 0.3s linear;
-  transition: all 0.3s linear;
-}
-.folio-hub .project-list .project-item:hover {
-  background: #3b4e5e;
-}
-.upload-list {
-  color: #c1cdd7;
-  display: inline-block;
-  vertical-align: top;
-  width: 260px;
-  height: 330px;
-  margin: 45px 0 0;
-}
-.thumb {
-  height: 50px;
-  overflow: hidden;
-  border-radius: 3px;
-  margin: 10px 5px 0 0;
-}
-.upload-drop {
-  width: 400px;
-  height: 70px;
-  background: $form-background;
-  color: #c1cdd7;
-  text-align: center;
-  padding: 40px 0 0;
-  font-size: 12px;
-  text-transform: uppercase;
-  border-radius: 3px;
-}
 /**
 -------------------------------
 -- Settings
@@ -1965,105 +1898,95 @@ svg.icons {
 }
 #settings-index #settings-index-wrapper #member-settings,
 #settings-index #settings-index-wrapper #site-settings,
-#settings-index #settings-index-wrapper #theme-settings,
-#settings-index #settings-index-wrapper #mail-settings {
+#settings-index #settings-index-wrapper #option-settings {
+  background: #374857;
+  padding: 5px;
+  border-radius: 5px 0 5px 0;
   width: 100%;
-  margin-bottom: 40px;
+  margin: 20px auto;
 }
 #settings-index #settings-index-wrapper #member-settings label,
 #settings-index #settings-index-wrapper #site-settings label,
-#settings-index #settings-index-wrapper #theme-settings label,
-#settings-index #settings-index-wrapper #mail-settings label {
+#settings-index #settings-index-wrapper #option-settings label {
   font-family: 'Apercu-Mono';
   color: #f2f1ef;
 }
 #settings-index #settings-index-wrapper #member-settings input,
 #settings-index #settings-index-wrapper #site-settings input,
-#settings-index #settings-index-wrapper #theme-settings input,
-#settings-index #settings-index-wrapper #mail-settings input {
-  width: 44%;
-  margin-right: 5px;
+#settings-index #settings-index-wrapper #option-settings input {
+  width: 95%;
+  margin: 0 5px 10px 0;
   height: 30px;
   padding: 10px;
 }
 #settings-index #settings-index-wrapper #member-settings #member-avatar-drop,
 #settings-index #settings-index-wrapper #site-settings #member-avatar-drop,
-#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop,
-#settings-index #settings-index-wrapper #mail-settings #member-avatar-drop {
+#settings-index #settings-index-wrapper #option-settings #member-avatar-drop {
   display: inline-block;
+  margin: 0 0 10px 0;
 }
 #settings-index #settings-index-wrapper #member-settings #member-avatar-drop img,
 #settings-index #settings-index-wrapper #site-settings #member-avatar-drop img,
-#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop img,
-#settings-index #settings-index-wrapper #mail-settings #member-avatar-drop img {
-  width: 110px;
-  border-radius: 10px;
+#settings-index #settings-index-wrapper #option-settings #member-avatar-drop img {
+  width: 100%;
+  border-radius: 5px;
   overflow: hidden;
   cursor: pointer;
 }
 #settings-index #settings-index-wrapper #member-settings #member-avatar-drop input,
 #settings-index #settings-index-wrapper #site-settings #member-avatar-drop input,
-#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop input,
-#settings-index #settings-index-wrapper #mail-settings #member-avatar-drop input {
+#settings-index #settings-index-wrapper #option-settings #member-avatar-drop input {
   visibility: hidden;
   display: none;
 }
 #settings-index #settings-index-wrapper #member-settings #member-info,
 #settings-index #settings-index-wrapper #site-settings #member-info,
-#settings-index #settings-index-wrapper #theme-settings #member-info,
-#settings-index #settings-index-wrapper #mail-settings #member-info {
+#settings-index #settings-index-wrapper #option-settings #member-info {
   vertical-align: top;
   display: inline-block;
-  margin: 0 0 0 10px;
-  width: 79%;
+  width: 100%;
 }
 #settings-index #settings-index-wrapper #member-settings #member-info input,
 #settings-index #settings-index-wrapper #site-settings #member-info input,
-#settings-index #settings-index-wrapper #theme-settings #member-info input,
-#settings-index #settings-index-wrapper #mail-settings #member-info input {
-  width: 94%;
+#settings-index #settings-index-wrapper #option-settings #member-info input {
+  width: 95%;
   margin: 0 5px 10px 0;
 }
 #settings-index #settings-index-wrapper #member-settings textarea,
 #settings-index #settings-index-wrapper #site-settings textarea,
-#settings-index #settings-index-wrapper #theme-settings textarea,
-#settings-index #settings-index-wrapper #mail-settings textarea {
+#settings-index #settings-index-wrapper #option-settings textarea {
   background: #161d23;
-  width: 91.5%;
-  height: 100px;
+  width: 95%;
+  height: 155px;
   color: #b2cce5;
-  margin-top: 10px;
   padding: 10px;
 }
-#settings-index #settings-index-wrapper #theme-settings a[data-enabled='false'] {
-  width: 310px;
+#settings-index #settings-index-wrapper #option-settings #theme-settings a {
+  width: 95%;
   margin: 0 5px 5px 0;
   height: 25px;
   padding: 10px;
   display: inline-block;
+}
+#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='false'] {
   background: #161d23;
   color: #b2cce5;
   border-radius: 3px;
 }
-#settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] {
-  width: 310px;
-  margin: 0 5px 5px 0;
-  height: 25px;
-  padding: 10px;
-  display: inline-block;
+#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='true'] {
   background: #b2cce5;
   color: #374857;
   border-radius: 3px;
 }
-#settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] svg {
+#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='true'] svg {
   fill: #374857;
   display: inline-block;
   float: right;
 }
-#settings-index #settings-index-wrapper #mail-settings {
-  height: 100px;
+#settings-index #settings-index-wrapper #option-settings #mail-settings {
+  min-height: 240px;
 }
-#settings-index #settings-index-wrapper #mail-settings a.mail-option {
+#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option {
   float: right;
   font-family: 'Apercu-Mono';
   font-size: 0.9em;
@@ -2071,17 +1994,17 @@ svg.icons {
   text-decoration: none;
   margin: 0 0 0 5px;
 }
-#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='true'] {
+#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled='true'] {
   color: #fc6399;
 }
-#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='false'] {
+#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled='false'] {
   color: #f2f1ef;
 }
-#settings-index #settings-index-wrapper #mail-settings input {
+#settings-index #settings-index-wrapper #option-settings #mail-settings input {
   margin: 0 5px 5px 0;
   vertical-align: top;
 }
-#settings-index #settings-index-wrapper #mail-settings div[data-enabled='false'] {
+#settings-index #settings-index-wrapper #option-settings #mail-settings div[data-enabled='false'] {
   display: none;
   visibility: hidden;
 }

themes/dash/assets/js/dash.min.js

@@ -9073,7 +9073,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "60240" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "55155" + '/');
 
   ws.onmessage = function (event) {
     var data = JSON.parse(event.data);

themes/dash/partials/front.pug

@@ -5,6 +5,7 @@
     - var cap = 4; // number of respect posts to display			
     - for ( index; index < cap; index++)
         a(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid)
-          div(style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center")
+          div(style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center / cover")
           label= items[index].post.title
+          span= items[index].post.created
   

themes/dash/settings.pug

@@ -7,57 +7,57 @@ block main-content
                
       #settings-index
         #settings-index-wrapper
-            #member-settings
-              label YOU
-              br
-              #member-avatar-drop
-                img#avatar(src=member.avi, for="avatar-upload")
-                input(id="avatar-upload" type="file" name="avatar-upload")
-              #member-info
-                input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus)
-                input(type='text', name='email' id='settings-email', placeholder='email', value=member.email, autofocus)
-            #site-settings
-              label SITE INFO
-              br
-              input(type='text', name='base-url' id='settings-url', placeholder='url', value=settings.url, autofocus)
-              input(type='text', name='base-title' id='settings-title', placeholder='site title', value=settings.title, autofocus)
-              textarea(id="settings-desc" type='text', name='settings_desc' class='settings-dec', placeholder='description stuff', autofocus)
-                =settings.description
-              button#privacy-toggle(data-private=settings.private)
-                -if (settings.private == 'false')
-                  | SITE IS PRIVATE
-                -else
-                  | SITE IS PUBLIC
-            #theme-settings
-              label THEMES
-              br
-              - var index = 0;			
-                - for ( index; index < themes.length; index++)
-                  -if(themes[index].current == "true")
-                    a.theme-select(href="#" id=themes[index].theme.name, data-enabled="true")
-                        = themes[index].theme["display-name"]
-                        //svg(viewBox="0 0 20 20" class="icons")
-                            use(xlink:href='/dash/assets/images/sprite.svg#entypo-check')
+            #member-settings.columns
+              #member-settings-1.column
+                label AVATAR
+                #member-avatar-drop
+                  img#avatar(src=member.avi, for="avatar-upload")
+                  button#save-toggle SAVE SETTINGS
+                  input(id="avatar-upload" type="file" name="avatar-upload")
+              #member-settings-2.column
+                label INFO
+                #member-info
+                  input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus)
+                  input(type='text', name='email' id='settings-email', placeholder='email', value=member.email, autofocus)
+                input(type='text', name='base-url' id='settings-url', placeholder='url', value=settings.url, autofocus)
+                input(type='text', name='base-title' id='settings-title', placeholder='site title', value=settings.title, autofocus)
+                textarea(id="settings-desc" type='text', name='settings_desc' class='settings-dec', placeholder='description stuff', autofocus)
+                  =settings.description
+                button#privacy-toggle(data-private=settings.private)
+                  -if (settings.private == 'false')
+                    | SITE IS PRIVATE
                   -else
-                    a.theme-select(href="#" id=themes[index].theme.name, data-enabled="false")
-                        = themes[index].theme["display-name"]
-            #mail-settings
-              label MAIL SETTINGS
-              -if(settings.email.active == "option-none")
-                a.mail-option#option-none(href="#", data-enabled='true') NONE
-              -else
-                a.mail-option#option-none(href="#", data-enabled='false') NONE
-              -if(settings.email.active == "option-mg")
-                a.mail-option#option-mg(href="#", data-enabled='true') MAILGUN
-              -else
-                a.mail-option#option-mg(href="#", data-enabled='false') MAILGUN
-              -if(settings.email.active == "option-smtp")
-                a.mail-option#option-smtp(href="#", data-enabled='true') SMTP
-              -else
-                a.mail-option#option-smtp(href="#", data-enabled='false') SMTP
-              include partials/mailforms
+                    | SITE IS PUBLIC              
+            #option-settings.columns
+              #theme-settings.column
+                label THEMES
+                br
+                - var index = 0;			
+                  - for ( index; index < themes.length; index++)
+                    -if(themes[index].current == "true")
+                      a.theme-select(href="#" id=themes[index].theme.name, data-enabled="true")
+                          = themes[index].theme["display-name"]
+                          //svg(viewBox="0 0 20 20" class="icons")
+                              use(xlink:href='/dash/assets/images/sprite.svg#entypo-check')
+                    -else
+                      a.theme-select(href="#" id=themes[index].theme.name, data-enabled="false")
+                          = themes[index].theme["display-name"]
+              #mail-settings.column
+                label E-MAIL
+                -if(settings.email.active == "option-none")
+                  a.mail-option#option-none(href="#", data-enabled='true') NONE
+                -else
+                  a.mail-option#option-none(href="#", data-enabled='false') NONE
+                -if(settings.email.active == "option-mg")
+                  a.mail-option#option-mg(href="#", data-enabled='true') MAILGUN
+                -else
+                  a.mail-option#option-mg(href="#", data-enabled='false') MAILGUN
+                -if(settings.email.active == "option-smtp")
+                  a.mail-option#option-smtp(href="#", data-enabled='true') SMTP
+                -else
+                  a.mail-option#option-smtp(href="#", data-enabled='false') SMTP
+                include partials/mailforms
+                button#send-mail TEST MAIL  
+              
         
-              br
-            button#send-mail SEND MAIL
-            button#save-toggle SAVE SETTINGS
       

themes/dash/src/com/controllers/SettingsIndex.js

@@ -54,19 +54,19 @@ export default class SettingsIndex
             self.handleImageUpload(e.target.id, e.target.files);
         }, false);
         //handle privacy toggle
-        document.getElementById("privacy-toggle").addEventListener("click", e=>this.togglePrivacy(e));
-        document.getElementById("send-mail").addEventListener("click", e=>this.handleMailer(e));
+        document.getElementById("privacy-toggle").addEventListener("click", e => this.togglePrivacy(e));
+        document.getElementById("send-mail").addEventListener("click", e => this.handleMailer(e));
         //handle theme toggle
         let themeBtns = document.querySelectorAll('.theme-select');
         for (var i = 0, length = themeBtns.length; i < length; i++)
         {
-            themeBtns[i].addEventListener('click', e=>this.handleThemes(e));
+            themeBtns[i].addEventListener('click', e => this.handleThemes(e));
         }
         //handle mail options
         let mailBtn = document.querySelectorAll('.mail-option');
         for (var i = 0, length = mailBtn.length; i < length; i++)
         {
-            mailBtn[i].addEventListener('click', e=>this.handleMailOptions(e));
+            mailBtn[i].addEventListener('click', e => this.handleMailOptions(e));
         }
     }
     //--------------------------
@@ -76,31 +76,31 @@ export default class SettingsIndex
     {
         e.stopPropagation();
         e.preventDefault();
-        if(e.target.getAttribute('data-private') == "false")
+        if (e.target.getAttribute('data-private') == "false")
         {
             e.target.setAttribute('data-private', 'true');
             e.target.innerHTML = "SITE IS PUBLIC"
-        }else{
+        }
+        else
+        {
             e.target.setAttribute('data-private', 'false');
             e.target.innerHTML = "SITE IS PRIVATE"
         }
     }
-
     handleMailer()
     {
         this.mailer.sendMail();
     }
-
-    handleThemes(e){
+    handleThemes(e)
+    {
         e.stopPropagation();
         e.preventDefault();
         let themes = document.querySelectorAll('.theme-select');
         for (var i = 0, length = themes.length; i < length; i++)
         {
-            (e.target.id == themes[i].id) ? themes[i].setAttribute('data-enabled', 'true') : themes[i].setAttribute('data-enabled', 'false')
+            (e.target.id == themes[i].id) ? themes[i].setAttribute('data-enabled', 'true'): themes[i].setAttribute('data-enabled', 'false')
         }
     }
-
     handleMailOptions(e)
     {
         e.preventDefault();
@@ -110,24 +110,31 @@ export default class SettingsIndex
         let mail = document.querySelectorAll('.mail-option');
         for (var i = 0, length = mail.length; i < length; i++)
         {
-            if(e.target.id == mail[i].id){
+            if (e.target.id == mail[i].id)
+            {
                 mail[i].setAttribute('data-enabled', 'true')
-                if (e.target.id == "option-smtp"){
+                if (e.target.id == "option-smtp")
+                {
                     smtp.setAttribute('data-enabled', 'true')
                     mailgun.setAttribute('data-enabled', 'false')
-                }else if(e.target.id == "option-none"){
+                }
+                else if (e.target.id == "option-none")
+                {
                     smtp.setAttribute('data-enabled', 'false')
                     mailgun.setAttribute('data-enabled', 'false')
-                }else{
+                }
+                else
+                {
                     smtp.setAttribute('data-enabled', 'false')
                     mailgun.setAttribute('data-enabled', 'true')
                 }
-            }else{
+            }
+            else
+            {
                 mail[i].setAttribute('data-enabled', 'false')
             }
         }
     }
-
     handleImageUpload(type, files)
     {
         let url = ""
@@ -148,13 +155,14 @@ export default class SettingsIndex
         this.dataUtils.request(url, eventType, REQUEST_TYPE_POST, CONTENT_TYPE_FORM, imageData).then((response) =>
         {
             let r = JSON.parse(response.request['response']);
-            if(r.message == DataEvent.AVATAR_UPLOADED)
+            if (r.message == DataEvent.AVATAR_UPLOADED)
             {
                 document.getElementById('avatar').src = r.url;
-            }else{
+            }
+            else
+            {
                 document.getElementById('background').src = r.url;
             }
-            
         }).catch((err) =>
         {
             //console.log(err)

themes/dash/src/styles/main/_index.styl

@@ -84,16 +84,25 @@
 
             label
               font-size: .7em
-              font-weight: 500
+              font-weight: 700
               color $primary - 60%
               padding 5px
               vertical-align: top
-              display: block
+              display: inline-block
+              width: 60%
+            span
+              float: right
+              vertical-align: top
+              display: inline-block
+              font-family: "Apercu-mono"
+              font-size: .5em
+              padding: 7px
+              color $primary - 60%
 
             div
               width 100%
               background-size cover
-              border-radius 3px
+              border-radius 3px 3px 0 0
 
           a:nth-child(2)
             width 100%
@@ -109,80 +118,9 @@
 
           a:nth-child(4), a:nth-child(5)
 
-            width 50%
+            width 50.6%
             div
               height 275px
           
           a:nth-child(5)
             margin -305px 0 0 49.3%
-
-.folio-project-form
-  display inline-block
-  width 56%
-
-  input[type=email], input[type=password], input[type=text], select
-    width 400px
-
-  select
-    margin 10px 0 0 0
-
-  textarea
-    width 400px
-    height 133px
-
-.folio-hub
-  padding 20px
-
-  span
-    margin 10px 10px 0 0
-
-  .btn-add-project span
-    font 20px $bodyType
-    margin -35px 0 0 40px
-    display block
-    height 50px
-
-  .project-list
-    width 95%
-
-    span.drag-handle
-      padding 10px
-      color $tertiary
-      cursor pointer
-
-    .project-item
-      width 100%
-      display inline-block
-      background lightness($primary, 20%)
-      padding 5px
-      margin-bottom 10px
-      border-radius 5px
-      object-transitions(0.3s)
-
-    .project-item:hover
-      background lightness($primary, 30%)
-
-.upload-list
-  color lightness($primary, 80%)
-  display inline-block
-  vertical-align top
-  width 260px
-  height 330px
-  margin 45px 0 0
-
-.thumb
-  height 50px
-  overflow hidden
-  border-radius 3px
-  margin 10px 5px 0 0
-
-.upload-drop
-  width 400px
-  height 70px
-  background $form-background
-  color lightness($primary, 80%)
-  text-align center
-  padding 40px 0 0
-  font-size 12px
-  text-transform uppercase
-  border-radius 3px

themes/dash/src/styles/main/_settings.styl

@@ -1,17 +1,19 @@
 #site-background
     margin 0 0 10px 0
+
     img
         width 100%
         // border 5px solid $white
         border-radius 0
         overflow hidden
         cursor pointer
+
     label
-        position: absolute
+        position absolute
         color $white
         margin 5px
         background $primary - 60%
-        padding: 5px
+        padding 5px
         border-radius 3px
 
     input
@@ -31,27 +33,32 @@
             width 320px
             height 45px
 
-        #member-settings, #site-settings, #theme-settings, #mail-settings
+        #member-settings, #site-settings, #option-settings
+            background $primary
+            padding 5px
+            border-radius 5px 0 5px 0
+
             label
                 font-family 'Apercu-Mono'
                 color $white
 
             input
-                width 44%
-                margin-right 5px
+                width 95%
+                margin 0 5px 10px 0
                 height 30px
                 padding 10px
 
             width 100%
-            margin-bottom 40px
+            margin 20px auto
 
             #member-avatar-drop
                 display inline-block
+                margin 0 0 10px 0
 
                 img
-                    width 110px
+                    width 100%
                     // border 5px solid $white
-                    border-radius 10px
+                    border-radius 5px
                     overflow hidden
                     cursor pointer
 
@@ -62,66 +69,64 @@
             #member-info
                 vertical-align top
                 display inline-block
-                margin 0 0 0 10px
-                width 79%
+                width 100%
 
                 input
-                    width 94%
+                    width 95%
                     margin 0 5px 10px 0
 
             textarea
                 background $primary - 60%
-                width 91.5%
-                height 100px
+                width 95%
+                height 155px
                 color $secondary
-                margin-top 10px
                 padding 10px
 
-        #theme-settings
-            a[data-enabled='false']
-                width 310px
-                margin 0 5px 5px 0
-                height 25px
-                padding 10px
-                display inline-block
-                background $primary - 60%
-                color $secondary
-                border-radius 3px
-
-            a[data-enabled='true']
-                width 310px
-                margin 0 5px 5px 0
-                height 25px
-                padding 10px
-                display inline-block
-                background $secondary
-                color $primary
-                border-radius 3px
-
-                svg
-                    fill $primary
+        #option-settings
+            #theme-settings
+                a
+                    width 95%
+                    margin 0 5px 5px 0
+                    height 25px
+                    padding 10px
                     display inline-block
+
+                a[data-enabled='false']
+                    background $primary - 60%
+                    color $secondary
+                    border-radius 3px
+
+                a[data-enabled='true']
+                    background $secondary
+                    color $primary
+                    border-radius 3px
+
+                    svg
+                        fill $primary
+                        display inline-block
+                        float right
+            #mail-settings
+                min-height: 240px
+                a.mail-option
                     float right
+                    font-family 'Apercu-Mono'
+                    font-size 0.9em
+                    border-radius 3px
+                    text-decoration none
+                    margin 0 0 0 5px
+                    // padding: 1px
 
-        #mail-settings
-            height 100px
-            a.mail-option
-                float right
-                font-family 'Apercu-Mono'
-                font-size .9em
-                border-radius 3px
-                text-decoration: none
-                margin 0 0 0 5px
-                //padding: 1px
-            a.mail-option[data-enabled='true']
-                color $highlight
-            a.mail-option[data-enabled='false']
-                color $white
-            input
-                // width 94%
-                margin 0 5px 5px 0
-                vertical-align: top
+                a.mail-option[data-enabled='true']
+                    color $highlight
 
-            div[data-enabled='false']
-                display none
-                visibility hidden
+                a.mail-option[data-enabled='false']
+                    color $white
+
+                input
+                    // width 94%
+                    margin 0 5px 5px 0
+                    vertical-align top
+
+                div[data-enabled='false']
+                    display none
+                    visibility hidden