Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

taxonomies working

Browse Source
This commit is contained in:
Antoine M 2023-05-12 12:12:13 +02:00
parent f7e0f4db6a
commit fece623fa9
16 changed files with 1031 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

456
css/app.css
View File

@ -715,6 +715,61 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: rgb(223 30 30 / var(--tw-bg-opacity));
}
.bg-acoustique-coproprietes {
--tw-bg-opacity: 1;
background-color: rgb(36 94 242 / var(--tw-bg-opacity));
}
.bg-acoustique-coproprietes-light {
--tw-bg-opacity: 1;
background-color: rgb(223 241 255 / var(--tw-bg-opacity));
}
.bg-energies-urbanisme {
--tw-bg-opacity: 1;
background-color: rgb(2 126 80 / var(--tw-bg-opacity));
}
.bg-energies-urbanisme-light {
--tw-bg-opacity: 1;
background-color: rgb(227 255 240 / var(--tw-bg-opacity));
}
.bg-isolation-quotidien {
--tw-bg-opacity: 1;
background-color: rgb(194 69 3 / var(--tw-bg-opacity));
}
.bg-isolation-quotidien-light {
--tw-bg-opacity: 1;
background-color: rgb(255 251 236 / var(--tw-bg-opacity));
}
.bg-patrimoine-renovation {
--tw-bg-opacity: 1;
background-color: rgb(139 47 247 / var(--tw-bg-opacity));
}
.bg-patrimoine-renovation-light {
--tw-bg-opacity: 1;
background-color: rgb(255 229 253 / var(--tw-bg-opacity));
}
.bg-location {
--tw-bg-opacity: 1;
background-color: rgb(223 0 43 / var(--tw-bg-opacity));
}
.bg-location-light {
--tw-bg-opacity: 1;
background-color: rgb(254 226 231 / var(--tw-bg-opacity));
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
@ -784,6 +839,66 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-primary {
--tw-text-opacity: 1;
color: rgb(47 1 84 / var(--tw-text-opacity));
}
.text-secondary {
--tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity));
}
.text-acoustique-coproprietes {
--tw-text-opacity: 1;
color: rgb(36 94 242 / var(--tw-text-opacity));
}
.text-acoustique-coproprietes-light {
--tw-text-opacity: 1;
color: rgb(223 241 255 / var(--tw-text-opacity));
}
.text-energies-urbanisme {
--tw-text-opacity: 1;
color: rgb(2 126 80 / var(--tw-text-opacity));
}
.text-energies-urbanisme-light {
--tw-text-opacity: 1;
color: rgb(227 255 240 / var(--tw-text-opacity));
}
.text-isolation-quotidien {
--tw-text-opacity: 1;
color: rgb(194 69 3 / var(--tw-text-opacity));
}
.text-isolation-quotidien-light {
--tw-text-opacity: 1;
color: rgb(255 251 236 / var(--tw-text-opacity));
}
.text-patrimoine-renovation {
--tw-text-opacity: 1;
color: rgb(139 47 247 / var(--tw-text-opacity));
}
.text-patrimoine-renovation-light {
--tw-text-opacity: 1;
color: rgb(255 229 253 / var(--tw-text-opacity));
}
.text-location {
--tw-text-opacity: 1;
color: rgb(223 0 43 / var(--tw-text-opacity));
}
.text-location-light {
--tw-text-opacity: 1;
color: rgb(254 226 231 / var(--tw-text-opacity));
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -855,6 +970,31 @@ body:not(.wp-admin) {
font-weight: 400;
}
.filter-acoustique-coproprietes {
filter: invert(27%) sepia(88%) saturate(1302%)
hue-rotate(206deg) brightness(105%) contrast(114%);
}
.filter-energies-urbanisme {
filter: invert(28%) sepia(89%) saturate(1188%)
hue-rotate(131deg) brightness(95%) contrast(98%);
}
.filter-isolation-quotidien {
filter: invert(21%) sepia(94%) saturate(3059%)
hue-rotate(26deg) brightness(98%) contrast(98%);
}
.filter-patrimoine {
filter: invert(25%) sepia(79%) saturate(6075%)
hue-rotate(263deg) brightness(99%) contrast(96%);
}
.filter-location {
filter: invert(13%) sepia(71%) saturate(4425%)
hue-rotate(338deg) brightness(109%) contrast(117%);
}
/* ########### COMPONENTS ############ */
.post-card {
@ -990,23 +1130,12 @@ body:not(.wp-admin) {
}
.primary-menu-container #primary-menu ul {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
padding-right: 0px;
}
@media (min-width: 960px) {
.primary-menu-container #primary-menu ul {
display: flex;
-moz-column-gap: 1rem;
column-gap: 1rem;
}
}
@media (min-width: 1280px) {
.primary-menu-container #primary-menu ul {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
}
@ -1025,20 +1154,19 @@ body:not(.wp-admin) {
}
.primary-menu-container #primary-menu li.menu-item {
border-radius: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
}
.primary-menu-container #primary-menu li.menu-item:hover > a,
.primary-menu-container #primary-menu li.menu-item:hover,
.primary-menu-container #primary-menu li.menu-item a:focus {
cursor: pointer;
--tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity));
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
text-underline-offset: 8px;
background-color: rgba(255, 255, 255, 0.1);
}
.primary-menu-container #primary-menu li.menu-item a:focus {
@ -1393,6 +1521,69 @@ article > *:not(.entry-content),
/* Home */
.home-header {
margin-left: auto;
margin-right: auto;
max-width: 1440px;
padding-left: 4rem;
padding-right: 4rem;
padding-top: 8rem;
padding-bottom: 8rem;
}
.home-header__titling {
max-width: 580px;
}
.home-header__title {
padding-bottom: 1.5rem;
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 500;
line-height: 1.2;
}
.home-header__scroll-down-indicator {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity));
width: 80px;
height: 80px;
}
.home-header__scroll-down-indicator__arrow {
-webkit-animation: bouncingArrow 1s infinite alternate
cubic-bezier(0.01, 0.61, 0.67, 0.99);
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); */
}
@-webkit-keyframes bouncingArrow {
0% {
transform: translateY(4px);
}
100% {
transform: translateY(-6px);
}
}
@keyframes bouncingArrow {
0% {
transform: translateY(4px);
}
100% {
transform: translateY(-6px);
}
}
.section_latest_news .section_titling {
margin-left: auto;
margin-right: auto;
@ -1412,6 +1603,233 @@ article > *:not(.entry-content),
padding-bottom: 4rem;
}
.section-show-thematiques .thematiques-container {
margin-left: auto;
margin-right: auto;
display: grid;
max-width: 1280px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
row-gap: 8rem;
padding-top: 4rem;
}
.section-show-thematiques .card-thematique {
position: relative;
display: flex;
flex-direction: column;
border-radius: 1.5rem;
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding: 2rem;
transition: all 0.3s ease-in-out;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
}
.section-show-thematiques .card-thematique__thumbnail {
width: 100%;
align-self: flex-end;
max-height: 250px;
width: auto;
margin-top: -110px;
margin-right: 0px;
}
.section-show-thematiques .card-thematique__title {
padding-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
}
.section-show-thematiques .card-thematique__descritpion {
}
.section-show-thematiques .card-thematique__cta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 2rem;
font-weight: 700;
}
.section-show-thematiques .card-thematique__cta::after {
position: absolute;
content: var(--tw-content);
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.section-show-thematiques .card-thematique__cta:hover {
opacity: 1;
}
.section-show-thematiques .card-thematique__cta {
transition: font-weight 0.3s ease-in-out;
}
.section-show-thematiques .card-thematique__cta .cta_arrow_button {
display: block;
width: 50px;
height: 50px;
}
.section-show-thematiques .card-thematique:hover {
transform: scale(1.02) translateY(-10px);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
}
.section-show-thematiques .card-thematique:hover .cta_arrow_button {
opacity: 1;
}
.section-show-thematiques .card-thematique.card-acoustique:hover .cta_arrow_button, .section-show-thematiques .card-thematique.card-petites-coproprietes:hover .cta_arrow_button {
filter: invert(27%) sepia(88%) saturate(1302%)
hue-rotate(206deg) brightness(105%) contrast(114%);
}
.section-show-thematiques .card-thematique.card-au-quotidien:hover .cta_arrow_button, .section-show-thematiques .card-thematique.card-isolation:hover .cta_arrow_button {
filter: invert(21%) sepia(94%) saturate(3059%)
hue-rotate(26deg) brightness(98%) contrast(98%);
}
.section-show-thematiques .card-thematique.card-energies:hover .cta_arrow_button, .section-show-thematiques .card-thematique.card-urbanisme:hover .cta_arrow_button {
filter: invert(28%) sepia(89%) saturate(1188%)
hue-rotate(131deg) brightness(95%) contrast(98%);
}
.section-show-thematiques .card-thematique.card-location:hover .cta_arrow_button {
filter: invert(13%) sepia(71%) saturate(4425%)
hue-rotate(338deg) brightness(109%) contrast(117%);
}
.section-show-thematiques .card-thematique.card-patrimoine:hover .cta_arrow_button {
filter: invert(25%) sepia(79%) saturate(6075%)
hue-rotate(263deg) brightness(99%) contrast(96%);
}
.hover\:bg-primary:hover {
--tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity));
}
.hover\:bg-secondary:hover {
--tw-bg-opacity: 1;
background-color: rgb(223 30 30 / var(--tw-bg-opacity));
}
.hover\:bg-acoustique-coproprietes:hover {
--tw-bg-opacity: 1;
background-color: rgb(36 94 242 / var(--tw-bg-opacity));
}
.hover\:bg-acoustique-coproprietes-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(223 241 255 / var(--tw-bg-opacity));
}
.hover\:bg-energies-urbanisme:hover {
--tw-bg-opacity: 1;
background-color: rgb(2 126 80 / var(--tw-bg-opacity));
}
.hover\:bg-energies-urbanisme-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(227 255 240 / var(--tw-bg-opacity));
}
.hover\:bg-isolation-quotidien:hover {
--tw-bg-opacity: 1;
background-color: rgb(194 69 3 / var(--tw-bg-opacity));
}
.hover\:bg-isolation-quotidien-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 251 236 / var(--tw-bg-opacity));
}
.hover\:bg-patrimoine-renovation:hover {
--tw-bg-opacity: 1;
background-color: rgb(139 47 247 / var(--tw-bg-opacity));
}
.hover\:bg-patrimoine-renovation-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 229 253 / var(--tw-bg-opacity));
}
.hover\:bg-location:hover {
--tw-bg-opacity: 1;
background-color: rgb(223 0 43 / var(--tw-bg-opacity));
}
.hover\:bg-location-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 226 231 / var(--tw-bg-opacity));
}
.hover\:text-primary:hover {
--tw-text-opacity: 1;
color: rgb(47 1 84 / var(--tw-text-opacity));
}
.hover\:text-secondary:hover {
--tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity));
}
.hover\:text-acoustique-coproprietes:hover {
--tw-text-opacity: 1;
color: rgb(36 94 242 / var(--tw-text-opacity));
}
.hover\:text-acoustique-coproprietes-light:hover {
--tw-text-opacity: 1;
color: rgb(223 241 255 / var(--tw-text-opacity));
}
.hover\:text-energies-urbanisme:hover {
--tw-text-opacity: 1;
color: rgb(2 126 80 / var(--tw-text-opacity));
}
.hover\:text-energies-urbanisme-light:hover {
--tw-text-opacity: 1;
color: rgb(227 255 240 / var(--tw-text-opacity));
}
.hover\:text-isolation-quotidien:hover {
--tw-text-opacity: 1;
color: rgb(194 69 3 / var(--tw-text-opacity));
}
.hover\:text-isolation-quotidien-light:hover {
--tw-text-opacity: 1;
color: rgb(255 251 236 / var(--tw-text-opacity));
}
.hover\:text-patrimoine-renovation:hover {
--tw-text-opacity: 1;
color: rgb(139 47 247 / var(--tw-text-opacity));
}
.hover\:text-patrimoine-renovation-light:hover {
--tw-text-opacity: 1;
color: rgb(255 229 253 / var(--tw-text-opacity));
}
.hover\:text-location:hover {
--tw-text-opacity: 1;
color: rgb(223 0 43 / var(--tw-text-opacity));
}
.hover\:text-location-light:hover {
--tw-text-opacity: 1;
color: rgb(254 226 231 / var(--tw-text-opacity));
}
@media (min-width: 782px) {
.md\:my-6 {
margin-top: 1.5rem;

235
css/editor-style.css
View File

@ -162,6 +162,61 @@
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: rgb(223 30 30 / var(--tw-bg-opacity))
}
.bg-acoustique-coproprietes {
--tw-bg-opacity: 1;
background-color: rgb(36 94 242 / var(--tw-bg-opacity))
}
.bg-acoustique-coproprietes-light {
--tw-bg-opacity: 1;
background-color: rgb(223 241 255 / var(--tw-bg-opacity))
}
.bg-energies-urbanisme {
--tw-bg-opacity: 1;
background-color: rgb(2 126 80 / var(--tw-bg-opacity))
}
.bg-energies-urbanisme-light {
--tw-bg-opacity: 1;
background-color: rgb(227 255 240 / var(--tw-bg-opacity))
}
.bg-isolation-quotidien {
--tw-bg-opacity: 1;
background-color: rgb(194 69 3 / var(--tw-bg-opacity))
}
.bg-isolation-quotidien-light {
--tw-bg-opacity: 1;
background-color: rgb(255 251 236 / var(--tw-bg-opacity))
}
.bg-patrimoine-renovation {
--tw-bg-opacity: 1;
background-color: rgb(139 47 247 / var(--tw-bg-opacity))
}
.bg-patrimoine-renovation-light {
--tw-bg-opacity: 1;
background-color: rgb(255 229 253 / var(--tw-bg-opacity))
}
.bg-location {
--tw-bg-opacity: 1;
background-color: rgb(223 0 43 / var(--tw-bg-opacity))
}
.bg-location-light {
--tw-bg-opacity: 1;
background-color: rgb(254 226 231 / var(--tw-bg-opacity))
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
@ -231,6 +286,66 @@
color: rgb(255 255 255 / var(--tw-text-opacity))
}
.text-isolation-quotidien {
--tw-text-opacity: 1;
color: rgb(194 69 3 / var(--tw-text-opacity))
}
.text-primary {
--tw-text-opacity: 1;
color: rgb(47 1 84 / var(--tw-text-opacity))
}
.text-secondary {
--tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity))
}
.text-acoustique-coproprietes {
--tw-text-opacity: 1;
color: rgb(36 94 242 / var(--tw-text-opacity))
}
.text-acoustique-coproprietes-light {
--tw-text-opacity: 1;
color: rgb(223 241 255 / var(--tw-text-opacity))
}
.text-energies-urbanisme {
--tw-text-opacity: 1;
color: rgb(2 126 80 / var(--tw-text-opacity))
}
.text-energies-urbanisme-light {
--tw-text-opacity: 1;
color: rgb(227 255 240 / var(--tw-text-opacity))
}
.text-isolation-quotidien-light {
--tw-text-opacity: 1;
color: rgb(255 251 236 / var(--tw-text-opacity))
}
.text-patrimoine-renovation {
--tw-text-opacity: 1;
color: rgb(139 47 247 / var(--tw-text-opacity))
}
.text-patrimoine-renovation-light {
--tw-text-opacity: 1;
color: rgb(255 229 253 / var(--tw-text-opacity))
}
.text-location {
--tw-text-opacity: 1;
color: rgb(223 0 43 / var(--tw-text-opacity))
}
.text-location-light {
--tw-text-opacity: 1;
color: rgb(254 226 231 / var(--tw-text-opacity))
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
@ -325,6 +440,126 @@ body {
max-width: 782px
}
.hover\:bg-primary:hover {
--tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity))
}
.hover\:bg-secondary:hover {
--tw-bg-opacity: 1;
background-color: rgb(223 30 30 / var(--tw-bg-opacity))
}
.hover\:bg-acoustique-coproprietes:hover {
--tw-bg-opacity: 1;
background-color: rgb(36 94 242 / var(--tw-bg-opacity))
}
.hover\:bg-acoustique-coproprietes-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(223 241 255 / var(--tw-bg-opacity))
}
.hover\:bg-energies-urbanisme:hover {
--tw-bg-opacity: 1;
background-color: rgb(2 126 80 / var(--tw-bg-opacity))
}
.hover\:bg-energies-urbanisme-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(227 255 240 / var(--tw-bg-opacity))
}
.hover\:bg-isolation-quotidien:hover {
--tw-bg-opacity: 1;
background-color: rgb(194 69 3 / var(--tw-bg-opacity))
}
.hover\:bg-isolation-quotidien-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 251 236 / var(--tw-bg-opacity))
}
.hover\:bg-patrimoine-renovation:hover {
--tw-bg-opacity: 1;
background-color: rgb(139 47 247 / var(--tw-bg-opacity))
}
.hover\:bg-patrimoine-renovation-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 229 253 / var(--tw-bg-opacity))
}
.hover\:bg-location:hover {
--tw-bg-opacity: 1;
background-color: rgb(223 0 43 / var(--tw-bg-opacity))
}
.hover\:bg-location-light:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 226 231 / var(--tw-bg-opacity))
}
.hover\:text-primary:hover {
--tw-text-opacity: 1;
color: rgb(47 1 84 / var(--tw-text-opacity))
}
.hover\:text-secondary:hover {
--tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity))
}
.hover\:text-acoustique-coproprietes:hover {
--tw-text-opacity: 1;
color: rgb(36 94 242 / var(--tw-text-opacity))
}
.hover\:text-acoustique-coproprietes-light:hover {
--tw-text-opacity: 1;
color: rgb(223 241 255 / var(--tw-text-opacity))
}
.hover\:text-energies-urbanisme:hover {
--tw-text-opacity: 1;
color: rgb(2 126 80 / var(--tw-text-opacity))
}
.hover\:text-energies-urbanisme-light:hover {
--tw-text-opacity: 1;
color: rgb(227 255 240 / var(--tw-text-opacity))
}
.hover\:text-isolation-quotidien:hover {
--tw-text-opacity: 1;
color: rgb(194 69 3 / var(--tw-text-opacity))
}
.hover\:text-isolation-quotidien-light:hover {
--tw-text-opacity: 1;
color: rgb(255 251 236 / var(--tw-text-opacity))
}
.hover\:text-patrimoine-renovation:hover {
--tw-text-opacity: 1;
color: rgb(139 47 247 / var(--tw-text-opacity))
}
.hover\:text-patrimoine-renovation-light:hover {
--tw-text-opacity: 1;
color: rgb(255 229 253 / var(--tw-text-opacity))
}
.hover\:text-location:hover {
--tw-text-opacity: 1;
color: rgb(223 0 43 / var(--tw-text-opacity))
}
.hover\:text-location-light:hover {
--tw-text-opacity: 1;
color: rgb(254 226 231 / var(--tw-text-opacity))
}
@media (min-width: 782px) {
.md\:my-6 {
margin-top: 1.5rem;

2
functions.php
View File

@ -7,7 +7,7 @@ require_once(__DIR__ . '/includes/post_types.php');
require_once(__DIR__ . '/includes/admin.php');
require_once(__DIR__ . '/includes/logos.php');
require_once(__DIR__ . '/includes/taxonomy.php');
require_once(__DIR__ . '/includes/utilities.php');
// require_once(__DIR__ . '/includes/widget.php');
// require_once( __DIR__ . '/includes/errorlog.php');
// require_once( __DIR__ . '/includes/logos.php');

1
includes/blocks.php
View File

@ -34,6 +34,7 @@ function mywp_register_acf_blocks()
}
register_block_type(get_template_directory() . '/template-blocks/home/home-header');
register_block_type(get_template_directory() . '/template-blocks/home/latest-news');
register_block_type(get_template_directory() . '/template-blocks/home/show-thematiques');
}
add_action('init', 'mywp_register_acf_blocks');

