From 033fe5e48b8d2ac48baf8d5bb5b8df86b12dac21 Mon Sep 17 00:00:00 2001
From: Ro <ro@playvicio.us>
Date: Sun, 23 May 2021 19:27:33 -0700
Subject: [PATCH] ui overall part 2: dash index, pages index

---
 brain/views/dash/_frame.twig              |   5 +-
 brain/views/dash/book.twig                | 111 +++++---
 brain/views/dash/partials/index.twig      |  64 +++--
 brain/views/dash/partials/navigation.twig |  24 +-
 brain/views/dash/partials/options.twig    |   2 +-
 brain/views/dash/start.twig               |   6 +-
 public/assets/css/dash.css                | 333 +++++++++++++---------
 src/styles/main/_forms.sass               |   2 +-
 src/styles/main/_index.sass               | 119 ++++----
 src/styles/main/_posts.sass               | 167 ++++++-----
 src/styles/main/_structure.sass           |  46 +--
 11 files changed, 529 insertions(+), 350 deletions(-)

diff --git a/brain/views/dash/_frame.twig b/brain/views/dash/_frame.twig
index 067c796..b5ec557 100644
--- a/brain/views/dash/_frame.twig
+++ b/brain/views/dash/_frame.twig
@@ -32,7 +32,6 @@
                             <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 %}
@@ -44,8 +43,10 @@
     
                     </header>
                 {% endif  %}
+                {% apply spaceless %}
+                    {% block mainContent %}{% endblock %}
+                {% endapply  %}
                 
-                {% block mainContent %}{% endblock %}
             </section>
 
 
diff --git a/brain/views/dash/book.twig b/brain/views/dash/book.twig
index 78458be..a769ff0 100644
--- a/brain/views/dash/book.twig
+++ b/brain/views/dash/book.twig
@@ -11,49 +11,88 @@
     {% block mainContent %}
         <div id="post-index">
             <div id="post-index-wrapper">
-                <div id="post-index-menu">
-                    <a href="/dashboard/pages/all">All Pages ({{ stats['all'] }})</a>
-                    .
-                    <a href="/dashboard/pages/published">Published ({{ stats['published'] }})</a>
-                    .
-                    <a href="/dashboard/pages/deleted">Deleted ({{ stats['deleted'] }})</a>
+                <div id="post-index-header">
+                    <div id="post-index-header-left">
+                        {{ filter  }} Pages
+                    </div>
+                    <div id="post-index-header-right">
+                        <a href="/dashboard/pages/all" title="view all pages">
+                            <button>
+                                <svg >
+                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>		
+                                </svg>	
+                                {{ stats['all'] }}
+                            </button>   
+                        </a>
+                        <a href="/dashboard/pages/published" title="view publised pages">
+                            <button>
+                                <svg >
+                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>		
+                                </svg>	
+                                {{ stats['published'] }}
+                            </button>  
+                        </a>
+                        <a href="/dashboard/pages/deleted" title="view deleted pages">
+                            <button>
+                                <svg >
+                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-circle-with-cross"/>		
+                                </svg>	
+                                {{ stats['deleted'] }}
+                            </button>  
+                        </a>
+                    </div>
+                    
                 </div>
                 <div id="posts-list">
                     {% for page in pages %}
                         <a class="page-link" href="/dashboard/page/edit/{{ page.uuid }}">
                             <div class="page-bg" style="background: url({{ page.feature }}) no-repeat center center / cover">
-                                <div id="meta">
-                                    <span>
-                                        {{ page.updated }}
-                                    </span>
-                                    <label>
-                                        {{ page.title }}
-                                    </label>
-
-                                    {% if page.menu == 'true' %}
-                                        {% set menu = "true" %}
-                                    {% else %}
-                                        {% set menu = "false" %}
-                                    {% endif %}
-                                    {% if page.published == 'true' %}
-                                        {% set published = "true" %}
-                                    {% else %}
-                                        {% set published = "false" %}
-                                    {% endif %}
-                                    {% if page.featured == 'true' %}
-                                        {% set featured = "true" %}
-                                    {% else %}
-                                        {% set featured = "false" %}
-                                    {% endif %}
+                                <label>
+                                    {{ page.title }}
+                                </label>
+                               <div id="meta">
+                                    
                                     <div id="options">
