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

@@ -7,7 +7,11 @@ $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>

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 {