updating documentation
This commit is contained in:
parent
6ef0467b49
commit
a8e237345b
|
|
@ -1,8 +1,70 @@
|
||||||
<?php get_header(); ?>
|
<?php get_header('demo-components'); ?>
|
||||||
|
|
||||||
<div class="demo-components">
|
<section class="demo-components-home">
|
||||||
|
<h1>Content system & Design system | Documentation</h1>
|
||||||
|
<h2>Bienvenue dans la documentation Homegrade</h2>
|
||||||
|
|
||||||
<section class="buttons component">
|
<p>Vous trouverez ici une Liste de composants du design system Homegrade</p>
|
||||||
|
|
||||||
|
<div class="buttons">
|
||||||
|
<a class="cta cta--white cta--button cta--shadowed" href="#blocks-components">Blocks de contenu</a>
|
||||||
|
<a class="cta cta--white cta--button cta--shadowed" href="#css-components">Composants css</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- BLOCKS COMPONENTS -->
|
||||||
|
<section id="blocks-components" class="demo-components">
|
||||||
|
<div class="demo-components__section-title">
|
||||||
|
<h2 class="">Block components</h2>
|
||||||
|
<h3>Blocks de contenu</h3>
|
||||||
|
<p>Ces blocs sont accessibles depuis l'éditeur et peuvent être insérés de manières flexibles dans les pages de contenu</p>
|
||||||
|
</div>
|
||||||
|
<article class="component">
|
||||||
|
|
||||||
|
<div class="component-explanation">
|
||||||
|
<h2 class="component-explanation__title">Content page header</h2>
|
||||||
|
<p class="component-explanation__description">Un header qui s'insère en haut de page</p>
|
||||||
|
<div class="component-explanation__options">
|
||||||
|
<h3>Options & Variantes</h3>
|
||||||
|
<ul>
|
||||||
|
<li class="component-explanation__option">
|
||||||
|
<h4 class="component-explanation__option-title">Call to action</h4>
|
||||||
|
<p class="component-explanation__option-description">
|
||||||
|
Ajout d'un lien juste après le contenu. Dans cet exemple "Voir l’équipe de direction de Homegrade"</p>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block-content-page-header wp-block-homegrade-content-blocks-content-page-header">
|
||||||
|
<div class="block-content-page-header__content">
|
||||||
|
<h1>Qui sommes-nous ?</h1>
|
||||||
|
<h2>Plus de 40 conseillers en rénovation </h2>
|
||||||
|
<p>Homegrade, ce sont plus de 40 conseillers en rénovation en majorité architectes, mais également ingénieurs, historiens de l’art… <strong>en formation continue</strong> ! Ces experts de terrain vous fournissent des conseils avisés et professionnels.<br><br>Découvrez notre équipe de direction, composée de professionnels chevronnés qui guident notre asbl vers l’excellence. </p>
|
||||||
|
<a class="block-content-page-header__cta-link" href="www.exemple.com">Voir l’équipe de direction de Homegrade</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img decoding="async" class="block-content-page-header__page-icon" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade-icone-de-page-qui-sommes-nous.svg" alt="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CSS COMPONENTS -->
|
||||||
|
|
||||||
|
<section id="css-components" class="demo-components">
|
||||||
|
<div class="demo-components__section-title">
|
||||||
|
<h2>CSS components</h2>
|
||||||
|
<h3>Composants CSS</h3>
|
||||||
|
<p>Ces blocs existent dans le design système, mais sont utilisés de manière automatique dans les pages </p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BOUTONS -->
|
||||||
|
<article class="buttons component">
|
||||||
<div class="component-explanation">
|
<div class="component-explanation">
|
||||||
<h2 class="component-explanation__title">Boutons</h2>
|
<h2 class="component-explanation__title">Boutons</h2>
|
||||||
<p class="component-explanation__description">différent boutons</p>
|
<p class="component-explanation__description">différent boutons</p>
|
||||||
|
|
@ -15,9 +77,14 @@
|
||||||
<a class="cta cta--button cta--shadowed" href="#" target="_blank">Bouton White Shadowed</a>
|
<a class="cta cta--button cta--shadowed" href="#" target="_blank">Bouton White Shadowed</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</article>
|
||||||
|
|
||||||
<section id="heading-box" class="component">
|
<!-- HEADING BOX -->
|
||||||
|
<article id="heading-box" class="component">
|
||||||
|
<div class="component-explanation">
|
||||||
|
<h2 class="component-explanation__title">Heading Box</h2>
|
||||||
|
<p class="component-explanation__description">Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page</p>
|
||||||
|
</div>
|
||||||
<?php
|
<?php
|
||||||
get_template_part("template-components/heading-box", null, array(
|
get_template_part("template-components/heading-box", null, array(
|
||||||
"title" => "Heading Box",
|
"title" => "Heading Box",
|
||||||
|
|
@ -27,44 +94,39 @@
|
||||||
)
|
)
|
||||||
));
|
));
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- NEWS HEADING BOX -->
|
||||||
|
<article id="news-heading-box" class="component">
|
||||||
<div class="component-explanation">
|
<div class="component-explanation">
|
||||||
<h2 class="component-explanation__title">Heading Box</h2>
|
<h2 class="component-explanation__title">News Heading Box</h2>
|
||||||
<p class="component-explanation__description">Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page</p>
|
<p class="component-explanation__description">Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<?php
|
||||||
|
get_template_part("template-components/news-heading-box", null, array(
|
||||||
|
"news_type" => array(get_term(88, "news-type")),
|
||||||
|
"title" => "Boite de titrage News",
|
||||||
|
"thumbnail" => get_the_post_thumbnail(2271, "full", array('class' => 'news-heading-box__thumbnail')),
|
||||||
|
"published" => get_the_date()
|
||||||
|
));
|
||||||
|
?>
|
||||||
|
|
||||||
<?php
|
</article>
|
||||||
get_template_part('template-components/post-conseils/chapter-header');
|
|
||||||
|
|
||||||
|
<article id="chapter-header" class="component">
|
||||||
?>
|
<div class="component-explanation">
|
||||||
|
<h2 class="component-explanation__title">Chapter Header</h2>
|
||||||
</div>
|
<p class="component-explanation__description">Pour le heading des chapitres conseils</p>
|
||||||
|
</div>
|
||||||
|
<?php get_template_part('template-components/post-conseils/chapter-header'); ?>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Slider main container -->
|
|
||||||
<div class=" swiper">
|
|
||||||
<!-- Additional required wrapper -->
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<!-- Slides -->
|
|
||||||
<div class="swiper-slide">Slide 1</div>
|
|
||||||
<div class="swiper-slide">Slide 2</div>
|
|
||||||
<div class="swiper-slide">Slide 3</div>
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
<!-- If we need pagination -->
|
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
|
|
||||||
<!-- If we need navigation buttons -->
|
|
||||||
<div class="swiper-button-prev"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- If we need scrollbar -->
|
|
||||||
<div class="swiper-scrollbar"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
get_footer();
|
get_footer('demo-components');
|
||||||
|
|
|
||||||
18
footer-demo-components.php
Normal file
18
footer-demo-components.php
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php do_action('tailpress_content_end'); ?>
|
||||||
|
|
||||||
|
|
||||||
|
<?php do_action('tailpress_content_after'); ?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php wp_footer(); ?>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
52
header-demo-components.php
Normal file
52
header-demo-components.php
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html <?php language_attributes(); ?>>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="<?php bloginfo('charset'); ?>">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<link rel="profile" href="http://gmpg.org/xfn/11">
|
||||||
|
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
|
||||||
|
<?php wp_head(); ?>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body <?php body_class(); ?>>
|
||||||
|
<?php
|
||||||
|
do_action('tailpress_site_before');
|
||||||
|
global $post;
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div id="page-<?php echo $post->post_name ?>" class="min-h-screen flex flex-col">
|
||||||
|
|
||||||
|
<div class="skiplinks" aria-label="<?php echo __('Accès rapide', 'homegrade-theme__texte-fonctionnel') ?>">
|
||||||
|
<a href="#content" class="skiplinks__link"><?php echo __('Contenu', 'homegrade-theme__texte-fonctionnel') ?></a>
|
||||||
|
</div>
|
||||||
|
<ul class="skiplinks">
|
||||||
|
<li></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<?php do_action('tailpress_header'); ?>
|
||||||
|
|
||||||
|
<header id="main-header">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<?php if (is_front_page()) { ?>
|
||||||
|
|
||||||
|
<?php } ?>
|
||||||
|
|
||||||
|
<?php do_action('tailpress_content_start'); ?>
|
||||||
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$thematique = get_the_terms(get_the_ID(), 'thematiques')[0];
|
||||||
|
$thematiqueParent = getParentThematique($thematique);
|
||||||
|
$thematiqueColorSlug = getThematiqueFamilySlug($thematiqueParent->slug);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<main id="content" class="site-content flex-grow">
|
||||||
|
|
@ -1,14 +1,81 @@
|
||||||
|
.demo-components-home {
|
||||||
|
@apply bg-secondary container px-8 mx-auto py-12 my-12 rounded-3xl;
|
||||||
|
@apply text-white text-center;
|
||||||
|
h1 {
|
||||||
|
@apply text-base font-bold tracking-wider uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
@apply text-5xl font-bold tracking-wide max-w-3xl mx-auto py-8;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
@apply text-lg font-medium tracking-wider;
|
||||||
|
}
|
||||||
|
.cta--white:hover {
|
||||||
|
@apply bg-primary;
|
||||||
|
}
|
||||||
|
.buttons {
|
||||||
|
@apply flex justify-center mx-auto mt-8 gap-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.demo-components {
|
.demo-components {
|
||||||
|
@apply homegrade-page-container;
|
||||||
|
|
||||||
|
&__section-title {
|
||||||
|
@apply text-white
|
||||||
|
text-6xl
|
||||||
|
text-center
|
||||||
|
bg-secondary
|
||||||
|
flex
|
||||||
|
flex-col
|
||||||
|
justify-center
|
||||||
|
items-center py-8;
|
||||||
|
height: 100vh;
|
||||||
|
max-width: 100vw;
|
||||||
|
margin: 2rem calc(50% - 50vw);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@apply text-lg uppercase font-bold tracking-wide my-0;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
@apply text-6xl font-bold tracking-wide my-0 mt-4;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
@apply text-xl max-w-2xl mt-6 tracking-wide font-medium;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
.component {
|
.component {
|
||||||
@apply border-b border-neutral-400 py-32;
|
@apply border-b border-neutral-300 py-16;
|
||||||
|
> * {
|
||||||
|
@apply !max-w-full w-full mx-auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.component-explanation {
|
.component-explanation {
|
||||||
@apply max-w-screen-lg mx-auto px-8 text-center py-6;
|
@apply py-6 text-center pb-16;
|
||||||
&__title {
|
&__title {
|
||||||
@apply text-3xl font-bold text-center pb-2;
|
@apply text-3xl font-bold pb-2 text-secondary;
|
||||||
}
|
}
|
||||||
&__description {
|
&__description {
|
||||||
@apply text-neutral-500 text-lg font-medium mx-auto pt-0 max-w-lg mx-auto;
|
@apply text-neutral-500 text-base font-medium pt-0 max-w-lg mx-auto;
|
||||||
|
}
|
||||||
|
&__options {
|
||||||
|
@apply mt-4 font-bold;
|
||||||
|
h3 {
|
||||||
|
@apply m-0 uppercase text-sm pt-4 text-secondary tracking-wide;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__option {
|
||||||
|
@apply py-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__option-title {
|
||||||
|
@apply text-neutral-900 text-base !font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__option-description {
|
||||||
|
@apply text-neutral-500 text-base font-medium pt-0 max-w-sm mx-auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.buttons {
|
.buttons {
|
||||||
|
|
@ -17,4 +84,16 @@
|
||||||
@apply flex justify-center gap-8;
|
@apply flex justify-center gap-8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#chapter-header .post-conseils-chapter-header {
|
||||||
|
@apply bg-energies-urbanisme-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#blocks-components {
|
||||||
|
@apply pb-64;
|
||||||
|
.block-content-page-header {
|
||||||
|
@apply px-16 rounded-3xl;
|
||||||
|
@apply shadowed bg-white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user