From 6531c9ecaf758b6585012658246e0aa7f7000d1f Mon Sep 17 00:00:00 2001
From: roberto <roberto@speedtech.it>
Date: Fri, 29 Nov 2024 17:56:53 +0100
Subject: [PATCH] CSS rework

---
 assets/static/css/main.css                    | 139 ++++++++++++++++--
 assets/static/css/orig.css                    |  54 -------
 assets/templates/base.tmpl                    |   8 +-
 assets/templates/categories/create_title.tmpl |  10 +-
 assets/templates/categories/list_title.tmpl   |  15 +-
 assets/templates/categories/update_title.tmpl |  10 +-
 assets/templates/full.tmpl                    |   2 +-
 assets/templates/items/all_list_title.tmpl    |   5 +-
 assets/templates/items/create_title.tmpl      |   5 +-
 assets/templates/items/form.tmpl              |   8 +-
 assets/templates/items/list.tmpl              |   2 +-
 assets/templates/items/list_title.tmpl        |  21 +--
 assets/templates/items/update_title.tmpl      |   5 +-
 assets/templates/items/view.tmpl              |  25 +---
 assets/templates/notebooks/create_title.tmpl  |  10 +-
 assets/templates/notebooks/list_title.tmpl    |  15 +-
 assets/templates/notebooks/update_title.tmpl  |  10 +-
 assets/templates/pages/home_title.tmpl        |  10 +-
 assets/templates/pages/login.tmpl             |  10 +-
 assets/templates/partials/sidebar.tmpl        |  10 +-
 assets/templates/types/create_title.tmpl      |  10 +-
 assets/templates/types/list_title.tmpl        |  16 +-
 assets/templates/types/update_title.tmpl      |  11 +-
 23 files changed, 209 insertions(+), 202 deletions(-)

diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index c093031..241c9fe 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -84,6 +84,19 @@ body {
   min-height: 100vh;
 }
 
+#overlay {
+  position: fixed;
+  display: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 4;
+}
+
 .modal {
   z-index: 100;
   padding-top: 100px;
@@ -373,8 +386,16 @@ input[type='text']{
   width: 100%;
 }
 
+#full-main-container:before,#full-main-container:after {
+  content: "";
+  display: table;
+  clear: both;
+  padding: 0.01em 4px;
+}
+
 #form-login-container {
   position: relative;
+  min-height: 400px;
 }
 
 #form-login {
@@ -390,10 +411,33 @@ input[type='text']{
   padding: 12px 24px !important;
 }
 
+#form-login img {
+  height: 50px;
+  padding-right: 10px;
+}
+
+#form-login h2 {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 #form-login input {
   border: 1px solid #ccc !important
 }
 
+#form-login button {
+  text-align: center;
+  display: block;
+  width: 100%;
+  color: var(--primary-color);
+  background-color: #ffffff;
+  font-weight: bold;
+  margin-top: 50px;
+  margin-bottom: 20px;
+}
+
 #main-sidebar {
   width: 300px;
   z-index: 5;
@@ -456,6 +500,7 @@ input[type='text']{
   margin-left: 8px;
   padding: 0;
   width: 100%;
+  display: block;
 }
 
 #page-title-container h5 {
@@ -464,22 +509,30 @@ input[type='text']{
 }
 
 #page-title {
-  float: left;
   padding: 4px 4px;
   font-size: 1.4rem;
 }
 
-#page-title h5 {
+#page-title-title {
   color: #ffffff;
+  float: left;
+}
+
+#top-toolbar {
+  float: right;
+}
+
+#top-toolbar .button, #top-toolbar button {
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
 #search-bar {
   float: right;
 }
 
-#search-bar button {
+#search-bar button, #search-bar .button, #top-toolbar .button {
   color: #ffffff;
-  margin-top: 2px;
 }
 
 #search-text {
