From 66c8256a1fef84c90884e032e847f21a32f518a3 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Tue, 6 Jun 2023 16:54:45 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Mise=20=C3=A0=20jour=20du=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/styles/fonts.sass              | 19 ++++---
 assets/styles/main.sass               | 78 ++++++++++++++++++++++-----
 config/_default/config.yml            | 19 +++----
 layouts/_default/baseof.html          |  2 +-
 layouts/associations/list.html        | 14 -----
 layouts/home.html                     | 61 ++++++++++++++-------
 layouts/shortcodes/associations.html  | 12 +++++
 scripts/directus-to-markdown/index.js |  2 +-
 8 files changed, 140 insertions(+), 67 deletions(-)
 create mode 100644 layouts/shortcodes/associations.html

diff --git a/assets/styles/fonts.sass b/assets/styles/fonts.sass
index 42c530e..afa0ec1 100644
--- a/assets/styles/fonts.sass
+++ b/assets/styles/fonts.sass
@@ -12,14 +12,14 @@ body
   line-height: 1.2
   font-family: 'League Spartan Variable'
 
-.viemunicipale h1, .viemunicipale a
-    color: var(--color-green)
-.cadredevie h1, .cadredevie a
-    color: var(--color-blue)
-.economie h1, .economie a
-    color: var(--color-orange)
-.associations h1, .associations a
-    color: var(--color-purple)
+.viemunicipale #content, #content .viemunicipale
+  --color-title: var(--color-green)
+.cadredevie #content, #content .cadredevie
+  --color-title: var(--color-blue)
+.economie #content, #content .economie
+  --color-title: var(--color-orange)
+.associations #content, #content .associations
+  --color-title: var(--color-purple)
 
 h1, h2, h3, h4, h5
   font-weight: 600
@@ -55,6 +55,9 @@ h3
   @media screen and (max-width: $size-sm)
     font-size: 1rem
 
+h1, h2, h3
+  color: var(--color-title)
+
 h4
   font-size: 1rem
   @media screen and (max-width: $size-sm)
diff --git a/assets/styles/main.sass b/assets/styles/main.sass
index 015750f..5e8851f 100644
--- a/assets/styles/main.sass
+++ b/assets/styles/main.sass
@@ -15,7 +15,7 @@ $size-xl: 1280px
 body
   --color-green: #04874B
   --color-blue: #586994
-  --color-orange: #F0833C
+  --color-orange: #D14200
   --color-purple: #4C1036
   --color-grey: #E8E9ED
   --color-primary: black
@@ -92,7 +92,14 @@ body
     @media screen and (max-width: $size-xs)
       padding: 1rem .5rem
 
-
+  .containerGrid
+    display: flex
+    .actus
+      width: 75%
+    .infos
+      width: 25%
+      padding: 7rem 0 0 1rem
+      display: block
 
   .infos
     display: flex
@@ -103,26 +110,26 @@ body
       margin: 1rem
 
     .news
-      width: 65%
+      width: 75%
       display: flex
       flex-direction: column
       @media screen and (max-width: $size-xl)
-        width: 65%
+        width: 70%
       @media screen and (max-width: $size-md)
         width: 100%
         margin: 0
 
     .opening
       background: var(--color-orange)
-      width: 35%
+      width: 25%
       padding: 20px
-      color: black
+      color: white
       background-image: url(/icons/horloge.svg)
       background-repeat: no-repeat
       background-position: center -50px
       background-size: 70%
       @media screen and (max-width: $size-xl)
-        width: 35%
+        width: 30%
       @media screen and (max-width: $size-md)
         width: 100%
         margin: 0
@@ -143,7 +150,46 @@ body
         margin-bottom: 0
 
       a