29
includes/utilities.php Normal file
View File

@ -0,0 +1,29 @@
<?php
function getThematiqueFamilySlug($thematique_slug)
{
switch ($thematique_slug) {
case "energie":
case "urbanisme":
return "energies-urbanisme";
case "acoustique":
case "petites-coproprietes":
return "acoustique-coproprietes";
case "isolation":
case "au-quotidien":
return "isolation-quotidien";
case "energies":
case "urbanisme":
return "energies-urbanisme";
case "patrimoine":
case "renovation":
return "patrimoine-renovation";
case "location":
return "location";
}
}

2
resources/css/app.css
View File

@ -6,6 +6,7 @@
/* ########### BASE ############ */
@import './base/typography.css';
@import './base/thematiques-colors.css';
/* ########### COMPONENTS ############ */
@import './components/cta.css';
@ -23,3 +24,4 @@
/* Home */
@import '../../template-blocks/home/home-header/home-header.css';
@import '../../template-blocks/home/latest-news/latest-news.css';
@import '../../template-blocks/home/show-thematiques/show-thematiques.css';

20
resources/css/base/thematiques-colors.css Normal file
View File

@ -0,0 +1,20 @@
.filter-acoustique-coproprietes {
filter: invert(27%) sepia(88%) saturate(1302%)
hue-rotate(206deg) brightness(105%) contrast(114%);
}
.filter-energies-urbanisme {
filter: invert(28%) sepia(89%) saturate(1188%)
hue-rotate(131deg) brightness(95%) contrast(98%);
}
.filter-isolation-quotidien {
filter: invert(21%) sepia(94%) saturate(3059%)
hue-rotate(26deg) brightness(98%) contrast(98%);
}
.filter-patrimoine {
filter: invert(25%) sepia(79%) saturate(6075%)
hue-rotate(263deg) brightness(99%) contrast(96%);
}
.filter-location {
filter: invert(13%) sepia(71%) saturate(4425%)
hue-rotate(338deg) brightness(109%) contrast(117%);
}

