diff --git a/resources/css/blocks/aides-financieres.css b/resources/css/blocks/aides-financieres.css new file mode 100755 index 0000000..bff3564 --- /dev/null +++ b/resources/css/blocks/aides-financieres.css @@ -0,0 +1,43 @@ +#block-aides-financieres { + .section_titling { + @apply max-w-screen-md; + } + .card-large-content { + @apply lg:grid grid-cols-2 gap-12; + + &__renolution-details { + /* .logo_renolution { */ + .renolution__logo { + @apply p-6 mb-8 bg-white shadowed w-fit rounded-3xl; + } + .renolution__title { + @apply text-lg font-bold text-secondary pb-3; + } + .cta { + @apply mt-8; + } + .renolution__guide-external-links { + @apply grid grid-cols-2 gap-12 pt-6; + .question_title { + @apply text-black font-bold pt-6 pb-2; + } + .question_explanation { + @apply text-sm; + } + .question_url { + @apply block text-sm text-black font-bold mt-2 py-2; + &:hover { + @apply text-secondary; + } + img { + @apply inline-block ml-1 -mt-1; + } + } + } + } + + &__renolution-illustration-picture { + @apply ml-auto; + } + } +} diff --git a/resources/css/blocks/demarches-administratives.css b/resources/css/blocks/demarches-administratives.css new file mode 100755 index 0000000..bdab248 --- /dev/null +++ b/resources/css/blocks/demarches-administratives.css @@ -0,0 +1,24 @@ +#block-demarches-administratives { + &.card-large-content-container--has-illustration { + @apply pt-64; + } + + .card-large-content--has-illustration { + @apply pt-28; + } + .card-large-content__top-illustration { + transform: translate(-50%, -70%); + } + .card-large-content__links-container { + @apply grid-cols-1 + md:grid-cols-2 + lg:grid-cols-4 + gap-x-12; + .card-large-content__link { + /* @apply flex flex-col; */ + .cta { + @apply self-end px-6 w-full text-center md:w-fit; + } + } + } +} diff --git a/resources/css/blocks/home-header.css b/resources/css/blocks/home-header.css new file mode 100755 index 0000000..4936d9c --- /dev/null +++ b/resources/css/blocks/home-header.css @@ -0,0 +1,66 @@ +.home-header { + @apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20 + mb-24; + isolation: isolate; + + /* relative */ + /* bg-red-100 */ + /* aspect-ratio: 1.5; */ + + /* min-height: 80vh; */ + /* background-color: #fbfff5a6; */ + &__titling { + @apply max-w-[580px] + relative + z-10 + lg:absolute + mb-[-100px] + lg:mb-0; + } + &__title { + @apply text-3xl md:text-4xl font-medium pb-6 pt-16; + line-height: 1.2; + } + + &__scroll-down-indicator { + @apply bg-primary rounded-full flex justify-center items-center mt-6; + width: 80px; + height: 80px; + &__arrow { + animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99); + /* cubic-bezier(0.01, 0.61, 0.39, 1); */ + /* cubic-bezier(0.18, 0.89, 0.3, 1); */ + } + } + + &__fresque { + @apply w-full; + z-index: -1; + @apply bg-purple-50; + img { + @apply w-full h-full max-h-full object-contain; + /* object-position: 100% 100%; */ + @screen lg { + /* object-position: 100% 0%; */ + } + } + @media (max-aspect-ratio: 16 / 9) { + img { + /* @apply bg-red-100; */ + } + } + @media (min-aspect-ratio: 16 / 9) { + img { + /* @apply bg-green-100; */ + } + } + } +} +@keyframes bouncingArrow { + 0% { + transform: translateY(4px); + } + 100% { + transform: translateY(-6px); + } +} diff --git a/resources/css/blocks/latest-news.css b/resources/css/blocks/latest-news.css new file mode 100644 index 0000000..50912eb --- /dev/null +++ b/resources/css/blocks/latest-news.css @@ -0,0 +1,17 @@ +.section_latest_news { + @apply py-24; + .section_titling { + @apply max-w-md mx-auto; + } + .articles_container { + @apply grid + grid-cols-1 + sm:grid-cols-2 + xl:grid-cols-4 + max-w-screen-2xl + px-8 + py-16 + gap-8 + mx-auto; + } +} diff --git a/resources/css/blocks/questions-frequentes.css b/resources/css/blocks/questions-frequentes.css new file mode 100644 index 0000000..6fd1742 --- /dev/null +++ b/resources/css/blocks/questions-frequentes.css @@ -0,0 +1,7 @@ +#block-questions-frequentes { + @apply py-28 px-8; +} + +.questions-frequentes-grid { + @apply grid md:grid-cols-2 lg:grid-cols-3 gap-8 gap-x-8 max-w-screen-xl mx-auto; +} diff --git a/resources/css/blocks/show-thematiques.css b/resources/css/blocks/show-thematiques.css new file mode 100755 index 0000000..7d19f98 --- /dev/null +++ b/resources/css/blocks/show-thematiques.css @@ -0,0 +1,83 @@ +.swiper-content { + @apply lg:px-24 relative max-w-screen-2xl mx-auto; + /* @apply bg-fuchsia-100; */ +} +.swiper-container { + height: auto; + @apply px-3 overflow-hidden; + /* @apply bg-yellow-50; */ +} + +.swiper-wrapper { + @apply pt-24 pb-16 w-full flex-col lg:flex-row gap-y-20; +} + +.swiper-slide { + @apply h-auto; + .card-thematique { + @apply h-full; + } +} + +.thematique-button-next, +.thematique-button-prev { + @apply absolute top-1/2 z-50 opacity-80 hidden lg:block; + width: 60px; + height: 60px; + &:hover, + &:focus { + @apply opacity-100; + filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) + contrast(117%); + } + &:focus { + @apply rounded-full; + } +} +.thematique-button-next { + @apply right-0 transform; +} +.thematique-button-prev { + @apply left-0; +} +.swiper-pagination { + @apply hidden lg:block; +} +.swiper-pagination-bullet { + @apply w-3 h-3 mx-2 opacity-100 bg-white !border-2 !border-solid border-black opacity-80; +} +.swiper-pagination-bullet:focus { + outline-offset: 4px; +} +.swiper-pagination-bullet-active { + @apply bg-secondary !border-secondary opacity-100; +} + +/* .swiper-slide { + background-color: red !important; + text-align: center; + font-size: 18px; + background: #fff; + display: flex; + justify-content: center; + align-items: center; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} */ +.section-show-thematiques { + @apply pt-8 pb-8 px-8 md:px-16; + .thematiques-container { + @apply grid + grid-cols-3 + gap-8 + gap-y-32 + max-w-screen-xl + mx-auto + pt-16; + } +}