started home styling

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

@@ -10,8 +10,105 @@ dependencies:
     - field.field.node.frontpage.field_what_is_materio
     - node.type.frontpage
   module:
+    - field_group
     - text
     - user
+third_party_settings:
+  field_group:
+    group_intro:
+      children:
+        - title
+        - field_what_is_materio
+      parent_name: ''
+      weight: 0
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-intro
+      label: intro
+      region: content
+    group_database:
+      children:
+        - field_a_database
+        - computed_materials_reference
+      parent_name: ''
+      weight: 1
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-database
+      label: database
+      region: content
+    group_showrooms:
+      children:
+        - field_showrooms
+        - computed_showrooms_reference
+      parent_name: ''
+      weight: 2
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-showrooms
+      label: showrooms
+      region: content
+    group_blabla:
+      children:
+        - field_blabla
+        - computed_articles_reference
+      parent_name: ''
+      weight: 3
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-blabla
+      label: blabla
+      region: content
+    group_pricing:
+      children:
+        - field_pricing
+      parent_name: ''
+      weight: 4
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-pricing
+      label: pricing
+      region: content
 id: node.frontpage.default
 targetEntityType: node
 bundle: frontpage
@@ -19,7 +116,7 @@ mode: default
 content:
   computed_articles_reference:
     label: hidden
-    weight: 7
+    weight: 5
     region: content
     settings:
       view_mode: teaser
@@ -30,14 +127,14 @@ content:
     weight: 3
     region: content
     settings:
-      view_mode: teaser
+      view_mode: card_medium
       link: false
     third_party_settings: {  }
     type: entity_reference_entity_view
     label: hidden
   computed_showrooms_reference:
     label: hidden
-    weight: 5
+    weight: 4
     region: content
     settings:
       view_mode: default
@@ -52,28 +149,28 @@ content:
     type: text_default
     region: content
   field_blabla:
-    weight: 6
-    label: above
-    settings: {  }
-    third_party_settings: {  }
-    type: text_default
-    region: content
-  field_pricing:
-    weight: 8
-    label: above
-    settings: {  }
-    third_party_settings: {  }
-    type: text_default
-    region: content
-  field_showrooms:
     weight: 4
     label: above
     settings: {  }
     third_party_settings: {  }
     type: text_default
     region: content
+  field_pricing:
+    weight: 5
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: text_default
+    region: content
+  field_showrooms:
+    weight: 3
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: text_default
+    region: content
   field_what_is_materio:
-    weight: 1
+    weight: 2
     label: above
     settings: {  }
     third_party_settings: {  }
@@ -81,7 +178,7 @@ content:
     region: content
   title:
     type: string
-    weight: 0
+    weight: 1
     region: content
     label: hidden
     settings:
@@ -90,3 +187,4 @@ content:
 hidden:
   langcode: true
   links: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.card_big.yml

