Merge pull request #41 from Fransgenre/readability

Lisibilité, améliorations légères du layout

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);
@@ -129,17 +134,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 +182,7 @@ p {
 
 ol,
 ul {
-  padding-left: var(--space-medium);
+  padding-left: var(--space-large);
 }
 
 button,
@@ -365,6 +371,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 {

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>

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>

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

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>

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.