Visual changes and fixes

public/assets/config.yml.dist

@@ -26,14 +26,14 @@ colors:
     background: "rgba(232, 233, 255, 1)"
     card-background: rgba(232, 233, 255, 0.87)
     footer-background: "rgba(232, 233, 255, 1)"
-    text: "#ffffff"
+    text: "#00044b"
     text-header: "#fafafa"
     text-title: "#00044b"
     text-subtitle: "#161839"
     card-shadow: rgba(0, 0, 0, 0.5)
     link: "#3255dc"
     link-hover: "#1830ae"
-    background-image: "url(../assets/img/wall1.jpg)"
+    background-image: "url(../assets/img/wall2.jpg)"
   dark:
     border-radius: 14px
     highlight-primary: rgba(10, 10, 70, 0.84)

src/App.vue

@@ -74,7 +74,10 @@
           <Message :item="config.message" />
 
           <!-- Horizontal layout -->
-          <div v-if="!vlayout || filter" class="columns is-multiline">
+          <div
+            v-if="!vlayout || filter"
+            class="columns is-multiline is-variable is-1"
+          >
             <template v-for="(group, groupIndex) in services">
               <h2
                 v-if="group.name"
@@ -94,7 +97,7 @@
                 :key="'group-' + groupIndex + '-' + index"
                 :item="item"
                 :proxy="config.proxy"
-                :class="['column', `is-${12 / config.columns}`]"
+                :class="['column', 'service', `is-${12 / config.columns}`]"
               />
             </template>
           </div>
@@ -123,6 +126,7 @@
                 :key="'group-' + groupIndex + '-' + index"
                 :item="item"
                 :proxy="config.proxy"
+                class="service"
               />
             </div>
           </div>

src/assets/header.scss

@@ -48,12 +48,15 @@
   .navbar {
     background-color: transparent;
 
+    .navbar-brand {
+      margin-left: 0 !important;
+    }
+
     .navbar-item {
       background-color: var(--highlight-primary);
       border-radius: var(--border-radius);
       color: var(--link) !important;
-      padding: 8px 12px;
-      margin-right: 0.3rem;
+      margin-right: 0.5rem;
 
       &:last-child {
         margin-right: 0;

src/assets/layout.scss

@@ -33,13 +33,9 @@ body {
 }
 
 #main-section {
-  margin-bottom: 2rem;
+  margin-bottom: 3.5rem;
   padding: 0;
 
-  .column {
-    padding: 0.25rem;
-  }
-
   h2 {
     padding-bottom: 0px;
     @include ellipsis();
@@ -64,6 +60,7 @@ body {
 
     .message-header {
       font-weight: bold;
+      background-color: #30364d;
       border-radius: var(--border-radius) var(--border-radius) 0 0;
     }
 
@@ -72,6 +69,11 @@ body {
       border: none;
     }
   }
+
+  .column.service {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
 }
 
 .layout-vertical {
@@ -105,10 +107,6 @@ body {
 }
 
 .no-footer {
-  #main-section {
-    margin-bottom: 0;
-  }
-
   .footer {
     display: none;
   }

src/defaults.yml

@@ -28,14 +28,14 @@ colors:
     background: "rgba(232, 233, 255, 1)"
     card-background: rgba(232, 233, 255, 0.87)
     footer-background: "rgba(232, 233, 255, 1)"
-    text: "#ffffff"
+    text: "#00044b"
     text-header: "#fafafa"
     text-title: "#00044b"
     text-subtitle: "#161839"
     card-shadow: rgba(0, 0, 0, 0.5)
     link: "#3255dc"
     link-hover: "#1830ae"
-    background-image: "url(../assets/img/wall1.jpg)"
+    background-image: "url(../assets/img/wall2.jpg)"
   dark:
     border-radius: 14px
     highlight-primary: rgba(10, 10, 70, 0.84)