19
resources/css/layout/header.css
View File

@ -24,9 +24,7 @@
ul {
@apply lg:flex
gap-x-2
lg:gap-x-4
xl:gap-x-8
pr-0;
}
@ -42,15 +40,16 @@
li.menu-item {
@apply font-medium
text-sm
text-center;
&:hover > a,
text-center
px-4
py-2
rounded-xl;
&:hover,
a:focus {
@apply cursor-pointer
underline
underline-offset-8
text-secondary;
@apply cursor-pointer;
background-color: rgba(255, 255, 255, 0.1);
}
a:focus {
text-decoration: none;

11
resources/svg/arrow-down-white.svg Normal file
View File

@ -0,0 +1,11 @@
<svg id="fleche-animation-scroll" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.591" height="36.712" viewBox="0 0 24.591 36.712">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_773" data-name="Rectangle 773" width="24.591" height="36.712" fill="none" stroke="#fff" stroke-width="2"/>
</clipPath>
</defs>
<g id="Groupe_3060" data-name="Groupe 3060" clip-path="url(#clip-path)">
<line id="Ligne_1913" data-name="Ligne 1913" y2="33.552" transform="translate(12.295 1.58)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Tracé_11381" data-name="Tracé 11381" d="M1,15.452,11.715,26.167,22.43,15.452" transform="translate(0.58 8.965)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 867 B

12
resources/svg/arrow-right-circle.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47">
<g id="Groupe_3134" data-name="Groupe 3134" transform="translate(-260.842 -459)">
<g id="Groupe_1270" data-name="Groupe 1270" transform="translate(274.771 475.82)">
<line id="Ligne_6" data-name="Ligne 6" x2="19.821" transform="translate(0 6.33)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Tracé_162" data-name="Tracé 162" d="M104.818,82.8l6.33-6.33-6.33-6.33" transform="translate(-91.328 -70.142)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
<g id="Ellipse_202" data-name="Ellipse 202" transform="translate(260.842 459)" fill="none" stroke="#000" stroke-width="2">
<circle cx="23.5" cy="23.5" r="23.5" stroke="none"/>
<circle cx="23.5" cy="23.5" r="22.5" fill="none"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 929 B

123
tailwind.config.js
View File

@ -1,36 +1,97 @@
const theme = require('./theme.json');
const tailpress = require("@jeffreyvr/tailwindcss-tailpress");
const tailpress = require('@jeffreyvr/tailwindcss-tailpress');
module.exports = {
content: [
'./*.php',
'./**/*.php',
'./resources/css/*.css',
'./resources/js/*.js',
'./safelist.txt'
],
theme: {
container: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '0rem'
},
},
extend: {
colors: tailpress.colorMapper(tailpress.theme('settings.color.palette', theme)),
fontSize: tailpress.fontSizeMapper(tailpress.theme('settings.typography.fontSizes', theme))
},
screens: {
'xs': '480px',
'sm': '600px',
'md': '782px',
'lg': tailpress.theme('settings.layout.contentSize', theme),
'xl': tailpress.theme('settings.layout.wideSize', theme),
'2xl': '1440px'
}
content: [
'./*.php',
'./**/*.php',
'./resources/css/*.css',
'./resources/js/*.js',
'./safelist.txt',
],
safelist: [
'bg-primary',
'text-primary',
'bg-secondary',
'text-secondary',
'bg-acoustique-coproprietes',
'text-acoustique-coproprietes',
'bg-acoustique-coproprietes-light',
'text-acoustique-coproprietes-light',
'bg-energies-urbanisme',
'text-energies-urbanisme',
'bg-energies-urbanisme-light',
'text-energies-urbanisme-light',
'bg-isolation-quotidien',
'text-isolation-quotidien',
'bg-isolation-quotidien-light',
'text-isolation-quotidien-light',
'bg-patrimoine-renovation',
'text-patrimoine-renovation',
'bg-patrimoine-renovation-light',
'text-patrimoine-renovation-light',
'bg-location',
'text-location',
'bg-location-light',
'text-location-light',
'hover:bg-primary',
'hover:text-primary',
'hover:bg-secondary',
'hover:text-secondary',
'hover:bg-acoustique-coproprietes',
'hover:text-acoustique-coproprietes',
'hover:bg-acoustique-coproprietes-light',
'hover:text-acoustique-coproprietes-light',
'hover:bg-energies-urbanisme',
'hover:text-energies-urbanisme',
'hover:bg-energies-urbanisme-light',
'hover:text-energies-urbanisme-light',
'hover:bg-isolation-quotidien',
'hover:text-isolation-quotidien',
'hover:bg-isolation-quotidien-light',
'hover:text-isolation-quotidien-light',
'hover:bg-patrimoine-renovation',
'hover:text-patrimoine-renovation',
'hover:bg-patrimoine-renovation-light',
'hover:text-patrimoine-renovation-light',
'hover:bg-location',
'hover:text-location',
'hover:bg-location-light',
'hover:text-location-light',
],
theme: {
container: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '0rem',
},
},
plugins: [
tailpress.tailwind
]
extend: {
colors: tailpress.colorMapper(
tailpress.theme('settings.color.palette', theme)
),
fontSize: tailpress.fontSizeMapper(
tailpress.theme(
'settings.typography.fontSizes',
theme
)
),
},
screens: {
xs: '480px',
sm: '600px',
md: '782px',
lg: tailpress.theme(
'settings.layout.contentSize',
theme
),
xl: tailpress.theme(
'settings.layout.wideSize',
theme
),
'2xl': '1440px',
},
},
plugins: [tailpress.tailwind],
};