@@ -489,7 +542,11 @@ input[type='text']{
 }
 
 .sidebar-block {
-  padding: 0.01em 4px;
+  padding: 4px;
+}
+
+#sidebar-search {
+  display: none;
 }
 
 .sidebar-menu a {
@@ -508,6 +565,10 @@ input[type='text']{
   margin-left: 2px !important;
 }
 
+.types_menu, .settings_menu {
+  float: right;
+}
+
 .item-card {
   position: relative;
   background-color: #ffffff;
@@ -684,9 +745,9 @@ input[type='text']{
   width: 99.99999%
 }
 
-
 .ss-main {
   padding: 3px;
+  height: 37px;
 }
 
 .ss-value {
@@ -794,8 +855,62 @@ input[type='text']{
   display: block !important
 }
 
+#footer-navbar .bar-item:first-child {
+  padding-left: 0;
+}
+
 /* Small */
 @media (max-width: 568px) {
+  .table-all.responsive table,
+  .table-all.responsive thead,
+  .table-all.responsive tbody,
+  .table-all.responsive th,
+  .table-all.responsive td,
+  .table-all.responsive tr {
+    display: block;
+  }
+
+  .table-all thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .table-all.responsive tr {
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+  }
+
+  .table-all.responsive td {
+    border: none;
+    position: relative;
+    padding-left: 30%;
+  }
+
+  .table-all.responsive td.no-label {
+    padding-left: 6px;
+  }
+
+  .table-all.responsive td.title {
+    color: #2b5797;
+    font-weight: 400;
+    font-size: 18px;
+  }
+
+  .table-all.responsive td:before {
+    position: absolute;
+    left: 6px;
+    content: attr(data-label);
+    font-weight: bold;
+  }
+
+  .table-all.responsive td.no-label:before {
+    position: absolute;
+    left: 6px;
+    content: "";
+    font-weight: bold;
+  }
+
   .hide-small {
     display: none !important
   }
@@ -831,7 +946,7 @@ input[type='text']{
 }
 
 /* Medium */
-@media (max-width: 768px) {
+@media (min-width: 768px) {
   .col.m1 {
     width: 8.33333%
   }
@@ -841,12 +956,12 @@ input[type='text']{
   }
 
   .col.m3,
-  .w3-quarter {
+  .quarter {
     width: 24.99999%
   }
 
   .col.m4,
-  .w3-third {
+  .third {
     width: 33.33333%
   }
 
@@ -855,7 +970,7 @@ input[type='text']{
   }
 
   .col.m6,
-  .w3-half {
+  .half {
     width: 49.99999%
   }
 
@@ -864,7 +979,7 @@ input[type='text']{
   }
 
   .col.m8,
-  .w3-twothird {
+  .twothird {
     width: 66.66666%
   }
 
@@ -970,4 +1085,4 @@ input[type='text']{
   #page-top-bar {
     padding-right: 300px;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/static/css/orig.css b/assets/static/css/orig.css
index 592cdb6..c20cc11 100644
--- a/assets/static/css/orig.css
+++ b/assets/static/css/orig.css
@@ -857,10 +857,6 @@ table.stickyheader.searchopened thead {
     width: 250px;
   }
 
-  #form-login {
-    width: 96%;
-  }
-
   #searchBar {
     display: none;
   }
@@ -869,56 +865,6 @@ table.stickyheader.searchopened thead {
     display: block;
   }
 
-  .w3-table-all.responsive table,
-  .w3-table-all.responsive thead,
-  .w3-table-all.responsive tbody,
-  .w3-table-all.responsive th,
-  .w3-table-all.responsive td,
-  .w3-table-all.responsive tr {
-    display: block;
-  }
-
-  .w3-table-all thead tr {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-  }
-
-  .w3-table-all.responsive tr {
-    margin-bottom: 10px;
-    border: 1px solid #ddd;
-  }
-
-  .w3-table-all.responsive td {
-    border: none;
-    position: relative;
-    padding-left: 30%;
-  }
-
-  .w3-table-all.responsive td.no-label {
-    padding-left: 6px;
-  }
-
-  .w3-table-all.responsive td.title {
-    color: #2b5797;
-    font-weight: 400;
-    font-size: 18px;
-  }
-
-  .w3-table-all.responsive td:before {
-    position: absolute;
-    left: 6px;
-    content: attr(data-label);
-    font-weight: bold;
-  }
-
-  .w3-table-all.responsive td.no-label:before {
-    position: absolute;
-    left: 6px;
-    content: "";
-    font-weight: bold;
-  }
-
   .w3-modal-full {
     width: 100vw !important;
     height: 100vh !important;
diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl
index 6a2e45b..168e852 100644
--- a/assets/templates/base.tmpl
+++ b/assets/templates/base.tmpl
@@ -23,17 +23,17 @@
     <div id="page-main">
     <div id="page-top-bar">
       <div id="page-title-container">
-        <a class="hide-large" onclick="bm_toggle_sidebar('main-sidebar'); return false" href="#" style="float: left; padding-left: 4px; padding-right: 10px;">
+        <a class="hide-large" onclick="bm_toggle_sidebar('main-sidebar'); return false" href="#" style="float: left; padding-right: 10px;">
           <img src="/static/img/brainminder.svg" alt="BrainMinder" style="height: 32px;" />
         </a>
         <div id="page-title">{{template "page:title" .}}</div>
-        <div id="search-bar">
-          <form class="hide-small" method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" style="float: left">
+        <div id="search-bar" class="hide-small">
+          <form method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" style="float: left">
           <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
           <input type="text" id="search-text" name="SearchText" class="w3-bar-item" placeholder="Search.." />
           <button type="submit"><i class="bi bi-search"></i></button>
           </form>
-          <button type="button" onclick="bm_toggle_quickbox();"><i class="bi bi-inbox-fill"></i></button>
+          <a class="button" onclick="bm_toggle_quickbox();"><i class="bi bi-inbox-fill"></i></a>
         </div>
       </div>
     </div>  
diff --git a/assets/templates/categories/create_title.tmpl b/assets/templates/categories/create_title.tmpl
index 6a09da9..6f100de 100644
--- a/assets/templates/categories/create_title.tmpl
+++ b/assets/templates/categories/create_title.tmpl
@@ -1,8 +1,6 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>New Category</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
-</div>
+    <div id="page-title-title"><h5>New Category</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{end}}
diff --git a/assets/templates/categories/list_title.tmpl b/assets/templates/categories/list_title.tmpl
index d5d89ff..1a724c1 100644
--- a/assets/templates/categories/list_title.tmpl
+++ b/assets/templates/categories/list_title.tmpl
@@ -1,14 +1,7 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>Categories</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a
-        class="w3-button w3-medium"
-        hx-get="/category/create"
-        hx-push-url="true"
-        hx-target="#page-content"
-        ><i class="bi bi-plus-square-fill"></i></a>
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
+    <div id="page-title-title"><h5>Categories</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" hx-get="/category/create" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
diff --git a/assets/templates/categories/update_title.tmpl b/assets/templates/categories/update_title.tmpl
index 14546de..e1dfad5 100644
--- a/assets/templates/categories/update_title.tmpl
+++ b/assets/templates/categories/update_title.tmpl
@@ -1,8 +1,6 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>Edit Category</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
-</div>
+    <div id="page-title-title"><h5>Edit Category</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{end}}
diff --git a/assets/templates/full.tmpl b/assets/templates/full.tmpl
index e7ea875..a14066b 100644
--- a/assets/templates/full.tmpl
+++ b/assets/templates/full.tmpl
@@ -15,7 +15,7 @@
     }}
   </head>
   <body>
-    <div class="w3-container">
+    <div id="full-main-container">
       <div id="page-content">{{template "page:content" .}}</div>
     </div>
     {{template "partial:footer" .}}
diff --git a/assets/templates/items/all_list_title.tmpl b/assets/templates/items/all_list_title.tmpl
index 67bfdc5..77f6637 100644
--- a/assets/templates/items/all_list_title.tmpl
+++ b/assets/templates/items/all_list_title.tmpl
@@ -1,3 +1,6 @@
 {{define "page:title"}}
-    <h5>All Items</h5>
+    <div id="page-title-title"><h5>All Items</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a href="#" onclick="bm_toggle_quickbox(); return false;" class="button"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{end}}
\ No newline at end of file
diff --git a/assets/templates/items/create_title.tmpl b/assets/templates/items/create_title.tmpl
index e671c2b..9477dc8 100644
--- a/assets/templates/items/create_title.tmpl
+++ b/assets/templates/items/create_title.tmpl
@@ -1,3 +1,6 @@
 {{define "page:title"}}
-    <h5>New {{ .type.Title}}</h5>
+    <div id="page-title-title"><h5>New {{ .type.Title}}</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a href="#" onclick="bm_toggle_quickbox(); return false;" class="button"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{end}}
\ No newline at end of file
diff --git a/assets/templates/items/form.tmpl b/assets/templates/items/form.tmpl
index 4bf0d92..e880acf 100644
--- a/assets/templates/items/form.tmpl
+++ b/assets/templates/items/form.tmpl
@@ -17,7 +17,7 @@
 
   <div id="general" class="tab" style="display: block">
     <div class="row">
-      <div class="col half">
+      <div class="col m6 s12">
         <p>
           <label for="item-title">Title</label>
           <input name="Title" id="item-title" type="text" value="{{.item.Title}}" />
@@ -26,7 +26,7 @@
           {{ widget_select "Type_id" "Type" .item.Type_id .types `style="width: 100%"` }}
         </p>
       </div>
-      <div class="col half">
+      <div class="col m6 s12">
         <p>
           {{ widget_checkboxes "Notebooks" "Notebooks" .item.Notebooks .notebooks `` }}
         </p>
@@ -51,13 +51,13 @@
     </p>
     {{ end }}
     <div class="row">
-      <div class="col half">
+      <div class="col m6 s12">
         <p>
           <label for="item-tags">Tags</label>
           <input name="Tags" id="item-tags" type="text" value="{{.item.Tags}}" />
         </p>   
       </div>
-      <div class="col half">
+      <div class="col m6 s12">
         <p>
           {{ widget_slim_select "Categories" "Categories" .item.Categories .categories `multiple="true"` }}
         </p>
diff --git a/assets/templates/items/list.tmpl b/assets/templates/items/list.tmpl
index 6953706..7b1ab0f 100644
--- a/assets/templates/items/list.tmpl
+++ b/assets/templates/items/list.tmpl
@@ -52,7 +52,7 @@
   </div>
 </div>
 <div id="items" class="list">
-  <table class="table-all responsive w3-striped stickyheader">
+  <table class="table-all responsive striped stickyheader">
     <thead>
       <tr>
         <th>Title</th>
diff --git a/assets/templates/items/list_title.tmpl b/assets/templates/items/list_title.tmpl
index 4fc4406..89bbad0 100644
--- a/assets/templates/items/list_title.tmpl
+++ b/assets/templates/items/list_title.tmpl
@@ -1,19 +1,8 @@
 {{define "page:title"}}
-    <div class="w3-left">
-        <h5>{{.type.Title}} Items</h5>
-    </div>
-    <div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-        <a
-        class="w3-button w3-medium w3-round-large"
-        href="#"
-        onclick="bm_toggle_visibility('items_search'); return false;"
-        ><i class="bi bi-search"></i></a>
-    <a
-        class="w3-button w3-medium w3-round-large"
-        hx-get="/item/create/{{.type.Id}}"
-        hx-push-url="true"
-        hx-target="#page-content"
-        ><i class="bi bi-plus-square-fill"></i></a>
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
+    <div id="page-title-title"><h5>{{.type.Title}} Items</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" href="#" onclick="bm_toggle_visibility('items_search'); return false;" ><i class="bi bi-search"></i></a>
+        <a class="button" hx-get="/item/create/{{.type.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
\ No newline at end of file
diff --git a/assets/templates/items/update_title.tmpl b/assets/templates/items/update_title.tmpl
index b731aa9..5d809cb 100644
--- a/assets/templates/items/update_title.tmpl
+++ b/assets/templates/items/update_title.tmpl
@@ -1,3 +1,6 @@
 {{define "page:title"}}
-    <h5>Edit {{.item.Type_title}}</h5>
+    <div id="page-title-title"> <h5>Edit {{.item.Type_title}}</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{end}}
\ No newline at end of file
diff --git a/assets/templates/items/view.tmpl b/assets/templates/items/view.tmpl
index 2c7c0ef..1ad56c0 100644
--- a/assets/templates/items/view.tmpl
+++ b/assets/templates/items/view.tmpl
@@ -33,13 +33,7 @@
             {{ range (stringToArray .item.Categories "|")}}
             {{ $category_name := index $.categoriesMap .}}
             <div class="tag" style="padding: 3px">
-              <a
-                hx-post="/items"
-                hx-target="#page-content"
-                hx-push-url="true"
-                href="#"
-                hx-vals="{category_id&quot; : &quot;{{ . }}&quot;}">{{ $category_name }}</a
-              >
+              <a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{category_id&quot; : &quot;{{ . }}&quot;}">{{ $category_name }}</a>
             </div>
             {{ end }}
           </div>
@@ -47,14 +41,7 @@
             {{ if gt (len .item.Tags) 0 }}
             <strong>Tags</strong> {{ range (stringToArray .item.Tags ",")}}
             <div class="tag" style="padding: 3px">
-            <a
-              hx-post="/items"
-              hx-target="#page-content"
-              hx-push-url="true"
-              href="#"
-              hx-vals="{Tags&quot; : &quot;{{.}}&quot;}"
-              >{{ . }}</a
-            >
+            <a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
             </div>
             {{ end }}
             {{ end }}
@@ -62,13 +49,7 @@
         </div>
     
         <div class="row" style="margin-bottom: 20px">
-        <a
-          class="button main"
-          hx-get="/item/update/{{.item.Id}}"
-          hx-push-url="true"
-          hx-target="#page-content"
-          _="on click remove #modal"
-          href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i> Edit</a>
+        <a class="button main" hx-get="/item/update/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"_="on click remove #modal" href="/item/update/{{.item.Id}}"><i class="bi bi-pencil"></i> Edit</a>
         </div>
       </div>
     </div>
diff --git a/assets/templates/notebooks/create_title.tmpl b/assets/templates/notebooks/create_title.tmpl
index 917b41a..96990ff 100644
--- a/assets/templates/notebooks/create_title.tmpl
+++ b/assets/templates/notebooks/create_title.tmpl
@@ -1,8 +1,6 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>New Notebook</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
-</div>
+    <div id="page-title-title"><h5>New Notebook</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{end}}
diff --git a/assets/templates/notebooks/list_title.tmpl b/assets/templates/notebooks/list_title.tmpl
index 00b1e09..e2a295f 100644
--- a/assets/templates/notebooks/list_title.tmpl
+++ b/assets/templates/notebooks/list_title.tmpl
@@ -1,14 +1,7 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>Notebooks</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a
-        class="w3-button w3-medium"
-        hx-get="/notebook/create"
-        hx-push-url="true"
-        hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
+    <div id="page-title-title"><h5>Notebooks</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" hx-get="/notebook/create" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
-
 {{end}}
diff --git a/assets/templates/notebooks/update_title.tmpl b/assets/templates/notebooks/update_title.tmpl
index 506221d..b749407 100644
--- a/assets/templates/notebooks/update_title.tmpl
+++ b/assets/templates/notebooks/update_title.tmpl
@@ -1,8 +1,6 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>Edit Notebook</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
-</div>
+    <div id="page-title-title"><h5>Edit Notebook</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{end}}
diff --git a/assets/templates/pages/home_title.tmpl b/assets/templates/pages/home_title.tmpl
index b8e5604..4667ffe 100644
--- a/assets/templates/pages/home_title.tmpl
+++ b/assets/templates/pages/home_title.tmpl
@@ -1,8 +1,6 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>Dashboard</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
-</div>
+    <div id="page-title-title"><h5>Dashboard</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a href="#" onclick="bm_toggle_quickbox(); return false;" class="button"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{ end }}
diff --git a/assets/templates/pages/login.tmpl b/assets/templates/pages/login.tmpl
index c12efe4..e312220 100644
--- a/assets/templates/pages/login.tmpl
+++ b/assets/templates/pages/login.tmpl
@@ -2,20 +2,20 @@
 
 {{define "page:content"}}
 
