Fix numbering issue on topic navigation

Resolves MS-810 #complete

client/src/components/book-navigation/TopicNavigation.vue

@@ -2,7 +2,11 @@
   <nav class="topic-navigation">
     <router-link
       :to="{ name: 'topic', params: { topicSlug: topic.slug } }"
-      :class="{ 'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile }"
+      :class="{
+        'topic-navigation__topic--active': topic.active,
+        'book-subnavigation__item--mobile': mobile,
+        'topic-navigation__topic--no-numbering': !$flavor.showTopicNavigationNumbering,
+      }"
       tag="div"
       active-class="book-subnavigation__item--active"
       class="topic-navigation__topic book-subnavigation__item"
@@ -10,7 +14,6 @@
       :key="topic.id"
       @click="closeSidebar('navigation')"
     >
-      <span v-if="$flavor.showTopicNavigationNumbering">{{ topic.order }}.</span>
       {{ topic.title }}
     </router-link>
   </nav>
@@ -57,9 +60,23 @@ export default {
 
 <style scoped lang="scss">
 @import 'styles/helpers';
+// css counters: "https://www.freecodecamp.org/news/numbering-with-css-counters/"
 
 .topic-navigation {
   display: flex;
   flex-direction: column;
+  counter-reset: css-counter 0;
+
+  &__topic {
+    counter-increment: css-counter 1;
+
+    &:before {
+      content: counter(css-counter) '. ';
+    }
+
+    &--no-numbering:before {
+      content: '';
+    }
+  }
 }
 </style>

client/src/components/modules/ModuleTeaser.vue

@@ -88,7 +88,7 @@ const moduleLink = computed(() => {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-content: start;
+  align-content: flex-start;
   @include desktop {
     max-width: $topic-desktop-width;
   }