@@ -0,0 +1,211 @@
+uuid: cc2be770-7536-4bce-a840-86a37e5e7198
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card_big
+    - field.field.node.materiau.body
+    - field.field.node.materiau.field_attachments
+    - field.field.node.materiau.field_distributor
+    - field.field.node.materiau.field_famille
+    - field.field.node.materiau.field_index
+    - field.field.node.materiau.field_linked_articles
+    - field.field.node.materiau.field_linked_materials
+    - field.field.node.materiau.field_localisation_old
+    - field.field.node.materiau.field_manufacturer
+    - field.field.node.materiau.field_materiau_images
+    - field.field.node.materiau.field_memo
+    - field.field.node.materiau.field_migration
+    - field.field.node.materiau.field_reference
+    - field.field.node.materiau.field_samples
+    - field.field.node.materiau.field_short_description
+    - field.field.node.materiau.field_tags
+    - field.field.node.materiau.field_thesaurus
+    - field.field.node.materiau.field_video
+    - field.field.node.materiau.field_workflow
+    - node.type.materiau
+  module:
+    - computed_field
+    - file
+    - image
+    - materio_samples
+    - options
+    - text
+    - user
+    - video_embed_field
+id: node.materiau.card_big
+targetEntityType: node
+bundle: materiau
+mode: card_big
+content:
+  body:
+    label: hidden
+    type: text_default
+    weight: 101
+    settings: {  }
+    third_party_settings: {  }
+    region: content
+  field_attachments:
+    weight: 109
+    label: above
+    settings:
+      use_description_as_link_text: true
+    third_party_settings: {  }
+    type: file_default
+    region: content
+  field_distributor:
+    weight: 108
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_famille:
+    weight: 113
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_index:
+    weight: 114
+    label: above
+    settings:
+      cache_unit: -1
+      cache_duration: 1
+      thousand_separator: ''
+      prefix_suffix: true
+    third_party_settings: {  }
+    type: computed_integer
+    region: content
+  field_linked_articles:
+    weight: 120
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_linked_materials:
+    weight: 110
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_localisation_old:
+    weight: 119
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  field_manufacturer:
+    weight: 107
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_materiau_images:
+    weight: 105
+    label: above
+    settings:
+      image_style: ''
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
+  field_memo:
+    weight: 112
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: basic_string
+    region: content
+  field_migration:
+    weight: 117
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_reference:
+    weight: 115
+    label: above
+    settings:
+      sanitized: true
+      cache_unit: -1
+      cache_duration: 1
+    third_party_settings: {  }
+    type: computed_string
+    region: content
+  field_samples:
+    weight: 118
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: materio_samples_default_formatter
+    region: content
+  field_short_description:
+    weight: 102
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  field_tags:
+    weight: 104
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_thesaurus:
+    weight: 103
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_video:
+    weight: 106
+    label: above
+    settings:
+      responsive: true
+      width: 854
+      height: 480
+      autoplay: true
+    third_party_settings: {  }
+    type: video_embed_field_video
+    region: content
+  field_workflow:
+    weight: 116
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  links:
+    weight: 100
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  title:
+    label: hidden
+    type: string
+    weight: -5
+    region: content
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+hidden:
+  langcode: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.card_full.yml

@@ -0,0 +1,211 @@
+uuid: 1092f6d4-d300-4863-ad65-dfcf5acb7b92
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card_full
+    - field.field.node.materiau.body
+    - field.field.node.materiau.field_attachments
+    - field.field.node.materiau.field_distributor
+    - field.field.node.materiau.field_famille
+    - field.field.node.materiau.field_index
+    - field.field.node.materiau.field_linked_articles
+    - field.field.node.materiau.field_linked_materials
+    - field.field.node.materiau.field_localisation_old
+    - field.field.node.materiau.field_manufacturer
+    - field.field.node.materiau.field_materiau_images
+    - field.field.node.materiau.field_memo
+    - field.field.node.materiau.field_migration
+    - field.field.node.materiau.field_reference
+    - field.field.node.materiau.field_samples
+    - field.field.node.materiau.field_short_description
+    - field.field.node.materiau.field_tags
+    - field.field.node.materiau.field_thesaurus
+    - field.field.node.materiau.field_video
+    - field.field.node.materiau.field_workflow
+    - node.type.materiau
+  module:
+    - computed_field
+    - file
+    - image
+    - materio_samples
+    - options
+    - text
+    - user
+    - video_embed_field
+id: node.materiau.card_full
+targetEntityType: node
+bundle: materiau
+mode: card_full
+content:
+  body:
+    label: hidden
+    type: text_default
+    weight: 101
+    settings: {  }
+    third_party_settings: {  }
+    region: content
+  field_attachments:
+    weight: 109
+    label: above
+    settings:
+      use_description_as_link_text: true
+    third_party_settings: {  }
+    type: file_default
+    region: content
+  field_distributor:
+    weight: 108
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_famille:
+    weight: 113
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_index:
+    weight: 114
+    label: above
+    settings:
+      cache_unit: -1
+      cache_duration: 1
+      thousand_separator: ''
+      prefix_suffix: true
+    third_party_settings: {  }
+    type: computed_integer
+    region: content
+  field_linked_articles:
+    weight: 120
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_linked_materials:
+    weight: 110
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_localisation_old:
+    weight: 119
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  field_manufacturer:
+    weight: 107
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_materiau_images:
+    weight: 105
+    label: above
+    settings:
+      image_style: ''
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
+  field_memo:
+    weight: 112
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: basic_string
+    region: content
+  field_migration:
+    weight: 117
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_reference:
+    weight: 115
+    label: above
+    settings:
+      sanitized: true
+      cache_unit: -1
+      cache_duration: 1
+    third_party_settings: {  }
+    type: computed_string
+    region: content
+  field_samples:
+    weight: 118
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: materio_samples_default_formatter
+    region: content
+  field_short_description:
+    weight: 102
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  field_tags:
+    weight: 104
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_thesaurus:
+    weight: 103
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_video:
+    weight: 106
+    label: above
+    settings:
+      responsive: true
+      width: 854
+      height: 480
+      autoplay: true
+    third_party_settings: {  }
+    type: video_embed_field_video
+    region: content
+  field_workflow:
+    weight: 116
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  links:
+    weight: 100
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  title:
+    label: hidden
+    type: string
+    weight: -5
+    region: content
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+hidden:
+  langcode: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.card_medium.yml