-        color: black
+        color: white
+
+.nouveautes
+  border: 1px solid black
+  padding: 20px
+
+  ul
+    padding-left: 1rem
+
+.opening2
+  background: var(--color-orange)
+  margin-top: 2rem
+  margin-bottom: 2rem
+  padding: 20px
+  color: white
+  background-image: url(/icons/horloge.svg)
+  background-repeat: no-repeat
+  background-position: center -50px
+  background-size: 70%
+  @media screen and (max-width: $size-md)
+    margin: 0
+    background-position-x: 120%
+    background-size: 50%
+
+  h2
+    margin: 1rem 0
+
+  h3
+    margin: 1rem 0 .4rem
+    text-transform: inherit
+
+  p
+    margin-top: 0
+
+  p:last-child
+    margin-bottom: 0
+
+  a
+    color: white
+
 .news
   aside h2
     text-align: center
@@ -167,10 +213,6 @@ hr
   a
     color: white
 
-#content .commissions
-  h3, h4
-    color: var(--color-green)
-
 #content .conseilmunicipal
   display: flex
   flex-wrap: wrap
@@ -225,7 +267,7 @@ details > summary
   justify-content: center
   .card
     flex: 0 0 calc(100% * 3 / 12)
-    background-color: var(--color-purple)
+    border: 1px solid var(--color-purple)
     margin: 1rem
     padding: 1rem
     border-radius: 4px
@@ -288,3 +330,13 @@ blockquote span
   font-style: normal
   font-weight: bold
   margin-top: 1em
+
+.bandeau
+  margin: 0;
+  font-size: 1rem;
+  margin-top: -.5rem;
+  text-align: center;
+  font-weight: bold;
+
+#content .bandeau, #content .bandeau a
+  color: #e00000;
diff --git a/config/_default/config.yml b/config/_default/config.yml
index 3cf52e2..3581655 100644
--- a/config/_default/config.yml
+++ b/config/_default/config.yml
@@ -13,20 +13,17 @@ disableKinds:
 menu:
   main:
     - parent: economie
-      name: Commerçants
-      url: /economie/#commerçants
+      name: Artisan & Entreprise
+      url: /economie/#artisan--entreprise
     - parent: economie
-      name: Artisans
-      url: /economie/#artisans
+      name: Commerce
+      url: /economie/#commerce
     - parent: economie
-      name: Entreprises
-      url: /economie/#entreprises
+      name: Hébergement
+      url: /economie/#hébergement
     - parent: economie
-      name: Itinérants
-      url: /economie/#itinérants
-    - parent: economie
-      name: Gîte
-      url: /economie/#gites-de-crémeaux
+      name: Marché & itinérant
+      url: /economie/#marché--itinérant
 
 params:
   debug: false
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1182822..b8c9896 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.Language.Lang }}">
 {{ partial "head.html" . }}
-  <body class="{{ default .Params.menu.main.identifier .Params.menu.main.parent }}">
+  <body class="{{ default (default .Params.menu.main.identifier .Params.menu.main.parent) }}">
     {{ partial "header.html" . }}
     {{ block "all" . }}
     <main role="main" id="content" class="container">
diff --git a/layouts/associations/list.html b/layouts/associations/list.html
index 21bc5b9..d4db22a 100644
--- a/layouts/associations/list.html
+++ b/layouts/associations/list.html
@@ -4,19 +4,5 @@
     <div class="container md">
       {{ .Content }}
     </div>
-    <div class="cards">
-      {{ block "list" . }}
-      {{ range sort .Pages "Permalink" }}
-        {{ if .Params.bureau }}
-        <a href="{{ .Permalink }}" class="card {{ if isset .Params "theme" }}{{ .Params.theme }}{{ end }}">
-          <h2>{{ .RenderString .Title }}</h2>
-        </a>
-        {{ end }}
-      {{ end }}
-      {{ end }}
-    </div>
-    <div class="container md">
-      <p>Vous ne retrouvez pas votre association ? Une modification, faute, ou un changement de contact, n'hésitez pas à nous écrire à l'adresse {{ "[com@cremeaux.fr](mailto:com@cremeaux.fr)" | markdownify }}.</p>
-    </div>
   </div>
 {{ end }}
diff --git a/layouts/home.html b/layouts/home.html
index 5e33c9d..70dfa32 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -1,25 +1,48 @@
 {{ define "main" }}
   <div class="container">