-                                        <span class="meta-options" data-active="{{ menu }}">
-                                            Menu Item</span>
-                                        <span class="meta-options" data-active="{{ published }}">
-                                            Published</span>
-                                        <span class="meta-options" data-active="{{ featured }}">
-                                            Featured</span>
+                                        {% if page.menu == 'true' %}
+                                        {% set menu = "true" %}
+                                        {% else %}
+                                            {% set menu = "false" %}
+                                        {% endif %}
+                                        {% if page.published == 'true' %}
+                                            {% set published = "true" %}
+                                        {% else %}
+                                            {% set published = "false" %}
+                                        {% endif %}
+                                        {% if page.featured == 'true' %}
+                                            {% set featured = "true" %}
+                                        {% else %}
+                                            {% set featured = "false" %}
+                                        {% endif %}
+                                        <div id="option-left">
+                                            
+                                            <button data-active="{{ menu }}">
+                                                <svg>
+                                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>		
+                                                </svg>		
+                                            </button> 
+                                            <button data-active="{{ published }}">
+                                                <svg>
+                                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>		
+                                                </svg>		
+                                            </button> 
+                                            
+                                            <button data-active="{{ featured }}">
+                                                <svg>
+                                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>		
+                                                </svg>		
+                                            </button>
+                                        </div>
+                                        <div id="option-right">
+                                            <span>
+                                                {{ page.updated }}
+                                            </span>
+                                        </div>
                                     </div>
-                                    <span>{{ page.prettyDate }}</span>
 
                                 </div>
                             </div>
diff --git a/brain/views/dash/partials/index.twig b/brain/views/dash/partials/index.twig
index 9148370..7f26de9 100644
--- a/brain/views/dash/partials/index.twig
+++ b/brain/views/dash/partials/index.twig
@@ -1,22 +1,35 @@
 <div id="dash-recent">
     <div id="recent-list">
         <div class="recent-header">
-            <h3>Recent</h3>
-            <div class="index-menu">
-                <a href='/dashboard/pages'>View Pages</a>
-                .
-                <a href='/dashboard/page/add/new'>Create Page</a>
+            <div class="index-header-left">
+                Recent
+            </div>
+            <div class="index-header-right">
+                <a href='/dashboard/pages' title="view pages">
+                    <button>
+                        <svg class="page-link">
+                            <use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>		
+                        </svg>		
+                    </button>
+                </a>
+               
+                <a href='/dashboard/page/add/new' title="add new page">
+                    <button>
+                        <svg class="page-link">
+                            <use xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>		
+                        </svg>		
+                    </button>               
+                </a>
             </div>
         </div>
         <br/>
         {% if data["entryCount"] != 0 %}
             {% for page in data['pages'] %}
                 <a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link" style="background: url({{ page.feature }}) no-repeat center center / cover">
-                    <div>
-                        <label>
-                            {{ page.title }}
-                        </label>
-
+                    <label>
+                        {{ page.title }}
+                    </label>
+                    <div id="options">
                         {% if page.menu == 'true' %}
                             {% set menu = "true" %}
                         {% else %}
@@ -32,15 +45,30 @@
                         {% else %}
                             {% set featured = "false" %}
                         {% endif %}
-                        <div id="options">
-                            <span class="item-options" data-active="{{ menu }}">
-                                Menu Item</span>
-                            <span class="item-options" data-active="{{ published }}">
-                                Published</span>
-                            <span class="item-options" data-active="{{ featured }}">
-                                Featured</span>
+                        <div id="option-left">
+                            
+                            <button data-active="{{ menu }}">
+                                <svg>
+                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>		
+                                </svg>		
+                            </button> 
+                            <button data-active="{{ published }}">
+                                <svg>
+                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>		
+                                </svg>		
+                            </button> 
+                            
+                            <button data-active="{{ featured }}">
+                                <svg>
+                                    <use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>		
+                                </svg>		
+                            </button>
+                        </div>
+                        <div id="option-right">
+                            <span>
+                                {{ page.updated }}
+                            </span>
                         </div>
-                        <span>{{ page.updated }}</span>
 
                     </div>
                 </a>
diff --git a/brain/views/dash/partials/navigation.twig b/brain/views/dash/partials/navigation.twig
index 31a008e..24634c1 100644
--- a/brain/views/dash/partials/navigation.twig
+++ b/brain/views/dash/partials/navigation.twig
@@ -1,5 +1,23 @@
 <div id="dash-menu">
