corrected responsive articles issue

This commit is contained in:
Nuno Coração 2022-09-11 19:27:04 +01:00
parent 1d3a6669c6
commit 1f872a7425
5 changed files with 57 additions and 55 deletions

View file

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

View file

@ -1698,10 +1698,6 @@ select {
flex: 1 1 0%; flex: 1 1 0%;
} }
.flex-shrink-0 {
flex-shrink: 0;
}
.grow { .grow {
flex-grow: 1; flex-grow: 1;
} }
@ -2899,6 +2895,28 @@ body:has(#menu-controller:checked) {
box-shadow: 10px 10px 30px 2px rgba(0, 0, 0, 0.6); 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 { .first\:mt-8:first-child {
margin-top: 2rem; margin-top: 2rem;
} }
@ -3382,7 +3400,7 @@ body:has(#menu-controller:checked) {
} }
} }
@media (min-width: 768px) { @media (min-width: 853px) {
.md\:mb-0 { .md\:mb-0 {
margin-bottom: 0px; margin-bottom: 0px;
} }

View file

@ -338,6 +338,7 @@ body:has(#menu-controller:checked) {
} }
/* */ /* */
.thumbnail { .thumbnail {
min-width: 300px; min-width: 300px;
height: 180px; height: 180px;
@ -346,3 +347,23 @@ body:has(#menu-controller:checked) {
background-position:center; background-position:center;
box-shadow: 10px 10px 30px 2px rgba(0, 0, 0, 0.6); 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;
}
}

View file

@ -1,7 +1,7 @@
{{ with .Params.externalUrl }} {{ 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 }} {{ else }}
<a class="sm:flex mb-10" href="{{ .RelPermalink }}"> <a class="sm:flex mb-10 article" href="{{ .RelPermalink }}">
{{ end }} {{ end }}
{{- with $.Params.images -}} {{- with $.Params.images -}}
@ -13,8 +13,7 @@
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}} {{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
{{- with $featured -}} {{- with $featured -}}
<!--img class="nozoom customthumb" src="{{ $featured.Permalink }}"--> <div class="mb-5 sm:mr-7 thumbnail nozoom"
<div class="mb-5 flex-shrink-0 sm:mb-0 sm:mr-7 thumbnail nozoom"
style="background-image:url({{ $featured.Permalink }});"> 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" <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"> viewBox="0 0 200 200" aria-hidden="true">
@ -65,48 +64,3 @@
{{ end }} {{ end }}
</div> </div>
</a> </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-->

View file

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