Improve header, fix #11

Author: KTibow

theme.yaml

@@ -290,8 +290,12 @@ Light Soft UI{color_name}:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-cyan.yaml

@@ -290,8 +290,12 @@ Light Soft UI Cyan:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-fire.yaml

@@ -290,8 +290,12 @@ Light Soft UI Fire:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-green.yaml

@@ -290,8 +290,12 @@ Light Soft UI Green:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-lime.yaml

@@ -290,8 +290,12 @@ Light Soft UI Lime:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-mint.yaml

@@ -290,8 +290,12 @@ Light Soft UI Mint:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-orange.yaml

@@ -290,8 +290,12 @@ Light Soft UI Orange:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-red.yaml

@@ -290,8 +290,12 @@ Light Soft UI Red:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-rose.yaml

@@ -290,8 +290,12 @@ Light Soft UI Rose:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-violet.yaml

@@ -290,8 +290,12 @@ Light Soft UI Violet:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui-yellow.yaml

@@ -290,8 +290,12 @@ Light Soft UI Yellow:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {

themes/light-soft-ui.yaml

@@ -290,8 +290,12 @@ Light Soft UI:
       /* Uncomment this if you want the header on the bottom
       app-header {
         top: calc(100vh - 60px) !important;
+        bottom: 0 !important;
         transform: unset !important;
       }
+      hui-masonry-view {
+        padding-bottom: 60px !important;
+      }
       */
       /* This gives the header in edit mode a different look from the standard header. */
       app-header.edit-mode {