@@ -0,0 +1,90 @@
+uuid: b2406930-5d1a-4926-a849-4379a595b5d0
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card_medium
+    - field.field.node.materiau.body
+    - field.field.node.materiau.field_attachments
+    - field.field.node.materiau.field_distributor
+    - field.field.node.materiau.field_famille
+    - field.field.node.materiau.field_index
+    - field.field.node.materiau.field_linked_articles
+    - field.field.node.materiau.field_linked_materials
+    - field.field.node.materiau.field_localisation_old
+    - field.field.node.materiau.field_manufacturer
+    - field.field.node.materiau.field_materiau_images
+    - field.field.node.materiau.field_memo
+    - field.field.node.materiau.field_migration
+    - field.field.node.materiau.field_reference
+    - field.field.node.materiau.field_samples
+    - field.field.node.materiau.field_short_description
+    - field.field.node.materiau.field_tags
+    - field.field.node.materiau.field_thesaurus
+    - field.field.node.materiau.field_video
+    - field.field.node.materiau.field_workflow
+    - image.style.card_medium
+    - node.type.materiau
+  module:
+    - image_delta_formatter
+    - options
+    - user
+id: node.materiau.card_medium
+targetEntityType: node
+bundle: materiau
+mode: card_medium
+content:
+  field_famille:
+    type: list_default
+    weight: 0
+    region: content
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+  field_materiau_images:
+    type: image_delta_formatter
+    weight: 2
+    region: content
+    label: hidden
+    settings:
+      deltas: '0'
+      image_style: card_medium
+      image_link: ''
+      deltas_reversed: 0
+    third_party_settings: {  }
+  field_short_description:
+    type: string
+    weight: 1
+    region: content
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+  title:
+    type: string
+    weight: 3
+    region: content
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+hidden:
+  body: true
+  field_attachments: true
+  field_distributor: true
+  field_index: true
+  field_linked_articles: true
+  field_linked_materials: true
+  field_localisation_old: true
+  field_manufacturer: true
+  field_memo: true
+  field_migration: true
+  field_reference: true
+  field_samples: true
+  field_tags: true
+  field_thesaurus: true
+  field_video: true
+  field_workflow: true
+  langcode: true
+  links: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.card_small.yml

