feat: nouvelle page d'accueil

components/preview-list-home.php

@@ -0,0 +1,60 @@
+<?php if(have_posts()) : ?>
+  <div class="preview-grid">
+    <?php 
+      $max = 6;
+      $i = 0;
+    ?>
+    <?php while(have_posts()) : the_post(); ?>
+      <article class="card card-preview head-primary">
+          <a href="<?php the_permalink(); ?>" class="preview-link">
+            <h1 class="card-header"><?php the_title(); ?></h1>
+            <div class="preview-content">
+              <?php if(!has_post_thumbnail( $post->ID )) {
+                ?>
+                <div class="preview-exerpt" aria-hidden="true"><?php the_excerpt(); ?></div>
+                <?php
+              } else {
+                ?>
+                <div class="preview-exerpt" aria-hidden="true"><p class="p-img"><img class="preview-img" src="<?php echo get_the_post_thumbnail_url(); ?>" /></p></div>
+                <?php
+              }
+              ?>
+              <div class="preview-overlay">
+                <div class="preview-metadata">
+                  <div class="metadata-pills">
+                    <div><?php
+                    if (!has_category('chapters')) {
+                      $category = get_the_category();
+                      echo"<span class='btn-small btn-info small-text'>" . $category[0]->cat_name . "</span>";
+                    } else {
+                      $romans = get_the_terms($post->ID, 'roman');
+                      echo"<span class='btn-small btn-info small-text'>" . $romans[0]->name . "</span>";
+                    }
+                    ?></div>
+                    <div><time><span class="btn-small btn-info small-text"><?php the_time('d/m/Y') ?></span></time></div>
+                  </div>
+                  <div class="comment-text">
+                    <?php $category = get_the_category(); 
+                      $category_parent_id = $category[0]->category_parent;
+                      if ( get_term( $category_parent_id, 'category' )->slug != "3-gallerie" ) {
+                        echo reading_time();
+                      } else {
+                        echo image_number();
+                      }
+                    ?>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a>
+      </article>
+
+      <?php
+        $i++;
+        if ($i >= 6) {
+          break;
+        }
+      ?>
+    <?php endwhile; ?>
+  </div>
+<?php endif; ?>

home.php

@@ -1,21 +1,68 @@
 <?php get_header(); ?>
-<main id="skip">
+<div class="fullwidth" id="skip">
   <?php include(TEMPLATEPATH . '/components/globalflag.php'); ?>
-
   <!-- Recuperation de la page de home -->
   <?php if ( !is_paged() ) {
-    $page = get_page_by_path( 'home' );
+      $page = get_page_by_path( 'home' );
       if ($page != null) {
-        echo '<h1 class="page-title">' . get_the_title( $page ) . '</h1>';
-        echo '<div>' . $page->post_content . '</div>';
-      }
-      echo '<h1 class="page-title">Dernier article</h1>';
-      include(TEMPLATEPATH . '/components/featured.php');
-    }
   ?>
-  <h1 class="page-title">Publications</h1>
+  <section class="columns p-0">
-	<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
+    <h1 class="col-12 page-title pb-0" id="desc-title"><?php echo get_the_title( $page ); ?></h1>
+    <div class="col-xl-4 col-12"><img class="illustration" alt="Un kobold gris et violet binoclard, avec un manteau noir plein de cables" src="<?php echo get_template_directory_uri();?>/img/zerhjyj.png" /></div>
+    <div class="col-xl-8 col-12">
+        <div aria-libelledby="desc-title" class="mb-1"><?php echo $page->post_content; ?></div>
+        <div class="align-center d-none d-block-xl"><a href="/about" class="btn btn-primary">Plus d'info</a></div>
+    </div>
+  </section>
+  <section class="mb-2 d-none d-block-xl">
+    <h1 class="screen-reader-text">Mes sites web</h1>
+    <nav>
+      <ul class="no-pills f-row f-between mb-1">
+      <?php
+        $listmenu = get_nav_menu_locations();
+        $menu = wp_get_nav_menu_items($listmenu['link-menu']);
+        foreach ($menu as $menuElement) {
+          echo '<li class="m-0"><a href="' . $menuElement->url . '" class="btn btn-primary">'. $menuElement->title . '</a></li>';
+        }
+      ?>
+      </ul>
+    </nav>
+  </section>
+  <?php 
+    }
+  }
+  ?>
+  <div class="container-blog">
+    <section>
+      <div class="mb-1 d-none d-block-sm bg-light-2">
+        <?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
+      </div>
+      <?php
+          echo '<h1 class="page-title">Dernier article</h1>';
+          include(TEMPLATEPATH . '/components/featured.php');
+      ?>
+    
+      <h1 class="page-title">Dernières publications</h1>
+      <?php include(TEMPLATEPATH . '/components/preview-list-home.php'); ?>
 
-</main>
+      <div>
-<?php get_sidebar(); ?>
+        <?php if ( !is_paged() ) {
+          $page = get_page_by_path( 'buttons' );
+          if ($page != null) {
+            ?> <h1 class="sr-only" id="title-buttons">Boutons web</h1> <?php
+            echo '<div>' . $page->post_content . '</div>';
+          }
+        }
+      ?>
+      </div>
+    </section>
+
+    <aside class="sidebar" aria-labelledby="title-sidebar">
+      <h1 class="sr-only" id="title-sidebar">Menu de navigation</h1>
+      <?php include(TEMPLATEPATH . '/components/sidebar/categories.php'); ?>
+      <?php include(TEMPLATEPATH . '/components/sidebar/tags.php'); ?>
+      <?php include(TEMPLATEPATH . '/components/sidebar/archives.php'); ?>
+    </aside>
+  </div>
+</div>
 <?php get_footer();  ?>

scss/custom/_global.scss

@@ -28,6 +28,20 @@
     &-right {text-align: right;}
 }
 
+.illustration {
+  width: 300px;
+  display:block;
+  margin:auto;
+  @include xl() {
+    width: 145%;
+    padding-bottom: 0;
+    margin-bottom: 1.5rem;
+    position: relative;
+    top: 0px;
+    right: 64px;
+  }
+}
+
   /* ------------------ HEADERS ------------------- */
 
 #page-header {

style.css

@@ -2460,6 +2460,18 @@ textarea {
 .align-right {
   text-align: right; }
 
+.illustration {
+  width: 300px;
+  display: block;
+  margin: auto; }
+  @media (min-width: 1200px) {
+    .illustration {
+      width: 145%;
+      padding-bottom: 0;
+      margin-bottom: 1.5rem;
+      position: relative;
+      top: 0px;
+      right: 64px; } }
 /* ------------------ HEADERS ------------------- */
 #page-header {
   background: #0f7e84 url("img/background.png");