smart phone home et footer

This commit is contained in:
2022-01-06 20:34:33 +01:00
parent 6d81dd976b
commit 0fcfc3225a
5 changed files with 234 additions and 24 deletions
+34 -6
View File
@@ -361,6 +361,13 @@ a {
background-position-y: bottom; background-position-y: bottom;
background-position-x: left; background-position-x: left;
background-repeat: no-repeat; } background-repeat: no-repeat; }
@media (max-width: 810px) {
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 {
background: url("../images/pictos/forme_home_2_smartphone.svg");
background-size: 100%;
background-position-y: bottom;
background-position-x: left;
background-repeat: no-repeat; } }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child { .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child {
display: grid; display: grid;
grid-template-columns: 1fr repeat(4, 2fr) 1fr; grid-template-columns: 1fr repeat(4, 2fr) 1fr;
@@ -434,8 +441,11 @@ a {
content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); } content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); }
@media (max-width: 810px) { @media (max-width: 810px) {
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline { .path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline {
grid-column: 2 / 5; grid-column: 2;
grid-row: 3; } } grid-row: 3;
font-size: 0.6rem; }
.path-frontpage .block-region-content .block-views-blockhome-nodes-block-1 .node-type-static div:first-child .links.inline a:after {
display: none; } }
.path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca { .path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca {
grid-area: presentation; grid-area: presentation;
grid-column: 3 /span 4; grid-column: 3 /span 4;
@@ -469,8 +479,12 @@ a {
@media (max-width: 810px) { @media (max-width: 810px) {
.path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca { .path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca {
grid-area: presentation; grid-area: presentation;
grid-column: 3 /span 4; grid-column: 5;
grid-row: 3; } } grid-row: 4; }
.path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link {
font-size: 0.6rem; }
.path-frontpage .block-region-content .block-block-content9448ca2a-90e3-488b-89cf-8ec6a986a9ca .field--type-link a::after {
display: none; } }
.path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 { .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 {
grid-area: presentation; grid-area: presentation;
grid-column: 5; grid-column: 5;
@@ -515,9 +529,10 @@ a {
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
color: #009ee3; color: #009ee3;
align-items: center; } align-items: center;
font-size: 0.6rem; }
.path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien a::after { .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-lien a::after {
content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); } display: none; }
.path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description { .path-frontpage .block-region-content .block-block-content1bb9024b-d95f-4137-894c-362abf10a483 .field--name-field-description {
display: none; } } display: none; } }
.path-frontpage .block-region-content .block-block-content7db64d87-3e22-4fbd-9c11-2b95f5bef695 { .path-frontpage .block-region-content .block-block-content7db64d87-3e22-4fbd-9c11-2b95f5bef695 {
@@ -2492,6 +2507,9 @@ a {
flex-direction: row; flex-direction: row;
background-color: white; background-color: white;
padding-top: 3rem; } padding-top: 3rem; }
@media (max-width: 810px) {
#fotter-bottom {
flex-direction: column; } }
#fotter-bottom .region { #fotter-bottom .region {
display: block; display: block;
padding-left: 2rem; padding-left: 2rem;
@@ -2506,6 +2524,10 @@ a {
margin-left: 3rem; margin-left: 3rem;
border: none; border: none;
width: 20%; } width: 20%; }
@media (max-width: 810px) {
#fotter-bottom .region-footer-bottom-left {
width: 100%;
margin-left: 0rem; } }
#fotter-bottom .region-footer-bottom-left .view-id-partenaires .view-content { #fotter-bottom .region-footer-bottom-left .view-id-partenaires .view-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -2523,6 +2545,9 @@ a {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: flex-end; } justify-content: flex-end; }
@media (max-width: 810px) {
#fotter-bottom .region-footer-bottom-right {
width: 100%; } }
#fotter-bottom .region-footer-bottom-right #block-socialnetwork { #fotter-bottom .region-footer-bottom-right #block-socialnetwork {
margin-bottom: 1rem; } margin-bottom: 1rem; }
#fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p { #fotter-bottom .region-footer-bottom-right #block-socialnetwork .field--name-body p {
@@ -2564,6 +2589,9 @@ a {
margin-top: 0; } margin-top: 0; }
#fotter-bottom .region-footer-bottom-middle { #fotter-bottom .region-footer-bottom-middle {
width: 60%; } width: 60%; }
@media (max-width: 810px) {
#fotter-bottom .region-footer-bottom-middle {
width: 100%; } }
#fotter-bottom .region-footer-bottom-middle .view-id-partenaires .view-content { #fotter-bottom .region-footer-bottom-middle .view-id-partenaires .view-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
File diff suppressed because one or more lines are too long
@@ -0,0 +1,122 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
id="svg871"
xml:space="preserve"
width="1022.6142"
height="1695.3451"
viewBox="0 0 1022.6142 1695.3451"
sodipodi:docname="forme_home_2_smartphone.svg"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
id="metadata877"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs875"><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath893"><path
d="M 0,0 H 1263.5 V -982.96474 H 0 Z"
clip-rule="evenodd"
id="path891" /></clipPath><linearGradient
x1="0"
y1="0"
x2="393.55112"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.0000104,0,0,-1.0000104,1187.5312,848.11903)"
spreadMethod="pad"
id="linearGradient923"><stop
style="stop-opacity:1;stop-color:#4ca5e1"
offset="0"
id="stop919" /><stop
style="stop-opacity:1;stop-color:#f25152"
offset="1"
id="stop921" /></linearGradient><linearGradient
x1="0"
y1="0"
x2="493.23679"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.99998925,0,0,-0.99998925,-103.89338,971.68058)"
spreadMethod="pad"
id="linearGradient943"><stop
style="stop-opacity:1;stop-color:#4ca5e1"
offset="0"
id="stop939" /><stop
style="stop-opacity:1;stop-color:#26448e"
offset="1"
id="stop941" /></linearGradient><linearGradient
inkscape:collect="always"
xlink:href="#linearGradient943"
id="linearGradient1728"
x1="-162.00925"
y1="623.79181"
x2="341.04544"
y2="623.79181"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(598.31786,-923.95276)" /><linearGradient
inkscape:collect="always"
xlink:href="#linearGradient923"
id="linearGradient1736"
x1="637.69739"
y1="456.5993"
x2="1028.988"
y2="456.5993"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.6512491,0,0,1.6844893,-1016.5674,-973.84839)" /></defs><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview873"
showgrid="false"
inkscape:zoom="0.32694942"
inkscape:cx="483.25518"
inkscape:cy="880.8702"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="g879"
inkscape:document-rotation="0"
inkscape:pagecheckerboard="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" /><g
id="g879"
inkscape:groupmode="layer"
inkscape:label="forme_home"
transform="matrix(1.3333333,0,0,-1.3333333,-10.719379,1318.7682)"><path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:11.25;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
d="M 541.20254,-272.12823 1100.1099,-683.33083 688.90735,-1242.2383 129.99993,-831.03569 Z"
id="path910" /><path
id="path912"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#26448e;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:22.8913;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
d="m 202.58714,931.90593 -3.63791,-4.9438 -452.32333,-614.8 L 38.448137,97.461606 H 59.16311 L -236.21071,314.77547 205.20048,914.74413 805.16917,473.32975 528.63379,97.461606 h 15.23895 L 822.33257,475.94309 Z" /><rect
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient1736);stroke-width:11.25;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke;stop-color:#000000"
id="rect1680-2"
width="627.54175"
height="640.17432"
x="45.718075"
y="-524.79889"
transform="matrix(0.97270863,-0.23202998,-0.22245187,-0.97494367,0,0)" /><rect
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient1728);stroke-width:11.25;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke;stop-color:#000000"
id="rect1680-2-9"
width="400"
height="400"
x="441.93378"
y="-546.06274"
transform="matrix(0.92187643,0.38748399,0.38748399,-0.92187643,0,0)" /></g></svg>