31
template-blocks/home/home-header/home-header.css
View File

@ -0,0 +1,31 @@
.home-header {
@apply max-w-screen-2xl mx-auto px-16 py-32;
&__titling {
@apply max-w-[580px];
}
&__title {
@apply text-4xl font-medium pb-6;
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); */
}
}
}
@keyframes bouncingArrow {
0% {
transform: translateY(4px);
}
100% {
transform: translateY(-6px);
}
}

8
template-blocks/home/home-header/home-header.php
View File

@ -5,12 +5,14 @@ $home_header = get_field('home_header_datas');
<section class="home-header header_top">
<h1>qsdqsdd</h1>
<div class="home-header__content">
<div class="home-header__titling">
<h1 class="home-header__title">
<?php echo $home_header['title'] ?>
</h1>
<p><?php echo $home_header['description'] ?></p>
<div class="home-header__scroll-down-indicator">
<img class="home-header__scroll-down-indicator__arrow" src='<?php echo get_template_directory_uri() ?>/resources/svg/arrow-down-white.svg' alt=''>
</div>
</div>
</section>

17
template-blocks/home/show-thematiques/block.json Normal file
View File

@ -0,0 +1,17 @@
{
"name": "acf/show-thematiques",
"title": "Home | Thématiques",
"category": "homegrade-pages",
"multiple": false,
"icon": {
"foreground": "#DF1E1E",
"src": "schedule"
},
"keywords": [
"Thématiques"
],
"acf": {
"mode": "auto",
"renderTemplate": "show-thematiques.php"
}
}

