From 6f75dfed666193583c2c3cc30f1074016269632e Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Fri, 1 Mar 2024 13:48:04 +0100
Subject: [PATCH] css accueil

---
 .../css/quartiers_de_demain.css               | 142 +++++++++++++-----
 .../images/noun-arrow-download.png            | Bin 0 -> 5296 bytes
 .../images/noun-arrow-download.svg            |  36 +++++
 .../scss/pages/_presentation.scss             | 137 ++++++++++++++---
 .../scss/quartiers_de_demain.scss             |   3 +-
 5 files changed, 256 insertions(+), 62 deletions(-)
 create mode 100644 web/themes/custom/quartiers_de_demain/images/noun-arrow-download.png
 create mode 100644 web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg

diff --git a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
index bf0e68c..83e4407 100644
--- a/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
+++ b/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
@@ -298,47 +298,6 @@ header {
       text-transform: uppercase; }
 
 /*pages*/
-#presentation {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-gap: 10px; }
-  #presentation .layout-content {
-    grid-column: 3 / 11;
-    order: 2;
-    padding-top: 3rem;
-    padding-bottom: 6rem; }
-    @media (max-width: 891px) {
-      #presentation .layout-content {
-        width: 90%; } }
-    @media (max-width: 500px) {
-      #presentation .layout-content {
-        padding-top: 0; } }
-    #presentation .layout-content .content_container {
-      display: flex; }
-      #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage {
-        display: none; }
-      #presentation .layout-content .content_container article.node-type-static {
-        width: 100%; }
-        #presentation .layout-content .content_container article.node-type-static div.field_body h2 {
-          font-size: 0.8rem;
-          font-weight: 600;
-          margin-bottom: 0; }
-        #presentation .layout-content .content_container article.node-type-static div.field_body p {
-          margin-top: 0; }
-  #presentation aside {
-    grid-column: 1 /span 2;
-    order: 1;
-    margin-top: 5rem; }
-    @media (max-width: 891px) {
-      #presentation aside {
-        margin-left: 5%;
-        margin-top: 9rem; } }
-    @media (max-width: 500px) {
-      #presentation aside {
-        width: 80%;
-        margin-top: 3rem; } }
-
 .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
   grid-column: 3 /span 9;
   grid-row: 1;
@@ -399,6 +358,107 @@ header {
           padding-right: 0.5rem;
           padding-top: 0.2rem; }
 
+#presentation {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: 10px; }
+  #presentation .layout-content {
+    grid-row: 1;
+    order: 2;
+    padding-top: 3rem;
+    padding-bottom: 6rem; }
+    @media (max-width: 891px) {
+      #presentation .layout-content {
+        width: 90%; } }
+    @media (max-width: 500px) {
+      #presentation .layout-content {
+        padding-top: 0; } }
+    #presentation .layout-content .content_container {
+      display: flex; }
+      #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage {
+        display: none; }
+      #presentation .layout-content .content_container article.node-type-static {
+        width: 100%; }
+        #presentation .layout-content .content_container article.node-type-static .field_body {
+          padding-left: 20%;
+          width: 80%; }
+          #presentation .layout-content .content_container article.node-type-static .field_body h2 {
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin-bottom: 0; }
+          #presentation .layout-content .content_container article.node-type-static .field_body p {
+            margin-top: 0; }
+        #presentation .layout-content .content_container article.node-type-static .paragraph {
+          padding-top: 1rem;
+          padding-bottom: 1rem;
+          padding-left: 20%;
+          padding-right: 20%; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_title {
+          text-transform: uppercase;
+          font-size: 1rem;
+          font-weight: 300; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title {
+          color: #0732c2; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title {
+          color: #f7002b; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
+          background-color: #e8ebf4; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
+          text-align: center; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 {
+          display: flex;
+          flex-direction: column; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title {
+            width: 60%;
+            margin: auto; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
+            display: flex;
+            flex-direction: row; }
+            #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
+              padding-right: 30px;
+              text-align: left;
+              color: #0732c2; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
+          display: flex;
+          flex-direction: row; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
+            padding-right: 30px;
+            text-align: left; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes p {
+          margin-bottom: 0; }
+        #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto {
+          height: auto;
+          float: inline-start;
+          padding-right: 0.5rem; }
+          #presentation .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
+            width: 50px;
+            height: auto; }
+  #presentation aside {
+    position: relative;
+    grid-column: 1 /span 2;
+    grid-row: 1;
+    z-index: 100;
+    order: 1;
+    margin-top: 5rem; }
+    @media (max-width: 891px) {
+      #presentation aside {
+        margin-left: 5%;
+        margin-top: 9rem; } }
+    @media (max-width: 500px) {
+      #presentation aside {
+        width: 80%;
+        margin-top: 3rem; } }
+    #presentation aside .sidebar_first_container {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 10rem; }
+      @media (max-width: 810px) {
+        #presentation aside .sidebar_first_container {
+          display: none; } }
+    #presentation aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
+      content: url(../images/noun-arrow-download.png); }
+
 .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
   grid-column: 3 /span 9;
   grid-row: 1;
diff --git a/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.png b/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.png
new file mode 100644
index 0000000000000000000000000000000000000000..35d582d29c72390fa21b58d838650270ced12acf
GIT binary patch
literal 5296
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
F^>3n0qHq8J

literal 0
HcmV?d00001

