From 20fc9c64a16d22d74c264d4601d59e064b6eacc8 Mon Sep 17 00:00:00 2001
From: Ro <ro@playvicio.us>
Date: Tue, 25 May 2021 11:04:30 -0700
Subject: [PATCH] ui overall part 4: responsive touch up

---
 brain/views/dash/_frame.twig     | 22 ++++++++++++----------
 brain/views/dash/settings.twig   |  2 +-
 brain/views/dash/start.twig      |  2 +-
 public/assets/css/dash.css       | 29 +++++++++++++++++++++++++++--
 src/styles/main/_navigation.sass |  2 +-
 src/styles/main/_posts.sass      |  9 +++++++--
 src/styles/main/_settings.sass   | 15 +++++++++++++--
 src/styles/main/_structure.sass  |  5 +++++
 8 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/brain/views/dash/_frame.twig b/brain/views/dash/_frame.twig
index b5ec557..f8be02a 100644
--- a/brain/views/dash/_frame.twig
+++ b/brain/views/dash/_frame.twig
@@ -29,16 +29,18 @@
                 {% if status %}
                     <header id="header">
                         <div id="wrapper">
-                            <div id="left">
-                                    <a href="/dashboard"><img id="the-logo" src="/assets/images/global/the-logo.svg"/></a>
-                            </div>
-                            <div id="right">
-                                {% if status %}
-                                    {% apply spaceless %}
-                                      {{ include("dash/partials/navigation.twig") }}
-                                    {% endapply %}  
-                                {% endif %}
-                            </div>
+                            {% apply spaceless %}
+                                <div id="left">
+                                        <a href="/dashboard"><img id="the-logo" src="/assets/images/global/the-logo.svg"/></a>
+                                </div>
+                                <div id="right">
+                                    {% if status %}
+                                        {% apply spaceless %}
+                                          {{ include("dash/partials/navigation.twig") }}
+                                        {% endapply %}  
+                                    {% endif %}
+                                </div>
+                            {% endapply %}
                         </div>
     
                     </header>
diff --git a/brain/views/dash/settings.twig b/brain/views/dash/settings.twig
index ad2111b..e6d0745 100644
--- a/brain/views/dash/settings.twig
+++ b/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 %}
diff --git a/brain/views/dash/start.twig b/brain/views/dash/start.twig
index 34bf020..744bc45 100644
--- a/brain/views/dash/start.twig
+++ b/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 %}
diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css
index afd9425..2a03a8b 100644
--- a/public/assets/css/dash.css
+++ b/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;
   }
diff --git a/src/styles/main/_navigation.sass b/src/styles/main/_navigation.sass
index b2fb2e8..8a39189 100644
--- a/src/styles/main/_navigation.sass
+++ b/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
diff --git a/src/styles/main/_posts.sass b/src/styles/main/_posts.sass
index a987b64..ce7cc6c 100644
--- a/src/styles/main/_posts.sass
+++ b/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
diff --git a/src/styles/main/_settings.sass b/src/styles/main/_settings.sass
index accfa57..781d536 100644
--- a/src/styles/main/_settings.sass
+++ b/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
@@ -188,4 +188,15 @@
 
                 div[data-enabled='false']
                     display: none
-                    visibility: hidden
\ No newline at end of file
+                    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
+  
\ No newline at end of file
diff --git a/src/styles/main/_structure.sass b/src/styles/main/_structure.sass
index 45350d4..40b41b2 100644
--- a/src/styles/main/_structure.sass
+++ b/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