-	<a id="settings" href="/dashboard/settings" >Settings</a> .
-	<a id="navigation" href="/dashboard/navigation" >Navigation</a> .
-	<a id="navigation" href="/dashboard/logout" >Log Out</a>
+	<a id="settings" href="/dashboard/settings" title="settings">
+		<button>
+			<svg class="menu">
+				<use xlink:href="/assets/images/global/sprite.svg#entypo-sound-mix"/>		
+			</svg>		
+		</button>
+	</a> .
+	<a id="navigation" href="/dashboard/navigation" title="edit navigation">
+		<button>
+			<svg class="menu">
+				<use xlink:href="/assets/images/global/sprite.svg#entypo-list"/>		
+			</svg>		
+		</button>
+	</a> .
+	<a id="navigation" href="/dashboard/logout" title="log out">
+		<button>
+			<svg class="menu">
+				<use xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>		
+			</svg>		
+		</button>
+	</a>
 </div>
\ No newline at end of file
diff --git a/brain/views/dash/partials/options.twig b/brain/views/dash/partials/options.twig
index 7e8f257..8df7bd1 100644
--- a/brain/views/dash/partials/options.twig
+++ b/brain/views/dash/partials/options.twig
@@ -19,7 +19,7 @@
 <div id="post-options">
 <button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ menu }}" title='Pin to Menu'>
 	<svg id="option-page-icon" viewbox="0 0 20 20" class="icons">
-		<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>			
+		<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>			
 	</svg>
  </button>
  <button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'>
diff --git a/brain/views/dash/start.twig b/brain/views/dash/start.twig
index 4cce6e7..34bf020 100644
--- a/brain/views/dash/start.twig
+++ b/brain/views/dash/start.twig
@@ -5,14 +5,16 @@
 {% endblock %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adsfdfdf">
+    <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfddfdfdfd">
     {% endblock %}
 
     {% block mainContent %}
         <div id="dash-index">
             <div id="dash-index-wrapper">
                 {% if status %}
-                    {{ include("dash/partials/index.twig") }}
+                    {% apply spaceless %}
+                        {{ include("dash/partials/index.twig") }}
+                    {% endapply  %}
                 {% else %}
                     {{ include("dash/forms/login.twig") }}
                 {% endif %}
diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css
index 8e7bcd2..4d839b8 100644
--- a/public/assets/css/dash.css
+++ b/public/assets/css/dash.css
@@ -1904,8 +1904,7 @@ h3 {
 }
 
 html, body {
-  background: #1D3040;
-  background: linear-gradient(0deg, #1d3040 0%, #2d4a63 100%);
+  background: #1D3040 linear-gradient(0deg, #1d3040 0%, #2d4a63 100%) no-repeat;
   font: 400 1em Helvetica, Arial, sans-serif;
   height: 100%;
 }
@@ -1914,16 +1913,6 @@ a {
   font: 300 1em Helvetica, Arial, sans-serif;
   color: #b2cce5;
   text-decoration: underline;
-  -moz-transition: all 0.1s linear;
-  -webkit-transition: all 0.1s linear;
-  -o-transition: all 0.1s linear;
-  transition: all 0.1s linear;
-}
-a:hover {
-  background: #1D3040;
-  color: #b2cce5;
-  border-radius: 5px;
-  padding: 5px;
 }
 
 svg.icons {
@@ -2026,10 +2015,13 @@ svg.icons {
 .main-container section header {
   width: 100%;
   max-width: 900px;
-  margin: 0 auto;
+  margin: 10px auto;
+  background: #EFEBE3;
+  height: 50px;
+  border-radius: 5px;
 }
 .main-container section header #wrapper {
-  padding: 0.75rem;
+  padding: 5px;
 }
 .main-container section header #wrapper #left, .main-container section header #wrapper #right {
   width: 49.7%;
@@ -2038,27 +2030,33 @@ svg.icons {
   min-height: 60px;
 }
 .main-container section header #wrapper #left #the-logo, .main-container section header #wrapper #right #the-logo {
-  width: 40px;
+  width: 29px;
 }
 .main-container section header #wrapper #right {
   text-align: right;
   color: #EFEBE3;
 }
-.main-container section header #wrapper #right a {
-  text-decoration-color: #fc6399;
-  font-weight: 400;
-}
-.main-container section header #wrapper #right label#the-title {
-  font-size: 1.2em;
-  font-weight: 400;
-  color: #f5ab35;
-  text-decoration: none;
-  display: block;
-  line-height: 0.8;
-}
 .main-container section header #wrapper #right #dash-menu {
   text-align: right;
 }
