diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index e1ec9c4..2594bf0 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -89,6 +89,9 @@ width: 100%; overflow: hidden; } +.layout-content { + padding-bottom: 3rem; } + .path-frontpage { margin: 0; } @@ -114,6 +117,77 @@ a { /* @import "pages/partials/header_footer"; @import "pages/home";*/ +.layout__region--top .block-entity-fieldnodefield-images img { + width: 65%; + object-fit: cover; + height: 500px; } + +.layout__region--top .block-entity-fieldnodetitle { + display: block; + position: relative; + float: right; + top: -375px; + width: 60%; } + .layout__region--top .block-entity-fieldnodetitle .field--name-title { + font-size: 4rem; + font-weight: 800; + color: #009ee3; + background-color: white; + padding: 2rem 1rem 2rem 1rem; } + +.layout__region--first .block-region-first .block-entity-fieldnodefield-textes { + display: flex; + justify-content: left; + padding-right: 2rem; } + .layout__region--first .block-region-first .block-entity-fieldnodefield-textes .field--name-field-titre { + display: flex; + font-size: 1rem; + font-weight: 800; + color: #09398b; } + .layout__region--first .block-region-first .block-entity-fieldnodefield-textes .field--name-field-titre:focus { + text-decoration: underline; } + .layout__region--first .block-region-first .block-entity-fieldnodefield-textes .field--name-field-titre::after { + border-bottom: olivedrab; } + +.layout__region--second .block-entity-fieldnodefield-textes .field--name-field-titre { + font-size: 2rem; + font-weight: 800; + color: #09398b; } + +.layout__region--second .block-entity-fieldnodefield-textes .field--type-text-long { + padding-right: 2rem; } + +.layout__region--third .field--name-field-fichiers { + display: flex; + justify-self: right; + min-height: 4rem; + max-width: 70%; + background: #009ee3; + color: white; + align-content: flex-end; + align-items: center; + justify-content: center; } + .layout__region--third .field--name-field-fichiers .file--mime-application-pdf { + padding: 1rem; } + .layout__region--third .field--name-field-fichiers .file--mime-application-pdf a { + color: white; + font-weight: 800; } + +.layout__region--third .block-entity-fieldnodefield-ress h2 { + font-size: 1rem; + color: #09398b; } + +.layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource { + display: flex; + border-bottom: 1px solid #009ee3; + padding-bottom: 2rem; + max-width: 70%; } + .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource .field, .layout__region--third .block-entity-fieldnodefield-ress .node-type-ressource a { + line-height: 0.6rem; + font-size: 1.5rem; + color: #09398b; + font-weight: 500; } + .field--type-entity-reference-revisions .paragraph-summary { font-family: "Marianne", sans-serif; font-size: 5rem; @@ -127,25 +201,63 @@ a { .field--type-entity-reference-revisions .paragraph-summary:nth-of-type(2n) { font-size: 2rem; } -.contextual-region { - display: grid; - grid-template-columns: 10% 2fr 2fr 2fr 2fr 10%; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; } - .block-views-blockactus-blocks-pages-block-1 { - background-color: #09398b; } + background-color: #09398b; + padding: 1rem; } + .block-views-blockactus-blocks-pages-block-1 .view-content { + display: flex; + flex-direction: row; + justify-content: space-around; } + .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child { + color: white; } + .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite div:first-child .field--name-field-images .field__item img { + width: 200px; + height: fit-content; } + .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite h2 { + margin: 0; } + .block-views-blockactus-blocks-pages-block-1 .view-content .node-type-actualite a { + color: white; } -.view-content { +.node-type-actualite div:first-child { display: flex; - flex-direction: row; - justify-content: space-around; } - .view-content .node-type-actualite div:first-child { + flex-direction: column; } + .node-type-actualite div:first-child :nth-child(1) { + order: 1; } + .node-type-actualite div:first-child :nth-child(4) { + order: 2; } + .node-type-actualite div:first-child :nth-child(5) { + order: 3; } + +.field--type-link { + display: block; + width: fit-content; + padding: 1rem; + font-size: 1.5rem; + background-color: white; + border: 2px solid #009ee3; } + .field--type-link a { + font-size: 1rem; + text-transform: uppercase; + font-weight: 700; + color: #009ee3; } + .field--type-link a::after { + display: inline-block; + content: url("../../images/pictos/polygon2.svg"); + background: green; } + +.node-type-static { + padding: 1rem; } + .node-type-static .inline.links { + display: block; + width: fit-content; padding: 1rem; - color: white; } - .view-content .node-type-actualite div:first-child .field--name-field-images .field__item img { - height: 400px; } - .view-content .node-type-actualite a { - color: white; } + font-size: 1rem; + border: 2px solid #009ee3; + list-style: none; } + .node-type-static .inline.links a { + text-transform: uppercase; + font-weight: 700; + color: #009ee3; } /*partials*/ #header-top { diff --git a/web/themes/custom/eql/images/pictos/polygon2.svg b/web/themes/custom/eql/images/pictos/polygon2.svg new file mode 100644 index 0000000..92fb77a Binary files /dev/null and b/web/themes/custom/eql/images/pictos/polygon2.svg differ diff --git a/web/themes/custom/eql/scss/global/_layout.scss b/web/themes/custom/eql/scss/global/_layout.scss index 4334be8..32bcce4 100644 --- a/web/themes/custom/eql/scss/global/_layout.scss +++ b/web/themes/custom/eql/scss/global/_layout.scss @@ -15,6 +15,9 @@ overflow: hidden; } +.layout-content{ + padding-bottom: 3rem; +} .path-frontpage{ margin: 0; } diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index 84e47da..c94a633 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -24,41 +24,92 @@ } -.contextual-region{ - display: grid; - grid-template-columns:10% 2fr 2fr 2fr 2fr 10%; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; -} .block-views-blockactus-blocks-pages-block-1{ background-color: $blue-dark; - // display: grid; - // grid-template-columns: 2fr 2fr 2fr 2fr; - // color: $white; + padding: 1rem; + .view-content{ + display: flex; + flex-direction: row; + justify-content: space-around; + .node-type-actualite{ + div:first-child{ + color: $white; + .field--name-field-images { + .field__item img{ + width: 200px; + height: fit-content; + // &::after{ + // content:"line"; + // } + } + } + } + h2{ margin:0; } + a{ color: $white; } + } + } } -.view-content{ - display: flex; - flex-direction: row; - justify-content: space-around; - .node-type-actualite{ - div:first-child{ - padding: 1rem; - color: $white; - .field--name-field-images { - .field__item img{ - height: 400px; - } - } - } - a{ - color: $white; - } +.node-type-actualite div:first-child{ + display: flex; + flex-direction: column; + :nth-child(1) { order: 1; } + :nth-child(4) { order: 2; } + :nth-child(5) { order: 3; } +} + + +.field--type-link { + display: block; + width: fit-content; + padding: 1rem; + font-size: 1.5rem; + + background-color: $white; + border: 2px solid $blue-light; + a{ + font-size: 1rem; + text-transform: uppercase; + font-weight: 700; + color: $blue-light; + } + a::after{ + // font-family: "Font Awesome"; + display: inline-block; + content: url("../../images/pictos/polygon2.svg"); + // width: 6rem; + // height: 4rem; + background: green; } +} + + +.node-type-static{ + padding: 1rem; + + .inline.links{ + display: block; + width: fit-content; + padding: 1rem; + font-size: 1rem; + + // background-color: $white; + border: 2px solid $blue-light; + list-style: none; + a{ + text-transform: uppercase; + font-weight: 700; + color: $blue-light; + // &::after{ + // content: url('../../images/pictos/noun_Arrow_3771902.svg'); + // } + } + } } \ No newline at end of file diff --git a/web/themes/custom/eql/scss/pages/_static.scss b/web/themes/custom/eql/scss/pages/_static.scss index e69de29..0194ec7 100644 --- a/web/themes/custom/eql/scss/pages/_static.scss +++ b/web/themes/custom/eql/scss/pages/_static.scss @@ -0,0 +1,124 @@ + +// . +// .paragraph--type--texte { +// paragraph--type--texte +// font-size: 2rem; +// } +.layout__region--top{ + .block-entity-fieldnodefield-images{ + img{ + width: 65%; + object-fit: cover; + height: 500px; + } + } + .block-entity-fieldnodetitle{ + display: block; + position: relative; + float: right; + top: -375px; + width: 60%; + .field--name-title{ + font-size: 4rem; + font-weight: 800; + color: $blue-light; + background-color: $white; + padding: 2rem 1rem 2rem 1rem; + } + } + +} + +.layout__region--first{ + + .block-region-first{ + + .block-entity-fieldnodefield-textes{ + // max-width: 70%; + // margin-left: 5rem; + display: flex; + justify-content: left; + padding-right: 2rem; + .field--name-field-titre{ + display: flex; + font-size: 1rem; + font-weight: 800; + color: $blue-dark; + &:focus{ + text-decoration: underline; + } + &::after{ + border-bottom: olivedrab; + } + } + } + } +} + +.layout__region--second{ + + .block-entity-fieldnodefield-textes{ + .field--name-field-titre{ + font-size: 2rem; + font-weight: 800; + color: $blue-dark; + } + .field--type-text-long{ + padding-right: 2rem; + } + } + +} + +.layout__region--third{ + .field--name-field-fichiers{ + display: flex; + justify-self: right; + min-height: 4rem; + max-width: 70%; + background: #009ee3; + color: white; + align-content: flex-end; + align-items: center; + justify-content: center; + + + .file--mime-application-pdf{ + a{ + color: $white; + font-weight: 800; + } + padding: 1rem; + } + } + .block-entity-fieldnodefield-ress{ + + h2{ + font-size: 1rem; + color: $blue-dark; + + } + .node-type-ressource{ + display: flex; + border-bottom: 1px solid $blue-light; + padding-bottom: 2rem; + max-width: 70%; + .field, a{ + line-height: 0.6rem; + font-size: 1.5rem; + color: $blue-dark; + font-weight: 500; + } + .field--type-image{ + // max-width: 70%; + // max-height: 4rem; + // img{ + // object-fit: scale-down; + // } + + } + } + } + + +}