diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index a35d38c..cad090a 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -319,10 +319,21 @@ a { .path-node.page-node-type-static .layout-container .layout-content .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource .field--name-field-edition .field__label { display: none; } .path-node.page-node-type-static .layout-container .layout-content .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource .field--name-field-images { + display: none; width: 50%; } .path-node.page-node-type-static .layout-container .layout-content .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource .field--name-field-images img { width: 100%; height: auto; } + .path-node.page-node-type-static .layout-container .layout-content .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .node-type-ressource .field--name-field-type-de-ressource { + display: inline-flex; + margin-top: 2rem; + background: #09398b; + margin-right: 1rem; + padding-left: 0.3rem; + padding-right: 0.3rem; + color: white; + font-weight: 800; + vertical-align: middle; } .path-frontpage .block-region-content { display: grid; @@ -1297,36 +1308,187 @@ a { .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockbase-de-donnees-block-1 .view-content .node-type-ressource ul.links.inline { display: none; } -.path-node.page-node-type-ressource #block-contenudelapageprincipale span h2 { - font-family: "Source Code Pro"; - font-size: 2rem; - font-weight: 500; } +.path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--top .block-region-top { + margin-top: 2rem; + margin-left: 13%; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-ressource { + color: #009ee3; + text-transform: uppercase; + font-weight: 800; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--top .block-region-top .block-entity-fieldnodetitle { + font-size: 2rem; + font-weight: 600; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--top .block-region-top .block-entity-fieldnodefield-edition .field--name-field-edition p { + margin-bottom: 0; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- .field--name-field-auteur-s- { + font-size: 1.5rem; + font-weight: 800; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--top .block-region-top .block-entity-fieldnodefield-auteur-s- .field--name-field-auteur-s- p { + margin: 0; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs .field--name-field-mots-clefs { + display: inline-flex; + margin-top: 2rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--top .block-region-top .block-entity-fieldnodefield-mots-clefs .field--name-field-mots-clefs .field__item { + background: #09398b; + margin-right: 1rem; + padding-left: 0.3rem; + padding-right: 0.3rem; + color: white; + font-weight: 800; + vertical-align: middle; } -.path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div { - display: grid; - grid-template-areas: "contact contact contact" "ancre texte liens"; } - .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-type-de-ressource { - text-transform: uppercase; } - .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-type-de-ressource a { +.path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--first { + margin-top: 3rem; + position: relative; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--first .block-region-first { + display: flex; + justify-content: end; + position: sticky; + top: 7rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--first .block-region-first .block-entity-fieldnodefield-textes { + display: flex; + width: 50%; + background-color: white; + padding-right: 2rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--first .block-region-first .block-entity-fieldnodefield-textes .field--name-field-titre { + display: flex; + font-size: 1rem; + font-weight: 1000; + color: #09398b; + border-bottom: 1px solid #009ee3; + padding-bottom: 0.5rem; + padding-right: 1rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--first .block-region-first .block-entity-fieldnodefield-textes .field--name-field-titre:hover { + text-decoration: underline; } + +.path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--second { + margin-top: 3rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--second .block-entity-fieldnodefield-textes { + background-color: white; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--second .block-entity-fieldnodefield-textes .field--name-field-titre { + font-size: 1.5rem; + font-weight: 1000; + font-family: 'Source Code Pro'; + color: #09398b; + text-transform: uppercase; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--second .block-entity-fieldnodefield-textes h4 { + text-transform: none !important; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--second .block-entity-fieldnodefield-textes h4 img { + width: 100%; + height: auto; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--second .block-entity-fieldnodefield-textes .field--type-text-long { + padding-right: 2rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--second .block-entity-fieldnodefield-textes p { + margin-top: 0; } + +.path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third { + margin-top: 3rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third { + display: flex; + flex-direction: column; + width: 70%; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-fichiers { + height: fit-content; + border: 2px solid #009ee3; + background-color: white; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .field--name-field-fichiers { + min-height: 4rem; + background: white; + color: #009ee3; + padding-left: 1rem; + padding-top: 1rem; + margin-bottom: 1rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .field--name-field-fichiers span:nth-of-type(2) { + display: none; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .field--name-field-fichiers .file--mime-application-pdf { + height: inherit; + margin: auto; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .field--name-field-fichiers .file--mime-application-pdf ::before { + content: url("../images/pictos/noun_Download_file_307900.svg"); + min-width: 50px; + height: auto; + padding-right: 1rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .field--name-field-fichiers .file--mime-application-pdf a { + hyphens: auto; + display: inline-flex; + align-items: center; + color: #009ee3; + font-weight: 800; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-liens .field--name-field-liens .field__item { + margin: auto; + height: fit-content; + border: 2px solid #009ee3; + min-height: 4rem; + background: white; + color: #009ee3; + padding-left: 1rem; + padding-top: 1rem; + margin-bottom: 1rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-liens .field--name-field-liens a { + display: inline-flex; + align-items: center; color: #009ee3; - font-size: 0.8rem; font-weight: 800; } - .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-auteur-s- { - grid-area: contact; - font-size: 1.2rem; - font-weight: 900; } - .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-edition { - grid-area: contact; } - .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-images { - display: none; } - .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-textes { - grid-area: texte; } - .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-fichiers { - grid-area: liens; } - .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-actu-liee { - grid-area: liens; } - .path-node.page-node-type-ressource #block-contenudelapageprincipale .node-type-ressource div .field--name-field-liens { - grid-area: liens; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-liens .field--name-field-liens a::before { + content: url("../images/pictos/noun_External Link_674151.svg"); + min-width: 50px; + height: auto; + padding-right: 1rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-liens .field--name-field-liens a svg.ext { + display: none; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress { + margin-top: 3rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .field__label { + font-size: 0.8rem; + color: black; + font-weight: 900; + margin-bottom: 1rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource { + display: flex; + flex-direction: column; + border: 2px solid #009ee3; + padding: 1rem; + height: fit-content; + margin-bottom: 1rem; + background-color: white; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource:first-of-type { + border-top: 1px solid #009ee3; + padding-top: 1rem; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource:first-of-type::after { + content: url("../images/pictos/noun_Arrow_3771902.svg"); + align-self: end; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-title h2 { + margin: 0; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-title a { + color: black; + font-size: 1.4rem; + font-weight: 600; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-field-auteur-s- { + font-weight: 800; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-field-auteur-s- p { + margin: 0; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-field-auteur-s- .field__label { + display: none; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-field-edition p { + margin: 0; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-field-edition .field__label { + display: none; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-field-images { + display: none; + width: 50%; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-field-images img { + width: 100%; + height: auto; } + .path-node.page-node-type-ressource #block-contenudelapageprincipale .layout__region--third .block-region-third .block-entity-fieldnodefield-ress .field--name-field-ress .node-type-ressource .field--name-field-type-de-ressource { + display: inline-flex; + margin-top: 2rem; + background: #09398b; + margin-right: 1rem; + padding-left: 0.3rem; + padding-right: 0.3rem; + color: white; + font-weight: 800; + vertical-align: middle; } .node-type-offre_de_service { display: flex; } diff --git a/web/themes/custom/eql/scss/pages/_ressource.scss b/web/themes/custom/eql/scss/pages/_ressource.scss index f092a08..1af1b69 100644 --- a/web/themes/custom/eql/scss/pages/_ressource.scss +++ b/web/themes/custom/eql/scss/pages/_ressource.scss @@ -2,64 +2,281 @@ .path-node.page-node-type-ressource{ #block-contenudelapageprincipale{ - // display: grid; - // grid-template-areas: "contact" - // "ancre texte liens" - span{ - // grid-column: 2 / span 6; - // grid-area: contact; - h2{ - font-family: "Source Code Pro"; - font-size: 2rem; - font-weight: 500; - } - } - .node-type-ressource{ - div{ - display: grid; - grid-template-areas: "contact contact contact" - "ancre texte liens" ; - - // display: flex; - // flex-direction: column; - .field--name-field-type-de-ressource{ - // grid-area: contact; + .layout__region--top{ + + .block-region-top{ + margin-top: 2rem; + margin-left: 13%; + .block-entity-fieldnodefield-type-de-ressource{ + color: $blue-light; text-transform: uppercase; - a{ - color: $blue-light; - font-size: 0.8rem; - font-weight: 800; - } - - } - .field--name-field-auteur-s-{ - grid-area: contact; - font-size: 1.2rem; - font-weight: 900; - } - .field--name-field-edition { - grid-area: contact; - } - .field--name-field-date-de-parution{ + font-weight: 800; } - .field--name-field-images{ - display:none; + .block-entity-fieldnodetitle{ + font-size: 2rem; + font-weight: 600; } - .field--name-field-textes{ - grid-area: texte; + .block-entity-fieldnodefield-edition{ + .field--name-field-edition{ + p{ + margin-bottom: 0; + } + } + } - .field--name-field-fichiers{ - grid-area: liens; - } - .field--name-field-actu-liee{ - grid-area: liens; - } - .field--name-field-liens{ - grid-area: liens; + .block-entity-fieldnodefield-auteur-s-{ + .field--name-field-auteur-s-{ + font-size: 1.5rem; + font-weight: 800; + p{ + margin: 0; + } + } + } + .block-entity-fieldnodefield-mots-clefs{ + .field--name-field-mots-clefs{ + display: inline-flex; + margin-top: 2rem; + // &::after{ + // content: url("../images/pictos/noun_Arrow_3771902.svg"); + // align-self: end; + // } + .field__item{ + background: $blue-dark; + margin-right: 1rem; + padding-left: 0.3rem; + padding-right: 0.3rem; + color: $white; + font-weight: 800; + vertical-align: middle; + } + } + } } - // flex:0 1 100%; - } + } + .layout__region--first{ // menu ancres a gauche + margin-top: 3rem; + position: relative; + .block-region-first{ + display: flex; + justify-content: end; + position: sticky; + top: 7rem; + .block-entity-fieldnodefield-textes{ + display: flex; + width: 50%; + background-color: $white; + padding-right: 2rem; + + .field--name-field-titre{ + display: flex; + font-size: 1rem; + font-weight: 1000; + color: $blue-dark; + border-bottom: 1px solid $blue-light; + padding-bottom: 0.5rem; + padding-right: 1rem; + + &:hover{ + text-decoration: underline; + } + } + } + } + } + + .layout__region--second{ // paragraphe texte + margin-top: 3rem; + .block-entity-fieldnodefield-textes{ + + background-color: $white; + .field--name-field-titre{ + font-size: 1.5rem; + font-weight: 1000; + font-family: 'Source Code Pro'; + color: $blue-dark; + text-transform: uppercase; + } + h4{ + text-transform: none !important; + + img{ + width: 100%; + height: auto; + } + } + .field--type-text-long{ + padding-right: 2rem; + } + p{ + margin-top: 0; + } + } + + } + + .layout__region--third{ // colone de droite fichiers et ressources liƩes + margin-top: 3rem; + .block-region-third{ + display: flex; + flex-direction: column; + width: 70%; + .block-entity-fieldnodefield-fichiers{ + height: fit-content; + border: 2px solid $blue-light; + background-color: $white; + + } + .field--name-field-fichiers{ + min-height: 4rem; + background: $white; + color: $blue-light; + padding-left: 1rem; + padding-top: 1rem; + margin-bottom: 1rem; + + span:nth-of-type(2){ + display: none; + } + + .file--mime-application-pdf{ + height: inherit; + margin: auto; + ::before{ + content: url("../images/pictos/noun_Download_file_307900.svg"); + min-width:50px; + height: auto; + padding-right: 1rem; + } + a{ + hyphens: auto; + display: inline-flex; + align-items: center; + color: $blue-light; + font-weight: 800; + // max-width: 80px ; + } + } + + } + .block-entity-fieldnodefield-liens{ + .field--name-field-liens{ + .field__item{ + margin: auto; + height: fit-content; + border: 2px solid $blue-light; + min-height: 4rem; + background: $white; + color: $blue-light; + padding-left: 1rem; + padding-top: 1rem; + margin-bottom: 1rem; + } + a{ + display: inline-flex; + align-items: center; + color: $blue-light; + font-weight: 800; + &::before{ + content: url("../images/pictos/noun_External Link_674151.svg"); + min-width: 50px; + height: auto; + padding-right: 1rem; + } + svg.ext{ + display: none; + } + } + } + + } + + + .block-entity-fieldnodefield-ress{ + margin-top: 3rem; + .field--name-field-ress{ + .field__label{ + font-size: 0.8rem; + color: $black; + font-weight: 900; + margin-bottom: 1rem; + } + + .node-type-ressource{ + display: flex; + flex-direction: column; + border: 2px solid $blue-light; + padding: 1rem; + + height: fit-content; + margin-bottom: 1rem; + background-color: $white; + &:first-of-type{ + border-top: 1px solid $blue-light; + padding-top: 1rem; + &::after{ + content: url("../images/pictos/noun_Arrow_3771902.svg"); + align-self: end; + } + } + .field--name-title{ + h2{ + margin: 0; + } + a{ + color: $black; + font-size: 1.4rem; + font-weight: 600; + + } + } + .field--name-field-auteur-s-{ + font-weight: 800; + p{ + margin: 0; + } + .field__label{ + display:none; + } + } + .field--name-field-edition{ + p{ + margin: 0; + } + .field__label{ + display:none; + } + } + .field--name-field-images{ + display: none; + width: 50%; + img{ + width: 100%; + height: auto; + } + } + .field--name-field-type-de-ressource{ + display: inline-flex; + margin-top: 2rem; + background: $blue-dark; + margin-right: 1rem; + padding-left: 0.3rem; + padding-right: 0.3rem; + color: $white; + font-weight: 800; + vertical-align: middle; + } + } + } + + + } + + } + + + } } -} \ No newline at end of file +} \ 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 334bb11..c497539 100644 --- a/web/themes/custom/eql/scss/pages/_static.scss +++ b/web/themes/custom/eql/scss/pages/_static.scss @@ -219,12 +219,24 @@ } } .field--name-field-images{ + display: none; width: 50%; img{ width: 100%; height: auto; } } + .field--name-field-type-de-ressource{ + display: inline-flex; + margin-top: 2rem; + background: $blue-dark; + margin-right: 1rem; + padding-left: 0.3rem; + padding-right: 0.3rem; + color: $white; + font-weight: 800; + vertical-align: middle; + } } }