@@ -0,0 +1,90 @@
+uuid: 67321572-ce60-4640-8385-da325147ec2d
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card_small
+    - field.field.node.materiau.body
+    - field.field.node.materiau.field_attachments
+    - field.field.node.materiau.field_distributor
+    - field.field.node.materiau.field_famille
+    - field.field.node.materiau.field_index
+    - field.field.node.materiau.field_linked_articles
+    - field.field.node.materiau.field_linked_materials
+    - field.field.node.materiau.field_localisation_old
+    - field.field.node.materiau.field_manufacturer
+    - field.field.node.materiau.field_materiau_images
+    - field.field.node.materiau.field_memo
+    - field.field.node.materiau.field_migration
+    - field.field.node.materiau.field_reference
+    - field.field.node.materiau.field_samples
+    - field.field.node.materiau.field_short_description
+    - field.field.node.materiau.field_tags
+    - field.field.node.materiau.field_thesaurus
+    - field.field.node.materiau.field_video
+    - field.field.node.materiau.field_workflow
+    - image.style.card_small
+    - node.type.materiau
+  module:
+    - image_delta_formatter
+    - options
+    - user
+id: node.materiau.card_small
+targetEntityType: node
+bundle: materiau
+mode: card_small
+content:
+  field_famille:
+    weight: 2
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_materiau_images:
+    weight: 3
+    label: hidden
+    settings:
+      deltas: '0'
+      image_style: card_small
+      image_link: content
+      deltas_reversed: 0
+    third_party_settings: {  }
+    type: image_delta_formatter
+    region: content
+  field_short_description:
+    weight: 1
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  title:
+    label: hidden
+    type: string
+    weight: 0
+    region: content
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+hidden:
+  body: true
+  field_attachments: true
+  field_distributor: true
+  field_index: true
+  field_linked_articles: true
+  field_linked_materials: true
+  field_localisation_old: true
+  field_manufacturer: true
+  field_memo: true
+  field_migration: true
+  field_reference: true
+  field_samples: true
+  field_tags: true
+  field_thesaurus: true
+  field_video: true
+  field_workflow: true
+  langcode: true
+  links: true
+  search_api_excerpt: true

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

@@ -197,5 +197,14 @@ content:
     region: content
     settings: {  }
     third_party_settings: {  }
+  title:
+    label: hidden
+    type: string
+    weight: -5
+    region: content
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
 hidden:
   langcode: true
+  search_api_excerpt: true

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

@@ -23,7 +23,7 @@ dependencies:
     - field.field.node.materiau.field_thesaurus
     - field.field.node.materiau.field_video
     - field.field.node.materiau.field_workflow
-    - image.style.card_medium
+    - image.style.card_small
     - node.type.materiau
   module:
     - image_delta_formatter
@@ -35,20 +35,28 @@ mode: teaser
 content:
   field_materiau_images:
     type: image_delta_formatter
-    weight: 1
+    weight: 2
     region: content
     label: hidden
     settings:
       deltas: '0'
-      image_style: card_medium
+      image_style: card_small
       image_link: ''
       deltas_reversed: 0
     third_party_settings: {  }
+  field_short_description:
+    type: string
+    weight: 1
+    region: content
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
   title:
     type: string
     weight: 0
     region: content
-    label: hidden
+    label: above
     settings:
       link_to_entity: false
     third_party_settings: {  }
@@ -68,10 +76,10 @@ hidden:
   field_migration: true
   field_reference: true
   field_samples: true
-  field_short_description: true
   field_tags: true
   field_thesaurus: true
   field_video: true
   field_workflow: true
   langcode: true
   links: true
+  search_api_excerpt: true

config/sync/core.entity_view_mode.node.card_big.yml

@@ -0,0 +1,10 @@
+uuid: cab3c14f-2849-4436-9867-27de743a799b
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.card_big
+label: card-big
+targetEntityType: node
+cache: true

config/sync/core.entity_view_mode.node.card_full.yml

@@ -0,0 +1,10 @@
+uuid: 2b71b232-6d76-4a9c-916e-f28e51feda32
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.card_full
+label: card-full
+targetEntityType: node
+cache: true

config/sync/core.entity_view_mode.node.card_medium.yml

@@ -0,0 +1,10 @@
+uuid: 0cc55609-bd6d-4e43-8c7b-afd637b04a2e
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.card_medium
+label: card-medium
+targetEntityType: node
+cache: true

config/sync/core.entity_view_mode.node.card_small.yml

