add a shadow to the related articles if it does not have a featured i…

…mage

custom-post-image-right.hbs

@@ -15,7 +15,7 @@
 
         {{#if feature_image}}
         <figure class="post-image flex flex-col -order-1 md:-order-none">
-            <img class="w-full object-cover min-h-96 max-h-128 flex-grow"
+            <img class="w-full object-cover min-h-96 max-h-128 grow"
                 srcset="{{img_url feature_image size="s"}} 300w,
                         {{img_url feature_image size="m"}} 600w,
                         {{img_url feature_image size="l"}} 1000w,

partials/components/newsletter.hbs

@@ -3,7 +3,7 @@
     <div class="border-t-3 border-primary bg-gray-100 p-8">
         {{#if @custom.newsletter_text}}<h2 class="text-xl font-bold text-title mb-4">{{@custom.newsletter_text}}</h2>{{/if}}
         <a class="flex flex-col justify-between md:flex-row md:items-center" href="#/portal" data-portal>
-            <div class="text-gray-500 border-b border-gray-400 flex-grow mr-10 py-1 w-full mb-4 md:mb-0">{{t "Enter your email"}}</div>
+            <div class="text-gray-500 border-b border-gray-400 grow mr-10 py-1 w-full mb-4 md:mb-0">{{t "Enter your email"}}</div>
             <div class="button is-primary rounded-full">
                 <svg class="stroke-current" width="38" height="38" fill="none">
                     <rect x="26.25" y="9.25" width=".5" height="6.5" rx=".25"/>

partials/navigation.hbs

@@ -34,7 +34,7 @@
 {{!-- Primary Navigation --}}
 {{else}}
 
-<nav class="header-center mainMenu relative flex items-center pr-5 flex-grow overflow-auto lg:overflow-visible">
+<nav class="header-center mainMenu relative flex items-center pr-5 grow overflow-auto lg:overflow-visible">
     <ul itemscope
         itemtype="http://www.schema.org/SiteNavigationElement"
         class="nav hidden lg:flex whitespace-nowrap">

partials/story/story-card-small.hbs

@@ -5,32 +5,34 @@
     data-event-non-interaction="true"{{/is}}>
 
     {{#if feature_image}}
-    <a href="{{url}}" class="storySmall-img-link">
+    <a href="{{url}}" class="storySmall-link flex flex-col grow">
         <img class="storySmall-img object-cover w-full h-48 blur-up lazyload"
             src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
             data-srcset="{{img_url feature_image size="xs"}} 100w,{{img_url feature_image size="s"}} 300w,{{img_url feature_image size="m"}} 600w"
             data-sizes="auto"
             width="350"
-            height="160"
+            height="192"
             alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
         />
+
+        <div class="storySmall-inner py-4 flex flex-col justify-between grow">
+            <h2 class="text-xl text-title leading-tight line-clamp-2 mb-2">{{title}}</h2>
+
+            {{!-- Date Time and reading Time - ./partials/components/datetime.hbs --}}
+            {{> "components/datetime"}}
+        </div>
     </a>
-    {{/if}}
 
-    <div class="storySmall-inner py-4 flex flex-col justify-between flex-grow">
-        <div class="storySmall-body">
-            {{#if feature_image}}
-                <h2 class="text-xl line-clamp-2 text-title mb-2 leading-tight"><a href="{{url}}" class="block">{{title}}</a></h2>
-            {{else}}
-                <h2 class="text-xl text-title leading-tight"><a href="{{url}}" class="block">{{title}}</a></h2>
-                <p class="pt-4 mb-2">{{excerpt words="20"}}</p>
-            {{/if}}
+    {{else}}
+
+    <a href="{{url}}" class="flex flex-col grow justify-between p-5 bg-blank rounded overflow-hidden shadow-4xl transition-all hover:shadow-primary">
+        <div>
+            <h2 class="text-xl text-title leading-tight">{{title}}</h2>
+            <p class="pt-4 mb-2">{{excerpt words="20"}}...</p>
         </div>
 
         {{!-- Date Time and reading Time - ./partials/components/datetime.hbs --}}
         {{> "components/datetime"}}
-    </div>
-
-    {{!-- Link --}}
-    {{!-- <a href="{{url}}" class="absolute inset-0 z-3" aria-label="{{title}}"></a> --}}
+    </a>
+    {{/if}}
 </div>

partials/story/story-grid.hbs

@@ -1,4 +1,4 @@
-<article class="story js-story flex flex-col flex-grow relative mb-3{{#if story_class}} {{story_class}}{{/if}}">
+<article class="story js-story flex flex-col grow relative mb-3{{#if story_class}} {{story_class}}{{/if}}">
     <figure class="story-image mb-5 h-52 relative border border-gray-300 bg-gray-200 overflow-hidden">
             {{#if feature_image}}
             <a href="{{url}}">
@@ -21,7 +21,7 @@
         {{#if primary_tag}}<div class="absolute right-0 top-0">{{> "components/primary-tag"}}</div>{{/if}}
     </figure>
 
-    <div class="story-body flex flex-col flex-grow">
+    <div class="story-body flex flex-col grow">
         {{!-- Date Time and reading Time - ./partials/components/datetime.hbs --}}
         {{!-- {{> "components/datetime" class="mb-3 text-sm font-medium text-gray-500"}} --}}
 

src/css/cards/bookmark.css

@@ -24,7 +24,7 @@
   }
 
   &-thumbnail {
-    flex-grow: 1;
+    grow: 1;
     min-height: 10rem;
     min-width: 33%;
     position: relative;

tailwind.config.js

@@ -140,7 +140,9 @@ module.exports = {
         vmin8: '8vmin'
       },
       boxShadow: {
-        '3xl': '0 36px 64px 0 rgba(0,0,0,.2)'
+        '3xl': '0 36px 64px 0 rgba(0,0,0,.2)',
+        '4xl': 'inset 0 0 0 0.1rem rgb(58 3 45 / 8%), 0 10px 20px rgb(58 3 45 / 4%), 0 2px 6px rgb(58 3 45 / 4%), 0 0 1px rgb(58 3 45 / 4%)',
+        primary: 'inset 0 0 0 0.1rem var(--color-primary), 0 10px 20px rgb(58 3 45 / 4%), 0 2px 6px rgb(58 3 45 / 4%), 0 0 1px rgb(58 3 45 / 4%)'
       },
       inset: {
         32: '8rem',