docs: user experience improvements

* switch helper classes to use start and end
* removed sponsor image eager loading
* reduced vertical height of multiple components
* added cover to figure images

Author: johnleider

packages/docs/src/components/Backmatter.vue

@@ -1,11 +1,9 @@
 <template>
-  <section
-    id="ready-for-more"
-    class="mt-12"
-  >
+  <section id="ready-for-more">
     <app-heading
       :content="t('ready')"
       level="2"
+      class="mb-2"
     />
 
     <!-- https://vue-i18n.intlify.dev/guide/advanced/component.html#scope-resolving -->
@@ -26,7 +24,7 @@
 
     <app-divider class="mt-7 mb-5" />
 
-    <up-next class="mb-4" />
+    <up-next class="mb-5" />
 
     <vuetify class="mb-6" />
 

packages/docs/src/components/about/TeamMember.vue

@@ -5,10 +5,10 @@
         <v-img v-if="member.avatar" :src="member.avatar" />
       </v-avatar>
 
-      <div class="pl-6 font-weight-medium">
+      <div class="ps-6 font-weight-medium">
         <div class="text-h5 mb-1 font-weight-bold d-flex align-center">
           <span
-            class="mr-3"
+            class="me-3"
             v-text="member.name"
           />
 
@@ -22,7 +22,7 @@
                 <a
                   v-if="link.href"
                   :href="link.href"
-                  class="d-inline-flex text-decoration-none mr-1"
+                  class="d-inline-flex text-decoration-none me-1"
                   rel="noopener"
                   target="_blank"
                   v-bind="activatorProps"

packages/docs/src/components/app/Divider.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-divider class="my-6" />
+  <v-divider class="my-5" />
 </template>
 
 <script setup>

packages/docs/src/components/app/Figure.vue

@@ -1,11 +1,8 @@
 <template>
-  <figure
-    :class="[
-      caption ? 'mb-6' : 'mb-10'
-    ]"
-  >
+  <figure class="mb-6">
     <v-img
-      class="rounded"
+      class="rounded bg-surface"
+      cover
       v-bind="$attrs"
     />
 

packages/docs/src/components/app/Heading.vue

@@ -24,11 +24,11 @@
   import { computed } from 'vue'
 
   const HEADING_CLASSES = {
-    1: 'text-h3 text-sm-h3 mb-4',
-    2: 'text-h4 text-sm-h4 mb-4 mt-4',
-    3: 'text-h5 mb-2',
-    4: 'text-h6 mb-2',
-    5: 'text-subtitle-1 font-weight-medium mb-2',
+    1: 'text-h3 text-sm-h3',
+    2: 'text-h4 text-sm-h4',
+    3: 'text-h5',
+    4: 'text-h6',
+    5: 'text-subtitle-1 font-weight-medium',
   }
 
   const props = defineProps({
@@ -38,7 +38,7 @@
   })
 
   const component = computed(() => `h${props.level}`)
-  const classes = computed(() => ['v-heading', HEADING_CLASSES[props.level]])
+  const classes = computed(() => ['v-heading', 'mb-2', HEADING_CLASSES[props.level]])
 </script>
 
 <style lang="sass">

packages/docs/src/components/app/Link.vue

@@ -53,7 +53,7 @@
 
     return {
       icon: icon.value,
-      class: `m${isSamePage.value ? 'r' : 'l'}-1`,
+      class: `m${isSamePage.value ? 'e' : 's'}-1`,
       color: 'primary',
       size: '.875rem',
     }

packages/docs/src/components/app/Markup.vue

@@ -29,7 +29,7 @@
       <template #activator="{ props: activatorProps }">
         <v-btn
           :icon="clicked ? 'mdi-check' : 'mdi-clipboard-text'"
-          class="mr-1 text-disabled me-2 mt-2 app-markup-btn"
+          class="me-1 text-disabled me-2 mt-2 app-markup-btn"
           density="compact"
           style="position: absolute; right: 0; top: 0;"
           v-bind="activatorProps"

packages/docs/src/components/app/Toc.vue

@@ -14,12 +14,12 @@
       #prepend
     >
       <app-headline
-        class="mt-4 mb-2 ml-4"
+        class="mt-4 mb-2 ms-4"
         path="contents"
       />
     </template>
 
-    <ul class="ml-5">
+    <ul class="ms-5">
       <router-link
         v-for="{ to, level, text } in toc"
         v-slot="{ href }"
@@ -29,13 +29,13 @@
       >
         <li
           :class="[
-            'pl-3 text-body-2 py-1 font-weight-regular',
+            'ps-3 text-body-2 py-1 font-weight-regular',
             {
               'text-primary router-link-active': route.hash === to,
               'text-medium-emphasis': route.hash !== to,
-              'pl-6': level === 3,
-              'pl-9': level === 4,
-              'pl-12': level === 5,
+              'ps-6': level === 3,
+              'ps-9': level === 4,
+              'ps-12': level === 5,
             }
           ]"
         >

packages/docs/src/components/app/bar/EnterpriseLink.vue

@@ -1,7 +1,7 @@
 <template>
   <app-btn
     :to="rpath('/introduction/enterprise-support/')"
-    class="ml-1"
+    class="ms-1"
     color="medium-emphasis"
     variant="text"
     @click="gtagClick('app-bar', 'enterprise', name)"

packages/docs/src/components/app/bar/NotificationsMenu.vue

@@ -28,13 +28,13 @@
     </template>
 
     <v-toolbar
-      class="pl-4 pr-5"
+      class="ps-4 pe-5"
       color="surface"
       density="compact"
     >
       <v-btn
         :disabled="showArchived ? unread.length < 1 : read.length < 1"
-        class="px-2 ml-n1"
+        class="px-2 ms-n1"
         size="small"
         variant="text"
         @click="showArchived = !showArchived"
@@ -96,7 +96,7 @@
                 <v-btn
                   :ripple="false"
                   :icon="marked.icon"
-                  class="ml-3"
+                  class="ms-3"
                   color="medium-emphasis"
                   variant="text"
                   @click.stop.prevent="toggle(notification)"