ressources, corrections fonds, placement icones map projets fonctionnel en mobile

config/sync/core.entity_form_display.node.ressource.default.yml

@@ -3,32 +3,48 @@ langcode: fr
 status: true
 dependencies:
   config:
-    - field.field.node.ressource.body
+    - field.field.node.ressource.field_couverture
+    - field.field.node.ressource.field_fichier_ressource
+    - field.field.node.ressource.field_ressource_date
+    - image.style.thumbnail
     - node.type.ressource
   module:
+    - datetime
+    - file
+    - image
     - path
-    - text
 id: node.ressource.default
 targetEntityType: node
 bundle: ressource
 mode: default
 content:
-  body:
-    type: text_textarea_with_summary
-    weight: 121
-    region: content
-    settings:
-      rows: 9
-      summary_rows: 3
-      placeholder: ''
-      show_summary: false
-    third_party_settings: {  }
   created:
     type: datetime_timestamp
     weight: 10
     region: content
     settings: {  }
     third_party_settings: {  }
+  field_couverture:
+    type: image_image
+    weight: 123
+    region: content
+    settings:
+      progress_indicator: throbber
+      preview_image_style: thumbnail
+    third_party_settings: {  }
+  field_fichier_ressource:
+    type: file_generic
+    weight: 122
+    region: content
+    settings:
+      progress_indicator: throbber
+    third_party_settings: {  }
+  field_ressource_date:
+    type: datetime_default
+    weight: 124
+    region: content
+    settings: {  }
+    third_party_settings: {  }
   langcode:
     type: language_select
     weight: 2

config/sync/core.entity_view_display.node.ressource.default.yml

@@ -3,22 +3,47 @@ langcode: fr
 status: true
 dependencies:
   config:
-    - field.field.node.ressource.body
+    - field.field.node.ressource.field_couverture
+    - field.field.node.ressource.field_fichier_ressource
+    - field.field.node.ressource.field_ressource_date
     - node.type.ressource
   module:
-    - text
+    - datetime
+    - file
+    - image
     - user
 id: node.ressource.default
 targetEntityType: node
 bundle: ressource
 mode: default
 content:
-  body:
+  field_couverture:
-    type: text_default
+    type: image
-    label: hidden
+    label: above
-    settings: {  }
+    settings:
+      image_link: ''
+      image_style: ''
+      image_loading:
+        attribute: lazy
     third_party_settings: {  }
-    weight: 101
+    weight: 103
+    region: content
+  field_fichier_ressource:
+    type: file_default
+    label: above
+    settings:
+      use_description_as_link_text: true
+    third_party_settings: {  }
+    weight: 102
+    region: content
+  field_ressource_date:
+    type: datetime_default
+    label: above
+    settings:
+      timezone_override: ''
+      format_type: moyen
+    third_party_settings: {  }
+    weight: 104
     region: content
   links:
     settings: {  }

config/sync/core.entity_view_display.node.ressource.teaser.yml

@@ -4,29 +4,25 @@ status: true
 dependencies:
   config:
     - core.entity_view_mode.node.teaser
-    - field.field.node.ressource.body
+    - field.field.node.ressource.field_couverture
+    - field.field.node.ressource.field_fichier_ressource
+    - field.field.node.ressource.field_ressource_date
     - node.type.ressource
   module:
-    - text
     - user
 id: node.ressource.teaser
 targetEntityType: node
 bundle: ressource
 mode: teaser
 content:
-  body:
-    type: text_summary_or_trimmed
-    label: hidden
-    settings:
-      trim_length: 600
-    third_party_settings: {  }
-    weight: 101
-    region: content
   links:
     settings: {  }
     third_party_settings: {  }
     weight: 100
     region: content
 hidden:
+  field_couverture: true
+  field_fichier_ressource: true
+  field_ressource_date: true
   langcode: true
   search_api_excerpt: true

config/sync/field.field.node.ressource.body.yml

@@ -1,24 +0,0 @@
-uuid: 4752307f-9aa9-40d5-b6b4-67ff2994d167
-langcode: fr
-status: true
-dependencies:
-  config:
-    - field.storage.node.body
-    - node.type.ressource
-  module:
-    - text
-id: node.ressource.body
-field_name: body
-entity_type: node
-bundle: ressource
-label: Body
-description: ''
-required: false
-translatable: true
-default_value: {  }
-default_value_callback: ''
-settings:
-  display_summary: true
-  required_summary: false
-  allowed_formats: {  }
-field_type: text_with_summary