@@ -0,0 +1,10 @@
+uuid: cfb0ddfc-2b42-4de5-9ecc-ff1eb5abd962
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.card_small
+label: card-small
+targetEntityType: node
+cache: true

config/sync/image.style.card_big.yml

@@ -0,0 +1,15 @@
+uuid: ed3fc572-5f86-4c90-b356-473f5350d2af
+langcode: en
+status: true
+dependencies: {  }
+name: card_big
+label: 'card-big (430x240)'
+effects:
+  84451f7d-4b5d-41ae-ac3e-bf75aebad1e7:
+    uuid: 84451f7d-4b5d-41ae-ac3e-bf75aebad1e7
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 430
+      height: 340
+      anchor: center-center

config/sync/image.style.card_full.yml

@@ -0,0 +1,15 @@
+uuid: fa3fff88-3b7d-43cf-9bc9-df5588735554
+langcode: en
+status: true
+dependencies: {  }
+name: card_full
+label: 'card-full (425x610)'
+effects:
+  31bf30ba-8cec-4232-8675-41b41765e52e:
+    uuid: 31bf30ba-8cec-4232-8675-41b41765e52e
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 425
+      height: 610
+      anchor: center-center

web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedMaterialsReferences.php

@@ -43,7 +43,7 @@ class ComputedMaterialsReferences extends EntityReferenceFieldItemList
         ->sort('created', 'DESC')
         ->range(0,200);
     $results = $query->execute();
-    $nids = array_rand($results, 20);
+    $nids = array_rand($results, 30);
     foreach ($nids as $key => $nid) {
       $this->list[$key] = $this->createItem($key, $nid);
     }

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1245,6 +1245,62 @@ header[role="banner"] {
 aside.messages {
   padding: 0; }
 
+article.node--type-frontpage .node__content > section {
+  padding: 1em; }
+  article.node--type-frontpage .node__content > section.home-intro {
+    padding: 0;
+    background-color: #fff; }
+  article.node--type-frontpage .node__content > section.home-database {
+    background-color: #69cdcf;
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    grid-column-gap: 1em;
+    color: #fff; }
+    article.node--type-frontpage .node__content > section.home-database .field--name-field-a-database {
+      grid-column: 1; }
+    article.node--type-frontpage .node__content > section.home-database .cards-list-home {
+      grid-column: 2;
+      position: relative;
+      max-height: 580px;
+      overflow-y: hidden; }
+      article.node--type-frontpage .node__content > section.home-database .cards-list-home ul {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        display: grid;
+        justify-content: center;
+        grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
+        grid-template-rows: 1fr;
+        grid-gap: 1em; }
+        article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li {
+          position: relative;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          padding-top: 140%; }
+          article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            width: auto;
+            height: auto; }
+            article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card .field--name-field-short-description {
+              font-size: 0.756em;
+              line-height: 0.9; }
+  article.node--type-frontpage .node__content > section.home-showrooms {
+    background-color: #50aa3c;
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    grid-column-gap: 1em; }
+    article.node--type-frontpage .node__content > section.home-showrooms .field--name-field-showrooms {
+      grid-column: 1; }
+    article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
+      grid-column: 2; }
+  article.node--type-frontpage .node__content > section.home-blabla {
+    background-color: #9458aa; }
+
 article.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),
 article.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),
 article.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)),
