fix: Remove hero and hero body and use sections and containers instead

Hero is meant to be used as a full-width banner to showcare or present somethign, not to contain the entire content of the webpage

2 files changed, 78 insertions, 3 deletions

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index 78d6f99..a141447 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -7,14 +7,13 @@ $base-5: #4C566A;
 
 $background: #1e2430;
 $backgroundAccent: #20222b;
+$backgroundAccentLighter: #53555E;
 $backgroundLight1: #f5f6f8;
 
 // customize navbar
 $navbar-background-color: $backgroundAccent;
 $navbar-item-color: #f5f6f8;
 
-
-
 // $defaultTextColor: #4a4a4a;
 $defaultTextColor: rgb(236, 239, 244);
 $textColor: #c7ccd8;
@@ -31,3 +30,19 @@ $uploaderDropdownColor: #797979;
 
 $boxShadow: 0 10px 15px rgba(4,39,107,0.2);
 $boxShadowLight: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
+
+// pagination
+
+$pagination-color: $defaultTextColor;
+
+$pagination-focus-color: $textColorHighlight;
+$pagination-focus-border-color: $textColorHighlight;
+
+$pagination-active-color: $textColorHighlight;
+$pagination-active-border-color: $textColorHighlight;
+
+$pagination-hover-color: $textColorHighlight;
+$pagination-hover-border-color: $textColorHighlight;
+
+$pagination-current-background-color: $base-3;
+$pagination-current-border-color: $base-2;
\ No newline at end of file
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index c3aff91..69d15d3 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -249,6 +249,57 @@ table.table {
 	}
 }
 
+// vue-bar
+.vb > .vb-dragger {
+    z-index: 5;
+    width: 12px;
+    right: 0;
+}
+
+.vb > .vb-dragger > .vb-dragger-styler {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform: rotate3d(0,0,0,0);
+    transform: rotate3d(0,0,0,0);
+    -webkit-transition:
+        background-color 100ms ease-out,
+        margin 100ms ease-out,
+        height 100ms ease-out;
+    transition:
+        background-color 100ms ease-out,
+        margin 100ms ease-out,
+        height 100ms ease-out;
+    background-color: $backgroundAccent;
+    margin: 5px 5px 5px 0;
+    border-radius: 20px;
+    height: calc(100% - 10px);
+    display: block;
+}
+
+.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+}
+
+.vb > .vb-dragger:hover > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+    margin: 0px;
+    height: 100%;
+}
+
+.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+    margin: 0px;
+    height: 100%;
+}
+
+.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+}
+
+.vb-content{
+	overflow: auto !important 
+}
+
 // helpers
 .has-text-default {
 	color: $textColor;
@@ -256,4 +307,13 @@ table.table {
 
 .has-text-default-highlight {
 	color: $textColorHighlight;
-}
\ No newline at end of file
+}
+
+.is-height-max-content {
+	height: max-content;
+}
+
+.pagination a, .pagination a:hover {
+	text-decoration: none;
+}
+