config/sync/field.field.node.ressource.field_couverture.yml

@@ -0,0 +1,41 @@
+uuid: 337280cb-c1a4-4258-8002-3e54da4ef7af
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_couverture
+    - node.type.ressource
+  module:
+    - image
+id: node.ressource.field_couverture
+field_name: field_couverture
+entity_type: node
+bundle: ressource
+label: Couverture
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  handler: 'default:file'
+  handler_settings: {  }
+  file_directory: '[date:custom:Y]-[date:custom:m]'
+  file_extensions: 'png gif jpg jpeg'
+  max_filesize: ''
+  max_resolution: ''
+  min_resolution: ''
+  alt_field: true
+  alt_field_required: true
+  title_field: false
+  title_field_required: false
+  default_image:
+    uuid: ''
+    alt: ''
+    title: ''
+    width: null
+    height: null
+    caption: ''
+  caption_field: 0
+  caption_field_required: 0
+field_type: image

config/sync/field.field.node.ressource.field_fichier_ressource.yml

@@ -0,0 +1,27 @@
+uuid: cb4d94b5-ba0c-42f9-afc3-872a22dcf970
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_fichier_ressource
+    - node.type.ressource
+  module:
+    - file
+id: node.ressource.field_fichier_ressource
+field_name: field_fichier_ressource
+entity_type: node
+bundle: ressource
+label: fichier_ressource
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  handler: 'default:file'
+  handler_settings: {  }
+  file_directory: '[date:custom:Y]-[date:custom:m]'
+  file_extensions: 'txt pdf odt'
+  max_filesize: ''
+  description_field: false
+field_type: file

config/sync/field.field.node.ressource.field_ressource_date.yml

@@ -0,0 +1,21 @@
+uuid: 492d0344-680a-4fc6-ae79-d238ac94c597
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_ressource_date
+    - node.type.ressource
+  module:
+    - datetime
+id: node.ressource.field_ressource_date
+field_name: field_ressource_date
+entity_type: node
+bundle: ressource
+label: 'Ressource date'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: datetime

config/sync/field.storage.node.field_couverture.yml

@@ -0,0 +1,30 @@
+uuid: 155a4d26-3357-495d-9d93-36c6ceab75ba
+langcode: fr
+status: true
+dependencies:
+  module:
+    - file
+    - image
+    - node
+id: node.field_couverture
+field_name: field_couverture
+entity_type: node
+type: image
+settings:
+  target_type: file
+  display_field: false
+  display_default: false
+  uri_scheme: public
+  default_image:
+    uuid: ''
+    alt: ''
+    title: ''
+    width: null
+    height: null
+module: image
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/field.storage.node.field_fichier_ressource.yml

@@ -0,0 +1,23 @@
+uuid: bd5e08e2-421d-432c-bcda-db3449339ce9
+langcode: fr
+status: true
+dependencies:
+  module:
+    - file
+    - node
+id: node.field_fichier_ressource
+field_name: field_fichier_ressource
+entity_type: node
+type: file
+settings:
+  target_type: file
+  display_field: false
+  display_default: false
+  uri_scheme: public
+module: file
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/field.storage.node.field_ressource_date.yml

@@ -0,0 +1,20 @@
+uuid: b546fce3-9cd8-40b7-bc5e-4b0d159d5ade
+langcode: fr
+status: true
+dependencies:
+  module:
+    - datetime
+    - node
+id: node.field_ressource_date
+field_name: field_ressource_date
+entity_type: node
+type: datetime
+settings:
+  datetime_type: date
+module: datetime
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/views.view.ressources.yml

