debut css accueil

This commit is contained in:
2024-03-01 10:27:22 +01:00
parent cfd7503553
commit 770d8dfa9a
7 changed files with 322 additions and 232 deletions

View File

@@ -111,39 +111,13 @@
.layout-container main {
width: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
padding-left: 10px;
padding-right: 10px; }
grid-template-columns: repeat(12, 1fr); }
.layout-container .content_container {
display: grid;
grid-template-columns: repeat(12, 1fr); }
.layout-content {
grid-column: 3 /span 10;
order: 2;
padding-top: 3rem;
padding-bottom: 6rem;
margin: auto; }
@media (max-width: 891px) {
.layout-content {
width: 90%; } }
@media (max-width: 500px) {
.layout-content {
padding-top: 0; } }
aside {
grid-column: 1 /span 2;
order: 1;
margin-top: 5rem; }
@media (max-width: 891px) {
aside {
margin-left: 5%;
margin-top: 9rem; } }
@media (max-width: 500px) {
aside {
width: 80%;
margin-top: 3rem; } }
grid-column: 1 / span 12; }
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
ul {
@@ -324,96 +298,123 @@ header {
text-transform: uppercase; }
/*pages*/
.node-id-6 .content_container {
display: flex; }
.node-id-6 .content_container #block-quartiers-de-demain-titredepage {
display: none; }
.node-id-6 .content_container article.node-type-static {
grid-column: 1 /span 9;
grid-row: 2; }
.node-id-6 .content_container article.node-type-static div.field_body h2 {
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0; }
.node-id-6 .content_container article.node-type-static div.field_body p {
margin-top: 0; }
#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 .content_container #block-quartiers-de-demain-titredepage {
.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
grid-column: 3 /span 9;
grid-row: 1;
margin-top: 3rem; }
.partenaires .content_container #block-quartiers-de-demain-titredepage h1 {
.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
text-transform: uppercase;
color: #f7002b;
font-size: 1.6rem;
font-weight: 300; }
.partenaires .content_container .views-element-container {
.partenaires .layout-content .content_container .views-element-container {
grid-column: 3 /span 9;
grid-row: 2; }
.partenaires .content_container .views-element-container .node-type-partenaire {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire {
width: 100%;
padding-bottom: 3rem;
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(auto-fill); }
@media (max-width: 810px) {
.partenaires .content_container .views-element-container .node-type-partenaire {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire {
display: flex;
flex-direction: column; } }
.partenaires .content_container .views-element-container .node-type-partenaire .field_field_logo {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo {
grid-column: 1 /span 2;
grid-row: 1 /span 3;
padding-right: 1rem;
margin: auto; }
.partenaires .content_container .views-element-container .node-type-partenaire .field_field_logo img {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo img {
object-fit: contain;
max-width: 200px;
max-height: 200px; }
.partenaires .content_container .views-element-container .node-type-partenaire .field_title {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title {
grid-column: 3 /span 8;
grid-row: 1;
font-weight: 500;
font-size: 0.6rem;
margin-left: 1rem; }
.partenaires .content_container .views-element-container .node-type-partenaire .field_body {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
grid-column: 3 /span 8;
grid-row: 2;
margin-left: 1rem; }
.partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
grid-column: 3 /span 8;
grid-row: 3;
border-bottom: 2px solid #0732c2;
width: fit-content;
padding-bottom: 0.5rem;
margin-left: 1rem; }
.partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien a {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
display: inline-flex;
align-items: center; }
.partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien a svg {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a svg {
display: none; }
.partenaires .content_container .views-element-container .node-type-partenaire .field_field_lien a::before {
.partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::before {
display: inline-block;
content: url("../images/noun-arrow-to-right.svg");
padding-right: 0.5rem;
padding-top: 0.2rem; }
.node-type-static .content_container #block-quartiers-de-demain-titredepage {
.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
grid-column: 3 /span 9;
grid-row: 1;
margin-top: 3rem; }
.node-type-static .content_container #block-quartiers-de-demain-titredepage h1 {
.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
text-transform: uppercase;
color: #f7002b;
font-size: 1.6rem;
font-weight: 300; }
.node-type-static .content_container article.node-type-static {
.node-type-static .layout-content .content_container article.node-type-static {
grid-column: 3 /span 9;
grid-row: 2; }
.node-type-static .content_container article.node-type-static div.field_body h2 {
.node-type-static .layout-content .content_container article.node-type-static div.field_body h2 {
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0; }
.node-type-static .content_container article.node-type-static div.field_body p {
.node-type-static .layout-content .content_container article.node-type-static div.field_body p {
margin-top: 0; }