Fix: homepage styles

configs/ecospheres/config.yaml

@@ -64,7 +64,7 @@ website:
     display: false
     name:
     link:
-  footer_phrase: "Ce site est une déclinaison thématique de data.gouv.fr sur les données relatives à la transition écologique et énergétique, réalisé par le Ministère en charge de l'environnement"
+  footer_phrase: "Ce site est une déclinaison thématique de data.gouv.fr sur les données relatives à la transition écologique et énergétique, réalisé par le ministère en charge de l'environnement"
   footer_external_links:
     - label: 'data.gouv.fr'
       href: 'https://www.data.gouv.fr'

public/ecospheres/pages/about.md

@@ -6,7 +6,7 @@ _ecologie_.**data.gouv**._fr_ est un catalogue permettant la centralisation des
 
 ## À qui s'adresse cette plateforme ?
 
-_ecologie_.**data.gouv**._fr_ s'adresse aux agents publics des administrations centrales, services déconcentrés et des collectivités territoriales oeuvrant à déployer les politiques publiques portées par le [Ministère en charge de l’environnement](https://www.ecologie.gouv.fr/). L'accès aux données brutes permet également à la société civile, au secteur privé ou encore à l'administration de s'en emparer dans un but de réutilisation.
+_ecologie_.**data.gouv**._fr_ s'adresse aux agents publics des administrations centrales, services déconcentrés et des collectivités territoriales oeuvrant à déployer les politiques publiques portées par le [ministère en charge de l’environnement](https://www.ecologie.gouv.fr/). L'accès aux données brutes permet également à la société civile, au secteur privé ou encore à l'administration de s'en emparer dans un but de réutilisation.
 
 ## Les données ouvertes : qu'est-ce que c'est ?
 

public/ecospheres/pages/accessibility.md

@@ -1,6 +1,6 @@
 # Déclaration d’accessibilité
 
