style: misc update of some of aleks propositions

app.vue

@@ -30,4 +30,11 @@ body {
 #__nuxt {
   @apply min-h-screen flex;
 }
+
+/* GLOBAL */
+.btn,
+.select {
+  min-height: 2.5rem;
+  height: 2.5rem;
+}
 </style>

components/PageTitle.vue

@@ -1,13 +1,33 @@
 <script setup lang="ts">
-const props = defineProps<{
+const props = withDefaults(
-  text?: string
+  defineProps<{
-}>()
+    text?: string
+    srOnly?: boolean
+  }>(),
+  {
+    text: undefined,
+    srOnly: false,
+  },
+)
 </script>
 
 <template>
-  <h1 id="main-target" tabindex="-1" class="text-4xl font-bold mb-3">
+  <h1
+    id="main-target"
+    tabindex="-1"
+    class="inline-block text-4xl font-bold"
+    :class="{ 'sr-only focus:not-sr-only': srOnly }"
+  >
     <slot name="default">
       {{ text }}
     </slot>
   </h1>
 </template>
+
+<style scoped>
+h1 {
+  /* Need some override here because of `not-sr-only` styles */
+  margin-top: 2rem !important;
+  margin-bottom: 0.75rem !important;
+}
+</style>

layouts/default.vue

@@ -71,7 +71,7 @@ async function logout() {
 
 <template>
   <div class="container mx-auto p-10 min-h-screen flex flex-col">
-    <header class="py-10">
+    <header class="py-2">
       <div class="h-10 -mt-10">
         <a
           id="skip-link"

pages/index.vue

@@ -11,27 +11,27 @@ useHead({
 })
 
 const apps = computed(() => {
-  const appTileColors = [
+  const appTileVariant = [
-    ['bg-primary', 'text-primary-content'],
+    'btn-primary',
-    ['bg-secondary', 'text-secondary-content'],
+    'btn-secondary',
-    ['bg-accent', 'text-accent-content'],
+    'btn-accent',
-    ['bg-neutral', 'text-neutral-content'],
+    'btn-neutral',
-    ['bg-info', 'text-info-content'],
+    'btn-info',
-    ['bg-success', 'text-success-content'],
+    'btn-success',
-    ['bg-warning', 'text-warning-content'],
+    'btn-warning',
-    ['bg-error', 'text-error-content'],
+    'btn-error',
-    // FIXME currently using daisyui theme colors,
+    // FIXME currently using daisyui btn colors to get focus/hover styles,
-    // if we want more colors we need to adapt those to every themes.
+    // if we want more colors we need to add btn variants based on daisyui colors.
-    // ['bg-red-500', 'text-red-100'],
+    // 'bg-red-500'
-    // ['bg-orange-500', 'text-orange-100'],
+    // 'bg-orange-500'
-    // ['bg-yellow-500', 'text-yellow-100'],
+    // 'bg-yellow-500'
-    // ['bg-lime-500', 'text-lime-100'],
+    // 'bg-lime-500'
-    // ['bg-green-500', 'text-green-100'],
+    // 'bg-green-500'
-    // ['bg-teal-500', 'text-teal-100'],
+    // 'bg-teal-500'
-    // ['bg-indigo-500', 'text-indigo-100'],
+    // 'bg-indigo-500'
-    // ['bg-primary', 'text-primary-content'],
+    // 'bg-primary',
-    // ['bg-purple-500', 'text-purple-100'],
+    // 'bg-purple-500'
-    // ['bg-rose-500', 'text-rose-100'],
+    // 'bg-rose-500'
   ]
 
   return Object.entries(appsData.value).map(([id, app]) => {
@@ -39,7 +39,7 @@ const apps = computed(() => {
       ...app,
       id,
       url: '//' + app.url,
-      colors: appTileColors[parseInt(app.label, 36) % appTileColors.length],
+      variant: appTileVariant[parseInt(app.label, 36) % appTileVariant.length],
     }
   })
 })
@@ -47,7 +47,7 @@ const apps = computed(() => {
 
 <template>
   <div>
-    <PageTitle :text="$t('app_list')" />
+    <PageTitle :text="$t('app_list')" sr-only />
 
     <div id="apps" class="my-10">
       <div v-if="!apps.length" class="w-2/3">
@@ -55,13 +55,8 @@ const apps = computed(() => {
       </div>
 
       <ul v-else class="tile-container">
-        <li
+        <li v-for="app in apps" :key="app.id" class="tile relative">
-          v-for="app in apps"
+          <a :href="app.url" class="btn p-5" :class="app.variant">
-          :key="app.id"
-          class="leading-none card h-40 w-40 relative mr-7 mb-7"
-        >
-          <div class="tile-layer" :class="[app.colors[0], 'brightness-75']" />
-          <a :href="app.url" class="tile-layer p-5" :class="app.colors">
             <div class="text-6xl font-extrabold mb-1" aria-hidden="true">
               {{ app.label.substring(0, 2) }}
             </div>
@@ -81,18 +76,16 @@ const apps = computed(() => {
   grid-gap: 1.5rem;
 }
 
-.tile-layer {
+.tile a {
-  z-index: -1;
+  display: inline-block;
-  position: absolute;
+  height: 100%;
-  @apply inset-0;
+  width: 100%;
-  @apply rounded-2xl;
+  text-align: start;
-  transform: translate(0rem, 0rem);
+  border-radius: 0;
-}
-#apps li.card:hover div.tile-layer {
-  transform: translate(0.75rem, 0.75rem);
 }
 
-#apps li.card:hover {
+.tile:hover a,
-  transform: translate(-0.75rem, -0.75rem);
+.tile a:focus {
+  transform: scale(1.05);
 }
 </style>