@@ -0,0 +1,177 @@
+uuid: f02beb40-9adc-4cd4-adce-85f59f367b9b
+langcode: fr
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.full
+    - node.type.ressource
+  module:
+    - node
+    - user
+id: ressources
+label: Ressources
+module: views
+description: ''
+tag: ''
+base_table: node_field_data
+base_field: nid
+display:
+  default:
+    id: default
+    display_title: Default
+    display_plugin: default
+    position: 0
+    display_options:
+      title: Ressources
+      fields:
+        title:
+          id: title
+          table: node_field_data
+          field: title
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: title
+          plugin_id: field
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            make_link: false
+            absolute: false
+            word_boundary: false
+            ellipsis: false
+            strip_tags: false
+            trim: false
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: string
+          settings:
+            link_to_entity: true
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+      pager:
+        type: some
+        options:
+          offset: 0
+          items_per_page: 1000
+      exposed_form:
+        type: basic
+        options:
+          submit_button: Appliquer
+          reset_button: false
+          reset_button_label: Réinitialiser
+          exposed_sorts_label: 'Trier par'
+          expose_sort_order: true
+          sort_asc_label: Asc
+          sort_desc_label: Desc
+      access:
+        type: perm
+        options:
+          perm: 'access content'
+      cache:
+        type: tag
+        options: {  }
+      empty: {  }
+      sorts:
+        created:
+          id: created
+          table: node_field_data
+          field: created
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: created
+          plugin_id: date
+          order: DESC
+          expose:
+            label: ''
+            field_identifier: ''
+          exposed: false
+          granularity: second
+      arguments: {  }
+      filters:
+        status:
+          id: status
+          table: node_field_data
+          field: status
+          entity_type: node
+          entity_field: status
+          plugin_id: boolean
+          value: '1'
+          group: 1
+          expose:
+            operator: ''
+        type:
+          id: type
+          table: node_field_data
+          field: type
+          entity_type: node
+          entity_field: type
+          plugin_id: bundle
+          value:
+            ressource: ressource
+      style:
+        type: default
+      row:
+        type: 'entity:node'
+        options:
+          view_mode: full
+      query:
+        type: views_query
+        options:
+          query_comment: ''
+          disable_sql_rewrite: false
+          distinct: false
+          replica: false
+          query_tags: {  }
+      relationships: {  }
+      header: {  }
+      footer: {  }
+      display_extenders: {  }
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - 'user.node_grants:view'
+        - user.permissions
+      tags: {  }
+  page_1:
+    id: page_1
+    display_title: Page
+    display_plugin: page
+    position: 1
+    display_options:
+      display_extenders: {  }
+      path: ressources
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - 'user.node_grants:view'
+        - user.permissions
+      tags: {  }

web/modules/custom/erable_mod/assets/js/carte-interactive.js

@@ -198,7 +198,10 @@ function placeProjectsIcons(projectsIcons, container) {
       const finalX = containerWidth * (territoryBounds.left / 100 + (xPercentage / 100) * (territoryBounds.right - territoryBounds.left) / 100) - iconWidth / 2;
       const finalY = containerHeight * (territoryBounds.top / 100 + (yPercentage / 100) * (territoryBounds.bottom - territoryBounds.top) / 100) - iconWidth / 2;
 
-      icon.setAttribute('transform', `translate(${finalX}, ${finalY})`);
+      // icon.setAttribute('transform', `translate(${finalX}, ${finalY})`); // does not seems to be working on mobile
+
+      icon.style.left = `${finalX}px`;
+      icon.style.top = `${finalY}px`;
     } else {
       console.warn(`Territory not found for lat: ${lat}, lon: ${lon}`);
     }

web/themes/erabletheme/css/styles.css

@@ -66,6 +66,10 @@ body > .dialog-off-canvas-main-canvas {
   z-index: 1;
 }
 
+html {
+  overflow-x: hidden;
+}
+
 .layout-container {
   display: flex;
 }
@@ -341,7 +345,8 @@ body.toolbar-fixed header[role=banner] {
 .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(6),
 .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(7),
 .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(8),
-.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(9) {
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(9),
+.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(10) {
   border-bottom: solid 1px white;
   padding: 12px 0;
 }
@@ -773,6 +778,7 @@ body.toolbar-fixed header[role=banner] {
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 @media (min-width: 760px) {
   .actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 {
@@ -997,14 +1003,26 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
 
 #background {
   z-index: -1;
+  max-width: 99vw;
+  width: 100vw;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 #background img {
   position: absolute;
   pointer-events: none;
 }
-#background #bg-top #bg-1 {
+#background #bg-top {
-  top: 5vh;
+  /* #bg-1 {
-  left: 0;
+    top: 5vh;
+    left: 0;
+  } */
+  /* #bg-4 {
+    top: 18vh;
+    right: -45vw;
+  } */
 }
 #background #bg-top #bg-3 {
   top: 13vh;
@@ -1014,14 +1032,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   top: 8vh;
   left: -28vw;
 }
-#background #bg-top #bg-4 {
+#background #bg-top #bg-5 {
-  top: 18vh;
+  width: 20vw;
-  right: -45vw;
+  top: 5vh;
-}
-#background #bg-middle #bg-5 {
-  top: -20vh;
   right: -10vw;
 }
