From 4c906261e4d77aa709e5dc66c9b6886120006ce2 Mon Sep 17 00:00:00 2001
From: roberto <roberto@speedtech.it>
Date: Thu, 21 Nov 2024 18:14:12 +0100
Subject: [PATCH] CSS rework

---
 assets/static/css/main.css             | 297 ++++++++++++++++++++++++-
 assets/static/css/orig.css             | 263 ----------------------
 assets/static/js/serviceWorker.js      |   2 +-
 assets/templates/base.tmpl             |  13 +-
 assets/templates/full.tmpl             |   1 -
 assets/templates/items/form.tmpl       |  50 ++---
 assets/templates/items/read.tmpl       |  10 +-
 assets/templates/items/view.tmpl       |  14 +-
 assets/templates/pages/home.tmpl       |   2 +-
 assets/templates/pages/home_items.tmpl |  10 +-
 10 files changed, 343 insertions(+), 319 deletions(-)

diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index 3ea432d..c093031 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -84,6 +84,34 @@ body {
   min-height: 100vh;
 }
 
+.modal {
+  z-index: 100;
+  padding-top: 100px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+  display: block;
+}
+
+.modal-content {
+  margin: auto;
+  background-color: #fff;
+  position: relative;
+  padding: 0;
+  outline: 0;
+  width: 600px;
+  color: rgb(84, 84, 84);
+}
+
+.modal-content h5 {
+  font-weight: 600 !important;
+}
+
 .display-topleft {
   position: absolute;
   left: 0;
@@ -179,7 +207,7 @@ ul li:last-child {
   border-bottom: none
 }
 
-.row:after {
+.row:after, .row:before {
   content:"";
   display:table;
   clear:both
@@ -230,6 +258,21 @@ button {
   padding: 10px 18px;
 }
 
+button.main, .button.main {
+  background-color: var(--primary-color);
+  color: #ffffff;
+}
+
+button.secondary, .button.secondary {
+  background-color: #4d4d4d;
+  color: #ffffff;
+}
+
+button.delete, .button.delete {
+  background-color: #aa2222;
+  color: #ffffff;
+}
+
 fieldset {
   border-radius: 8px;
 }
@@ -258,6 +301,11 @@ input[type='radio'] {
   accent-color: var(--primary-color);
 }
 
+input[type='text']{
+  height: 37px;
+  padding: 3px;
+}
+
 .label-checkbox {
   top: 4px;
   position: relative;
@@ -460,6 +508,15 @@ input[type='radio'] {
   margin-left: 2px !important;
 }
 
+.item-card {
+  position: relative;
+  background-color: #ffffff;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  padding: 10px;
+  margin: 10px;
+}
+
 .menu-item-title:hover, #settings_menu a:hover{
   border-radius: 8px;
   background-color: var(--primary-color);
@@ -471,7 +528,7 @@ input[type='radio'] {
 }
 
 #page-content {
-    padding-top: 4px;
+    padding-top: 60px;
     padding-left: 4px;
     padding-right: 4px;
 }
@@ -505,6 +562,7 @@ input[type='radio'] {
   border-right: 1px solid #ccc !important;
   border-left: 1px solid #ccc !important;
   border-top: 1px solid #ccc !important;
+  font-weight: bold;
 }
 
 .tab-button.active,
@@ -530,6 +588,103 @@ input[type='radio'] {
   font-size: 1rem;
 }
 
+.bar {
+  width: 100%;
+  overflow: hidden
+}
+
+.center .bar {
+  display: inline-block;
+  width: auto
+}
+
+.bar .bar-item {
+  padding: 6px 16px;
+  float: left;
+  width: auto;
+  border: none;
+  display: block;
+  outline: 0
+}
+
+.bar .button {
+  white-space: normal
+}
+
+.bar-block .bar-item {
+  width: 100%;
+  display: block;
+  padding: 8px 16px;
+  text-align: left;
+  border: none;
+  white-space: normal;
+  float: none;
+  outline: 0
+}
+
+.bar-block.center .bar-item {
+  text-align: center
+}
+
+.col,
+.half,
+.third,
+.twothird,
+.threequarter,
+.quarter {
+  float: left;
+  width: 100%
+}
+
+.col.s1 {
+  width: 8.33333%
+}
+
+.col.s2 {
+  width: 16.66666%
+}
+
+.col.s3 {
+  width: 24.99999%
+}
+
+.col.s4 {
+  width: 33.33333%
+}
+
+.col.s5 {
+  width: 41.66666%
+}
+
+.col.s6 {
+  width: 49.99999%
+}
+
+.col.s7 {
+  width: 58.33333%
+}
+
+.col.s8 {
+  width: 66.66666%
+}
+
+.col.s9 {
+  width: 74.99999%
+}
+
+.col.s10 {
+  width: 83.33333%
+}
+
+.col.s11 {
+  width: 91.66666%
+}
+
+.col.s12 {
+  width: 99.99999%
+}
+
+
 .ss-main {
   padding: 3px;
 }
@@ -646,9 +801,95 @@ input[type='radio'] {
   }
 }
 
+/* Min medium */
+@media (min-width:601px) {
+  .home-card-summary {
+    height: 250px;
+    overflow: auto;
+  }
+
+  #quickbox {
+    width: 400px;
+    position: fixed;
+    top: 50px;
+    left: calc(100vw - 420px);
+    height: calc(100vh - 50px);
+    background-color: #fff !important;
+    border-left: 2px solid #fff;
+    border-top: 2px solid #fff;
+  }
+  #quickbox-top-bar {
+    position: relative;
+  }
+  #quickbox-footer {
+    position: relative;
+  }
+
+  #quickbox-content {
+    height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-footer-height) - 42px);
+  }
+}
+
 /* Medium */
 @media (max-width: 768px) {
+  .col.m1 {
+    width: 8.33333%
+  }
 
+  .col.m2 {
+    width: 16.66666%
+  }
+
+  .col.m3,
+  .w3-quarter {
+    width: 24.99999%
+  }
+
+  .col.m4,
+  .w3-third {
+    width: 33.33333%
+  }
+
+  .col.m5 {
+    width: 41.66666%
+  }
+
+  .col.m6,
+  .w3-half {
+    width: 49.99999%
+  }
+
+  .col.m7 {
+    width: 58.33333%
+  }
+
+  .col.m8,
+  .w3-twothird {
+    width: 66.66666%
+  }
+
+  .col.m9,
+  .w3-threequarter {
+    width: 74.99999%
+  }
+
+  .col.m10 {
+    width: 83.33333%
+  }
+
+  .col.m11 {
+    width: 91.66666%
+  }
+
+  .col.m12 {
+    width: 99.99999%
+  }
+}
+
+@media (min-width:60px) {
+  .col.half {
+    width: 49.99999%;
+  }
 }
 
 @media (max-width:993px) and (min-width:768px) {
@@ -658,6 +899,54 @@ input[type='radio'] {
 }
 
 @media (min-width:993px) {
+  .col.l1 {
+    width: 8.33333%
+  }
+
+  .col.l2 {
+    width: 16.66666%
+  }
+
+  .col.l3 {
+    width: 24.99999%
+  }
+
+  .col.l4 {
+    width: 33.33333%
+  }
+
+  .col.l5 {
+    width: 41.66666%
+  }
+
+  .col.l6 {
+    width: 49.99999%
+  }
+
+  .col.l7 {
+    width: 58.33333%
+  }
+
+  .col.l8 {
+    width: 66.66666%
+  }
+
+  .col.l9 {
+    width: 74.99999%
+  }
+
+  .col.l10 {
+    width: 83.33333%
+  }
+
+  .col.l11 {
+    width: 91.66666%
+  }
+
+  .col.l12 {
+    width: 99.99999%
+  }
+  
   .hide-large {
     display: none !important
   }
@@ -666,11 +955,11 @@ input[type='radio'] {
     display: block !important;
   }
 
-  .w3-row > .w3-half:first {
+  .row > .w3-half:first {
     padding-right: 4px;
   }
 
-  .w3-row > .w3-half:nth-child(2) {
+  .row > .w3-half:nth-child(2) {
     padding-left: 4px;
   }
 
diff --git a/assets/static/css/orig.css b/assets/static/css/orig.css
index 7a3237e..592cdb6 100644
--- a/assets/static/css/orig.css
+++ b/assets/static/css/orig.css
@@ -72,78 +72,6 @@
   transition: margin-left .4s
 }
 
-.w3-modal {
-  z-index: 100;
-  padding-top: 100px;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: rgb(0, 0, 0);
-  background-color: rgba(0, 0, 0, 0.4);
-  display: block;
-}
-
-.w3-modal-content {
-  margin: auto;
-  background-color: #fff;
-  position: relative;
-  padding: 0;
-  outline: 0;
-  width: 600px;
-  color: rgb(84, 84, 84);
-}
-
-.w3-modal-content h5 {
-  font-weight: 600 !important;
-}
-
-.w3-bar {
-  width: 100%;
-  overflow: hidden
-}
-
-.w3-center .w3-bar {
-  display: inline-block;
-  width: auto
-}
-
-.w3-bar .w3-bar-item {
-  padding: 6px 16px;
-  float: left;
-  width: auto;
-  border: none;
-  display: block;
-  outline: 0
-}
-
-.w3-bar .w3-dropdown-hover,
-.w3-bar .w3-dropdown-click {
-  position: static;
-  float: left
-}
-
-.w3-bar .w3-button {
-  white-space: normal
-}
-
-.w3-bar-block .w3-bar-item {
-  width: 100%;
-  display: block;
-  padding: 8px 16px;
-  text-align: left;
-  border: none;
-  white-space: normal;
-  float: none;
-  outline: 0
-}
-
-.w3-bar-block.w3-center .w3-bar-item {
-  text-align: center
-}
-
 .w3-block {
   display: block;
   width: 100%
@@ -173,169 +101,6 @@
   clear: both
 }
 
-.w3-col,
-.w3-half,
-.w3-third,
-.w3-twothird,
-.w3-threequarter,
-.w3-quarter {
-  float: left;
-  width: 100%
-}
-
-.w3-col.s1 {
-  width: 8.33333%
-}
-
-.w3-col.s2 {
-  width: 16.66666%
-}
-
-.w3-col.s3 {
-  width: 24.99999%
-}
-
-.w3-col.s4 {
-  width: 33.33333%
-}
-
-.w3-col.s5 {
-  width: 41.66666%
-}
-
-.w3-col.s6 {
-  width: 49.99999%
-}
-
-.w3-col.s7 {
-  width: 58.33333%
-}
-
-.w3-col.s8 {
-  width: 66.66666%
-}
-
-.w3-col.s9 {
-  width: 74.99999%
-}
-
-.w3-col.s10 {
-  width: 83.33333%
-}
-
-.w3-col.s11 {
-  width: 91.66666%
-}
-
-.w3-col.s12 {
-  width: 99.99999%
-}
-
-@media (min-width:601px) {
-  .w3-col.m1 {
-    width: 8.33333%
-  }
-
-  .w3-col.m2 {
-    width: 16.66666%
-  }
-
-  .w3-col.m3,
-  .w3-quarter {
-    width: 24.99999%
-  }
-
-  .w3-col.m4,
-  .w3-third {
-    width: 33.33333%
-  }
-
-  .w3-col.m5 {
-    width: 41.66666%
-  }
-
-  .w3-col.m6,
-  .w3-half {
-    width: 49.99999%
-  }
-
-  .w3-col.m7 {
-    width: 58.33333%
-  }
-
-  .w3-col.m8,
-  .w3-twothird {
-    width: 66.66666%
-  }
-
-  .w3-col.m9,
-  .w3-threequarter {
-    width: 74.99999%
-  }
-
-  .w3-col.m10 {
-    width: 83.33333%
-  }
-
-  .w3-col.m11 {
-    width: 91.66666%
-  }
-
-  .w3-col.m12 {
-    width: 99.99999%
-  }
-}
-
-@media (min-width:993px) {
-  .w3-col.l1 {
-    width: 8.33333%
-  }
-
-  .w3-col.l2 {
-    width: 16.66666%
-  }
-
-  .w3-col.l3 {
-    width: 24.99999%
-  }
-
-  .w3-col.l4 {
-    width: 33.33333%
-  }
-
-  .w3-col.l5 {
-    width: 41.66666%
-  }
-
-  .w3-col.l6 {
-    width: 49.99999%
-  }
-
-  .w3-col.l7 {
-    width: 58.33333%
-  }
-
-  .w3-col.l8 {
-    width: 66.66666%
-  }
-
-  .w3-col.l9 {
-    width: 74.99999%
-  }
-
-  .w3-col.l10 {
-    width: 83.33333%
-  }
-
-  .w3-col.l11 {
-    width: 91.66666%
-  }
-
-  .w3-col.l12 {
-    width: 99.99999%
-  }
-}
-
 .w3-rest {
   overflow: hidden
 }
@@ -1238,33 +1003,5 @@ table.stickyheader.searchopened thead {
   }
 }
 
-/* Min medium */
-@media (min-width:601px) {
-  .home-card-summary {
-    height: 250px;
-    overflow: auto;
-  }  
 
-  #quickbox {
-    width: 400px;
-    position: fixed;
-    top: 50px;
-    left: calc(100vw - 420px);
-    height: calc(100vh - 50px);
-    background-color: #fff !important;
-    border-left: 2px solid #fff;
-    border-top: 2px solid #fff;
-  }
-  #quickbox-top-bar {
-    position: relative;
-  }
-  #quickbox-footer {
-    position: relative;
-  }
-
-  #quickbox-content {
-    height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-footer-height) - 42px);
-  }
-
-}
 