-    <h1>Le fil <strong>des actualités</strong></h1>
-    <div class="infos">
-      <div class="news">
-        {{ $headless := .Site.GetPage "/actualites/" }}
-        {{ $lastnews := first 4 (sort $headless.Pages "Date" "desc") }}
-        {{ $first := index (first 1 $lastnews) 0 }}
-        {{ $others := after 1 $lastnews }}
-        {{ with $first }}
-          {{ .Scratch.Set "big" true }}
-          {{ partial "article-preview.html" . }}
-        {{ end }}
-        {{ range $others }}
-          {{ partial "article-preview.html" . }}
-        {{ end }}
-        <p>
-          <a href="/actualites/">Voir toutes les actualités</a>
-        </p>
+    <p class="bandeau">
+      <a href="/actualites/2023/06/sauvons-la-pharmacie/">Signez la pétition</a> pour sauver la pharmacie de Crémeaux ! Nous avons besoin de votre soutiens !
+    </p>
+    <div class="containerGrid">
+      <div class="actus">
+        {{ $actualites := sort (.Site.GetPage "/actualites/").Pages "Date" "desc" }}
+        <div class="news viemunicipale">
+          <h1>Le fil <strong>des actualités</strong></h1>
+          {{ $lastnews := first 4 (where $actualites "Params.event" false) }}
+          {{ $first := index (first 1 $lastnews) 0 }}
+          {{ $others := after 1 $lastnews }}
+          {{ with $first }}
+            {{ .Scratch.Set "big" true }}
+            {{ partial "article-preview.html" . }}
+          {{ end }}
+          {{ range $others }}
+            {{ partial "article-preview.html" . }}
+          {{ end }}
+          <p>
+            <a href="/actualites/">Voir toutes les actualités</a>
+          </p>
+        </div>
+        <div class="news associations">
+          <h1>Les <strong>Évènements</strong> des associations</h1>
+          {{ $lastnews := first 4 (where $actualites "Params.event" true) }}
+          {{ $first := index (first 1 $lastnews) 0 }}
+          {{ $others := after 1 $lastnews }}
+          {{ with $first }}
+            {{ .Scratch.Set "big" true }}
+            {{ partial "article-preview.html" . }}
+          {{ end }}
+          {{ range $others }}
+            {{ partial "article-preview.html" . }}
+          {{ end }}
+          <p>
+            <a href="/actualites/">Voir toutes les actualités</a>
+          </p>
+        </div>
       </div>
-      <div class="opening">
-        {{ .Content }}
+      <div class="infos">
+        <div class="nouveautes">
+          {{ .Content }}
+        </div>
       </div>
     </div>
   </div>
diff --git a/layouts/shortcodes/associations.html b/layouts/shortcodes/associations.html
new file mode 100644
index 0000000..08c189d
--- /dev/null
+++ b/layouts/shortcodes/associations.html
@@ -0,0 +1,12 @@
+</div><div class="cards">
+    {{ block "list" . }}
+    {{ range sort .Page.Pages "Permalink" }}
+      {{ if .Params.bureau }}
+      <a href="{{ .Permalink }}" class="card {{ if isset .Params "theme" }}{{ .Params.theme }}{{ end }}">
+        <h2>{{ .RenderString .Title }}</h2>
+      </a>
+      {{ end }}
+    {{ end }}
+    {{ end }}
+</div>
+<div class="container md">
\ No newline at end of file
diff --git a/scripts/directus-to-markdown/index.js b/scripts/directus-to-markdown/index.js
index 6cee8e7..5d1a75c 100644
--- a/scripts/directus-to-markdown/index.js
+++ b/scripts/directus-to-markdown/index.js
@@ -38,7 +38,7 @@ const config = {
     },
     actualites: {
       readByQueryOption: {
-        fields: ['title', 'date', 'image', 'image_credit', 'vignette', 'vignette_credit', 'description', 'auteur', 'draft', 'content'],
+        fields: ['title', 'date', 'image', 'image_credit', 'vignette', 'vignette_credit', 'description', 'auteur', 'draft', 'content', 'event'],
         filterDraft
       },
       pathBuilder: (article) => {