imporvement: better layout

components/preview-grid.php

@@ -0,0 +1,8 @@
+<?php if(have_posts()) : ?>
+  <div class="previews-section preview-grid">
+    <?php include(TEMPLATEPATH . '/components/previews.php'); ?>
+  </div>
+  <div class="navigation">
+    <?php the_posts_pagination(); ?>
+  </div>
+<?php endif; ?>

components/preview-list.php

@@ -1,32 +1,6 @@
 <?php if(have_posts()) : ?>
-  <div class="previews-section">
+  <div class="previews-section preview-list">
-    <?php while(have_posts()) : the_post(); ?>
+    <?php include(TEMPLATEPATH . '/components/previews.php'); ?>
-      <article class="card card-preview head-primary">
-          <a href="<?php the_permalink(); ?>" class="preview-link">
-            <div class="preview-item">
-              <div class="preview-content" aria-hidden="true"><?php the_excerpt(); ?></div>
-              <div class="preview-overlay">
-                <h1 class="card-header"><?php the_title(); ?></h1>
-                <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 comments_number('Pas de commentaire', 'Un commentaire', '% commentaires' );?></div>
-                </div>
-              </div>
-            </div>
-          </a>
-      </article>
-    <?php endwhile; ?>
   </div>
   <div class="navigation">
     <?php the_posts_pagination(); ?>

components/previews.php

@@ -0,0 +1,27 @@
+<?php while(have_posts()) : the_post(); ?>
+  <div class="preview">
+    <div class="preview-thumbnail">
+      <a href="<?php the_permalink(); ?>">
+        <?php the_post_thumbnail( ); ?>
+      </a>
+    </div>
+    <div class="preview-text">
+      <h2><a href="<?php the_permalink(); ?>" class="preview-title-link m-0 p-0"><?php the_title(); ?></a></h2>
+    
+      <div class="flex-that">
+        <div>
+          <?php
+            if (!has_category('chapters')) {
+              $category = get_the_category();
+              echo"<span class='badge bg-primary small-text m-0'>" . $category[0]->cat_name . "</span>";
+            }
+          ?>
+        </div>
+        <div>
+          <time><span class="badge bg-primary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
+        </div>
+      </div>
+      <div class="preview-excerpt" aria-excerpt="true"><?php the_excerpt(); ?></div>
+    </div>
+  </div>
+<?php endwhile; ?>

home.php

@@ -14,7 +14,7 @@
     }
   ?>
   <h1 class="page-title">Publications</h1>
-	<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
+	<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
 
 </main>
 <?php get_footer();  ?>

index.php

@@ -1,7 +1,7 @@
 <?php get_header(); ?>
 <main>
   <h1 class="page-title">Publications</h1>
-	<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
+	<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
 </main>
 <?php get_sidebar(); ?>
 <?php get_footer();  ?>

scss/_drawing.scss

@@ -13,5 +13,5 @@
 @import 'components/menus';
 @import 'components/toasts';
 @import 'components/tables';
-@import 'components/previews';
+//@import 'components/previews';
 @import 'components/sidebar';

scss/_global.scss

@@ -2,4 +2,5 @@
  * Styles that are custom to this particular theme
 **/
 
-@import 'custom/global';
+@import 'custom/global';
+@import 'custom/previews';

scss/components/_previews.scss

@@ -8,20 +8,24 @@ $preview-content-height:165px;
 $comment-peek-height:0px;
 $comment-height:30px;
 