diff --git a/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg b/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg
new file mode 100644
index 0000000..6aa4b7e
--- /dev/null
+++ b/web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="296.99997mm"
+   viewBox="0 0 210 296.99997"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-102.65834,-91.281253)">
+    <circle
+       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:0.529167;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+       id="path3"
+       cx="107.9243"
+       cy="96.547218"
+       r="5.0013819" />
+    <g
+       id="g3"
+       transform="matrix(0.20537675,0,0,0.20537675,101.21124,91.670331)">
+      <path
+         d="m 41.028293,36.984814 h -16.69492 a 0.702944,0.702944 0 0 0 0,1.405888 h 16.69492 a 0.702944,0.702944 0 1 0 0,-1.405888 z"
+         id="path1"
+         style="fill:#ffffff;stroke-width:0.292893" />
+      <path
+         d="m 42.46347,24.507558 -9.079693,8.874668 V 9.804313 a 0.702944,0.702944 0 1 0 -1.405888,0 v 23.577913 l -9.079693,-8.874668 a 0.70294398,0.70294398 0 0 0 -0.966548,0 0.73223332,0.73223332 0 0 0 0,0.995837 l 10.251267,10.046241 a 0.79081198,0.79081198 0 0 0 0.995837,0 L 43.430018,25.503395 a 0.70294398,0.70294398 0 0 0 0,-0.995837 0.70294398,0.70294398 0 0 0 -0.966548,0 z"
+         id="path2"
+         style="fill:#ffffff;stroke-width:0.292893" />
+    </g>
+  </g>
+</svg>
diff --git a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
index e44c86c..9cfeb2d 100644
--- a/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
@@ -5,7 +5,8 @@
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 10px;
     .layout-content{
-        grid-column: 3 / 11;
+        // grid-column: 3 / 11;
+        grid-row: 1;
         order: 2;
         padding-top: 3rem;
         padding-bottom: 6rem;
@@ -26,7 +27,9 @@
             article.node-type-static{
                 width: 100%;
     
-                div.field_body{
+                .field_body{
+                    padding-left: 20%;
+                    width: 80%;
                     h2{
                         font-size: $font-medium;
                         font-weight: 600;
@@ -36,28 +39,122 @@
                         margin-top: 0;
                     }
                 }
+                .paragraph{
+                    padding-top: 1rem;
+                    padding-bottom: 1rem;
+                    padding-left: 20%;
+                    padding-right: 20%;
+
+                }
+                .field_field_textes{
+                    .field_field_title{
+                        text-transform: uppercase;
+                        font-size: $font-big;
+                        font-weight: 300;
+                    }
+                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7,  #paragraph-id--8{
+                        .field_field_title{
+                            color: $blue_QDD;
+                        }
+                    }
+                    #paragraph-id--3, #paragraph-id--4{
+                        .field_field_title{
+                            color: $red_QDD;
+                        }
+                    }
+                    #paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4,  #paragraph-id--6, #paragraph-id--8{
+                        background-color: $bleu_fond_header;
+                    }
+                    #paragraph-id--7, #paragraph-id--8{
+                        text-align: center;
+                    }
+                    
+                    #paragraph-id--7{
+                        display: flex;
+                        flex-direction: column;
+                        .field_field_title{
+                            width: 60%;
+                            margin: auto;
+                        }
+                        .field_field_texte div:nth-child(2){
+                            display: flex;
+                            flex-direction: row;
+                            p{
+                                padding-right: 30px;
+                                text-align: left;
+                                color: $blue_QDD;
+                            }
+                    }
+                    }
+
+                    #paragraph-id--8{
+                        .field_field_texte div:nth-child(2){
+                                display: flex;
+                                flex-direction: row;
+                                p{
+                                    padding-right: 30px;
+                                    text-align: left;
+                                }
+                        }
+                    }
+                    p{
+                        margin-bottom: 0;
+                        // padding-bottom: 1.5rem;
+                    }    
+                    .field_field_picto{
+                        height: auto;
+                        float: inline-start;
+                        padding-right: 0.5rem;
+                        img{
+                            width: 50px;
+                            height: auto;
+                        }
+                    }
+                }
             }
         }
     }    
-    aside{
-        grid-column: 1 /span 2;
-        // width: 80%;
-        order: 1;
-        margin-top: 5rem;
-        // margin-left: 10%;
-        // margin-right: 1rem;
-        @media(max-width:891px){
-            margin-left: 5%;
-            margin-top: 9rem;
+        aside{
+            position: relative;
+            grid-column: 1 /span 2;
+            grid-row: 1;
+            z-index: 100;
+            // width: 80%;
+            order: 1;
+            margin-top: 5rem;
+            // margin-left: 10%;
+            // margin-right: 1rem;
+            @media(max-width:891px){
+                margin-left: 5%;
+                margin-top: 9rem;
+            }
+            @media (max-width:500px) {
+                width: 80%;
+                margin-top: 3rem;
+            }
+            .sidebar_first_container{
+                // display: flex;
+                // justify-content: flex-end;
+                position: -webkit-sticky;
+                position: sticky;
+                top: 10rem;
+                @media (max-width: 810px){
+                    display: none;
+                }
+            }
+            .views-field-field-pieces-jointes{
+                .field-content{
+                    .file--application-pdf{
+                        &::before{
+                            content: url(../images/noun-arrow-download.png);
+                        }
+                    }
+                }
+            }
         }
-        @media (max-width:500px) {
-            width: 80%;
-            margin-top: 3rem;
-        }
-    }
-}
-        
-        
+    
+            
+}       
         
     
 
diff --git a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
index dffe3cf..227327c 100644
--- a/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
+++ b/web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
@@ -26,7 +26,8 @@
 
 
 /*pages*/
-@import "pages/presentation";
+
 @import "pages/partenaires";
+@import "pages/presentation";
 @import "pages/static";