style: fix responsive

components/app/AppFlatPlan.vue

 <template>
   <div id="container-flatplan" class="container mb-12">
-    <section class="grid grid-cols-4 gap-6">
+    <section class="gap-6 grid lg:grid-cols-4 md:grid-cols-2">
       <nuxt-link
         v-for="(section, i) in sections"
         :key="i"

components/app/AppReadingTime.vue

 <template>
-  <div class="flex items-center mb-8">
-    <fa :icon="['far', 'clock']" class="text-gray-400 text-lg mr-2" />
+  <div class="flex items-center mb-8 text-gray-500">
+    <fa :icon="['far', 'clock']" class="text-xl mr-2" />
 
     <div>
       <span>{{ readingTimeToStr }}</span>
-      <span class="text-gray-400 text-sm pl-1">
+      <span
+        class="text-sm text-gray-400 dark:text-gray-600 pl-1 hidden xl:inline"
+      >
         {{ `(${readingTime.words} mots)` }}
       </span>
     </div>

components/home/HomeCTA.vue

 <template>
-  <div id="container-cta" class="container mb-12">
+  <div class="pt-8">
     <t-button
       class="flex items-center rounded-2xl"
       variant="success"

components/home/HomeHero.vue

 <template>
-  <div class="hero container flex">
-    <div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full">
+  <div class="hero container flex lg:items-center">
+    <div class="max-w-2xl 2xl:max-w-3xl w-full">
       <nuxt-content :document="document" />
 
-      <HomeCTA class="pt-4" />
+      <HomeCTA />
     </div>
 
-    <SuperHero class="superhero w-full h-full" />
+    <SuperHero
+      class="superhero absolute h-40 hidden lg:h-full lg:relative lg:right-0 lg:w-full md:block right-6 w-1/3"
+    />
   </div>
 </template>
 
