insert svg dans twig & css
This commit is contained in:
parent
8d43073a18
commit
7a39b7c42e
|
@ -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;
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.6 KiB |
|
@ -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>
|
||||||
|
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
@ -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"
|
||||||
|
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
@ -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,36 +165,62 @@
|
||||||
.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{
|
svg:nth-of-type(1){
|
||||||
content: url("../img/pillier-2-full.svg");
|
grid-row: 1 /span 2;
|
||||||
padding-top: 1rem;
|
grid-column: 1 /span 2;
|
||||||
|
|
||||||
}
|
}
|
||||||
&:nth-of-type(3)::before{
|
svg:nth-of-type(2){
|
||||||
content: url("../img/pillier-3-full.svg");
|
grid-row: 3;
|
||||||
padding-bottom: 1rem;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -203,5 +229,10 @@
|
||||||
#paragraph-id--9{display: none;}
|
#paragraph-id--9{display: none;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.paragraph--type--static-parts:not(#paragraph-id--7){
|
||||||
|
#svg1{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue