<?php 
/* 
Template Name: Page Accueil 
*/ 
?> 
 
 
<?php get_header(); ?> 
 
<main> 
     
 
  
<style>   
    .boite {   
        position: relative;   
        width: 100%;   
    }   
       
    .image {   
        display: block;   
        width: 100%;   
         height: 250px;   
    }   
       
    .volet-bottom {   
        position: absolute;   
        bottom: 0;   
        left: 0;   
        right: 0;   
        background-color: #008CBA;   
        overflow: hidden;   
        width: 100%;   
        height: 0;   
        transition: .5s ease;   
    }   
       
    .boite:hover .volet-bottom {   
        height: 100%;   
    }   
       
    .text {   
        white-space: initial;    
        color: white;   
        font-size: 20px;   
        position: absolute;   
        overflow: hidden;   
        top: 50%;   
        left: 50%;   
        transform: translate(-50%, -50%);   
        -ms-transform: translate(-50%, -50%);  
        width: 90% ;   
    }   
    
    .maj {  
      text-transform: uppercase;  
    }  
 
 
  @media screen and (max-width: 768px){ 
    .boite .volet-bottom {   
        position: absolute;   
        bottom: 0;   
        left: 0;   
        right: 0;   
        background-color: #008CBA;   
        overflow: hidden;   
        width: 100%;   
        height: 100%;   
        transition: .5s ease; 
        opacity: 0.8;   
    }   
  } 
</style>   
  
  
<!-- version 3 = boucle sur les catégories puis affiche les miniatures des 4 derniers articles   
plus overlay bottom sur les miniatures avec un lien  -->   
   
<div class="container is-fluid">   
   
        <?php   
        $last = get_categories();   
        foreach($last as $cat){   
        ?>   
   
  <section class="section blog">   
    <div class="container">   
    <div class="columns is-vcentered">   
      <div class="column">   
        <h2 class="title is-spaced"><?php echo $cat->name;//the_category() ?></h2>   
        <p class="subtitle"><?php echo $cat->category_description;//category_description();?></p>   
        <a href="<?php echo site_url().'/?cat='. $cat->term_id;?>">Voir !</a>   
      </div>   
      <div class="column">   
        <div class="columns is-multiline">   
   
        <?php   
          $args = array(   
            'posts_per_page' => 4,   
            'cat' => $cat->term_id,   
          );   
          $recent = new WP_Query($args);   
          while($recent->have_posts()) : $recent->the_post();   
        ?>   
   
          <div class="column is-6">   
            <div class="boite">   
              <picture class="image">   
              <?php the_post_thumbnail(); ?>   
              </picture>   
                  <div class="volet-bottom">   
                    <div class="text has-text-centered">   
                      <h1 class="maj"><?php the_title(); ?></h1>  
                      <?php the_excerpt(); ?>  
                    </div>   
                  </div>   
            </div>   
          </div>   
          <?php endwhile; ?>   
      </div>   
    </div>   
    </div>   
  </section>   
        <?php } ?>   
</div>   
 
 
 
</main> 
<?php get_footer(); ?>