@@ -1300,9 +1356,9 @@ article.node--type-frontpage .node__content .field--name-computed-articles-refer
 
 article.card {
   position: relative;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
   width: 210px;
-  height: 295px;
+  height: 295px; }
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
   article.card header {
     position: absolute;
     bottom: 0;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -252,6 +252,83 @@ aside.messages{
 // front
 article.node--type-frontpage{
   .node__content{
+
+    &>section{
+      padding:1em;
+      &.home-intro{
+        padding:0;
+        background-color: #fff;
+      }
+      &.home-database{
+        background-color: #69cdcf;
+        display:grid;
+        // $c: 300px;
+        // grid-template-columns: $c calc(100% - #{$c});
+        grid-template-columns: 300px 1fr;
+        grid-column-gap: 1em;
+        // grid-template-rows: min-content;
+        color: #fff;
+        .field--name-field-a-database{
+          grid-column: 1;
+          // outline: 1px solid green;
+        }
+        .cards-list-home{
+          grid-column: 2;
+          position: relative;
+          // max-height: (130px*1.4)*3;
+          max-height: 580px;
+          overflow-y: hidden;
+          ul{
+            width:100%;
+            margin:0; padding:0;
+            display: grid;
+            justify-content: center;
+            grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
+            grid-template-rows: 1fr;
+            grid-gap: 1em;
+            // justify-content:start;
+            li{
+              position: relative;
+              list-style: none;
+              margin:0; padding:0;
+              padding-top: 140%;
+              .card{
+                position:absolute;
+                top:0; bottom:0;
+                left:0; right:0;
+                width: auto;
+                height: auto;
+                .field--name-field-short-description{
+                  font-size: 0.756em;
+                  line-height: 0.9;
+                }
+              }
+            }
+          }
+        }
+      }
+      &.home-showrooms{
+        background-color: #50aa3c;
+        display:grid;
+        // $c: 300px;
+        // grid-template-columns: $c calc(100% - #{$c});
+        grid-template-columns: 300px 1fr;
+        grid-column-gap: 1em;
+        .field--name-field-showrooms{
+          grid-column: 1;
+        }
+        .field--name-computed-showrooms-reference{
+          grid-column: 2;
+        }
+      }
+      &.home-blabla{
+        background-color: #9458aa;
+      }
+      &.home-pricing{
+
+      }
+    }
+
     .field--name-field-what-is-materio,
     .field--name-field-a-database,
     .field--name-field-showrooms,
@@ -283,6 +360,7 @@ article.node--type-frontpage{
         }
       }
     }
+
   }
 }
 
@@ -325,8 +403,11 @@ article.node--type-frontpage{
 
 article.card{
   position: relative;
-  width:$column_width; height:295px;
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
+  width:$column_width; height:295px;
+  // &.card-small{
+  //   width:100px; height:140px;
+  // }
   // focused
   // box-shadow: 0 0 7px rgba(0,0,0,0.9);
   header{

web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference.html.twig

@@ -43,7 +43,7 @@
     label_display == 'visually_hidden' ? 'visually-hidden',
   ]
 %}
-<div class="cards-list">
+<div class="cards-list-home">
   {% if label_hidden %}
       <ul{{ attributes }}>
         {% for item in items %}
@@ -64,4 +64,4 @@
       {% endif %}
     </div>
   {% endif %}
-</div>
+</div>

web/themes/custom/materiotheme/templates/content/node--materiau--card-medium.html.twig

@@ -72,11 +72,22 @@
  * @ingroup themeable
  */
 #}
-<article{{ attributes.addClass('card') }}>    
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? view_mode|clean_class,
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    'card'
+  ]
+%}
+
+<article{{ attributes.addClass(classes) }}>
   <header>
-    <h1>{{ label }}</h1>
+    {{ content.field_short_description }}
-    <!-- <h4>{{ content.field_description }}</h4>
-    <span class="ref">{{ content.field_reference }}</span> -->
   </header>
   <section class="images">
     {{ content.field_materiau_images }}

web/themes/custom/materiotheme/templates/content/node--materiau--card-small.html.twig

@@ -0,0 +1,98 @@
+{#
+/**
+ * @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()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? view_mode|clean_class,
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    'card'
+  ]
+%}
+
+<article{{ attributes.addClass(classes) }}>
+  <header>
+    {# <h1>{{ label }}</h1> #}
+    <h2>{{ content.field_familly }}</h2>
+    <h4>{{ content.field_short_description }}</h4>
+    {# <span class="ref">{{ content.field_reference }}</span> #}
+  </header>
+  <section class="images">
+    {{ content.field_materiau_images }}
+  </section>
+</article>