85
template-blocks/home/show-thematiques/show-thematiques.css Executable file
View File

@ -0,0 +1,85 @@
.section-show-thematiques {
.thematiques-container {
@apply grid
grid-cols-3
gap-8
gap-y-32
max-w-screen-xl
mx-auto
pt-16;
}
.card-thematique {
@apply bg-white flex flex-col p-8 rounded-3xl relative;
transition: all 0.3s ease-in-out;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
&__thumbnail {
@apply w-full self-end;
max-height: 250px;
width: auto;
margin-top: -110px;
margin-right: 0px;
}
&__title {
@apply text-lg font-bold pb-4;
}
&__descritpion {
}
&__cta {
@apply after:absolute
after:inset-0
font-bold
hover:opacity-100
pt-8
flex
items-center
justify-between;
transition: font-weight 0.3s ease-in-out;
.cta_arrow_button {
@apply block;
width: 50px;
height: 50px;
}
}
&:hover {
transform: scale(1.02) translateY(-10px);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
.cta_arrow_button {
opacity: 1;
}
}
&.card-acoustique:hover,
&.card-petites-coproprietes:hover {
.cta_arrow_button {
@apply filter-acoustique-coproprietes;
}
}
&.card-au-quotidien:hover,
&.card-isolation:hover {
.cta_arrow_button {
@apply filter-isolation-quotidien;
}
}
&.card-energies:hover,
&.card-urbanisme:hover {
.cta_arrow_button {
@apply filter-energies-urbanisme;
}
}
&.card-location:hover {
.cta_arrow_button {
@apply filter-location;
}
}
&.card-patrimoine:hover {
.cta_arrow_button {
@apply filter-patrimoine;
}
}
}
}