+.main-container section header #wrapper #right #dash-menu a button {
+  border-radius: 50px;
+}
+.main-container section header #wrapper #right #dash-menu a button svg {
+  -moz-transition: all 0.1s linear;
+  -webkit-transition: all 0.1s linear;
+  -o-transition: all 0.1s linear;
+  transition: all 0.1s linear;
+  width: 40px;
+  height: 20px;
+  fill: #EFEBE3;
+}
+.main-container section header #wrapper #right #dash-menu a:hover button {
+  background: #1D3040;
+}
+.main-container section header #wrapper #right #dash-menu a:hover svg {
+  fill: #b2cce5;
+}
 
 /* Mozilla based browsers */
 ::-moz-selection {
@@ -2227,28 +2225,39 @@ svg.icons {
   margin: 0 auto;
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list {
-  padding: 0.75em;
   position: relative;
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header {
   height: 50px;
+  margin-top: 5px;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header h3 {
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-header-left {
   vertical-align: top;
   display: inline-block;
-  width: 49%;
+  width: 50%;
+  color: #EFEBE3;
+  font-size: 3em;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu {
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-header-right {
   width: 50%;
   text-align: right;
   vertical-align: top;
   display: inline-block;
-  margin: 24px 0 24px 0;
   right: 10px;
   color: #EFEBE3;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-menu a {
-  text-decoration-color: #fc6399;
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-header-right a button {
+  border-radius: 3px;
+  margin-left: 10px;
+}
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list .recent-header .index-header-right a button svg {
+  -moz-transition: all 0.1s linear;
+  -webkit-transition: all 0.1s linear;
+  -o-transition: all 0.1s linear;
+  transition: all 0.1s linear;
+  width: 40px;
+  height: 20px;
+  fill: #EFEBE3;
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link {
   font-size: 1.5em;
@@ -2269,74 +2278,84 @@ svg.icons {
   word-wrap: break-word;
   width: 100%;
   text-align: center;
+  position: relative;
+  top: 35%;
   text-shadow: 2px 2px 0 #32302f;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link span {
-  vertical-align: top;
-  margin: 0 auto;
-  width: 300px;
-  display: block;
-  font-family: "Lucida Console", Monaco, monospace;
-  font-size: 0.5em;
-  padding: 7px;
-  color: #EFEBE3;
-  text-align: center;
-  border-radius: 0 0 3px 3px;
-}
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div {
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link 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%);
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options {
-  display: block;
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left {
+  display: inline-block;
   vertical-align: top;
-  width: 300px;
+  width: 50%;
   position: relative;
-  text-align: center;
-  margin: 0 auto;
   background: none;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options {
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button {
+  border-radius: 3px;
+  background: #1D3040;
+  margin: 0 0 10px 10px;
+}
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button svg {
+  width: 40px;
+  height: 20px;
+  fill: #b2cce5;
+}
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left .item-options {
   border-radius: 3px;
   margin: 5px;
   display: inline-block;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options[data-active=false] {
-  width: 65px;
-  background: black;
-  color: #EFEBE3;
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] {
+  background: #1D3040;
 }
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div #options .item-options[data-active=true] {
-  width: 70px;
-  background: #fad396;
-  color: black;
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] svg {
+  fill: #b2cce5;
+}
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] {
+  background: #f5ab35;
+}
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] svg {
+  fill: #1D3040;
+}
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right {
+  display: inline-block;
+  width: 50%;
+  text-align: right;
+}
+#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right span {
+  font-weight: bold;
+  display: block;
+  background: #EFEBE3;
+  color: #1D3040;
+  border-radius: 3px;
+  font-size: 0.6em;
+  text-align: center;
+  position: relative;
+  padding: 5px;
+  float: right;
+  margin: 0 10px 0 0;
+  bottom: -15px;
 }
 #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a: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) {
-  width: 48.7%;
-  height: 275px;
-  margin: 0 15px 15px 0;
-}
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) {
-  width: 48.7%;
-  height: 550px;
-}
-#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(6) {
-  width: 48.7%;
-  height: 550px;
-  margin: -260px 15px 0 0;
+#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) {
+  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(7) {
-  width: 49%;
-  height: 275px;
-  margin: 15px 0 0 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) {
+  width: 48.6%;
+  height: 350px;
+  margin: 0 0 20px 10px;
 }
 
 @media only screen and (max-width: 768px) {
@@ -2699,7 +2718,7 @@ select {
 
 ::-moz-placeholder {
   /* Firefox 19+ */
-  font: 25px Helvetica, Arial, sans-serif;
+  font: 15px Helvetica, Arial, sans-serif;
   color: #EFEBE3;
 }
 
@@ -2714,26 +2733,35 @@ select {
   margin: 0 auto;
 }
 #post-index #post-index-wrapper {
-  padding: 0.75rem;
   overflow: hidden;
 }
-#post-index #post-index-wrapper #post-index-menu {
-  color: #EFEBE3;
+#post-index #post-index-wrapper #post-index-header {
+  margin: 10px 0 0 0;
 }
-#post-index #post-index-wrapper #post-index-menu a {
-  text-decoration-color: #fc6399;
+#post-index #post-index-wrapper #post-index-header #post-index-header-left {
+  text-transform: capitalize;
+  display: inline-block;
+  width: 50%;
+  color: #EFEBE3;
+  font-size: 3em;
 }
-#post-index #post-index-wrapper #post-index-menu a.add-new-post {
+#post-index #post-index-wrapper #post-index-header #post-index-header-right {
+  text-align: right;
   display: inline-block;
-  background: #fc6399;
-  border-radius: 3px;
-  padding: 3px;
+  width: 50%;
+}
+#post-index #post-index-wrapper #post-index-header #post-index-header-right a button {
   color: #EFEBE3;
-  text-align: center;
-  margin-bottom: 10px;
-  float: right;
+  border-radius: 3px;
+  margin-left: 10px;
+  width: 55px;
+}
+#post-index #post-index-wrapper #post-index-header #post-index-header-right a button svg {
+  width: 20px;
+  height: 17px;
+  fill: #EFEBE3;
 }
-#post-index #post-index-wrapper #post-index-menu .current-filter {
+#post-index #post-index-wrapper #post-index-header #post-index-header-right .current-filter {
   color: #fc6399;
   text-decoration-color: #b2cce5;
 }
@@ -2759,20 +2787,26 @@ select {
   vertical-align: top;
   width: 100%;
 }
-#post-index #post-index-wrapper #posts-list a.page-link span {
-  display: inline-block;
-  vertical-align: top;
-  font-size: 0.8em;
-  font-family: "Lucida Console", Monaco, monospace;
-  width: 50%;
-  padding: 0 0 0 10px;
-}
 #post-index #post-index-wrapper #posts-list a.page-link div.page-bg {
   width: 100%;
   height: 350px;
   background-color: #fc6399;
   position: relative;
 }
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg label {
+  font-size: 2em;
+  font-weight: 700;
+  color: #EFEBE3;
+  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 #32302f;
+}
 #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta {
   width: 100%;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
@@ -2782,44 +2816,63 @@ select {
   position: absolute;
   padding: 0 0 20px 0;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta span {
-  color: #EFEBE3;
-  text-align: center;
-  margin: 0 auto;
-  display: block;
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options {
+  width: 100%;
+  bottom: 0;
+  position: absolute;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta label {
-  font-size: 1.4em;
-  font-weight: 700;
-  color: #EFEBE3;
-  padding: 5px;
-  vertical-align: top;
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left {
   display: inline-block;
-  word-wrap: break-word;
-  width: 100%;
-  text-align: center;
-  text-shadow: 2px 2px 0 #32302f;
+  vertical-align: top;
+  width: 50%;
+  position: relative;
+  background: none;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options {
-  margin: 0 auto;
-  width: 275px;
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button {
+  border-radius: 3px;
+  background: #1D3040;
+  margin: 0 0 10px 10px;
+}
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button svg {
+  width: 40px;
+  height: 20px;
+  fill: #b2cce5;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options {
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left .item-options {
   border-radius: 3px;
   margin: 5px;
   display: inline-block;
-  text-align: center;
-  padding: 2px;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options[data-active=false] {
-  width: 70px;
-  background: black;
-  color: #EFEBE3;
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] {
+  background: #1D3040;
 }
-#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options .meta-options[data-active=true] {
-  width: 75px;
-  background: white;
-  color: black;
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] svg {
+  fill: #b2cce5;
+}
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] {
+  background: #f5ab35;
+}
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] svg {
+  fill: #1D3040;
+}
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right {
+  display: inline-block;
+  width: 50%;
+  text-align: right;
+}
+#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right span {
+  font-weight: bold;
+  display: block;
+  background: #EFEBE3;
+  color: #1D3040;
+  border-radius: 3px;
+  font-size: 0.6em;
+  text-align: center;
+  position: relative;
+  padding: 5px;
+  float: right;
+  margin: 0 10px 0 0;
+  bottom: -15px;
 }
 #post-index #post-index-wrapper #posts-list a.page-link p {
   padding: 5px 10px 5px 10px;
@@ -2863,20 +2916,20 @@ select {
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper label {
   color: #EFEBE3;
   font-size: 0.8em;
-  font-family: "Lucida Console", Monaco, monospace;
+  font-family: Helvetica, Arial, sans-serif;
   font-weight: 600;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper span {
-  color: black;
+  color: #1D3040;
   font-size: 1.5em;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-title #post_title {
-  background: #fd95ba;
+  background: #EFEBE3;
   font-family: Helvetica, Arial, sans-serif;
   width: 97.6%;
   height: 80px;
   font-size: 2em;
-  color: black;
+  color: #1D3040;
   padding: 5px;
   margin: 0 0 5px 0;
 }
@@ -2888,11 +2941,11 @@ select {
   color: #b2cce5;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post_tags {
-  background: #fd95ba;
+  background: #EFEBE3;
   font-family: Helvetica, Arial, sans-serif;
   width: 97.6%;
   height: 80px;
-  color: black;
+  color: #1D3040;
   padding: 5px;
   margin: 0 0 5px 0;
 }
@@ -2910,7 +2963,7 @@ select {
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button {
   width: 33.3%;
-  height: 39px;
+  height: 45px;
   -moz-transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -o-transition: all 0.3s linear;
@@ -2922,16 +2975,16 @@ select {
   text-align: center;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=false] {
-  background: black;
+  background: #1D3040;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=false] svg {
-  fill: #EFEBE3;
+  fill: #b2cce5;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=true] {
-  background: #f6b54d;
+  background: #f5ab35;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-options button[data-active=true] svg {
-  fill: black;
+  fill: #1D3040;
 }
 #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #featured-image-upload, #post-edit-index #post-edit-index-wrapper #post-header #post-header-wrapper #post-meta #post-image-upload {
   display: none;
diff --git a/src/styles/main/_forms.sass b/src/styles/main/_forms.sass
index 1f4bd1f..f44833c 100644
--- a/src/styles/main/_forms.sass
+++ b/src/styles/main/_forms.sass
@@ -57,7 +57,7 @@ select
 
 ::-moz-placeholder
     /* Firefox 19+ */
-    font: 25px $baseType
+    font: 15px $baseType
     color: $white
 
 :-ms-input-placeholder
diff --git a/src/styles/main/_index.sass b/src/styles/main/_index.sass
index b70c2f8..8ca6fee 100644
--- a/src/styles/main/_index.sass
+++ b/src/styles/main/_index.sass
@@ -118,28 +118,34 @@
         margin: 0 auto
 
         #recent-list
-          padding: 0.75em
+          //padding: 5px
           position: relative
 
           .recent-header
             height: 50px
-
-            h3
+            margin-top: 5px
+            .index-header-left
               vertical-align: top
               display: inline-block
-              width: 49%
-
-            .index-menu
+              width: 50%
+              color: $white
+              font-size: 3em
+            .index-header-right
               width: 50%
               text-align: right
               vertical-align: top
               display: inline-block
-              margin: 24px 0 24px 0
               right: 10px
               color: $white
-
               a
-                text-decoration-color: $highlight
+                button
+                  border-radius: 3px
+                  margin-left: 10px
+                  svg
+                    @include object-transitions(0.1s)
+                    width: 40px
+                    height: 20px
+                    fill: $white
 
           a.post-link
             font-size: 1.5em
@@ -160,22 +166,11 @@
               word-wrap: break-word
               width: 100%
               text-align: center
+              position: relative
+              top: 35%
               @include text-drop-shadow($black, 1, 2px, 2px, 0)
 
-            span
-              vertical-align: top
-              margin: 0 auto
-              width: 300px
-              display: block
-              font-family: $monoType
-              font-size: 0.5em
-              padding: 7px
-              color: $white
-              text-align: center
-              //background $primary - 60%
-              border-radius: 0 0 3px 3px 
-
-            div
+            div#options
               width: 100%
               position: absolute
               bottom: 0
@@ -183,51 +178,67 @@
               //background-opacity($black, .35)
               background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
 
-              #options
-                display: block
+              #option-left
+                display: inline-block
                 vertical-align: top
-                width: 300px
+                width: 50%
                 position: relative
-                text-align: center
-                margin: 0 auto
                 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
-                .item-options[data-active='false']
-                  width: 65px
-                  background: color.adjust($primary, $lightness: -60%)
-                  color: $white
+                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: .6em
+                  text-align: center
+                  position: relative
+                  padding: 5px
+                  float: right
+                  margin: 0 10px 0 0
+                  bottom: -15px
                   
-                .item-options[data-active='true']
-                  width: 70px
-                  background: color.adjust($tertiary, $lightness: 20%)
-                  color: color.adjust($primary, $lightness: -60%)
 
           a:nth-child(3)
             width: 100%
             margin-bottom: 20px
             height: 500px
 
-          a:nth-child(4)
-            width: 48.7%
-            height: 275px
-            margin: 0 15px 15px 0
-
-          a:nth-child(5)
-            width: 48.7%
-            height: 550px
-
-          a:nth-child(6)
-            width: 48.7%
-            height: 550px
-            margin :-260px 15px 0 0
-
-          a:nth-child(7)
-            width: 49%
-            height: 275px
-            margin: 15px 0 0 0
+          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)
diff --git a/src/styles/main/_posts.sass b/src/styles/main/_posts.sass
index 102f8bc..a987b64 100644
--- a/src/styles/main/_posts.sass
+++ b/src/styles/main/_posts.sass
@@ -4,28 +4,36 @@
     margin: 0 auto
 
     #post-index-wrapper
-        padding: 0.75rem
+        //padding: 0.75rem
         overflow: hidden
 
-        #post-index-menu
-            color: $white
-
-            a
-                text-decoration-color: $highlight
-
-            a.add-new-post
+        #post-index-header
+            margin: 10px 0 0 0
+            #post-index-header-left
+                text-transform: capitalize
                 display: inline-block
-                background: $highlight
-                border-radius: 3px
-                padding: 3px
+                width: 50%
                 color: $white
-                text-align: center
-                margin-bottom: 10px
-                float: right
-
-            .current-filter
-                color: $highlight
-                text-decoration-color: $secondary
+                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
+                        //@include object-transitions(0.1s)
+                        width: 20px
+                        height: 17px
+                        fill: $white
+    
+                .current-filter
+                    color: $highlight
+                    text-decoration-color: $secondary
 
         #posts-list
             margin: 20px 0 0 0
@@ -49,19 +57,24 @@
                     vertical-align: top
                     width: 100%
 
-                span
-                    display: inline-block
-                    vertical-align: top
-                    font-size: 0.8em
-                    font-family: $monoType
-                    width: 50%
-                    padding: 0 0 0 10px
-
                 div.page-bg
                     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%
+                      @include text-drop-shadow($black, 1, 2px, 2px, 0)
                     #meta
                         width: 100%
                         background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
@@ -70,41 +83,55 @@
                         bottom: 0
                         position: absolute
                         padding: 0 0 20px 0
-                        span
-                            color: $white
-                            text-align: center
-                            margin: 0 auto
-                            display: block
-
-                        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
-                            @include text-drop-shadow($black, 1, 2px, 2px, 0)
                         #options
-                            margin: 0 auto
-                            width: 275px
-                            .meta-options
-                                border-radius: 3px
-                                margin: 5px
+                            width: 100%
+                            bottom: 0
+                            position: absolute
+                            #option-left
                                 display: inline-block
-                                text-align: center
-                                padding: 2px 
-                            .meta-options[data-active='false']
-                                width: 70px
-                                background: color.adjust($primary, $lightness: -60%)
-                                color: $white
-                    
-                            .meta-options[data-active='true']
-                                width: 75px
-                                background: color.adjust($tertiary, $lightness: 60%)
-                                color: color.adjust($primary, $lightness: -60%)
+                                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: .6em
+                                  text-align: center
+                                  position: relative
+                                  padding: 5px
+                                  float: right
+                                  margin: 0 10px 0 0
+                                  bottom: -15px
 
                 p
                     padding: 5px 10px 5px 10px
@@ -145,20 +172,20 @@
                 label 
                     color: $white
                     font-size: 0.8em
-                    font-family: $monoType
+                    font-family: $baseType
                     font-weight: 600
                 span
-                    color: color.adjust($primary, $lightness: -60%)
+                    color: $primary
                     font-size: 1.5em
 
                 #post-title
                     #post_title
-                        background: color.adjust($highlight, $lightness: 10%)
+                        background: $white
                         font-family: $baseType
                         width: 97.6%
                         height: 80px
                         font-size: 2em
-                        color: color.adjust($primary, $lightness: -60%)
+                        color: $primary
                         padding: 5px
                         margin: 0 0 5px 0
 
@@ -172,11 +199,11 @@
 
                 #post-meta
                     #post_tags
-                        background: color.adjust($highlight, $lightness: 10%)
+                        background: $white
                         font-family: $baseType
                         width: 97.6%
                         height: 80px
-                        color: color.adjust($primary, $lightness: -60%)
+                        color: $primary
                         padding: 5px
                         margin: 0 0 5px 0
                     
@@ -194,7 +221,7 @@
 
                         button
                             width: 33.3%
-                            height: 39px
+                            height: 45px
                             @include object-transitions(0.3s)
                             margin: 0
                             border-radius: 0
@@ -203,14 +230,14 @@
                             text-align: center
 
                         button[data-active='false']
-                            background: color.adjust($primary, $lightness: -60%)
+                            background: $primary
                             svg
-                                fill: $white
+                                fill: $secondary
 
                         button[data-active='true']
-                            background: color.adjust($tertiary, $lightness: 5%)
+                            background: $tertiary
                             svg
-                                fill: color.adjust($primary, $lightness: -60%)
+                                fill: $primary
 
                     #featured-image-upload, #post-image-upload
                         display: none
diff --git a/src/styles/main/_structure.sass b/src/styles/main/_structure.sass
index 61a8e42..45350d4 100644
--- a/src/styles/main/_structure.sass
+++ b/src/styles/main/_structure.sass
@@ -1,6 +1,5 @@
 html, body
-  background: $primary
-  background: linear-gradient(0deg, rgba($primary,1) 0%, rgba(color.adjust($primary, $lightness: 10%),1) 100%)
+  background: $primary linear-gradient(0deg, rgba($primary,1) 0%, rgba(color.adjust($primary, $lightness: 10%),1) 100%) no-repeat
   font: 400 1em $baseType
   height: 100%
 
@@ -8,12 +7,7 @@ a
   font: 300 1em $baseType
   color: $secondary
   text-decoration: underline
-  @include object-transitions(0.1s)
-  &:hover
-    background: $primary
-    color: $secondary
-    border-radius: 5px
-    padding: 5px
+  //@include object-transitions(0.1s)
 
 svg.icons
   width: 25px
@@ -102,10 +96,13 @@ svg.icons
     header
       width: 100%
       max-width: 900px
-      margin: 0 auto
+      margin: 10px auto
+      background: $white
+      height: 50px
+      border-radius: 5px
 
       #wrapper
-        padding: 0.75rem
+        padding: 5px
 
         #left, #right
           width: 49.7%
@@ -114,27 +111,30 @@ svg.icons
           min-height: 60px
 
           #the-logo
-            width: 40px
+            width: 29px
 
         #right
           text-align: right
           color: $white
 
-          a
-            text-decoration-color: $highlight
-            font-weight: 400
-
-          label#the-title
-            font-size: 1.2em
-            font-weight: 400
-            color: $tertiary
-            text-decoration: none
-            display: block
-            line-height: 0.8
             // word-break: break-all;
-
           #dash-menu
             text-align: right
+            a
+              button
+                border-radius: 50px
+                svg
+                  @include object-transitions(0.1s)
+                  width: 40px
+                  height: 20px
+                  fill: $white
+              &:hover
+                button
+                  background: $primary
+                svg
+                  fill: $secondary
+              
+                
 
 /* Mozilla based browsers */
 ::-moz-selection