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

css accueil

This commit is contained in:
ouidade 2024-03-01 13:48:04 +01:00
parent 770d8dfa9a
commit 6f75dfed66
5 changed files with 256 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
View File

@ -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;

BIN
web/themes/custom/quartiers_de_demain/images/noun-arrow-download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

36
web/themes/custom/quartiers_de_demain/images/noun-arrow-download.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

105
web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss
View File

@ -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,11 +39,86 @@
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{
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
// width: 80%;
order: 1;
margin-top: 5rem;
@ -54,11 +132,30 @@
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);
}
}
}
}
}
}

3
web/themes/custom/quartiers_de_demain/scss/quartiers_de_demain.scss
View File

@ -26,7 +26,8 @@
/*pages*/
@import "pages/presentation";
@import "pages/partenaires";
@import "pages/presentation";
@import "pages/static";