support for thumbnails

liquet/css/home.css

@@ -53,14 +53,32 @@
 }
 
 #home #list > .item:hover {
-    box-shadow: 0 0.2em 0.5em -0.1em #00000014;
+    box-shadow: var(--small-shadow);
     transform: scale(1.05);
+    padding-bottom: 1em;
 }
 
 #home #list > .item .title {
     margin-bottom: .25em;
 }
 
+#home #list > .item .thumbnail img {
+    width: 100%;
+    height: 12em;
+    object-fit: cover;
+    object-position: center;
+    border-radius: .5em;
+    transition: var(--animation);
+    transform: scale(1);
+}
+
+#home #list > .item:hover .thumbnail img {
+    transform: scale(1.2) translateY(-1em);
+    height: 16em;
+    margin: 1em 0;
+    box-shadow: var(--small-shadow);
+}
+
 #home #list hr {
     margin: 0 1.5em;
 }

liquet/functions.php

@@ -4,6 +4,7 @@ include_once( 'logos.php' );
 
 add_theme_support( 'align-wide' );
 add_theme_support( 'title-tag' );
+add_theme_support( 'post-thumbnails' );
 
 add_action( 'wp_enqueue_scripts', function () {
 	wp_enqueue_style( 'flex', get_template_directory_uri() . '/css/flex.css' );

liquet/post-preview.php

@@ -1,26 +1,30 @@
 <?php
 
-include_once('loop-utils.php');
+include_once( 'loop-utils.php' );
 
 $dates = getDates();
 ?>
 
 <a href="<?= get_permalink() ?>" class="item">
     <div class="flex container vertical">
-
+		<?php if ( has_post_thumbnail() ) : ?>
+            <div class="thumbnail">
+				<?= get_the_post_thumbnail(); ?>
+            </div>
+		<?php endif; ?>
         <h2 class="alt-font title"><?php the_title(); ?></h2>
         <div class="flex container horizontal">
             <div>
-                <?= $dates['created'] ?>
+				<?= $dates['created'] ?>
             </div>
             <div class="flex item grow"></div>
             <div>
-                ~<?= do_shortcode('[rt_reading_time]'); ?> min
+                ~<?= do_shortcode( '[rt_reading_time]' ); ?> min
             </div>
         </div>
-        <?php if(has_excerpt()){
-            the_excerpt();
-        } ?>
+		<?php if ( has_excerpt() ) {
+			the_excerpt();
+		} ?>
     </div>
 </a>
 <hr/>

liquet/style.css

@@ -2,7 +2,7 @@
 Theme Name: Liquet
 Author: Niccolo Borgioli
 Description: Minimalistic clean theme
-Version: 0.8
+Version: 0.9
 License: MIT
 Tags: minimal, simple, typography, clean
 Author URI: https://nicco.io
@@ -20,6 +20,7 @@ Theme URI: https://github.com/cupcakearmy/liquet
     --clr-ligher: #eeeeee;
     --text-width: 35rem;
     --animation: all 100ms ease;
+    --small-shadow: 0 0.2em 0.5em -0.1em #00000014;
 }
 
 html, body {