-<div id="form-login-container" style="min-height: 400px;">
+<div id="form-login-container">
   <div id="form-login">
-    <h2 class="w3-center"><img src="/static/img/brainminder.svg" style="height: 50px; padding-right: 10px;" /><span style="font-weight: bold;">B</span>rain<span style="font-weight: bold;">M</span>inder</h2>
+    <h2><img src="/static/img/brainminder.svg" /><span style="font-weight: bold;">B</span>rain<span style="font-weight: bold;">M</span>inder</h2>
     <form method="POST" action="/login">
       <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
       <p>
-        <label for="email">Email:</label>
+        <label for="email">Email</label>
         <input id="email" type="email" name="Email" value="{{.Form.Email}}" />
       </p>
       <p>
-        <label for="password">Password:</label>
+        <label for="password">Password</label>
         <input id="password" type="password" name="Password" />
       </p>
-      <button class="w3-block w3-btn w3-metro-light-blue w3-round-medium" style="margin-top: 50px; margin-bottom: 20px;"><i class='bi bi-lock'></i> Login</button>
+      <button><i class='bi bi-lock'></i> Login</button>
     </form>
   </div>
 </div>
diff --git a/assets/templates/partials/sidebar.tmpl b/assets/templates/partials/sidebar.tmpl
index 85ac623..2e97e60 100644
--- a/assets/templates/partials/sidebar.tmpl
+++ b/assets/templates/partials/sidebar.tmpl
@@ -4,16 +4,20 @@
 <div id="app-title">
   <a class="hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;">
     <img src="/static/img/brainminder.svg" alt="BrainMinder" />
