corrected responsive articles issue

README.md

@@ -3,3 +3,5 @@
 # Blowfish
 Personal Website & Blog Theme for Hugo
 
+
+git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

assets/css/compiled/main.css

@@ -1698,10 +1698,6 @@ select {
   flex: 1 1 0%;
 }
 
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .grow {
   flex-grow: 1;
 }
@@ -2899,6 +2895,28 @@ body:has(#menu-controller:checked) {
   box-shadow: 10px 10px 30px 2px rgba(0, 0, 0, 0.6);
 }
 
+@media (min-width: 640px) {
+  .thumbnail {
+    min-width: 100%;
+    height: 180px;
+  }
+
+  .article {
+    flex-wrap: wrap;
+  }
+}
+
+@media (min-width: 853px) {
+  .thumbnail {
+    min-width: 300px;
+    height: 180px;
+  }
+
+  .article {
+    flex-wrap: nowrap;
+  }
+}
+
 .first\:mt-8:first-child {
   margin-top: 2rem;
 }
@@ -3382,7 +3400,7 @@ body:has(#menu-controller:checked) {
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 853px) {
   .md\:mb-0 {
     margin-bottom: 0px;
   }

assets/css/main.css

@@ -338,6 +338,7 @@ body:has(#menu-controller:checked) {
 }
 
 /* */
+
 .thumbnail {
   min-width: 300px;
   height: 180px;
@@ -345,4 +346,24 @@ body:has(#menu-controller:checked) {
   background-size:cover; 
   background-position:center;
   box-shadow: 10px 10px 30px 2px rgba(0, 0, 0, 0.6);
+}
+
+@screen sm {
+  .thumbnail {
+    min-width: 100%;
+    height: 180px;
+  }
+  .article {
+    flex-wrap: wrap;
+  }
+}
+
+@screen md {
+  .thumbnail {
+    min-width: 300px;
+    height: 180px;
+  }
+  .article {
+    flex-wrap: nowrap;
+  }
 }

layouts/partials/article-link.html

@@ -1,7 +1,7 @@
 {{ with .Params.externalUrl }}
-<a class="sm:flex mb-10" href="{{ . }}" target="_blank" rel="external">
+<a class="sm:flex mb-10 article" href="{{ . }}" target="_blank" rel="external">
   {{ else }}
-  <a class="sm:flex mb-10" href="{{ .RelPermalink }}">
+  <a class="sm:flex mb-10 article" href="{{ .RelPermalink }}">
     {{ end }}
 
     {{- with $.Params.images -}}
@@ -13,8 +13,7 @@
     {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
     {{- with $featured -}}
 
-    <!--img class="nozoom customthumb" src="{{ $featured.Permalink }}"-->
-    <div class="mb-5 flex-shrink-0 sm:mb-0 sm:mr-7 thumbnail nozoom"
+    <div class="mb-5 sm:mr-7 thumbnail nozoom"
       style="background-image:url({{ $featured.Permalink }});">
       <svg class="h-32 w-full bg-white text-gray-300 sm:w-32" preserveAspectRatio="none" stroke="none" fill="none"
         viewBox="0 0 200 200" aria-hidden="true">
@@ -64,49 +63,4 @@
       </div>
       {{ end }}
     </div>
-  </a>
-
-  <!--article>
-  <h3 class="flex items-center mt-6 text-xl font-semibold">
-    {{ with .Params.externalUrl }}
-      <div>
-        <a
-          class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
-          href="{{ . }}"
-          target="_blank"
-          rel="external"
-          >{{ $.Title | emojify }}</a
-        >
-        <span
-          class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500"
-          title="{{ i18n "list.externalurl_title" }}"
-        >
-          <span class="rtl:hidden">&#8599;</span>
-          <span class="ltr:hidden">&#8598;</span>
-        </span>
-      </div>
-    {{ else }}
-      <a
-        class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
-        href="{{ .RelPermalink }}"
-        >{{ .Title | emojify }}</a
-      >
-    {{ end }}
-    {{ if and .Draft .Site.Params.article.showDraftLabel }}
-      <div class=" ltr:ml-2 rtl:mr-2">
-        {{ partial "badge.html" (i18n "article.draft" | emojify) }}
-      </div>
-    {{ end }}
-    {{ if templates.Exists "partials/extend-article-link.html" }}
-      {{ partial "extend-article-link.html" . }}
-    {{ end }}
-  </h3>
-  <div class="text-sm text-neutral-500 dark:text-neutral-400">
-    {{ partial "article-meta.html" . }}
-  </div>
-  {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
-    <div class="py-1 prose dark:prose-invert">
-      {{ .Summary | emojify }}
-    </div>
-  {{ end }}
-</article-->
+  </a>

tailwind.config.js

@@ -7,6 +7,13 @@ module.exports = {
   ],
   darkMode: "class",
   theme: {
+    screens: {
+      'sm': '640px',
+      'md': '853px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    },
     colors: {
       transparent: "transparent",
       neutral: {