site_logiciels/components/Layout/UI/TitlePage.vue

<template>
  <div>
    <h1 style="text-align: center" :class="mdAndDown ? 'title-md ' : 'title '">
      {{ title }}
    </h1>
    <h2
      style="text-align: center"
      :class="mdAndDown ? 'subtitle-md ' : 'subtitle '"
    >
      {{ subtitle }}
    </h2>
  </div>
</template>

<script setup>
import { useDisplay } from "vuetify";
const { mdAndDown } = useDisplay();
import { defineProps } from "vue";

const props = defineProps({
  title: String,
  subtitle: String,
});
</script>

<style scoped>
.text-center {
  text-align: center;
}

.title {
  font-size: 4rem;
  line-height: 3.5rem;
  letter-spacing: 0.3rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.title-md {
  font-size: 2rem;
  line-height: 2.5rem;
  letter-spacing: 0.2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  
  text-transform: uppercase;
}

.subtitle {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.5rem;
  margin-bottom: 8rem;
  text-transform: uppercase;
  margin-left: 1rem;
  margin-right: 1rem;
}

.subtitle-md {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  width: 100%;
}
</style>