44
template-blocks/home/show-thematiques/show-thematiques.php Executable file
View File

@ -0,0 +1,44 @@
<?php
$block_titling_datas = get_field('block_titling_datas');
$terms = get_terms(array(
'taxonomy' => 'thematiques',
'parent' => 0,
'hide_empty' => false,
));
?>
<section class="section-show-thematiques">
<div class="section_titling">
<h2 class="section_titling__title"><?php echo $block_titling_datas['title'] ?></h2>
<h3 class="section_titling__subtitle"><?php echo $block_titling_datas['subtitle'] ?></h3>
</div>
<div class="thematiques-container">
<?php foreach ($terms as $term) : ?>
<?php
$taxonomy_picture = get_field('taxonomy_pictures', $term);
$color = getThematiqueFamilySlug($term->slug);
?>
<div class="card-thematique card-<?php echo $term->slug ?>">
<img class="card-thematique__thumbnail" src="<?php echo $taxonomy_picture['illustration_s']['sizes']['medium'] ?>" alt="">
<h4 class="card-thematique__title text-<?php echo getThematiqueFamilySlug($term->slug) ?>"><?php echo $term->name ?></h4>
<p class="card-thematique__description"><?php echo $term->description ?></p>
<a class="card-thematique__cta hover:text-<?php echo getThematiqueFamilySlug($term->slug) ?>" href="<?php echo get_term_link($term) ?> ">
En savoir plus
<div class="cta_arrow_button">
<img src='<?php echo get_template_directory_uri() ?>/resources/svg/arrow-right-circle.svg' alt=''>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
</section>