From de50e7ea268ef3a6b69ae18ef8f7d55a82acf12f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Thu, 11 Jan 2024 12:42:33 +0100
Subject: [PATCH] Fix RFS

---
 assets/scss/layout.scss         |  6 ++++++
 components/layout/AppHeader.vue | 11 ++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index d1083f3..62eacbe 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -1,7 +1,13 @@
 body {
+    @include font-size(2rem);
+
     min-height: 100vh;
     background-color: unset;
 
+    @include media-breakpoint-up(xxl) {
+        @include font-size(4rem);
+    }
+
     .app-component {
         display: flex;
         height: 100vh;
diff --git a/components/layout/AppHeader.vue b/components/layout/AppHeader.vue
index d3be501..f95d29a 100644
--- a/components/layout/AppHeader.vue
+++ b/components/layout/AppHeader.vue
@@ -1,7 +1,7 @@
 
 <template>
   <nav id="top-navbar" class="navbar navbar-expand-lg bg-body-tertiary shadow-sm">
-    <div class="container align-items-start">
+    <div class="container-fluid align-items-start">
       <div class="navbar-brand mx-auto">
         <NuxtLink
           to="/"
@@ -71,11 +71,16 @@ export default defineComponent({
 @import "flag-icons/sass/flag-icons.scss";
 </style>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import "bootstrap/scss/vendor/rfs";
 #top-navbar {
   .main-logo {
-    max-height: 20rem;
+    @include rfs(30rem, max-height);
     height: 20vh;
   }
+  .fi {
+    @include rfs(8rem, line-height);
+    @include rfs(10rem, width);
+  }
 }
 </style>