@@ -28,7 +30,7 @@ export default {
 
 <style lang="postcss" scoped>
 .hero {
-  padding: max(8vh, 8rem) 0;
+  padding: max(8vh, 4rem) 1.5rem;
 }
 
 @keyframes floatHero {

components/layout/LayoutFooter.vue

 <template>
   <div
-    class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 p-6 text-white z-10 dark:from-purple-900 dark:to-purple-700 dark:text-gray-100"
+    class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 py-6 text-white z-10 dark:from-purple-900 dark:to-purple-700 dark:text-gray-100"
   >
     <div class="container">
       <div class="flex flex-wrap mb-4 w-full">

components/layout/LayoutHeaderLogo.vue

@@ -9,7 +9,7 @@
     />
 
     <span
-      class="bg-clip-text bg-gradient-to-r font-semibold from-purple-800 group-hover:text-transparent text-2xl to-blue-700 tracking-tight transition-colors"
+      class="bg-clip-text bg-gradient-to-r font-semibold from-purple-800 group-hover:text-transparent text-2xl to-blue-700 tracking-tight transition-colors whitespace-nowrap"
     >
       {{ $options.config.site_title }}
     </span>

components/page/PageHeader.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center justify-between">
     <h1
       v-prevent-last-char-break
-      class="text-3xl md:text-4xl 2xl:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight py-8"
+      class="text-3xl md:text-4xl 2xl:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight py-10"
     >
       {{ document.title }}
     </h1>

components/ressources/RessourcesCategoriesFilter.vue

 <template>
-  <div class="flex items-center pt-2">
-    <div class="text-xs font-semibold ml-4">Filtres :</div>
-    <div class="flex items-center">
+  <div class="lg:flex items-center pt-2">
+    <div class="text-xs font-semibold mr-3 whitespace-nowrap">Filtres :</div>
+    <div class="flex items-center flex-wrap">
       <div
-        class="text-xs uppercase font-semibold ml-3 rounded px-1 py-0.5 cursor-pointer"
+        class="text-xs uppercase font-semibold mr-3 rounded px-1 py-0.5 cursor-pointer"
         :class="
           selectedCategories.length !== categories.length
             ? 'text-gray-400 hover:text-hover'
@@ -16,7 +16,7 @@
       <div
         v-for="(category, index) in categories"
         :key="index"
-        class="text-xs uppercase font-semibold ml-3 rounded px-1 py-0.5 cursor-pointer"
+        class="text-xs uppercase font-semibold mr-3 rounded px-1 py-0.5 my-0.5 cursor-pointer"
         :class="
           !selectedCategories.includes(category) ||
           selectedCategories.length === categories.length

components/ressources/RessourcesItem.vue

 <template>
-  <div class="flex cursor-pointer mb-8 p-0.5 pr-4 overflow-hidden">
+  <div class="md:flex cursor-pointer mb-8 p-0.5 pr-4 overflow-hidden">
     <a
-      class="flex-none mr-4 shadow rounded bg-gray-100"
+      class="flex-none block mr-4 shadow rounded bg-gray-100"
       style="width: 200px; height: 150px"
       :href="item.url"
       target="_blank"

components/ressources/RessourcesItemHeader.vue

 <template>
-  <div class="flex items-center justify-between">
-    <div class="flex overflow-hidden">
+  <div class="md:flex items-center justify-between">
+    <div class="flex overflow-hidden mb-1 md:mb-0">
       <div v-if="isHover" class="text-xs truncate">{{ isHover }}</div>
       <div
         v-for="(category, index) in item.categories"

components/ressources/RessourcesSubmitModal.vue

 <template>
-  <div class="ml-4">
+  <div class="md:ml-4 mt-2 md:mt-0">
     <t-button
       class="mx-auto"
       :text="$t('ressources.submitResources')"

components/search/SearchContainer.vue

@@ -4,9 +4,9 @@
       <PageHeader v-if="title" :document="{ title }" />
     </slot>
 
-    <div class="flex justify-between mb-8">
+    <div class="md:flex justify-between mb-8">
       <div class="w-full">
-        <div class="flex">
+        <div class="md:flex">
           <TInputIcon
             v-model="query"
             type="search"

content/ui/home-hero.md

-<section class="mr-20">
-  <h1 class="mb-4 text-3xl md:text-6xl 2xl:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight slide-in-bottom-h1">
+<section class="xl:mr-20">
+  <h1 class="mb-4 text-4xl md:text-5xl xl:text-6xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight slide-in-bottom-h1">
   La monnaie libre
   </h1>
 
-  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-4xl mb-12 font-semibold slide-in-bottom-subtitle">
+  <p class="leading-normal text-xl text-gray-700 dark:text-gray-300 md:text-2xl xl:text-4xl mb-12 font-semibold slide-in-bottom-subtitle">
   Repenser la création monétaire...<br />et l'expérimenter !
   </p>
 
-  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-xl mb-6 slide-in-bottom-subtitle">
+  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 xl:text-xl mb-6 slide-in-bottom-subtitle">
   Un modèle économique plus juste et durable est possible.<br />Une monnaie libre place l'homme au cœur de l'économie et prend en compte les générations futures.
   </p>
 
-  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-xl mb-6 slide-in-bottom-subtitle">
+  <p class="leading-normal text-base text-gray-700 dark:text-gray-300 xl:text-xl mb-6 slide-in-bottom-subtitle">
   La Ğ1 (la "June") est la première monnaie libre. Conçue sur une blockchain écologique, c'est une expérience citoyenne, solidaire... et peut-être subversive !
   </p>
 </section>
\ No newline at end of file

nuxt.config.js

@@ -206,7 +206,7 @@ export default {
   hooks: {
     // Netlifycms cannot create array in json file at root level and nuxt-content need an array. So, ressources.json is parsed to fetch 'ressources' key.
     'content:file:beforeParse': (file) => {
-      if (file.extension === '.json' && !/.*ressources.json$/.test(file.path)) {
+      if (file.extension === '.json' && /.*ressources.json$/.test(file.path)) {
         file.data = JSON.stringify(JSON.parse(file.data).ressources)
       } else if (file.extension === '.md') {
         if (/^---.*layout:.*---/s.test(file.data)) {

pages/ressources.vue

@@ -22,7 +22,7 @@
             v-for="item in items"
             :key="item.path"
             :item="item"
-            class="w-1/2"
+            class="w-full xl:w-1/2"
             @select-category="selectedCategories = $event"
           />
         </transition-group>

tailwind.config.js

@@ -106,6 +106,7 @@ module.exports = {
       },
     },
     container: {
+      padding: '1.5rem',
       screens: containerScreens,
       center: true,
     },