ui overall part 4: responsive touch up

brain/views/dash/_frame.twig

@@ -29,6 +29,7 @@
                 {% if status %}
                     <header id="header">
                         <div id="wrapper">
+                            {% apply spaceless %}
                                 <div id="left">
                                         <a href="/dashboard"><img id="the-logo" src="/assets/images/global/the-logo.svg"/></a>
                                 </div>
@@ -39,6 +40,7 @@
                                         {% endapply %}  
                                     {% endif %}
                                 </div>
+                            {% endapply %}
                         </div>
     
                     </header>

brain/views/dash/settings.twig

@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-	<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=asdfdf">
+	<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdvcvb">
 	{% endblock %}
 
 	{% block mainContent %}

brain/views/dash/start.twig

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfddfdfdfd">
+    <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adsfdfdf">
     {% endblock %}
 
     {% block mainContent %}

public/assets/css/dash.css

@@ -2087,6 +2087,11 @@ svg.icons {
   color: #EFEBE3;
 }
 
+@media only screen and (max-width: 901px) {
+  .main-container {
+    padding: 10px;
+  }
+}
 @media only screen and (max-width: 800px) {
   .main-container section header #wrapper #left, .main-container section header #wrapper #right {
     display: inline-block;
@@ -2390,7 +2395,7 @@ svg.icons {
 }
 #settings-actions #buttons {
   width: 155px;
-  margin: 30px auto;
+  margin: 28px auto;
   text-align: center;
   background: #EFEBE3;
   padding: 2px;
@@ -2581,6 +2586,18 @@ svg.icons {
   visibility: hidden;
 }
 
+@media only screen and (max-width: 480px) {
+  #settings-actions {
+    margin-left: -42%;
+  }
+  #settings-actions #buttons {
+    width: 150px;
+    background: none;
+  }
+  #settings-actions #buttons button {
+    margin: 0 5px 0 5px;
+  }
+}
 #error-index {
   width: 100%;
   max-width: 900px;
@@ -2658,7 +2675,7 @@ svg.icons {
     font-size: 1em;
   }
   #nav-index #nav-index-wrapper #nav-pages .nav-item label {
-    width: 47%;
+    width: 40%;
     vertical-align: top;
     margin-top: 0px;
     line-height: 1em;
@@ -3106,6 +3123,14 @@ select {
   }
 }
 @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 #post-index-wrapper #post-index-header #post-index-header-right {
+    width: 70%;
+    vertical-align: top;
+  }
   #post-index #post-index-wrapper #post-index-menu a {
     font-size: 0.95em;
   }

src/styles/main/_navigation.sass

@@ -51,7 +51,7 @@
                     font-size: 1em
 
                     label
-                        width: 47%
+                        width: 40%
                         vertical-align: top
                         margin-top: 0px
                         line-height: 1em

src/styles/main/_posts.sass

@@ -2,11 +2,9 @@
     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
@@ -343,6 +341,13 @@
 @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

src/styles/main/_settings.sass

@@ -6,7 +6,7 @@
     margin-left: -20%
     #buttons
         width: 155px
-        margin: 30px auto
+        margin: 28px auto
         text-align: center
         background: $white
         padding: 2px
@@ -189,3 +189,14 @@
                 div[data-enabled='false']
                     display: none
                     visibility: hidden
+                    
+// responsive                    
+@media only screen and (max-width: 480px)
+    #settings-actions
+        margin-left: -42%
+        #buttons
+            width: 150px
+            background: none
+            button
+                margin: 0 5px 0 5px
+  

src/styles/main/_structure.sass

@@ -160,7 +160,12 @@ svg.icons
   background-color: $highlight
   color: $white
 
+
 //Responsive
+@media only screen and (max-width: 901px)
+  .main-container
+    padding: 10px
+
 @media only screen and (max-width: 800px)
   .main-container
     section