diff --git a/assets/static/js/serviceWorker.js b/assets/static/js/serviceWorker.js
index b66580f..6213938 100644
--- a/assets/static/js/serviceWorker.js
+++ b/assets/static/js/serviceWorker.js
@@ -1,4 +1,4 @@
-const cacheVersion = "0.281"
+const cacheVersion = "0.282"
 const cacheName = "speedtech-brainminder"
 const cacheFiles = [
     '/static/bootstrap-icons/font/bootstrap-icons.min.css',
diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl
index 787a00e..6a2e45b 100644
--- a/assets/templates/base.tmpl
+++ b/assets/templates/base.tmpl
@@ -9,7 +9,6 @@
     <link rel="stylesheet" href="/static/easymde/easymde.min.css" />
     <link rel="stylesheet" href="/static/css/slimselect.css" />
     <link rel="stylesheet" href="/static/css/main.css" />
-    <link rel="stylesheet" href="/static/css/orig.css" />
     <link rel="icon" type="image/svg+xml" href="/static/img/brainminder-icon.svg">
     
     {{block "page:meta" . }}
@@ -49,8 +48,8 @@
     <div id="modal-container"></div>
     <div id="overlay" onclick="bm_overlay_off('main-sidebar')"></div>
 
-    <div id="modal-confirm-dialog" class="w3-modal" style="display: none;">
-      <div id="modal-confirm-dialog-content" class="w3-modal-content w3-round-large w3-padding w3-animate-top">
+    <div id="modal-confirm-dialog" class="modal" style="display: none;">
+      <div id="modal-confirm-dialog-content" class="modal-content w3-round-large w3-padding w3-animate-top">
           <header class="w3-container">
               <span _="on click hide #modal-confirm-dialog" class="w3-button w3-small w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 8px; padding: 8px;"><i class='bi bi-x-circle-fill'></i></span>
               <h5></h5>
@@ -88,11 +87,11 @@
         <div id="quickbox-notes"></div>
       </div>
 
-      <div id="quickbox-footer" class="w3-bar">
+      <div id="quickbox-footer" class="bar">
         <form method="POST">
-            <div class="w3-row">
-              <div class="w3-col w3-right button"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend" class="w3-bar-item w3-right w3-round-large" id="quickbox-send"><i class='bi bi-caret-right-square-fill' style="margin-top: 4px;"></i></button></div>
-              <div class="w3-rest textarea"><textarea required class=" w3-border w3-round-large" id="quickbox-note" style="resize: none;" name="Note"></textarea></div>
+            <div class="row">
+              <div class="col w3-right button"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend" class="bar-item w3-right w3-round-large" id="quickbox-send"><i class='bi bi-caret-right-square-fill' style="margin-top: 4px;"></i></button></div>
+              <div class="rest textarea"><textarea required class=" w3-border w3-round-large" id="quickbox-note" style="resize: none;" name="Note"></textarea></div>
             </div>
         </form>
       </div>
diff --git a/assets/templates/full.tmpl b/assets/templates/full.tmpl
index 3630293..e7ea875 100644
--- a/assets/templates/full.tmpl
+++ b/assets/templates/full.tmpl
@@ -7,7 +7,6 @@
     <link rel="manifest" href="/static/manifest.json">
     <link rel="stylesheet" href="/static/bootstrap-icons/font/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/static/css/main.css" />
-    <link rel="stylesheet" href="/static/css/orig.css" />
     <link rel="icon" type="image/x-icon" href="/static/img/brainminder-icon.svg">
 
     {{block "page:meta" . }}
diff --git a/assets/templates/items/form.tmpl b/assets/templates/items/form.tmpl
index 221d399..4bf0d92 100644
--- a/assets/templates/items/form.tmpl
+++ b/assets/templates/items/form.tmpl
@@ -16,8 +16,8 @@
   </div>
 
   <div id="general" class="tab" style="display: block">
-    <div class="w3-row">
-      <div class="w3-half">
+    <div class="row">
+      <div class="col half">
         <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="w3-half">
+      <div class="col half">
         <p>
           {{ widget_checkboxes "Notebooks" "Notebooks" .item.Notebooks .notebooks `` }}
         </p>
@@ -50,14 +50,14 @@
       <textarea name="Description" class=" w3-border" id="item-description" rows="10">{{.item.Description}}</textarea>
     </p>
     {{ end }}
-    <div class="w3-row">
-      <div class="w3-half">
+    <div class="row">
+      <div class="col half">
         <p>
           <label for="item-tags">Tags</label>
           <input name="Tags" id="item-tags" type="text" value="{{.item.Tags}}" />
         </p>   
       </div>
-      <div class="w3-half">
+      <div class="col half">
         <p>
           {{ widget_slim_select "Categories" "Categories" .item.Categories .categories `multiple="true"` }}
         </p>
@@ -90,13 +90,13 @@
      </fieldset>
     <fieldset class="w3-round-medium" style="margin-top: 8px;">
       <legend>Add items</legend>
-      <div class="w3-row">
-          <div class="w3-col l6 m9 s10">
+      <div class="row">
+          <div class="col l6 m9 s10">
             <input id="search-item-relation" name="SearchText" type="text" value="" placeholder="Search" hx-get="/items/search-for-relations/{{.item.Id}}" hx-trigger="search-item-relation, keyup changed delay:1s" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations"
             />
           </div>
-          <div class="w3-col l6 m3 s1" style="padding-left: 10px;">  
-            <a class="button w3-metro-blue" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations" hx-get="/items/search-for-relations/{{.item.Id}}"><i class="bi bi-search"></i><span class="hide-small"> Find</span></a>
+          <div class="col l6 m3 s1" style="padding-left: 10px;">
+            <a class="button main" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations" hx-get="/items/search-for-relations/{{.item.Id}}"><i class="bi bi-search"></i><span class="hide-small"> Find</span></a>
             </div>
       </div>
       <div id="items-list-for-relations" style="margin-top:10px">
@@ -105,34 +105,34 @@
   </div>
 </div>
   <p class="hide-small w3-container">
-    <button class="w3-metro-dark-blue">
+    <button class="main">
       <i class="bi bi-floppy"></i> Save
     </button>
     {{ if not (eq .item.Id 0) }}
-    <a class="button w3-metro-blue" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i> View</a>
-    <a class="button w3-metro-blue w3-delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"><i class="bi bi-trash"></i> Delete</a>
-    <a class="button w3-metro-blue" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i> Share</a>
+    <a class="button secondary" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i> View</a>
+    <a class="button delete" hx-delete="/item/delete/{{.item.Id}}" hx-target="#page-content" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"><i class="bi bi-trash"></i> Delete</a>
+    <a class="button secondary" href="#" hx-target="#modal-container" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i> Share</a>
     {{ end }}
-    <a class="button w3-metro-blue" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i> Back</a>
+    <a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i> Back</a>
   </p>
 
-  <div class="footerNavbar-container">
-  <div class="w3-bar footerNavbar hide-medium hide-large">
-    <div class="w3-bar-item">
-    <button type="submit" class="w3-metro-dark-blue" title="Save">
+  <div id="footer-navbar-container">
+  <div id="footer-navbar" class="bar hide-medium hide-large">
+    <div class="bar-item">
+    <button type="submit" class="main" title="Save">
       <i class="bi bi-floppy"></i>
     </button>
     </div>
     {{ if not (eq .item.Id 0) }}
-    <div class="w3-bar-item">
-      <a class="button w3-metro-dark-blue w3-delete" hx-delete="/item/delete/{{.item.Id}}"  hx-target="#page-content"  hx-trigger="confirmed"  onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"  title="Delete"><i class="bi bi-trash"></i>
+    <div class="bar-item">
+      <a class="button delete" hx-delete="/item/delete/{{.item.Id}}"  hx-target="#page-content"  hx-trigger="confirmed"  onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"  title="Delete"><i class="bi bi-trash"></i>
   </a>
     </div>
-    <div class="w3-bar-item">
-      <a class="button w3-metro-dark-blue" href="#"  hx-target="#modal-container"  hx-get="/item/share/{{.item.Id}}"  title="Share"><i class="bi bi-share-fill"></i></a>
+    <div class="bar-item">
+      <a class="button secondary" href="#"  hx-target="#modal-container"  hx-get="/item/share/{{.item.Id}}"  title="Share"><i class="bi bi-share-fill"></i></a>
     </div>
-    <div class="w3-bar-item">
-      <a class="button w3-metro-dark-blue" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="View"><i class="bi bi-binoculars"></i>
+    <div class="bar-item">
+      <a class="button secondary" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content" title="View"><i class="bi bi-binoculars"></i>
   </a>
     </div>
     {{ end }}
diff --git a/assets/templates/items/read.tmpl b/assets/templates/items/read.tmpl
index 9dbfe09..70d647c 100644
--- a/assets/templates/items/read.tmpl
+++ b/assets/templates/items/read.tmpl
@@ -20,8 +20,8 @@
 
     {{ template "item:relations_view" .}}
     
-    <div class="w3-row">
-      <div class="w3-half">
+    <div class="row">
+      <div class="half">
         {{if gt (len .item.Categories) 0 }}
         <i class="hide-medium hide-large bi bi-tags-fill"></i>
         <strong class="hide-small">Categories</strong>
@@ -40,7 +40,7 @@
         {{ end }}
         {{ end }}
       </div>
-      <div class="w3-half">
+      <div class="half">
         {{if gt (len .item.Tags) 0 }}
         <i class="hide-medium hide-large bi bi-tags"></i>
         <strong class="hide-small">Tags</strong> {{ range (stringToArray .item.Tags ",")}}
@@ -60,7 +60,7 @@
     </div>
 
     <a
-      class="w3-btn w3-metro-dark-blue w3-round-large hide-small"
+      class="button main hide-small"
       hx-get="/item/update/{{.item.Id}}"
       hx-push-url="true"
       hx-target="#page-content"
@@ -68,7 +68,7 @@
       ><i class="bi bi-pencil"></i> Edit</a
     >
     <a
-    class="w3-btn w3-metro-blue w3-round-large  hide-small"
+    class="button main  hide-small"
     href="#"
     hx-target="#modal-container"
     hx-get="/item/share/{{.item.Id}}"
diff --git a/assets/templates/items/view.tmpl b/assets/templates/items/view.tmpl
index 316e869..2c7c0ef 100644
--- a/assets/templates/items/view.tmpl
+++ b/assets/templates/items/view.tmpl
@@ -1,6 +1,6 @@
 {{define "page:content"}}
-<div id="modal" class="w3-modal">
-    <div class="w3-modal-content w3-round-large">
+<div id="modal" class="modal">
+    <div class="modal-content w3-round-large">
         <header class="w3-container" style="margin-bottom: 20px; font-weight: bold;">
             <span _="on click remove #modal"
             class="w3-button w3-round-large w3-display-topright" style="margin-top: 2px; margin-right: 2px;"><i class='bi bi-x-circle-fill'></i></span>
@@ -27,8 +27,8 @@
 
         {{ template "item:relations_view" .}}
 
-        <div class="w3-row" style="margin-bottom: 20px">
-          <div class="w3-half">
+        <div class="row" style="margin-bottom: 20px">
+          <div class="col half">
             <strong>Categories</strong> 
             {{ range (stringToArray .item.Categories "|")}}
             {{ $category_name := index $.categoriesMap .}}
@@ -43,7 +43,7 @@
             </div>
             {{ end }}
           </div>
-          <div class="w3-half">
+          <div class="col half">
             {{ if gt (len .item.Tags) 0 }}
             <strong>Tags</strong> {{ range (stringToArray .item.Tags ",")}}
             <div class="tag" style="padding: 3px">
@@ -61,9 +61,9 @@
           </div>
         </div>
     
-        <div class="w3-row" style="margin-bottom: 20px">
+        <div class="row" style="margin-bottom: 20px">
         <a
-          class="w3-btn w3-metro-dark-blue w3-round-large"
+          class="button main"
           hx-get="/item/update/{{.item.Id}}"
           hx-push-url="true"
           hx-target="#page-content"
diff --git a/assets/templates/pages/home.tmpl b/assets/templates/pages/home.tmpl
index eb33d47..52660e9 100644
--- a/assets/templates/pages/home.tmpl
+++ b/assets/templates/pages/home.tmpl
@@ -1,5 +1,5 @@
 {{define "page:content"}}
-<div class="w3-row-padding" id="dashboard" style="padding-top: 10px;">
+<div id="dashboard">
 
   {{ template "home:items" .}}
 
diff --git a/assets/templates/pages/home_items.tmpl b/assets/templates/pages/home_items.tmpl
index 9d2ccc8..cc67c4b 100644
--- a/assets/templates/pages/home_items.tmpl
+++ b/assets/templates/pages/home_items.tmpl
@@ -3,7 +3,7 @@
 {{ $itemCount := 0 }}
 
 {{ range.items }}
-  <div class="w3-col l4 m6 s12 item" style="margin-bottom: 10px;"
+  <div class="col l4 m6 s12 item" style="margin-bottom: 10px;"
   {{ $itemCount = incr $itemCount}}
     {{ if eq $itemCount 10 }}
     {{ $offset := addI $.offset $itemCount}}
@@ -12,16 +12,16 @@
     hx-swap="afterend"
     {{ end }}
   >
-    <div class="w3-card w3-display-container w3-round-large" style="padding: 10px; background-color: #fff;">
-      <div class="w3-row">
-        <div class="w3-col l11 m11 s11">
+    <div class="item-card">
+      <div class="row">
+        <div class="col l11 m11 s11">
           <h5>
             <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
             <a class="hide-medium hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
           </h5>
           <div class="home-card-summary">{{.Summary | markdownfy | safeHTML}}</div>
         </div>
-        <div class="w3-col l1 m1 s1">
+        <div class="col l1 m1 s1">
           <a
           class="w3-btn w3-medium w3-round-large"
           style="float: right; padding: 8px 8px"