bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

insert svg dans twig & css

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-04 12:54:09 +02:00
parent 8d43073a18
commit 7a39b7c42e
6 changed files with 109 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -827,34 +827,63 @@ footer span.totop #toTop .arrow-up::before {
width: 80%; width: 80%;
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto {
display: flex; margin-top: 2rem;
flex-direction: row; display: grid;
justify-content: center; grid-template-columns: repeat(6 auto);
grid-template-rows: repeat(3 1fr);
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5 { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5 {
font-size: 5rem; font-size: 5rem;
font-weight: 800; font-weight: 800;
margin-bottom: 0;
margin: 0;
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(1) {
grid-row: 2;
grid-column: 1;
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {
grid-row: 2;
grid-column: 3;
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
grid-row: 1;
grid-column: 5;
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p {
width: 30%; font-size: 1rem;
display: flex; font-weight: 400;
flex-direction: column; margin: 0;
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:not(:last-of-type) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:not(:last-of-type) {
padding-right: 2rem; padding-right: 2rem;
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1)::before { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
content: url("../img/pillier-1-full.svg"); grid-row: 1/span 2;
padding-bottom: 1rem; grid-column: 1/span 2;
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2)::after { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
content: url("../img/pillier-2-full.svg"); grid-row: 3;
padding-top: 1rem; grid-column: inherit;
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3)::before { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
content: url("../img/pillier-3-full.svg"); grid-row: 1/span 2;
padding-bottom: 1rem; grid-column: 5/span 6;
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(1) {
grid-row: 3;
grid-column: 1/span 2;
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(2) {
grid-row: 1;
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 3;
grid-column: 5;
} }
#home article.node-type-static #paragraph-id--9 { #home article.node-type-static #paragraph-id--9 {
display: none; display: none;
}
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
display: none;
} }

2
web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-1-full.svg vendored
View File

@@ -39,5 +39,5 @@
id="tspan1" id="tspan1"
x="-1.4831511" x="-1.4831511"
y="387.52762" y="387.52762"
style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:183.589px;font-family:Gilroy;-inkscape-font-specification:'Gilroy Semi-Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.956195">1.</tspan></text> style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:183.589px;font-family:Gilroy, sans-serif;-inkscape-font-specification:'Gilroy Semi-Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.956195">1.</tspan></text>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

4
web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2-full.svg vendored
View File

@@ -3,7 +3,7 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg2"
width="362.79999" width="362.79999"
height="562.18646" height="562.18646"
viewBox="0 0 362.79999 562.18646" viewBox="0 0 362.79999 562.18646"
@@ -39,5 +39,5 @@
id="tspan1" id="tspan1"
x="-0.4619709" x="-0.4619709"
y="130.89897" y="130.89897"
style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:183.589px;font-family:Gilroy;-inkscape-font-specification:'Gilroy Semi-Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.956195">2.</tspan></text> style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:183.589px;font-family:Gilroy;font-family:sans-serif;fill:#ffffff;fill-opacity:1;stroke-width:0.956195">2.</tspan></text>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

2
web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3-full.svg vendored
View File

@@ -3,7 +3,7 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg2"
width="362.79999" width="362.79999"
height="362.79999" height="362.79999"
viewBox="0 0 362.79999 362.79998" viewBox="0 0 362.79999 362.79998"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

79
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@@ -148,7 +148,7 @@
} }
} }
} }
#paragraph-id--7{ #paragraph-id--7{ ///////// les piliers
background-color: #0833c2ff; background-color: #0833c2ff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -165,43 +165,74 @@
.field_field_texte{ .field_field_texte{
width: 80%; width: 80%;
.colone-picto{ .colone-picto{
display: flex; // display: flex;
flex-direction:row ; // flex-direction:row ;
justify-content: center; // justify-content: center;
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(6 auto);
grid-template-rows: repeat(3 1fr);
h5{ h5{
font-size: 5rem; font-size: 5rem;
font-weight: 800; font-weight: 800;
margin-bottom: 0;
margin: 0;
}
h5:nth-of-type(1){
grid-row: 2;
grid-column: 1;
}
h5:nth-of-type(2){
grid-row: 2;
grid-column: 3;
}
h5:nth-of-type(3){
grid-row: 1;
grid-column: 5;
} }
p{ p{
width: 30%; font-size: 1rem;
display: flex; font-weight: 400;
flex-direction:column ; margin: 0;
&:not(:last-of-type){ &:not(:last-of-type){
padding-right: 2rem; padding-right: 2rem;
} }
&:nth-of-type(1)::before{
content: url("../img/pillier-1-full.svg");
padding-bottom: 1rem;
}
&:nth-of-type(2)::after{
content: url("../img/pillier-2-full.svg");
padding-top: 1rem;
}
&:nth-of-type(3)::before{
content: url("../img/pillier-3-full.svg");
padding-bottom: 1rem;
}
} }
svg:nth-of-type(1){
grid-row: 1 /span 2;
grid-column: 1 /span 2;
}
svg:nth-of-type(2){
grid-row: 3;
grid-column: inherit;
}
svg:nth-of-type(3){
grid-row: 1 /span 2;
grid-column: 5 /span 6;
}
p:nth-of-type(1){
grid-row: 3;
grid-column: 1 /span 2;
}
p:nth-of-type(2){
grid-row: 1;
}
p:nth-of-type(3){
grid-row: 3;
grid-column: 5;
}
} }
} }
} }
#paragraph-id--9{display: none;} #paragraph-id--9{display: none;}
} }
.paragraph--type--static-parts:not(#paragraph-id--7){
#svg1{
display: none;
}
}
} }

7
web/themes/custom/quartiers_de_demain/templates/field--paragraph--field-texte.html.twig
View File

@@ -69,7 +69,12 @@
<div> <div>
{% endif %} {% endif %}
{% for item in items %} {% for item in items %}
<div class="colone-picto"{{ item.attributes }}>{{ item.content }}</div> <div class="colone-picto"
{{ item.attributes }}>{{ item.content }}
{% include active_theme_path() ~ '/dist/assets/img/pillier-1.svg' %}
{% include active_theme_path() ~ '/dist/assets/img/pillier-2.svg' %}
{% include active_theme_path() ~ '/dist/assets/img/pillier-3.svg' %}
</div>
{% endfor %} {% endfor %}
{% if multiple %} {% if multiple %}
</div> </div>