From 6b15cb4d8e6179a107bcd561bbcd0a2c95bc2182 Mon Sep 17 00:00:00 2001
From: Agate <me@agate.blue>
Date: Tue, 23 Jan 2024 15:50:15 +0100
Subject: [PATCH 1/3] More readable / distinct title styles, vertical space

---
 src/assets/main.css            | 11 ++++++-----
 src/components/StepDetails.vue |  2 +-
 src/views/CECView.vue          |  6 +++---
 src/views/HomeView.vue         |  6 +++---
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index c7c3118..831d464 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -129,17 +129,18 @@ h1 {
   margin-bottom: var(--space-small);
   font-size: var(--font-xlarge);
   color: var(--primary-color);
+  font-weight: bold;
 }
 h2 {
   margin-bottom: var(--space-small);
-  font-size: var(--font-large);
-  font-weight: bold;
+  font-size: var(--font-xlarge);
 }
 h3 {
-  margin-bottom: var(--space-xsmall);
+  margin-bottom: var(--space-medium);
   font-size: var(--font-large);
   color: var(--primary-color);
-  font-style: italic;
+  padding-bottom: var(--space-small);
+  border-bottom: 2px dashed var(--primary-color);
 }
 /* text */
 .text--center {
@@ -176,7 +177,7 @@ p {
 
 ol,
 ul {
-  padding-left: var(--space-medium);
+  padding-left: var(--space-large);
 }
 
 button,
diff --git a/src/components/StepDetails.vue b/src/components/StepDetails.vue
index 678364b..e104a15 100644
--- a/src/components/StepDetails.vue
+++ b/src/components/StepDetails.vue
@@ -5,7 +5,7 @@ defineProps({
 </script>
 
 <template>
-  <div :id="stepId" :class="{ 'emphasize-block': $route.hash.slice(1) === stepId, 'my-1': true }">
+  <div :id="stepId" :class="{ 'emphasize-block': $route.hash.slice(1) === stepId, 'my-3': true }">
     <slot></slot>
   </div>
 </template>
diff --git a/src/views/CECView.vue b/src/views/CECView.vue
index 56bb2a3..6b7505e 100644
--- a/src/views/CECView.vue
+++ b/src/views/CECView.vue
@@ -20,7 +20,7 @@ function foreignResidenceSwitch(foreign, local) {
 <template>
   <div class="grid--row">
     <div class="grid--column two-third">
-      <section class="width--xnarrow my-2">
+      <section class="width--xnarrow my-4">
         <h1>Changer d'état civil</h1>
         <p class="text--italic">
           C'est souvent une étape importante dans une transition et pas la plus évidente ni la plus simple :
@@ -70,7 +70,7 @@ function foreignResidenceSwitch(foreign, local) {
         </p>
 
       </section>
-      <section class="width--xnarrow my-2">
+      <section class="width--xnarrow my-4">
         <h2>Comment faire ?</h2>
         <p>En France, il existe deux manières de procéder pour changer d'état civil.</p>
         <p>
@@ -164,7 +164,7 @@ function foreignResidenceSwitch(foreign, local) {
           </div>
         </div>
       </section>
-      <section class="width--xnarrow my-2">
+      <section class="width--xnarrow my-4">
         <h2>Les étapes en détail</h2>
         <p>
           Ici, on vous explique très précisément comment constituer votre dossier pour qu'il aie les
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7075d59..133caf1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -10,14 +10,14 @@ import { RouterLink } from 'vue-router'
   <section class="width--narrow my-4">
     <div class="grid--row">
       <div class="grid--column">
-        <h2>Je veux demander un changement de prénom et/ou de mention de sexe à l'état civil</h2>
+        <strong>Je veux demander un changement de prénom et/ou de mention de sexe à l'état civil</strong>
         <p>Cette étape vous permet de faire reconnaître le changement officiellement.</p>
         <RouterLink class="my-2 button" to="/cec">Commencer</RouterLink>
       </div>
       <div class="grid--column">
-        <h2>
+        <strong>
           Je veux faire mettre à jour mon état civil auprès des entreprises et administrations
-        </h2>
+        </strong>
         <p>
           Cette étape vous permet de répercuter les changements liés à votre état civil auprès des
           différentes organisations avec lesquelles vous intéragissez.

From 0f2a9b9a2da6095aa35dc1260a7aa96a117ca262 Mon Sep 17 00:00:00 2001
From: Agate <me@agate.blue>
Date: Tue, 23 Jan 2024 16:02:46 +0100
Subject: [PATCH 2/3] List documents as a table to improve readability

---
 src/assets/main.css              | 23 +++++++++++++++++++++++
 src/components/DocumentsList.vue | 31 ++++++++++++++++++++-----------
 src/views/DocumentListView.vue   |  4 +---
 3 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 831d464..2a443bc 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -366,6 +366,29 @@ hr.hidden {
   border-top: none;
 }
 
+/* table */
+
+table {
+  font-size: 90%;
+  border-collapse: collapse;
+}
+th {
+  font-weight: bold;
+  text-align: left;
+}
+thead {
+  background-color: var(--separator-color);
+}
+th, td {
+  padding: var(--space-small);
+}
+td {
+  vertical-align: top;
+}
+tbody tr {
+  border-bottom: 1px solid var(--separator-color);
+}
+
 /* messages */
 
 .message--primary {
diff --git a/src/components/DocumentsList.vue b/src/components/DocumentsList.vue
index 31c396a..2508b3b 100644
--- a/src/components/DocumentsList.vue
+++ b/src/components/DocumentsList.vue
@@ -4,15 +4,24 @@ import { RouterLink } from 'vue-router'
 </script>
 
 <template>
-  <div v-for="template in templates" :key="template.id">
-    <h2>
-      <RouterLink :to="{ name: 'documents', params: { id: template.id } }">
-        {{ template.name }}
-      </RouterLink>
-    </h2>
-    <p>{{ template.description }}</p>
-    <hr class="hidden">
-    <hr class="hidden">
-    <hr class="hidden">
-  </div>
+  <table>
+    <thead>
+      <tr>
+        <th>Document</th>
+        <th>Objectif</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="template in templates" :key="template.id">
+        <td>
+          <RouterLink :to="{ name: 'documents', params: { id: template.id } }">
+            {{ template.name }}
+          </RouterLink>
+        </td>
+        <td>
+          {{ template.description }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </template>
diff --git a/src/views/DocumentListView.vue b/src/views/DocumentListView.vue
index 2eb65aa..ff6081e 100644
--- a/src/views/DocumentListView.vue
+++ b/src/views/DocumentListView.vue
@@ -22,11 +22,9 @@ useSeoMeta({
   <section class="width--narrow px-1 py-2">
     <h1>Listes des documents et démarches</h1>
     <p>
-      <strong>
         Voici la liste des documents et démarches que vous pouvez entamer directement
         sur Administrans.
-      </strong>
     </p>
-    <DocumentsList />
+    <DocumentsList class="my-2" />
   </section>
 </template>

From 14e407e45e47d30f49c36ee9954f9f798f60d01d Mon Sep 17 00:00:00 2001
From: Agate <me@agate.blue>
Date: Tue, 23 Jan 2024 16:09:15 +0100
Subject: [PATCH 3/3] Sticky footer

---
 src/assets/main.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 2a443bc..3355d58 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -63,6 +63,11 @@ body {
 }
 
 /* general layout */
+#app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
 header {
   max-width: var(--content-width-large);
   margin: 0 auto;
@@ -72,8 +77,8 @@ main {
   max-width: var(--content-width-large);
   margin: 0 auto;
   padding: var(--space-medium);
-
   font-weight: normal;
+  flex: 1;
 }
 footer {
   border-top: 1px solid var(--separator-color);