After

Width:  |  Height:  |  Size: 7.5 KiB

+23 -4
View File
@@ -25,6 +25,13 @@
background-position-y: bottom; background-position-y: bottom;
background-position-x: left; background-position-x: left;
background-repeat: no-repeat; background-repeat: no-repeat;
@media (max-width: 810px){
background: url("../images/pictos/forme_home_2_smartphone.svg");
background-size: 100%;
background-position-y: bottom;
background-position-x: left;
background-repeat: no-repeat;
}
.node-type-static{ .node-type-static{
div:first-child{ div:first-child{
display: grid; display: grid;
@@ -119,9 +126,15 @@
} }
} }
@media (max-width: 810px){ @media (max-width: 810px){
grid-column: 2 / 5; grid-column: 2;
grid-row:3; grid-row:3;
font-size: 0.6rem;
a{
&:after{
display: none;
}
}
} }
} }
} }
@@ -173,8 +186,13 @@
} }
@media (max-width: 810px){ @media (max-width: 810px){
grid-area: presentation; grid-area: presentation;
grid-column: 3 /span 4; grid-column: 5;
grid-row: 3; grid-row: 4;
.field--type-link { font-size: 0.6rem;
a::after{
display: none;
}
}
} }
} }
@@ -229,9 +247,10 @@
font-weight: 700; font-weight: 700;
color: $blue-light; color: $blue-light;
align-items: center; align-items: center;
font-size: 0.6rem;
} }
a::after{ a::after{
content: url('data:image/svg+xml,<svg width="40" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1"><polyline points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2" transform="scale(0.5) translate(0,-25)" fill="rgb(0,158,227)" stroke="rgb(0,158,227)" stroke-width="0.7"/></svg>'); display: none;
} }
} }
.field--name-field-description{display: none;} .field--name-field-description{display: none;}
@@ -9,7 +9,9 @@
background-color: $white; background-color: $white;
padding-top: 3rem; padding-top: 3rem;
@media (max-width: 810px){
flex-direction: column;
}
.region{ .region{
display: block; display: block;
@@ -28,6 +30,10 @@
margin-left: 3rem; margin-left: 3rem;
border: none; border: none;
width: 20%; width: 20%;
@media (max-width: 810px){
width: 100%;
margin-left: 0rem;
}
.view-id-partenaires{ .view-id-partenaires{
.view-content{ .view-content{
@@ -55,7 +61,9 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: flex-end; justify-content: flex-end;
@media (max-width: 810px){
width: 100%;
}
#block-socialnetwork { #block-socialnetwork {
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -117,7 +125,9 @@
.region-footer-bottom-middle{ .region-footer-bottom-middle{
width: 60%; width: 60%;
@media (max-width: 810px){
width: 100%;
}
.view-id-partenaires{ .view-id-partenaires{
.view-content{ .view-content{
display: flex; display: flex;