order tag

components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     JulienCalixte: typeof import('./src/components/core/julien-calixte.vue')['default']
     MyBooks: typeof import('./src/components/presentation/my-books.vue')['default']
     MyProjects: typeof import('./src/components/presentation/my-projects.vue')['default']
+    OrderTag: typeof import('./src/components/core/order-tag.vue')['default']
     ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/assets/base.scss

@@ -82,7 +82,9 @@ a {
 }
 
 p,
-blockquote {
+blockquote,
+ul,
+ol {
   margin-bottom: 1rem;
 
   &:last-child {
@@ -104,7 +106,12 @@ h1 {
 }
 
 h2 {
-  font-size: 1.2em;
+  font-size: 1.5em;
+}
+
+h3,
+h4 {
+  font-size: 1.3em;
 }
 
 .julien-calixte {

src/components/core/order-tag.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  order: number
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <span class="order-tag">{{ order }}</span>
+</template>
+
+<style scoped lang="scss">
+.order-tag {
+  padding: 0 0.5rem;
+  background-color: #fffa65;
+  color: var(--vt-c-black);
+  font-family: var(--code-font-family);
+  border-radius: 0.5rem;
+}
+</style>