-Le Ministère en charge de l’environnement s’engage à rendre son service accessible, conformément à l’article 47 de la loi n° 2005-102 du 11 février 2005.
+Le ministère en charge de l’environnement s’engage à rendre son service accessible, conformément à l’article 47 de la loi n° 2005-102 du 11 février 2005.
 
 Cette déclaration d’accessibilité s’applique à **ecologie.data.gouv.fr** (https://ecologie.data.gouv.fr).
 

src/assets/main.css

@@ -5,6 +5,7 @@
   --blue-france-950-100: var(--blue-cumulus-950-100);
   --blue-france-950-100-hover: var(--blue-cumulus-950-100-hover);
   --blue-france-950-100-active: var(--blue-cumulus-950-100-active);
+  --blue-france-sun-113: #000091;
   --blue-france-sun-113-625: var(--blue-cumulus-sun-368-moon-732);
   --blue-france-sun-113-625-hover: var(--blue-cumulus-sun-368-moon-732-hover);
   --blue-france-sun-113-625-active: var(--blue-cumulus-sun-368-moon-732-active);
@@ -99,7 +100,7 @@ body {
 }
 
 .actionTile {
-  background: #000092;
+  background: var(--blue-france-sun-113);
   .fr-tile__link {
     color: white;
   }
@@ -185,6 +186,10 @@ body {
   margin-bottom: 1.5rem;
 }
 
+.datagouv-components :where(.fr-link, a:not(.fr-btn)) {
+  color: var(--blue-france-sun-113);
+}
+
 /* Button color contrast fix */
 .fr-btn:not(
     .fr-btn--close,
@@ -199,7 +204,6 @@ body {
 }
 
 /* DSFR search bar fix */
-
 .datagouv-components .fr-search-bar .fr-btn {
   border-radius: 0 0.25rem 0 0;
 }
@@ -210,3 +214,22 @@ body {
     margin-bottom: 0;
   }
 }
+
+/* DSFR org name in card fix */
+/* remove default margins */
+.org--fix div.fr-mx-1v {
+  margin: 0 !important;
+}
+/* gap to add margins when needed */
+.org--fix .inline-flex {
+  gap: 0.25rem;
+}
+/* sometimes the first span is empty, hide it */
+.org--fix .inline-flex span:first-of-type:empty {
+  display: none;
+}
+
+/* Flex gap utility (missing from DSFR) */
+.flex-gap {
+  gap: var(--gap, 0.5rem);
+}

src/components/OrganizationCard.vue

@@ -24,27 +24,27 @@ const isPublicService = (): boolean =>
 </script>
 
 <template>
-  <RouterLink
-    class="fr-tile__link"
-    :to="`/organizations/${organization.slug}` || ''"
-  >
-    <div class="fr-tile-v2 border">
-      <div class="fr-grid-row fr-grid-row--middle fr-mb-8v">
-        <div class="fr-col-auto">
-          <div
-            v-if="organization.logo"
-            class="fr-tile__img border fr-p-3v fr-m-0"
-          >
-            <img
-              :src="organization.logo"
-              alt=""
-              loading="lazy"
-              class="fr-responsive-img"
-            />
-          </div>
+  <div class="fr-tile-v2 fr-enlarge-link border">
+    <div class="fr-grid-row fr-grid-row--middle fr-mb-8v">
+      <div class="fr-col-auto">
+        <div
+          v-if="organization.logo"
+          class="fr-tile__img border fr-p-3v fr-m-0"
+        >
+          <img
+            :src="organization.logo"
+            alt=""
+            loading="lazy"
+            class="fr-responsive-img"
+          />
         </div>
-        <div class="fr-col fr-px-3v">
-          <component :is="headingLevel" class="fr-title-v2__title fr-m-0 h4">
+      </div>
+      <div class="fr-col fr-px-3v">
+        <component :is="headingLevel" class="fr-title-v2__title fr-m-0 h4">
+          <RouterLink
+            class="fr-tile__link"
+            :to="`/organizations/${organization.slug}`"
+          >
             <VIconCustom
               v-if="isPublicService()"
               name="bank-line"
@@ -56,29 +56,29 @@ const isPublicService = (): boolean =>
               name="checkbox-circle-line"
               class="fr-icon--sm fr-mr-1v badge"
             />
-          </component>
-        </div>
+          </RouterLink>
+        </component>
       </div>
+    </div>
 
-      <div v-if="organization.description" class="fr-tile-v2__body">
-        <p class="fr-tile__desc">
-          <text-clamp
-            :auto-resize="true"
-            :text="stripFromMarkdown(organization.description)"
-            :max-lines="3"
-          />
-        </p>
-      </div>
-      <div>
-        <DsfrTag class="fr-card__detail fr-mt-1w fr-mb-1w card__tag">
-          <span
-            ><strong>{{ organization.metrics.datasets }}</strong> jeux de
-            données</span
-          >
-        </DsfrTag>
-      </div>
+    <div v-if="organization.description" class="fr-tile-v2__body">
+      <p class="fr-tile__desc">
+        <text-clamp
+          :auto-resize="true"
+          :text="stripFromMarkdown(organization.description)"
+          :max-lines="3"
+        />
+      </p>
+    </div>
+    <div>
+      <DsfrTag class="fr-card__detail fr-mt-1w fr-mb-1w card__tag">
+        <span
+          ><strong>{{ organization.metrics.datasets }}</strong> jeux de
+          données</span
+        >
+      </DsfrTag>
     </div>
-  </RouterLink>
+  </div>
 </template>
 
 <style scoped>
@@ -87,9 +87,16 @@ const isPublicService = (): boolean =>
   box-shadow: 0px 4px 0px var(--border-active-blue-france);
   height: 100%;
 }
+.fr-tile-v2:where(:hover, :focus-within) {
+  background-color: var(--hover);
+}
+
+.fr-tile__img {
+  background-color: var(--background-default-grey);
+}
 
-.fr-title-v2__title a {
-  background-image: none;
+.fr-tile__link {
+  color: var(--text-default-grey);
 }
 
 .fr-title-v2__title .badge {

src/components/bouquets/BouquetCard.vue

@@ -47,9 +47,7 @@ const { themeColors } = useThemeOptions(theme)
 </script>
 
 <template>
-  <article
-    class="fr-my-1w fr-px-3w fr-py-2w border border-default-grey fr-enlarge-link"
-  >
+  <article class="fr-px-3w fr-py-2w border border-default-grey fr-enlarge-link">
     <div
       v-if="bouquet.private"
       class="absolute top-0 fr-grid-row fr-grid-row--middle fr-mt-n3v"
@@ -64,37 +62,35 @@ const { themeColors } = useThemeOptions(theme)
         />
       </div>
     </div>
-    <div class="fr-grid-row fr-pt-2v align-center flex-nowrap">
-      <div class="fr-col-12 fr-col-sm-2 bouquet-card-col-logo">
-        <OrganizationLogo
-          v-if="bouquet.organization"
-          :size="43"
-          :object="bouquet"
-        />
-        <div v-else class="border fr-p-1-5v fr-mr-1-5v inline-block">
-          <img
-            :src="getOwnerAvatar(bouquet)"
-            alt=""
-            loading="lazy"
-            class="owner-avatar"
-            height="42"
-            width="42"
-          />
-        </div>
-      </div>
-      <div
-        class="fr-col-12 fr-col-sm-10 fr-pl-2v overflow-hidden flex-1-1-auto"
-      >
+    <div
+      class="fr-mt-2v fr-grid-row align-center flex-nowrap flex-gap owner-info"
+    >
+      <OrganizationLogo
+        v-if="bouquet.organization"
+        :size="42"
+        :object="bouquet"
+      />
+
+      <img
+        v-else
+        :src="getOwnerAvatar(bouquet)"
+        alt=""
+        loading="lazy"
+        class="border fr-p-1-5v owner-avatar"
+        height="56"
+        width="56"
+      />
+
+      <div class="overflow-hidden flex-1-1-auto">
         <h3 class="fr-mb-1v fr-grid-row h4">
           <RouterLink :to="bouquetLink" class="text-grey-500">
             {{ bouquet.name }}
           </RouterLink>
         </h3>
         <p
           v-if="bouquet.organization || bouquet.owner"
-          class="fr-m-0 fr-text--sm"
+          class="fr-m-0 fr-text--sm org--fix"
         >
-          Par
           <template v-if="bouquet.organization">
             <OrganizationNameWithCertificate
               :organization="bouquet.organization"
@@ -116,8 +112,8 @@ const { themeColors } = useThemeOptions(theme)
       Mis à jour {{ formatRelativeIfRecentDate(bouquet.last_modified) }}
     </p>
 
-    <div class="fr-grid-row">
-      <span class="fr-tag fr-mr-2v fr-mb-2v">
+    <div class="fr-grid-row flex-gap">
+      <span class="fr-tag">
         <VIconCustom
           name="database-line"
           class="fr-mr-1v"
@@ -131,7 +127,7 @@ const { themeColors } = useThemeOptions(theme)
         </span>
       </span>
 
-      <span v-if="spatialCoverage" class="fr-tag fr-mb-2v">
+      <span v-if="spatialCoverage" class="fr-tag">
         <VIconCustom
           name="road-map-line"
           class="fr-mr-1v"
@@ -147,9 +143,20 @@ const { themeColors } = useThemeOptions(theme)
 </template>
 
 <style scoped>
+article {
+  background-color: var(--background-default-grey);
+}
+.owner-info {
+  --gap: 0.75rem;
+  .fr-text--sm {
+    line-height: 1.4 !important;
+  }
+  & > :first-child {
+    flex: 0 0 auto;
+  }
+}
 .owner-avatar {
-  margin-bottom: -6px;
-  display: inline-block;
+  background-color: #fff;
 }
 .card__tag {
   color: v-bind('themeColors.color');
@@ -166,15 +173,12 @@ const { themeColors } = useThemeOptions(theme)
   line-height: inherit;
 }
 
-.bouquet-card-col-logo {
-  max-width: 4.25rem;
-}
-
 .description p {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 </style>

src/components/bouquets/BouquetDatasetList.vue

@@ -137,7 +137,7 @@ onMounted(() => {
 
 <template>
   <!-- Header and buttons -->
-  <div class="list-header fr-grid-row fr-grid-row--middle justify-between">
+  <div class="flex-gap fr-grid-row fr-grid-row--middle justify-between">
     <h2 class="fr-col-auto fr-m-0">
       Composition du {{ topicsName }} de données
     </h2>
@@ -262,8 +262,8 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.list-header {
-  gap: 1rem;
+.flex-gap {
+  --gap: 1rem;
 }
 details {
   border-block: 1px solid var(--border-default-grey, #ddd);

src/components/bouquets/BouquetGroup.vue

@@ -422,6 +422,7 @@ const actions = computed(() => {
 
 /* MODAL */
 .modal-group :deep(h1) {
+  /* Fluid font-size. Maths from: https://utopia.fyi/type/calculator/ */
   font-size: clamp(1.375rem, 1.3319rem + 0.2155vw, 1.5rem);
 }
 .modal-group form {

src/components/bouquets/BouquetList.vue

@@ -154,7 +154,7 @@ defineExpose({
             Vous pouvez aussi contribuer en créant un {{ topicsName }}.
           </p>
         </div>
-        <div class="fr-grid-row fr-grid-row--undefined">
+        <div class="fr-grid-row">
           <button class="fr-btn" @click.stop.prevent="clearFilters">
             Réinitialiser les filtres
           </button>
@@ -170,8 +170,8 @@ defineExpose({
       </div>
     </div>
   </div>
-  <div class="bouquets-list-container fr-container fr-mb-4w border-top">
-    <ul class="fr-mt-3w fr-pl-0" role="list">
+  <div class="fr-mb-4w border-top">
+    <ul class="fr-grid-row flex-gap fr-mt-3w fr-pl-0" role="list">
       <li v-for="bouquet in bouquets" :key="bouquet.id" class="fr-col-12">
         <BouquetCard :bouquet="bouquet" />
       </li>
@@ -180,9 +180,7 @@ defineExpose({
 </template>
 
 <style scoped>
-/* "revert" gutters — simpler than w/o gutters */
-.bouquets-list-container {
-  padding-right: 0;
-  padding-left: 0;
+.fr-grid-row {
+  --gap: 1rem;
 }
 </style>