unfuck tableau

index.php

@@ -14,6 +14,29 @@
       <?php echo view(app('sage.view'), app('sage.data'))->render(); ?>
     </div>
 
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        // CLEANER LE TABLEAU
+        let minHeadTh = document.querySelector("#main table thead tr th:first-of-type");
+        minHeadTh.style.width = `${100 / 8}%`;
+
+        let otherHeadThs = document.querySelectorAll("#main table thead tr th:not(:first-of-type)");
+        for (let otherHeadTh of otherHeadThs) {
+          otherHeadTh.style.width = `${100 / 8 * 1.75}%`;
+        }
+        
+        let minTableTds = document.querySelectorAll("#main table tbody tr td:first-of-type");
+        for (let minTableTd of minTableTds) {
+          minTableTd.style.width = `${100 / 8}%`;
+        }
+
+        let otherTableTds = document.querySelectorAll("#main table tbody tr td:not(:first-of-type)");
+        for (let otherTableTd of otherTableTds) {
+          otherTableTd.style.width = `${100 / 8 * 1.75}%`;
+        }
+      }, false);
+    </script>
+
     <?php do_action('get_footer'); ?>
     <?php wp_footer(); ?>
   </body>

resources/views/index.blade.php

@@ -14,22 +14,17 @@
     }
 </style>
 
-<div class="font-authentic">Ceci est du texte avec la police Authentic Sans 90</div>
-<div class="font-authentic-60">Ceci est du texte avec la police Authentic Sans 60</div>
-<div class="font-caslon">Ceci est du texte avec la police Caslon normal</div>
-<div class="font-caslon italic">Ceci est du texte avec la police Caslon italique</div>
-
-  <table class="table-fixed">
+  <table class="w-full bg-jlg-dark-blue flex justify-center">
     <thead>
-      <tr class="border-jlg-white w-4/5 h-64 top-12 fixed flex items-stretch justify-around text-center text-lg uppercase">
-        <th class="bg-jlg-dark-blue w-1/5 flex items-end justify-start"></th>
-        <th class="bg-jlg-dark-blue w-1/5 flex items-end justify-start">Images</th>
-        <th class="bg-jlg-dark-blue w-1/5 flex items-end justify-start">Voix Off et In</th>
-        <th class="bg-jlg-dark-blue w-1/5 flex items-end justify-start">Bande Son</th>
-        <th class="bg-jlg-dark-blue w-1/5 flex items-end justify-start">Ecrits</th>
+      <tr class="border-jlg-white h-64 top-0 w-2/3 fixed flex items-stretch justify-around text-left text-lg uppercase bg-jlg-dark-blue">
+        <th class="flex items-end justify-start"></th>
+        <th class="flex items-end justify-start pb-4">Images</th>
+        <th class="flex items-end justify-start pb-4">Voix Off et In</th>
+        <th class="flex items-end justify-start pb-4">Bande Son</th>
+        <th class="flex items-end justify-start pb-4">Écrits</th>
       </tr>
     </thead>
-    <tbody>
+    <tbody class="w-2/3 block bg-jlg-dark-blue">
       <?php
         $args = array(
           'post_type' => 'post',
@@ -43,12 +38,12 @@
         if ($query->have_posts()) :
           while ($query->have_posts()) : $query->the_post();
       ?>
-          <tr class="border-jlg-white font-authentic-60">
-            <td class="w-1/5 bg-red-400 pr-4 pt-1 pb-8 text-right">{{ get_post_meta(get_the_ID(), 'Minutage', true) }}</td>
-            <td class="w-1/5 py-8">{{ get_post_meta(get_the_ID(), 'Images', true) }}</td>
-            <td class="w-1/5 py-8">{{ get_post_meta(get_the_ID(), 'VoixOffIn', true) }}</td>
-            <td class="w-1/5 py-8">{{ get_post_meta(get_the_ID(), 'BandeSon', true) }}</td>
-            <td class="w-1/5 py-8">{{ get_post_meta(get_the_ID(), 'Ecrits', true) }}</td>
+          <tr class="border-jlg-white font-authentic-60 w-full flex flex-row py-6">
+            <td class="block text-sm pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Minutage', true) }}</td>
+            <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Images', true) }}</td>
+            <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'VoixOffIn', true) }}</td>
+            <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'BandeSon', true) }}</td>
+            <td class="block pl-0 pr-6">{{ get_post_meta(get_the_ID(), 'Ecrits', true) }}</td>
           </tr>
        <?php
           endwhile;

resources/views/layouts/app.blade.php

@@ -4,7 +4,7 @@
 
 @include('sections.header')
 
-  <main id="main" class="main bg-jlg-dark-blue w-4/5 z-0 mt-96 mt-1/12">
+  <main id="main" class="main bg-jlg-dark-blue w-full z-0 mt-64">
     @yield('content')
   </main>
 

resources/views/sections/header.blade.php

@@ -1,5 +1,5 @@
-<header class="border-jlg-light-white py-8 shadow-xlg fixed top-0 h-1/12 w-full bg-jlg-dark-blue flex flex-row justify-center items-center z-10">
-  <a class="brand text-center text-xl" href="{{ home_url('/') }}">
+<header class="border-b border-jlg-light-white py-4 h-1/12 shadow-xlg fixed top-0 w-full bg-jlg-dark-blue flex flex-row justify-center items-center z-10">
+  <a class="brand text-center text-xl leading-none" href="{{ home_url('/') }}">
     <!-- {!! $siteName !!} -->
     <span class="font-caslon uppercase">Partition<br></span>
     <span class="font-caslon italic">Le Livre d'Image</span>

tailwind.config.js

@@ -17,8 +17,8 @@ const config = {
         'caslon': ['Libre_Caslon', 'serif'],
       },
       fontSize: {
-        sm: ['14px', '20px'],
-        base: '16px',
+        sm: '18px',
+        base: '15px',
         lg: '24px',
         xl: '35px',
       }

theme.json

@@ -1306,6 +1306,11 @@
           "slug": "authentic",
           "fontFamily": "Authentic_Sans,sans-serif"
         },
+        {
+          "name": "Authentic_Sans_60",
+          "slug": "authentic-60",
+          "fontFamily": "Authentic_Sans_60,sans-serif"
+        },
         {
           "name": "Libre_Caslon",
           "slug": "caslon",
@@ -1321,17 +1326,17 @@
         {
           "name": "sm",
           "slug": "sm",
-          "size": "14px"
+          "size": "18px"
         },
         {
           "name": "base",
           "slug": "base",
-          "size": "16px"
+          "size": "15px"
         },
         {
           "name": "lg",
           "slug": "lg",
-          "size": "20px"
+          "size": "24px"
         },
         {
           "name": "xl",