+  </a>
+  <a class="hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;">
     <span>BrainMinder</span>
   </a>
   <a class="hide-small hide-medium" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content">
     <img src="/static/img/brainminder.svg" alt="BrainMinder" />
+  </a>
+  <a class="hide-small hide-medium" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content">
     <span>BrainMinder</span>
   </a>
 </div>
 
 <div id="main-sidebar-content">
-  <div class="w3-bar-block w3-container" id="searchSidebar">
+  <div class="w3-bar-block w3-container" id="sidebar-search">
     <form method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" hx-on:submit="bm_sidebar_click('main-sidebar')">
       <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
       <div class="row">
@@ -45,7 +49,7 @@
 
   <div class="sidebar-block">
     <h5 class="accordion" onclick="bm_toggle_visibility('types_menu')">
-      <i class="bi bi-list-task"></i> Items <i class='w3-right bi bi-chevron-down types_menu'></i><i class='w3-right bi bi-chevron-up hidden types_menu'></i>
+      <i class="bi bi-list-task"></i> Items <i class='bi bi-chevron-down types_menu'></i><i class='w3-right bi bi-chevron-up hidden types_menu'></i>
     </h5>
   </div>
 
@@ -62,7 +66,7 @@
   
   <div class="sidebar-block">
     <h5 class="accordion" onclick="bm_toggle_visibility('settings_menu')">
