diff --git a/css/app.css b/css/app.css index a094122..195167d 100644 --- a/css/app.css +++ b/css/app.css @@ -991,6 +991,11 @@ h2{ line-height: 1; } +p{ + font-weight: 300; + line-height: 1.6; +} + body.wp-admin h1:not(.editor-visual-editor h1), body.wp-admin h2:not(.editor-visual-editor h2), body.wp-admin h3:not(.editor-visual-editor h3), @@ -1089,12 +1094,60 @@ body.wp-admin h6:not(.editor-visual-editor h6) { } .article-card{ + position: relative; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(19 111 99 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - padding: 1rem; + padding: 1.5rem; +} + +.article-card:after{ + pointer-events: none; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + height: 100%; + width: 100%; + --tw-border-opacity: 1; + border-color: rgb(19 111 99 / var(--tw-border-opacity)); + --tw-content: ''; + content: var(--tw-content); + border-width: 4px; + opacity: 0; +} + +.article-card:hover:after { + opacity: 1; +} + +.article-card:hover .article-card__link-button svg{ + --tw-translate-x: 0.5rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.article-card__link-button{ + margin-top: 2rem; + display: block; + width: 100px; + height: 100px; +} + +.article-card__link-button svg { + transition: transform 0.3s ease-in-out; +} + +.article-card__link-button svg path, + .article-card__link-button svg circle{ + stroke: #136F63; +} + +.article-card .content-meta{ + --tw-text-opacity: 1; + color: rgb(19 111 99 / var(--tw-text-opacity)); } .article-card__title{ @@ -1163,25 +1216,16 @@ body.wp-admin h6:not(.editor-visual-editor h6) { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(19 111 99 / var(--tw-border-opacity)); background-color: transparent; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; -} - -.article-tag:after { - content: ''; - position: absolute; - top: 0px; - left: 50%; - height: 100%; - width: 100%; - border-width: 1px; - --tw-border-opacity: 1; - border-color: rgb(19 111 99 / var(--tw-border-opacity)); - translate: -50% 0; - transform: perspective(800px) rotateY(10deg); + --tw-text-opacity: 1; + color: rgb(19 111 99 / var(--tw-text-opacity)); } .article-tag:hover{ @@ -1987,11 +2031,12 @@ article > *:not(.entry-content), .block-dernieres-dynamiques{ --tw-bg-opacity: 1; - background-color: rgb(255 248 235 / var(--tw-bg-opacity)); + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); padding-left: 3rem; padding-right: 3rem; - padding-top: 8rem; - padding-bottom: 8rem; + padding-top: 5rem; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 1280px){ @@ -2001,6 +2046,15 @@ article > *:not(.entry-content), } } +.block-dernieres-dynamiques { + overflow: hidden; +} + +.block-dernieres-dynamiques *:not(.article-card *){ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .block-dernieres-dynamiques__inner{ margin-left: auto; margin-right: auto; @@ -2040,7 +2094,7 @@ article > *:not(.entry-content), display: block; width: 100%; --tw-bg-opacity: 1; - background-color: rgb(19 111 99 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); height: 1px; content: ' '; } @@ -2068,7 +2122,7 @@ article > *:not(.entry-content), .block-dernieres-dynamiques__header .header-link svg path, .block-dernieres-dynamiques__header .header-link svg circle{ - stroke: #136F63; + stroke: #fff; stroke-width: 2; } @@ -2108,7 +2162,7 @@ article > *:not(.entry-content), .block-dernieres-dynamiques__issue-title{ padding-bottom: 3rem; - font-size: 3.75rem; + font-size: 4.5rem; text-transform: uppercase; line-height: 1.1; } @@ -2116,7 +2170,7 @@ article > *:not(.entry-content), .block-dernieres-dynamiques__issue-content-wrapper{ display: grid; gap: 3rem; - padding-bottom: 3rem; + padding-bottom: 6rem; } @media (min-width: 1440px){ @@ -2129,20 +2183,13 @@ article > *:not(.entry-content), grid-template-columns: 61.8fr 38.2fr; } -.block-dernieres-dynamiques__issue-content { -} - .block-dernieres-dynamiques__issue-thumbnail-wrapper{ position: relative; } .block-dernieres-dynamiques__issue-thumbnail-wrapper .card-background{ position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - top: 1.25rem; + top: 5rem; left: 2rem; border-width: 1px; --tw-border-opacity: 1; @@ -2167,10 +2214,10 @@ article > *:not(.entry-content), background-color: rgb(239 232 255 / var(--tw-bg-opacity)); --tw-content: ''; content: var(--tw-content); - width: calc(100% - 32px); - height: calc(100% - 32px); - left: 16px; - top: 16px; + width: calc(100% - 42px); + height: calc(100% - 42px); + left: 21px; + top: 21px; z-index: 0; } @@ -2180,24 +2227,68 @@ article > *:not(.entry-content), border-color: rgb(19 111 99 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - transform: perspective(800px) rotateY(10deg) skewX(2deg); - height: 300px; + /* transform: perspective(800px) rotateY(10deg) skewX(2deg); */ + height: 330px; position: relative; z-index: 10; } .block-dernieres-dynamiques__issue-thumbnail img { - height: 100%; + width: calc(100% - 42px); + height: calc(100% - 42px); + left: 21px; + top: 21px; -o-object-fit: cover; object-fit: cover; position: relative; z-index: 2; } +.block-dernieres-dynamiques__issue-description-title{ + padding-bottom: 1rem; + font-size: 1.25rem; + font-weight: 700; + text-transform: uppercase; + font-family: 'Nunito Sans', sans-serif; + letter-spacing: 4px; +} + .block-dernieres-dynamiques__issue-description{ font-size: 1.25rem; } +.block-dernieres-dynamiques .related-articles{ + position: relative; + padding-bottom: 2rem; +} + +.block-dernieres-dynamiques .related-articles > *{ + position: relative; + z-index: 10; +} + +.block-dernieres-dynamiques .related-articles:after{ + position: absolute; + right: 0px; + bottom: 0px; + left: 0px; + left: 50%; + width: 100vw; + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-bg-opacity: 1; + background-color: rgb(239 232 255 / var(--tw-bg-opacity)); + --tw-content: ''; + content: var(--tw-content); + z-index: 0; + /* opacity: 0.5; */ + top: 100px; + height: calc(100% - 150px); + transform: translateY(100px) translateX(-50%) + perspective(800px) skewX(1deg) rotateZ(-2deg) + rotateY(-4deg) scaleX(1.98); +} + .block-dernieres-dynamiques .related-articles__title{ padding-bottom: 2rem; font-size: 1rem; @@ -2208,6 +2299,23 @@ article > *:not(.entry-content), font-family: 'Nunito Sans', sans-serif; } +.block-dernieres-dynamiques .related-articles__show-all{ + margin-left: auto; + margin-right: auto; + margin-top: 3rem; + display: block; + padding-bottom: 2rem; + text-align: center; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.1em; + --tw-text-opacity: 1; + color: rgb(19 111 99 / var(--tw-text-opacity)); + font-family: 'Nunito Sans', sans-serif; +} + /* Home */ @media (min-width: 600px){