diff --git a/content/_index.en.md b/content/_index.en.md
index a50bd11cd642959ab87243692ce843fac2e43277..5837c543e918eedd8862feb24403c2ea61593051 100644
--- a/content/_index.en.md
+++ b/content/_index.en.md
@@ -2,9 +2,15 @@
title: Home
date: 2023-12-12
lastmod: 2023-12-12
-description: AgroMetInfo home page - provision of agroclimatic indicators and indicators for monitoring winter crops (soft wheat) and spring crops (maize) using the STICS model in real time in the form of maps and graphs.
+description: AgroMetInfo home page - provision of agroclimatic indicators and indicators for monitoring winter crops (soft wheat) and spring crops (maize) in real time in the form of maps and graphs.
type: home
layout: index
+jumbotron:
+ image:
+ copyright: Photo © Christian Slagmulder INRAE
+ url: images/photo_accueil-christian-slagmulder.webp
+ title: Welcome to AgroMetInfo!
+ text:
---
AgroMetInfo documentation is [in French](/).
diff --git a/content/_index.md b/content/_index.md
index 412dbf7d401cdb822f07a6010ed26a74b42daab5..7adef8261aefe24c10f5a0be013b54bd45224ed3 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,19 +1,21 @@
---
title: Accueil
date: 2023-09-12
-lastmod: 2023-09-12
-description: Page d’accueil d’AgroMetInfo - mise à disposition d’indicateurs agroclimatiques et des indicateurs de suivi de culture d’hiver (culture type blé tendre) et de printemps (culture type maïs) par le modèle STICS en temps réel sous forme de cartes et de graphiques.
+lastmod: 2024-07-05
+description: Accueil d’AgroMetInfo - mise à disposition d’indicateurs agroclimatiques et des indicateurs de suivi de culture d’hiver (culture type blé tendre) et de printemps (culture type maïs) en temps réel sous forme de cartes et de graphiques.
type: home
layout: index
+jumbotron:
+ image:
+ copyright: Photo © Christian Slagmulder INRAE
+ url: images/photo_accueil-christian-slagmulder.webp
+ title: Bienvenue dans le service AgroMetInfo !
+ text: Indicateurs simples de suivi de l'évolution des conditions agroclimatiques des cultures en France métropolitaine
---
-{{% jumbotron src="/images/photo_accueil-armelle-favery.jpg" title="Photo © Armelle Favery INRAE" %}}
+{{< figure src="/images/carte_accueil.webp" class="right-image" link="app" alt="Découvrir notre carte interactive" >}}
-## Bienvenue dans le service AgroMetInfo !
-
-**AgroMetInfo met à disposition en temps réel des indicateurs simples de suivi de l'évolution des conditions agroclimatiques des cultures en France métropolitaine.**
-
-{{% /jumbotron %}}
+AgroMetInfo met à disposition en temps réel des indicateurs simples de suivi de l'évolution des conditions agroclimatiques des cultures en France métropolitaine.
AgroMetInfo est un service proposé par [**INRAE**](https://www.inrae.fr) en collaboration avec [**Météo-France**](https://meteofrance.fr/) qui a vocation à évoluer dans le temps.
Cette application est portée par l’unité de service [AgroClim](https://agroclim.inrae.fr/).
@@ -21,16 +23,15 @@ Cette application est portée par l’unité de service [AgroClim](https://agroc
Les [indicateurs agroclimatiques](/explications/indicateurs.html) nous informent de l'évolution des conditions climatiques à l'échelle annuelle ou pendant des périodes importantes pour la plupart de cultures.
Dans cette première version nous faisons un focus sur les périodes d'intérêt pour les cultures d'hiver (par exemple le blé, colza…) ou de printemps (par exemple le maïs, le tournesol, arbres fruitiers, vigne…).
-Ils sont calculés à partir des variables climatiques issues de la ré-analyse [SAFRAN](/explications/donnees_climatiques.html) produite chaque jour par Météo-France qui sont regroupés à l'échelle de la [Petite Région Agricole](/explications/pra.html).
+Les calculs des indicateurs sont réalisés à partir des variables climatiques issues de la ré-analyse [SAFRAN](/explications/donnees_climatiques.html) produite chaque jour par Météo-France à l'échelle de la maille SAFRAN (8 km x 8 km) et regroupés à l’échelle de la [Petite Région Agricole](/explications/pra.html).
<div class="app"><a href="{{< agrometinfoAppUrl >}}" role="button"><span class="fas fa-map"></span> Découvrir notre carte interactive</a></div>
-## Comment se retrouver dans ces pages ?
-La documentation est structurée en 3 parties :
+## La documentation est structurée en 3 parties :
* [Découvrir AgroMetInfo](decouvrir.html) vous guide dans la prise en main de l’application,
* [Explications](explications.html) donne des réponses aux questions fréquentes et des clefs pour la compréhension de certains concepts,
* [Références](references.html) offre une description des composants internes d’AgroMetInfo (bibliothèque d’indicateurs, données climatiques, calculs…).
-Si vous ne trouvez pas l’aide attendue dans ce centre d’aide, vous pouvez [nous contacter](/contact.html).
+Si vous ne trouvez pas l’aide attendue dans la documentation, vous pouvez [nous contacter](/contact.html).
diff --git a/content/credits.en.md b/content/credits.en.md
index b18b3d6f4e47b18114187d10debfe66d524ada6a..f946154c33ad868fbf74a4a0c82c95c9cf79e2cd 100644
--- a/content/credits.en.md
+++ b/content/credits.en.md
@@ -16,10 +16,12 @@ weight: 7
**Developers**: Olivier Maury, Jérémie Décome
-**Documentation writers**: Renan Le Roux, Olivier Maury
+**Documentation writers**: Iñaki GarcÃa de Cortázar-Atauri, Renan Le Roux, Olivier Maury
**Logo designer**: Armelle Favery
+**Photographer**: Christian Slagmulder
+
The application was developed using the following technologies:
- Jakarta EE 9
diff --git a/content/credits.fr.md b/content/credits.fr.md
index 150270ff0d44188308fb7e611b1dbc57635c72df..e4eddfb17ce0f9ca172fd503573d47a3c18cc409 100644
--- a/content/credits.fr.md
+++ b/content/credits.fr.md
@@ -20,7 +20,7 @@ weight: 7
**Créatrice du logotype** : Armelle Favery
-**Autrice de la photo d'accueil** : Armelle Favery
+**Photographe** : Christian Slagmulder
L’application a été développée grâce aux technologies suivantes :
diff --git a/content/explications/pra.md b/content/explications/pra.md
index 23418bb6aea97ac1f2db17caf0e559ff99ccfba3..e139ddc43b13c7352153f5d4d31457de48e81731 100644
--- a/content/explications/pra.md
+++ b/content/explications/pra.md
@@ -1,17 +1,15 @@
---
title: Petites régions agricoles
date: 2024-05-06
-lastmod: 2024-06-17
+lastmod: 2024-07-10
description: "Les petites régions agricoles (PRA)."
weight: 4
---
-{{% jumbotron src="/images/explications/pra.png" title="Carte des PRA" %}}
+{{< figure src="/images/explications/pra.png" title="Carte des PRA" class="right-image" >}}
Les petites régions agricoles (PRA) ont été définies à partir de 1946 pour caractériser des zones agricoles homogènes.
-{{% /jumbotron %}}
-
La PRA est constituée par le croisement du département et de la région agricole (RA) qui est constituée de plusieurs communes. On compte 713 PRA.
Le site [Agreste](https://agreste.agriculture.gouv.fr/agreste-web/methodon/Z.1/!searchurl/listeTypeMethodon/) du Ministère de l'Agriculture propose plus d’informations sur ce zonage (notamment la correspondance des communes).
diff --git a/static/images/carte_accueil.webp b/static/images/carte_accueil.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0c5dca633de6ff034f43bd59205e7524b7de8788
Binary files /dev/null and b/static/images/carte_accueil.webp differ
diff --git a/static/images/photo_accueil-armelle-favery.jpg b/static/images/photo_accueil-armelle-favery.jpg
deleted file mode 100644
index 6003364d32507a45ed3383d491ff03401b67fca7..0000000000000000000000000000000000000000
Binary files a/static/images/photo_accueil-armelle-favery.jpg and /dev/null differ
diff --git a/static/images/photo_accueil-christian-slagmulder.webp b/static/images/photo_accueil-christian-slagmulder.webp
new file mode 100644
index 0000000000000000000000000000000000000000..41def2816b6edb23af586de7b3d860f03e5f0bd1
Binary files /dev/null and b/static/images/photo_accueil-christian-slagmulder.webp differ
diff --git a/themes/hugo-theme-relearn/layouts/home/index.html b/themes/hugo-theme-relearn/layouts/home/index.html
index 968e47b407f35acbc3131e9621745e61b34789e8..a44b2411c60b7bf5e1d60896d5d44f14cf7b435d 100644
--- a/themes/hugo-theme-relearn/layouts/home/index.html
+++ b/themes/hugo-theme-relearn/layouts/home/index.html
@@ -62,7 +62,7 @@
</head>
<body>
<nav>
- {{- partial "agroclimapps.html" }}
+ {{ partial "agroclimapps.html" }}
<ul>
<li class="brand">
<img alt="logo" src="{{ "images/logo_etat-agrometinfo.svg" | relURL }}" />
@@ -80,6 +80,14 @@
{{- end }}
</ul>
</nav>
+ {{- if .Params.jumbotron }}
+ <div class="jumbotron" style="background-image: url('{{ .Params.jumbotron.image.url }}');" title="{{ .Params.jumbotron.image.copyright }}">
+ <div>
+ <h1>{{ .Params.jumbotron.title | markdownify }}</h1>
+ <p>{{ .Params.jumbotron.text | markdownify }}</p>
+ </div>
+ </div>
+ {{- end }}
<article>
{{- .Content }}
</article>
diff --git a/themes/hugo-theme-relearn/layouts/partials/agroclimapps.html b/themes/hugo-theme-relearn/layouts/partials/agroclimapps.html
index 813b7e3453f63468773f71d8da2a066e784278a7..73d5d3f9ada1f5963e43b0de303b45f206e45b42 100644
--- a/themes/hugo-theme-relearn/layouts/partials/agroclimapps.html
+++ b/themes/hugo-theme-relearn/layouts/partials/agroclimapps.html
@@ -3,22 +3,22 @@
<div class="menu">
<div>Les applications d'AgroClim</div>
<ul>
- <li><a href="https://www.agrometinfo.fr/" target="_blank"></a><img src="/images/logo_agrometinfo.svg">
+ <li><a href="https://www.agrometinfo.fr/" target="_blank"><img src="/images/logo_agrometinfo.svg"></a>
<div>AgroMetInfo</div>
</li>
- <li><a href="https://agroclim.inrae.fr/carto/" target="_blank"></a><img src="/images/logo_carto.png">
+ <li><a href="https://agroclim.inrae.fr/carto/" target="_blank"><img src="/images/logo_carto.png"></a>
<div>Carto</div>
</li>
- <li><a href="https://agroclim.inrae.fr/climatik/" target="_blank"></a><img src="/images/logo_climatik.png">
+ <li><a href="https://agroclim.inrae.fr/climatik/" target="_blank"><img src="/images/logo_climatik.png"></a>
<div>CLIMATIK</div>
</li>
- <li><a href="https://agroclim.inrae.fr/getari/" target="_blank"></a><img src="/images/logo_getari.png">
+ <li><a href="https://agroclim.inrae.fr/getari/" target="_blank"><img src="/images/logo_getari.png"></a>
<div>GETARI</div>
</li>
- <li><a href="https://agroclim.inrae.fr/siclima/" target="_blank"></a><img src="/images/logo_siclima.png">
+ <li><a href="https://agroclim.inrae.fr/siclima/" target="_blank"><img src="/images/logo_siclima.png"></a>
<div>SICLIMA</div>
</li>
- <li><a href="https://tempo.pheno.fr/" target="_blank"></a><img src="/images/logo_tempo.png">
+ <li><a href="https://tempo.pheno.fr/" target="_blank"><img src="/images/logo_tempo.png"></a>
<div>TEMPO</div>
</li>
</ul>
diff --git a/themes/hugo-theme-relearn/layouts/shortcodes/jumbotron.html b/themes/hugo-theme-relearn/layouts/shortcodes/jumbotron.html
index ed749d005a00c3c183175d95ad3cf11c8c541878..433e68ce3c551a445a8c60c374680015b0260ffd 100644
--- a/themes/hugo-theme-relearn/layouts/shortcodes/jumbotron.html
+++ b/themes/hugo-theme-relearn/layouts/shortcodes/jumbotron.html
@@ -1,8 +1,5 @@
-<div class="jumbotron">
- <div>
- {{- .Inner | markdownify -}}
- </div>
- <div>
- <img src="{{- .Get "src" -}}" alt="{{- .Get "title" -}}" title="{{- .Get "title" -}}" />
- </div>
-</div>
\ No newline at end of file
+<div class="jumbotron" style="background-image: url('{{- .Get "src" -}}');" title="{{- .Get "title" -}}">
+ <div>
+ {{- .Inner | markdownify -}}
+ </div>
+</div>
diff --git a/themes/hugo-theme-relearn/layouts/shortcodes/side-image.html b/themes/hugo-theme-relearn/layouts/shortcodes/side-image.html
new file mode 100644
index 0000000000000000000000000000000000000000..6b8526d19cc8c25557fad79d0e2aab2d1c0d1dfd
--- /dev/null
+++ b/themes/hugo-theme-relearn/layouts/shortcodes/side-image.html
@@ -0,0 +1,9 @@
+<div class="side-image">
+ <div>
+ {{- .Inner | markdownify -}}
+ </div>
+ <div>
+ <img src="{{- .Get "src" -}}" alt="{{- .Get "title" -}}" title="{{- .Get "title" -}}" />
+ </div>
+</div>
+
diff --git a/themes/hugo-theme-relearn/static/css/fonts.css b/themes/hugo-theme-relearn/static/css/fonts.css
index e0962ae55dc2720178c37cc4c3837704958166ac..a7824348215841ab503babec504fcc21b037bc3c 100644
--- a/themes/hugo-theme-relearn/static/css/fonts.css
+++ b/themes/hugo-theme-relearn/static/css/fonts.css
@@ -37,3 +37,27 @@
src: url("../fonts/WorkSans-Bold.woff2") format("woff2"), url("../fonts/WorkSans-Bold.woff") format("woff");
font-display: swap;
}
+@font-face{
+ font-family:liberation sans;
+ font-style:normal;
+ font-weight:400;
+ src:local('Liberation Sans'),url(../fonts/LiberationSans-Regular.woff) format('woff')
+}
+@font-face{
+ font-family:liberation sans;
+ font-style:italic;
+ font-weight:400;
+ src:local('Liberation Sans'),url(../fonts/LiberationSans-Italic.woff) format('woff')
+}
+@font-face{
+ font-family:liberation sans;
+ font-style:normal;
+ font-weight:700;
+ src:local('Liberation Sans'),url(../fonts/LiberationSans-Bold.woff) format('woff')
+}
+@font-face{
+ font-family:liberation sans;
+ font-style:italic;
+ font-weight:700;
+ src:local('Liberation Sans'),url(../fonts/LiberationSans-BoldItalic.woff) format('woff')
+}
diff --git a/themes/hugo-theme-relearn/static/css/home.css b/themes/hugo-theme-relearn/static/css/home.css
index 9ad3d6b3275373734d5d4b547731e3b19139acbc..97eea076b8d1464f7e6fdbec92da7b71aaba0be1 100644
--- a/themes/hugo-theme-relearn/static/css/home.css
+++ b/themes/hugo-theme-relearn/static/css/home.css
@@ -8,6 +8,7 @@ article {
}
article,
+nav,
footer {
margin-left: auto;
margin-right: auto;
@@ -15,6 +16,7 @@ footer {
}
@media (min-width:768px) {
+ nav,
article,
footer {
width:750px
@@ -22,6 +24,7 @@ footer {
}
@media (min-width: 1200px) {
+ nav,
article,
footer {
width: 1170px;
@@ -40,6 +43,7 @@ body {
nav>ul {
align-items: center;
+ margin-bottom: 0;
margin-top: 0;
}
@@ -93,6 +97,10 @@ p {
margin: 1rem 0;
}
+strong {
+ font-weight: bold;
+}
+
.agroclim-apps {
cursor: pointer;
position: absolute;
@@ -145,7 +153,10 @@ p {
}
.app {
- text-align: center;
+ position: relative;
+ top: 50%;
+ display: grid;
+ justify-content: center;
}
.app > a {
@@ -153,6 +164,7 @@ p {
border: 1px solid;
border-color: var(--INTERNAL-MAIN-LINK-color);;
color: var(--INTERNAL-MAIN-BG-color);
+ margin: 1rem;
padding: 1rem;
line-height: 1.33;
border-radius: 6px;
@@ -175,12 +187,16 @@ p {
}
.jumbotron {
- display: grid;
- grid-template-columns: 60% 40%;
- grid-gap: 10px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: top center;
+ padding: var(--JUMBOTRON-padding);
+ text-align: center;
}
-.jumbotron > div > img {
- max-width: 100%;
+.jumbotron div {
+ background: var(--JUMBOTRON-DIV-background);
+ padding: 0.75em;
+ min-height: 10em;
}
.license {
@@ -188,6 +204,22 @@ p {
padding: 1em 1em 0 2em;
}
+.right-image {
+ float: right;
+ width: 30%;
+}
+.right-image img {
+ width: 100%;
+}
+
+.side-image {
+ display: grid;
+ grid-template-columns: 60% 40%;
+ grid-gap: 10px;
+}
+.side-image > div > img {
+ max-width: 100%;
+}
:root {
color-scheme: light dark;
@@ -201,6 +233,8 @@ p {
--INTERNAL-MAIN-LINK-color: rgba(72, 106, 201, 1);
--INTERNAL-MAIN-TEXT-color: rgba(16, 16, 16, 1);
--INTERNAL-MENU-SECTIONS-BG-color: #f7f7f7;
+ --JUMBOTRON-DIV-background: rgba(255,255,255,0.55);
+ --JUMBOTRON-padding: 0em;
--MENU-HOME-LINK-color: rgba( 64, 64, 64, 1 );
}
@@ -211,5 +245,7 @@ p {
--INTERNAL-MAIN-LINK-color: rgb(129, 159, 245);
--INTERNAL-MAIN-TEXT-color: rgba(224, 224, 224, 1);
--INTERNAL-MENU-SECTIONS-BG-color: rgba(39, 39, 39, 1);
+ --JUMBOTRON-DIV-background: rgba(0,0,0,0.55);
+ --JUMBOTRON-padding: 0;
--MENU-HOME-LINK-color: rgba( 224, 224, 224, 1 );
}
diff --git a/themes/hugo-theme-relearn/static/css/theme.css b/themes/hugo-theme-relearn/static/css/theme.css
index 5a2480fe124f0e1da336e968bed27b271fce3927..801619073af498d4e34603620c76ae806c46476a 100644
--- a/themes/hugo-theme-relearn/static/css/theme.css
+++ b/themes/hugo-theme-relearn/static/css/theme.css
@@ -2193,12 +2193,21 @@ ul.logos img {
cursor: text;
text-decoration: none;
}
-.jumbotron {
+
+.right-image {
+ float: right;
+ width: 30%;
+}
+.right-image img {
+ width: 100%;
+}
+
+.side-image {
display: grid;
grid-template-columns: 60% 40%;
grid-gap: 10px;
}
-.jumbotron > div > img {
+.side-image > div > img {
max-width: 100%;
}
@font-face{