style: tweak layouts and styles

Change application title font-size as .875rem.
Replace application hovered flip animation with colored border.
Increase applications columns up to 6 on xl breakpoint.
Increate layout columns up to 9 on xl breakpoint.

assets/hb/modules/theme-start/scss/_apps.scss

@@ -41,33 +41,24 @@
   }
 }
 
+.hb-start-app-title {
+  font-size: .875rem;
+}
+
 .hb-start-app {
   height: 120px;
+  opacity: .9;
+  transition: .3s;
 
   &:hover {
-    background: var(--#{$prefix}primary);
+    opacity: 1;
 
-    .hb-start-app-title {
-      color: #fff;
-    }
-
-    .hb-start-app-img,
-    .hb-start-app-img-placeholder {
-      animation: 1s linear app-flip;
+    .hb-start-app-img-container {
+      --#{$prefix}border-color: var(--#{$prefix}primary);
     }
   }
 
   &.inactive {
     display: none !important;
   }
 }
-
-@keyframes app-flip {
-  0% {
-    transform: rotateY(0deg);
-  }
-
-  100% {
-    transform: rotateY(360deg);
-  }
-}

layouts/index.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="hb-start col-12 col-lg-8 col-xl-6">
+  <div class="hb-start col-12 col-xl-9 col-lg-8 col-xl-6">
     <div class="hb-start-search">
       {{ partialCached "hb/modules/theme-start/form" . }}
       {{ partialCached "hb/modules/theme-start/apps" . }}

layouts/partials/hb/modules/theme-start/apps.html

@@ -27,7 +27,7 @@
     </ul>
   {{- end }}
   <div
-    class="hb-start-apps d-flex flex-wrap row row-cols-3 row-cols-md-4 row-cols-lg-5">
+    class="hb-start-apps d-flex flex-wrap row row-cols-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6">
     {{- range . }}
       {{- if .HasChildren }}
         {{- range .Children }}
@@ -51,7 +51,7 @@
     target="_blank"
     rel="external">
     <div
-      class="hb-start-app-img-container position-relative overflow-hidden bg-body-secondary rounded-circle d-flex justify-content-center align-items-center mb-2">
+      class="hb-start-app-img-container border border-2 position-relative overflow-hidden bg-body-secondary rounded-circle d-flex justify-content-center align-items-center mb-2">
       <img
         alt="{{ .Name }}"
         onload="this.parentElement.classList.add('loaded')"

layouts/partials/hb/modules/theme-start/result-types.html

@@ -2,7 +2,7 @@
 {{- $icons := partialCached "hb/modules/theme-start/functions/icons" . }}
 {{- range . }}
   <ul
-    class="hb-start-search-result-types nav nav-pills ms-3 mb-2{{ cond $first `` ` d-none` }}"
+    class="hb-start-search-result-types nav nav-pills ms-2 mb-2{{ cond $first `` ` d-none` }}"
     data-engine="{{ .id }}">
     {{- $engine := . }}
     {{- $firstType := true }}