-.previews-section {
+.preview-grid {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto;
   grid-gap: $lineheight;
   padding-bottom: $lineheight;
-
+  
-  @include xl() {
+  @include md() {
     grid-template-columns: 1fr 1fr;
   }
 
-  @include xxl() {
+  @include xl() {
     grid-template-columns: 1fr 1fr 1fr;
   }
+
+  @include xxl() {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
 }
 
 .preview-container {

scss/custom/_global.scss

@@ -14,7 +14,7 @@
 @mixin container-big() {
     padding-left: $lineheight;
     padding-right: $lineheight;
-    max-width: 1600px;
+    max-width: $container-size;
     margin:auto;
 }
 
@@ -42,7 +42,7 @@ header h1 {
     font-style:oblique;
     padding:1.5rem;
     line-height: 1rem;
-    max-width: 1600px;
+    max-width: $container-size;
     margin: auto;
     text-align:center;
 
@@ -98,7 +98,7 @@ header h1 {
     "main"
     "side";
 
-    @include lg() {
+    @include xl() {
       grid-template-columns: auto 360px;
       grid-template-areas: "main side";
     }
@@ -216,8 +216,3 @@ footer {
       }
     }
 }
-
-.container-article {
-  margin:auto;
-  width:800px;
-}

scss/custom/_previews.scss

@@ -0,0 +1,79 @@
+.preview-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-gap: $lineheight;
+    padding-bottom: $lineheight;
+
+    @include md() {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    @include xl() {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    @include xxl() {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+}
+
+.preview-list {
+    @include sm() {
+        .preview-thumbnail a {
+            width: 240px;
+            margin-right: $lineheight /2;
+        }
+    
+        .preview {
+            display: flex;
+            align-items: center;
+            margin-bottom: $lineheight;
+        }
+    }
+    @include lg() {
+        .preview-thumbnail a {
+            width: 320px;
+        }
+    }
+}
+
+.preview {
+    font-size: 0.8rem;
+}
+
+.preview-thumbnail a {
+    display:block;
+    width: 100%;
+    background-color:transparent;
+    margin:auto;
+    object-fit: cover;
+    padding:0;
+    line-height:0;
+    img {
+        width:100%;
+        object-fit: cover;
+        height: auto;
+        aspect-ratio: 16/9;
+        border-radius: $card-radius;
+    }
+}
+
+.preview h2 {
+    font-size:1.25rem;
+    line-height: 1.5rem;
+    font-family: $titlefont;
+    font-weight: 800;
+    height:3rem;
+    a {
+        background-color:transparent!important;
+        color:$color-font;
+    }
+}
+
+.preview-excerpt {
+    margin-top: $lineheight / 2;
+    font-size:0.8rem;
+    line-height:1.25rem;
+    color:transparentize($color-font, 0.2);
+}

scss/definitions/_sizing.scss

@@ -30,5 +30,5 @@ $screen-xl-min: 1200px;
 $screen-xxl-min: 1600px;
 
 // Containers size
-$container-size: $screen-xxl-min;
+$container-size: $screen-xl-min;
 $container-size-large: $screen-xxl-min;

scss/utils/_sizing.scss

@@ -48,14 +48,14 @@
 
 .m {
   @include addmargins("half", $lineheight * .5);
-  @for $i from 1 through 4 {
+  @for $i from 0 through 4 {
     @include addmargins($i, $lineheight*$i)
   }
 }
 
 .p {
   @include addpaddings("half", $lineheight * .5);
-  @for $i from 1 through 4 {
+  @for $i from 0 through 4 {
     @include addpaddings($i, $lineheight*$i)
   }
 }

style.css

@@ -537,7 +537,7 @@ code {
 .container, .container-onecolumn {
   padding-left: 1.6rem;
   padding-right: 1.6rem;
-  max-width: 1600px;
+  max-width: 1200px;
   margin: auto; }
 
 .columns {
@@ -1501,228 +1501,6 @@ th, td {
 th {
   font-weight: 800; }
 
-/*
- * 4. Previews
- * Special style for previews cards
- *
-*/
-.previews-section {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto;
-  grid-gap: 1.6rem;
-  padding-bottom: 1.6rem; }
-  @media (min-width: 1200px) {
-    .previews-section {
-      grid-template-columns: 1fr 1fr; } }
-  @media (min-width: 1600px) {
-    .previews-section {
-      grid-template-columns: 1fr 1fr 1fr; } }
-.preview-container {
-  width: 100%; }
-
-@media (min-width: 992px) {
-  .prev-col-2 .preview-container {
-    width: 50%; }
-  .prev-col-3 .preview-container {
-    width: 33%; }
-  .prev-col-4 .preview-container {
-    width: 25%; } }
-
-.card-preview {
-  padding: 0;
-  width: 100%;
-  margin: auto;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); }
-
-.preview-link {
-  padding: 0;
-  background-color: transparent;
-  margin: 0 !important; }
-
-.preview-item {
-  height: 12.8rem;
-  font-size: 0.9rem;
-  line-height: 1.6rem !important;
-  text-align: justify;
-  background-color: rgba(0, 0, 0, 0);
-  color: rgba(33, 37, 41, 0.4);
-  position: relative;
-  display: flex;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-  justify-content: center; }
-  .preview-item .preview-overlay {
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    position: absolute;
-    padding-top: 0px;
-    backdrop-filter: none;
-    transition: background-color 0.3s;
-    border-radius: 8px 8px 8px 8px; }
-    .preview-item .preview-overlay h1, .preview-item .preview-overlay h2, .preview-item .preview-overlay h3, .preview-item .preview-overlay h4, .preview-item .preview-overlay h5, .preview-item .preview-overlay h6 {
-      color: #fefefe;
-      font-size: 1rem;
-      line-height: 1.6rem;
-      font-weight: 300; }
-    .preview-item .preview-overlay .card-header {
-      font-family: Open Sans, sans-serif;
-      font-size: 1rem;
-      font-size: 1.1em;
-      font-weight: 300;
-      padding: 0.4rem;
-      padding-left: 1.6rem;
-      padding-right: 1.6rem;
-      padding-bottom: 0.4rem !important;
-      margin: 0px;
-      margin-bottom: 0.8rem;
-      margin-top: 0.8rem;
-      line-height: 1.6rem;
-      white-space: nowrap;
-      position: relative;
-      left: 0px;
-      width: 100%;
-      border: 0px solid rgba(0, 0, 0, 0.3);
-      border-radius: 4px 4px 4px 4px;
-      background-color: transparent;
-      border-radius: 0;
-      background-color: #e33d22;
-      color: #fefefe;
-      font-weight: 300;
-      margin-top: 0px; }
-      .preview-item .preview-overlay .card-header:first-child {
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px; }
-      .preview-item .preview-overlay .card-header:last-child {
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px; }
-      .preview-item .preview-overlay .card-header h1, .preview-item .preview-overlay .card-header h2, .preview-item .preview-overlay .card-header h3, .preview-item .preview-overlay .card-header h4, .preview-item .preview-overlay .card-header h5, .preview-item .preview-overlay .card-header h6, .preview-item .preview-overlay .card-header h7, .preview-item .preview-overlay .card-header h8, .preview-item .preview-overlay .card-header h9, .preview-item .preview-overlay .card-header h10 {
-        font-family: Open Sans, sans-serif;
-        font-size: 1rem;
-        padding: 0px;
-        margin: 0px;
-        color: #fefefe;
-        font-weight: 300;
-        line-height: 1.6rem; }
-  .preview-item:hover .preview-overlay {
-    backdrop-filter: blur(2px);
-    background-color: rgba(0, 0, 0, 0.4); }
-    .preview-item:hover .preview-overlay .metadata-pills {
-      opacity: .9;
-      transition: opacity .5s, height .5s;
-      height: 135px; }
-
-.preview-content {
-  max-height: 12.8rem;
-  overflow: hidden;
-  background-size: cover;
-  min-height: 100%;
-  min-width: 100%;
-  border-radius: 8px 8px 8px 8px;
-  font-size: 0.85rem;
-  line-height: 1.25rem; }
-  .preview-content h1, .preview-content h2, .preview-content h3, .preview-content h4, .preview-content h5, .preview-content h6 {
-    margin-bottom: 0px;
-    max-width: 100%;
-    display: none; }
-  .preview-content > p {
-    width: 100%;
-    margin: auto; }
-    .preview-content > p > img {
-      max-width: 100%;
-      height: auto;
-      vertical-align: middle;
-      margin: auto;
-      text-align: center; }
-    .preview-content > p.p-img {
-      text-align: center;
-      margin: auto;
-      padding: auto;
-      display: block;
-      width: 100%; }
-
-.preview-metadata {
-  color: #fefefe;
-  height: 165px;
-  overflow: hidden;
-  border-radius: 8px 8px 8px 8px; }
-  .preview-metadata .metadata-pills {
-    height: 165px;
-    opacity: 0;
-    transition: opacity .3s, height .3s;
-    display: flex;
-    justify-content: space-between;
-    padding-left: 0.8rem;
-    padding-right: 0.8rem;
-    font-size: 0.9em; }
-
-.card-preview.head-info .comment-text {
-  background-color: #343a40; }
-
-.card-preview.card-grey .comment-text {
-  background-color: #adb5bd; }
-
-.comment-text {
-  color: #fefefe;
-  background-color: #e33d22;
-  text-align: center; }
-
-.card-preview time {
-  margin-bottom: 0.4em;
-  display: block; }
-
-.author-area {
-  display: flex; }
-  .author-area img.author-avatar, .author-area img.avatar {
-    display: block;
-    height: 4.8rem;
-    width: auto;
-    border-radius: 100%;
-    padding: 0;
-    margin: 0;
-    margin-right: 1.6rem; }
-  .author-area .author-metadata {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start; }
-  .author-area .author-date {
-    font-style: italic; }
-  .author-area:not(:last-child) {
-    margin-bottom: 1.6rem; }
-
-.pigimg {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: auto; }
-
-.avatar {
-  background: transparent; }
-
-.mwarea {
-  padding-bottom: 1.6rem; }
-  .mwarea .avatar {
-    width: 80%;
-    height: auto;
-    display: block;
-    margin: auto; }
-
-.cover {
-  width: 100%;
-  height: auto;
-  border-radius: 8px 8px 8px 8px; }
-
-@media (min-width: 768px) {
-  .roman {
-    width: 80%;
-    position: relative;
-    top: -240px;
-    margin: auto; } }
-
 .sidebar-container {
   width: 100%;
   display: grid;
@@ -2565,6 +2343,21 @@ th {
 .mt-half {
   margin-top: 0.8rem; }
 
+.m-0 {
+  margin: 0rem; }
+
+.mb-0 {
+  margin-bottom: 0rem; }
+
+.mr-0 {
+  margin-right: 0rem; }
+
+.ml-0 {
+  margin-left: 0rem; }
+
+.mt-0 {
+  margin-top: 0rem; }
+
 .m-1 {
   margin: 1.6rem; }
 
@@ -2640,6 +2433,21 @@ th {
 .pt-half {
   padding-top: 0.8rem; }
 
+.p-0 {
+  padding: 0rem; }
+
+.pb-0 {
+  padding-bottom: 0rem; }
+
+.pr-0 {
+  padding-right: 0rem; }
+
+.pl-0 {
+  padding-left: 0rem; }
+
+.pt-0 {
+  padding-top: 0rem; }
+
 .p-1 {
   padding: 1.6rem; }
 
@@ -2759,7 +2567,7 @@ header h1 {
   font-style: oblique;
   padding: 1.5rem;
   line-height: 1rem;
-  max-width: 1600px;
+  max-width: 1200px;
   margin: auto;
   text-align: center; }
   header h1 img {
@@ -2793,13 +2601,13 @@ header h1 {
 .container-big {
   padding-left: 1.6rem;
   padding-right: 1.6rem;
-  max-width: 1600px;
+  max-width: 1200px;
   margin: auto; }
 
 .container-blog {
   padding-left: 1.6rem;
   padding-right: 1.6rem;
-  max-width: 1600px;
+  max-width: 1200px;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr;
@@ -2807,7 +2615,7 @@ header h1 {
   row-gap: 1.6rem;
   column-gap: 3rem;
   grid-template-areas: "main" "side"; }
-  @media (min-width: 992px) {
+  @media (min-width: 1200px) {
     .container-blog {
       grid-template-columns: auto 360px;
       grid-template-areas: "main side"; } }
@@ -2830,7 +2638,7 @@ ul.tag-list {
 .container-preview {
   padding-left: 1.6rem;
   padding-right: 1.6rem;
-  max-width: 1600px;
+  max-width: 1200px;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr;
@@ -2850,7 +2658,7 @@ ul.tag-list {
 .container-personnage {
   padding-left: 1.6rem;
   padding-right: 1.6rem;
-  max-width: 1600px;
+  max-width: 1200px;
   margin: auto;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
@@ -2906,6 +2714,64 @@ footer {
     footer .columns a:visited:visited {
       color: #fefefe; }
 
-.container-article {
+.preview-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  grid-gap: 1.6rem;
+  padding-bottom: 1.6rem; }
+  @media (min-width: 768px) {
+    .preview-grid {
+      grid-template-columns: 1fr 1fr; } }
+  @media (min-width: 1200px) {
+    .preview-grid {
+      grid-template-columns: 1fr 1fr 1fr; } }
+  @media (min-width: 1600px) {
+    .preview-grid {
+      grid-template-columns: 1fr 1fr 1fr 1fr; } }
+@media (min-width: 576px) {
+  .preview-list .preview-thumbnail a {
+    width: 240px;
+    margin-right: 0.8rem; }
+  .preview-list .preview {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.6rem; } }
+
+@media (min-width: 992px) {
+  .preview-list .preview-thumbnail a {
+    width: 320px; } }
+
+.preview {
+  font-size: 0.8rem; }
+
+.preview-thumbnail a {
+  display: block;
+  width: 100%;
+  background-color: transparent;
   margin: auto;
-  width: 800px; }
+  object-fit: cover;
+  padding: 0;
+  line-height: 0; }
+  .preview-thumbnail a img {
+    width: 100%;
+    object-fit: cover;
+    height: auto;
+    aspect-ratio: 16/9;
+    border-radius: 8px; }
+
+.preview h2 {
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+  font-family: Teko, sans-serif;
+  font-weight: 800;
+  height: 3rem; }
+  .preview h2 a {
+    background-color: transparent !important;
+    color: #212529; }
+
+.preview-excerpt {
+  margin-top: 0.8rem;
+  font-size: 0.8rem;
+  line-height: 1.25rem;
+  color: rgba(33, 37, 41, 0.8); }