-      <i class="bi bi-gear-fill"></i> Settings <i class='w3-right bi bi-chevron-down settings_menu'></i><i class='w3-right bi bi-chevron-up hidden settings_menu'></i>
+      <i class="bi bi-gear-fill"></i> Settings <i class='bi bi-chevron-down settings_menu'></i><i class='w3-right bi bi-chevron-up hidden settings_menu'></i>
     </h5>
   </div>
 
diff --git a/assets/templates/types/create_title.tmpl b/assets/templates/types/create_title.tmpl
index 6264152..996c466 100644
--- a/assets/templates/types/create_title.tmpl
+++ b/assets/templates/types/create_title.tmpl
@@ -1,8 +1,6 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>New Type</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
-</div>
+    <div id="page-title-title"><h5>New Type</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{end}}
diff --git a/assets/templates/types/list_title.tmpl b/assets/templates/types/list_title.tmpl
index c618db2..c64cba4 100644
--- a/assets/templates/types/list_title.tmpl
+++ b/assets/templates/types/list_title.tmpl
@@ -1,15 +1,7 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>Types</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a
-        class="w3-button w3-medium"
-        hx-get="/type/create"
-        hx-push-url="true"
-        hx-target="#page-content"
-        ><i class="bi bi-plus-square-fill"></i
-    ></a>
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
+    <div id="page-title-title"><h5>Types</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" hx-get="/type/create" hx-push-url="true" hx-target="#page-content"><i class="bi bi-plus-square-fill"></i></a>
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
     </div>
 {{end}}
diff --git a/assets/templates/types/update_title.tmpl b/assets/templates/types/update_title.tmpl
index e885ec4..8c281d9 100644
--- a/assets/templates/types/update_title.tmpl
+++ b/assets/templates/types/update_title.tmpl
@@ -1,9 +1,6 @@
 {{define "page:title"}}
-<div class="w3-left">
-    <h5>Edit Type</h5>
-</div>
-<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
-    <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
-</div>
-
+    <div id="page-title-title"><h5>Edit Type</h5></div>
+    <div class="hide-medium hide-large" id="top-toolbar">
+        <a class="button" href="#" onclick="bm_toggle_quickbox(); return false;"><i class='bi bi-inbox-fill'></i></a>
+    </div>
 {{end}}