+#background #bg-middle {
+  /* #bg-8 {
+    width: 80vw;
+    top: 45vh;
+    left: -40vw;
+  } */
+}
 #background #bg-middle #bg-6 {
   top: 5vh;
   right: -5vw;
@@ -1031,11 +1053,6 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   top: 10vh;
   right: 0vw;
 }
-#background #bg-middle #bg-8 {
-  width: 80vw;
-  top: 45vh;
-  left: -40vw;
-}
 #background #bg-middle #bg-12 {
   width: 105vw;
   left: -5vw;
@@ -1339,6 +1356,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 @media (min-width: 760px) {
   .map-projets > #sites-map-container #popup h3 {
@@ -1461,6 +1479,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 @media (min-width: 760px) {
   .layout-content .fullpage .fullpage_content h3, .layout-content .fullpage .fullpage_content h4, .layout-content .fullpage .fullpage_content h5, .layout-content .fullpage .fullpage_content h6 {
@@ -1577,6 +1596,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 @media (min-width: 760px) {
   aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2,
@@ -1753,6 +1773,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 @media (min-width: 760px) {
   .paragraph--type--membre-equipe > .prenom,
@@ -2613,6 +2634,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 @media (min-width: 760px) {
   .layout-content .fullpage.projets > .intro_map #sites-map-container #popup h3 {
@@ -2686,6 +2708,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 .layout-content .fullpage.projets > .projets_list > .views-row > .views-field-title a {
   color: #038788;
@@ -2860,6 +2883,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 @media (min-width: 760px) {
   .fullpage.projet_full .text-content .intertitre {
@@ -2886,6 +2910,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 @media (min-width: 760px) {
   .fullpage.projet_full .chiffre-clefs > div > div .paragraph > div:first-of-type {
@@ -2961,6 +2986,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
   font-size: 0.9rem;
   color: #038788;
   font-weight: 800;
+  line-height: 1.3;
 }
 @media (min-width: 760px) {
   .fullpage.projet_full .equipe > div > div:nth-of-type(2) > div > div > div:first-of-type {
@@ -3037,6 +3063,36 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
   padding: 1rem 0;
 }
 
+.taxonomy_page > .fullpage_content > div:last-of-type {
+  display: grid !important;
+  grid-template-columns: 0.5fr 1fr;
+  grid-template-rows: repeat(3, auto);
+}
+.taxonomy_page > .fullpage_content > div:last-of-type > .diapo {
+  grid-column: 1;
+  grid-row: 2/4;
+  margin: 0 !important;
+  margin-left: 3vw !important;
+}
+.taxonomy_page > .fullpage_content > div:last-of-type > .sous_titre {
+  grid-column: 1/3;
+  grid-row: 1;
+  margin-bottom: 2rem;
+}
+.taxonomy_page > .fullpage_content > div:last-of-type > .localisation {
+  grid-column: 2;
+  grid-row: 2;
+  margin-top: 0 !important;
+}
+.taxonomy_page > .fullpage_content > div:last-of-type > .thematiques {
+  grid-column: 2;
+  grid-row: 3;
+}
+
+.feed-icon {
+  display: none;
+}
+
 @media (min-width: 760px) {
   .fullpage.actus .actus_list {
     display: grid;
@@ -3049,6 +3105,187 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
   }
 }
 
+@media screen and (min-width: 760px) {
+  .fullpage .actus_list h2 {
+    font-size: 1.6rem !important;
+  }
+}
+
+.ressources {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.ressources > .main-title {
+  display: none;
+}
+.ressources > div {
+  padding: 0 3vw;
+  display: grid;
+  grid-template-columns: 0.25fr 1fr;
+  grid-auto-rows: auto;
+}
+.ressources > div > div > div:first-of-type {
+  display: none;
+}
+.ressources > div > h2 {
+  grid-column: 2;
+  grid-row: 1;
+  margin: 0 !important;
+  padding: 0 !important;
+  justify-self: start;
+}
+.ressources > div > h2 > a > span {
+  display: block;
+  font-family: "Barlow", sans-serif;
+  color: black;
+  font-size: 1.2rem;
+}
+@media (min-width: 760px) {
+  .ressources > div > h2 > a > span {
+    font-size: 1.6rem;
+  }
+}
+.ressources > div > div:first-of-type {
+  grid-column: 2;
+  grid-row: 3;
+}
+.ressources > div > div:first-of-type > div > span {
+  margin-top: -1rem;
+}
+.ressources > div > div:first-of-type > div > span a {
+  text-align: center;
+  color: black;
+  font-family: "Marianne", sans-serif;
+  font-weight: 800;
+  font-size: 0.9rem;
+  background-color: white;
+  border: solid 2px #00ff80;
+  padding: 9px 18px;
+  transition: background-color 0.3s ease;
+}
+.ressources > div > div:first-of-type > div > span a svg {
+  display: none;
+}
+.ressources > div > div:first-of-type > div > span a:hover {
+  background-color: #00ff80;
+}
+.ressources > div > div:first-of-type > div > span:last-of-type {
+  display: none;
+}
+.ressources > div > div:nth-of-type(2) {
+  grid-column: 1;
+  grid-row: 1/4;
+  padding: 2rem 0;
+  margin-right: 2rem;
+}
+.ressources > div > div:nth-of-type(2) img {
+  width: 100%;
+  height: auto;
+}
+.ressources > div > div:nth-of-type(3) {
+  grid-column: 2;
+  grid-row: 2;
+  margin-top: -1rem;
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+.views-row:first-of-type > .ressources {
+  margin-top: 13vh !important;
+}
+.views-row:first-of-type > .ressources > .main-title {
+  display: block;
+  padding-top: 5vh !important;
+  font-family: "Barlow Condensed", sans-serif;
+  font-size: 1.6rem;
+  padding: 0 3vw;
+  margin-top: 1rem;
+  color: #038788;
+  text-transform: uppercase;
+}
+.views-row:first-of-type > .ressources > .main-title a {
+  color: #038788;
+}
+@media (min-width: 760px) {
+  .views-row:first-of-type > .ressources > .main-title {
+    font-size: 2.3rem;
+  }
+}
+
+.ressource > div {
+  margin: 3vw;
+  display: grid;
+  grid-template-columns: 0.25fr 1fr;
+  grid-auto-rows: auto;
+}
+.ressource > div > div > div:first-of-type {
+  display: none;
+}
+.ressource > div > h2 {
+  grid-column: 2;
+  grid-row: 1;
+  margin: 0 !important;
+  padding: 0 !important;
+  justify-self: start;
+}
+.ressource > div > h2 > span {
+  display: block;
+  font-family: "Barlow", sans-serif;
+  color: black;
+  font-size: 1.2rem;
+}
+@media (min-width: 760px) {
+  .ressource > div > h2 > span {
+    font-size: 1.6rem;
+  }
+}
+.ressource > div > div:first-of-type {
+  grid-column: 2;
+  grid-row: 3;
+}
+.ressource > div > div:first-of-type > div > span {
+  margin-top: -1rem;
+}
+.ressource > div > div:first-of-type > div > span a {
+  text-align: center;
+  color: black;
+  font-family: "Marianne", sans-serif;
+  font-weight: 800;
+  font-size: 0.9rem;
+  background-color: white;
+  border: solid 2px #00ff80;
+  padding: 9px 18px;
+  transition: background-color 0.3s ease;
+}
+.ressource > div > div:first-of-type > div > span a svg {
+  display: none;
+}
+.ressource > div > div:first-of-type > div > span a:hover {
+  background-color: #00ff80;
+}
+.ressource > div > div:first-of-type > div > span:last-of-type {
+  display: none;
+}
+.ressource > div > div:nth-of-type(2) {
+  grid-column: 1;
+  grid-row: 1/4;
+  padding: 2rem 0;
+  margin-right: 2rem;
+}
+.ressource > div > div:nth-of-type(2) img {
+  width: 100%;
+  height: auto;
+}
+.ressource > div > div:nth-of-type(3) {
+  grid-column: 2;
+  grid-row: 2;
+  margin-top: -1rem;
+  font-family: "Marianne", sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
 .faq-fullpage {
   font-family: "Marianne", sans-serif;
   font-size: 1rem;

web/themes/erabletheme/erabletheme.theme

@@ -115,8 +115,9 @@ function erabletheme_theme_suggestions_views_view_alter(array &$suggestions, arr
 function erabletheme_theme_suggestions_node_alter(array &$suggestions, array $variables) {
   $is_actu = isset($variables['elements']['field_type_d_actualite']);
   $is_projet = isset($variables['elements']['field_localisation_textuel']);
+  $is_ressource = isset($variables['elements']['field_ressource_date']);
 
-  if (!$is_projet && !$is_actu && isset($variables['elements']['#title'])) {
+  if (!$is_projet && !$is_actu && !$is_ressource && isset($variables['elements']['#title'])) {
     $total_title = $variables['elements']['#title'];
     $start_pos = strpos($total_title, '<span>') + strlen('<span>');
     $end_pos = strpos($total_title, '</span>');

web/themes/erabletheme/js/erabletheme.js

@@ -12,11 +12,12 @@
       //
       // Carrousel
       //
-      if ($('.slick-container')) {
+      const isTaxonomyPage = document.querySelector('.taxonomy_page') ? true : false;
+
+      if ($('.slick-container')  && !isTaxonomyPage) {
         let slickEl = $('.slick-container').find('div').eq(3);
         $(slickEl).slick({
           centerMode: true,
-          //centerPadding: '600px',
           slidesToShow: 3,
           dots: true,
           appendDots: $('#carousel_dots'),
@@ -31,7 +32,7 @@
         });
       }
 
-      if ($('.diapo')) {
+      if ($('.diapo') && !isTaxonomyPage) {
         let slickEl = $('.diapo > div > div');$(slickEl).slick({
           dots: true,
           appendDots: $('#carousel_dots'),
@@ -324,15 +325,23 @@
       //
       // set bg middle placement
       //
-
+      setBgContainer();
       setBgMiddlePlacement();
       setBgBottomPlacement();
 
       window.addEventListener('resize', () => {
         setBgMiddlePlacement();
         setBgBottomPlacement();
+        setBgContainer();
       });
 
+      function setBgContainer() {
+        const bg = document.querySelector('#background');
+        const pageHeight = document.documentElement.scrollHeight;
+
+        bg.style.height = `${pageHeight}px`;
+      }
+
       function setBgMiddlePlacement() {
         const bgMiddleImgs = document.querySelectorAll('#bg-middle img');
         const carousel = document.querySelector('.carousel_container');
@@ -353,7 +362,6 @@
       function setBgBottomPlacement() {
         const bgBottomImgs = document.querySelectorAll('#bg-bottom img');
         const pageHeight = document.documentElement.scrollHeight;
-        console.log(pageHeight);
 
         for (let img of bgBottomImgs) {
           img.style.paddingTop = `${pageHeight}px`;

web/themes/erabletheme/scss/_actualites.scss

@@ -11,3 +11,13 @@
     }
   }
 }
+
+.fullpage {
+  .actus_list {
+    h2 {
+      @media screen and (min-width: $breakpoint_tablet) {
+        font-size: $xl_font_size !important;
+      }
+    }
+  }
+}

web/themes/erabletheme/scss/_projets.scss

@@ -433,3 +433,38 @@
     }
   }
 }
+
+.taxonomy_page {
+  > .fullpage_content {
+    > div:last-of-type {
+      display: grid !important;
+      grid-template-columns: 0.5fr 1fr;
+      grid-template-rows: repeat(3, auto);
+      > .diapo {
+        grid-column: 1;
+        grid-row: 2/4;
+        margin: 0 !important;
+        margin-left: $x_margin !important;
+      }
+      > .sous_titre {
+        grid-column: 1/3;
+        grid-row: 1;
+        margin-bottom: 2rem;
+      }
+      > .localisation {
+        grid-column: 2;
+        grid-row: 2;
+        margin-top: 0 !important;
+      }
+      > .thematiques {
+        grid-column: 2;
+        grid-row: 3;
+      }
+    }
+  }
+}
+
+// in taxonomy pages
+.feed-icon {
+  display: none;
+}

web/themes/erabletheme/scss/_ressources.scss

@@ -0,0 +1,117 @@
+.ressources {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  > .main-title {
+    display: none;
+  }
+  > div {
+    padding: 0 $x_margin;
+    display: grid;
+    grid-template-columns: 0.25fr 1fr;
+    grid-auto-rows: auto;
+    > div > div:first-of-type {
+      display: none;
+    }
+    > h2 {
+      grid-column: 2;
+      grid-row: 1;
+      margin: 0 !important;
+      padding: 0 !important;
+      justify-self: start;
+      > a > span {
+        //margin-top: -1rem !important;
+        display: block;
+        @include sous_titre_alt();
+      }
+    }
+    > div:first-of-type {
+      grid-column: 2;
+      grid-row: 3;
+      > div > span {
+        margin-top: -1rem;
+        @include fluo_button();
+      }
+      > div > span:last-of-type {
+        display: none;
+      }
+    }
+    > div:nth-of-type(2) {
+      grid-column: 1;
+      grid-row: 1/4;
+      padding: 2rem 0;
+      margin-right: 2rem;
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+    > div:nth-of-type(3) {
+      grid-column: 2;
+      grid-row: 2;
+      margin-top: -1rem;
+      @include main_text_content();
+    }
+  }
+}
+
+.views-row:first-of-type {
+  > .ressources {
+    margin-top: 13vh !important;
+    > .main-title {
+      display: block;
+      padding-top: 5vh !important;
+      @include main_title();
+    }
+  }
+}
+
+.ressource {
+  > div {
+    margin: $x_margin;
+    display: grid;
+    grid-template-columns: 0.25fr 1fr;
+    grid-auto-rows: auto;
+    > div > div:first-of-type {
+      display: none;
+    }
+    > h2 {
+      grid-column: 2;
+      grid-row: 1;
+      margin: 0 !important;
+      padding: 0 !important;
+      justify-self: start;
+      > span {
+        //margin-top: -1rem !important;
+        display: block;
+        @include sous_titre_alt();
+      }
+    }
+    > div:first-of-type {
+      grid-column: 2;
+      grid-row: 3;
+      > div > span {
+        margin-top: -1rem;
+        @include fluo_button();
+      }
+      > div > span:last-of-type {
+        display: none;
+      }
+    }
+    > div:nth-of-type(2) {
+      grid-column: 1;
+      grid-row: 1/4;
+      padding: 2rem 0;
+      margin-right: 2rem;
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+    > div:nth-of-type(3) {
+      grid-column: 2;
+      grid-row: 2;
+      margin-top: -1rem;
+      @include main_text_content();
+    }
+  }
+}

web/themes/erabletheme/scss/global/_global.scss

@@ -14,6 +14,10 @@ body {
   overflow-x: hidden;
 }
 
+html {
+  overflow-x: hidden;
+}
+
 .layout-container {
     display: flex;
 }

web/themes/erabletheme/scss/global/variables/_typography.scss

@@ -34,6 +34,7 @@ $title_size: 2.3rem;
   font-size: $m_font_size;
   color: $teal;
   font-weight: 800;
+  line-height: 1.3;
   @media (min-width: $breakpoint_tablet) {
     font-size: $l_font_size;
   }

web/themes/erabletheme/scss/partials/_background.scss

@@ -1,14 +1,20 @@
 #background {
   z-index: -1;
+  max-width: 99vw;
+  width: 100vw;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
   img {
     position: absolute;
     pointer-events: none;
   }
   #bg-top {
-    #bg-1 {
+    /* #bg-1 {
       top: 5vh;
       left: 0;
-    }
+    } */
     #bg-3 {
       top: 13vh;
       left: -10vw;
@@ -17,17 +23,18 @@
       top: 8vh;
       left: -28vw;
     }
-    #bg-4 {
+    #bg-5 {
+      width: 20vw;
+      top: 5vh;
+      right: -10vw;
+    }
+    /* #bg-4 {
       top: 18vh;
       right: -45vw;
-    }
+    } */
 
   }
   #bg-middle {
-    #bg-5 {
-      top: -20vh;
-      right: -10vw;
-    }
     #bg-6 {
       top: 5vh;
       right: -5vw;
@@ -37,11 +44,11 @@
       top: 10vh;
       right: 0vw;
     }
-    #bg-8 {
+    /* #bg-8 {
       width: 80vw;
       top: 45vh;
       left: -40vw;
-    }
+    } */
     #bg-12 {
       width: 105vw;
       left: -5vw;

web/themes/erabletheme/scss/partials/_header.scss

@@ -230,7 +230,8 @@ body.toolbar-fixed header[role="banner"] {
                     > li:nth-of-type(6),
                     > li:nth-of-type(7),
                     > li:nth-of-type(8),
-                    > li:nth-of-type(9) {
+                    > li:nth-of-type(9),
+                    > li:nth-of-type(10) {
                         border-bottom: solid 1px white;
                         padding: 12px 0;
                     }

web/themes/erabletheme/scss/styles.scss

@@ -25,4 +25,5 @@
 @import "_meetup.scss";
 @import "_projets.scss";
 @import "_actualites.scss";
+@import "_ressources.scss";
 @import "_faq.scss";

web/themes/erabletheme/templates/html.html.twig

@@ -46,16 +46,16 @@
     {{ page_bottom }}
     <div id="background">
       <div id="bg-top">
-        <img src="/themes/erabletheme/assets/bg-shapes/bg-1.svg" aria-hidden="true" alt="bg shape" id="bg-1">
+        {# <img src="/themes/erabletheme/assets/bg-shapes/bg-1.svg" aria-hidden="true" alt="bg shape" id="bg-1"> #}
+        <img src="/themes/erabletheme/assets/bg-shapes/bg-5.svg" aria-hidden="true" alt="bg shape" id="bg-5">
         <img src="/themes/erabletheme/assets/bg-shapes/bg-3.svg" aria-hidden="true" alt="bg shape" id="bg-3">
         <img src="/themes/erabletheme/assets/bg-shapes/bg-2.svg" aria-hidden="true" alt="bg shape" id="bg-2">
-        <img src="/themes/erabletheme/assets/bg-shapes/bg-4.svg" aria-hidden="true" alt="bg shape" id="bg-4">
+        {# <img src="/themes/erabletheme/assets/bg-shapes/bg-4.svg" aria-hidden="true" alt="bg shape" id="bg-4"> #}
       </div>
       <div id="bg-middle">
-        <img src="/themes/erabletheme/assets/bg-shapes/bg-8.svg" aria-hidden="true" alt="bg shape" id="bg-8">
+        {# <img src="/themes/erabletheme/assets/bg-shapes/bg-8.svg" aria-hidden="true" alt="bg shape" id="bg-8"> #}
         <img src="/themes/erabletheme/assets/bg-shapes/bg-6.svg" aria-hidden="true" alt="bg shape" id="bg-6">
         <img src="/themes/erabletheme/assets/bg-shapes/bg-7.svg" aria-hidden="true" alt="bg shape" id="bg-7">
-        <img src="/themes/erabletheme/assets/bg-shapes/bg-5.svg" aria-hidden="true" alt="bg shape" id="bg-5">
         <img src="/themes/erabletheme/assets/bg-shapes/bg-12.png" aria-hidden="true" alt="bg shape" id="bg-12">
       </div>
       <div id="bg-bottom">

web/themes/erabletheme/templates/node/node--ressource--full.html.twig

@@ -0,0 +1,82 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<article class="fullpage">
+  <div class="fullpage_content ressource">
+
+
+    <div{{ content_attributes }}>
+      <h2>{{ label }}</h2>
+        {{ content }}
+    </div>
+  </div>
+
+</article>

web/themes/erabletheme/templates/node/node--view--ressources.html.twig

@@ -0,0 +1,96 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @ingroup themeable
+ */
+#}
+<article{{ attributes.addClass('fullpage ressources') }}>
+
+
+  {% if display_submitted %}
+    <footer>
+      {{ author_picture }}
+      <div{{ author_attributes }}>
+        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
+        {{ metadata }}
+      </div>
+    </footer>
+  {% endif %}
+
+  <div class="main-title">Ressources</div>
+  <div{{ content_attributes }}>
+    {{ title_prefix }}
+    {% if label and not page %}
+      <h2{{ title_attributes }}>
+        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+      </h2>
+    {% endif %}
+    {{ title_suffix }}
+    {{ content }}
+  </div>
+
+</article>

web/themes/erabletheme/templates/node/projet/node--view--taxonomy-term.html.twig

@@ -0,0 +1,85 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<article class="fullpage projet_full taxonomy_page">
+  <div class="fullpage_content">
+  <div class="retour_projets">
+    <a href="/projets">← Retour aux projets</a>
+  </div>
+
+    <h2>{{ label }}</h2>
+
+    <div{{ content_attributes }}>
+        {{ content }}
+    </div>
+  </div>
+
+</article>