diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index ce5cc6a3..6de9c791 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -3019,9 +3019,9 @@ body.zen-mode-enable { grid-template-columns: repeat(3, minmax(0, 1fr)); } } - .md\:flex-nowrap { + .md\:flex-row { @media (width >= 853px) { - flex-wrap: nowrap; + flex-direction: row; } } .md\:justify-start { @@ -3770,24 +3770,6 @@ a { pre { text-align: left; } -.thumbnail, .thumbnail_card, .thumbnail_card_related, .thumbnail_card_term, .single_hero_basic, .single_hero_background { - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} -.thumbnail { - min-width: 300px; - height: 180px; -} -.thumbnail_card { - height: 200px; -} -.thumbnail_card_related { - height: 150px; -} -.thumbnail_card_term { - height: 150px; -} .single_hero_round { max-height: 50vh; object-fit: cover; @@ -3799,7 +3781,23 @@ pre { width: 100%; height: 100%; } -.thumbnailshadow { +.thumbnail--card { + min-width: 300px; + height: 200px; +} +.thumbnail--related { + height: 150px; +} +.thumbnail--simple { + width: 300px; + min-height: 180px; +} +@media (width < 853px) { + .thumbnail--simple { + width: 100%; + } +} +.thumbnail-shadow { box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3); } .anchor { @@ -3813,20 +3811,11 @@ pre { scroll-margin-top: 145px; } @media (width >= 640px) { - .thumbnail { - min-width: 100%; - height: 180px; - } .article { flex-wrap: wrap; } } @media (width >= 853px) { - .thumbnail { - min-width: 300px; - min-height: 180px; - height: auto; - } .article { flex-wrap: nowrap; } diff --git a/assets/css/main.css b/assets/css/main.css index db602162..5bdd77d3 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -163,34 +163,6 @@ pre { text-align: left; } -.thumbnail, -.thumbnail_card, -.thumbnail_card_related, -.thumbnail_card_term, -.single_hero_basic, -.single_hero_background { - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -.thumbnail { - min-width: 300px; - height: 180px; -} - -.thumbnail_card { - height: 200px; -} - -.thumbnail_card_related { - height: 150px; -} - -.thumbnail_card_term { - height: 150px; -} - .single_hero_round { max-height: 50vh; object-fit: cover; @@ -205,7 +177,27 @@ pre { height: 100%; } -.thumbnailshadow { +.thumbnail--card { + min-width: 300px; + height: 200px; +} + +.thumbnail--related { + height: 150px; +} + +.thumbnail--simple { + width: 300px; + min-height: 180px; +} + +@variant max-md { + .thumbnail--simple { + width: 100%; + } +} + +.thumbnail-shadow { box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3); } @@ -224,21 +216,12 @@ pre { } @variant sm { - .thumbnail { - min-width: 100%; - height: 180px; - } .article { flex-wrap: wrap; } } @variant md { - .thumbnail { - min-width: 300px; - min-height: 180px; - height: auto; - } .article { flex-wrap: nowrap; } diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html index 50381dcc..511565f0 100644 --- a/layouts/partials/article-link/_shortcode.html +++ b/layouts/partials/article-link/_shortcode.html @@ -7,29 +7,22 @@ {{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }} {{ $disableImageOptimization := site.Params.disableImageOptimization | default false }} -{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }} -{{ if site.Params.list.showCards }} - {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }} -{{ else }} - {{ $articleClasses = delimit (slice $articleClasses "") " " }} -{{ end }} +{{ $cardClasses := "flex flex-col md:flex-row relative" }} +{{ $figureClasses := "" }} +{{ $cardContentClasses := "" }} -{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }} {{ if site.Params.list.showCards }} - {{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }} + {{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }} + {{ $figureClasses = "" }} + {{ $cardContentClasses = printf "%s p-2.5 pl-4 pb-0" $cardContentClasses }} {{ else }} - {{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }} -{{ end }} - -{{ $articleInnerClasses := "" }} -{{ if site.Params.list.showCards }} - {{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-2.5 pl-4 pb-0") " " }} -{{ else }} - {{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }} + {{ $cardClasses = printf "%s" $cardClasses }} + {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }} + {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }} {{ end }} {{ if $constrainItemsWidth }} - {{ $articleClasses = delimit (slice $articleClasses "max-w-prose") " " }} + {{ $cardClasses = printf "%s max-w-prose" $cardClasses }} {{ end }} {{ $featured := "" }} @@ -62,11 +55,18 @@ {{ end }} -
+
{{ with $featuredURL }} -
+
+ {{ $.Title }} +
{{ end }} -
+
{{ with $featuredURL }} -
+
+ {{ $.Title }} +
{{ end }} {{ if and .Draft .Site.Params.article.showDraftLabel }} diff --git a/layouts/partials/article-link/card.html b/layouts/partials/article-link/card.html index 6f9e9ba9..aaaab0c8 100644 --- a/layouts/partials/article-link/card.html +++ b/layouts/partials/article-link/card.html @@ -38,7 +38,15 @@
{{ with $featuredURL }} -
+
+ {{ $.Title }} +
{{ end }} {{ if and .Draft .Site.Params.article.showDraftLabel }} diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html index 54b7c3b0..50924907 100644 --- a/layouts/partials/article-link/simple.html +++ b/layouts/partials/article-link/simple.html @@ -3,33 +3,25 @@ 2. Recent articles template (when the cardView option is not enabled) 3. Shortcode list.html */}} -{{ $constrainItemsWidth := .Page.Site.Params.list.constrainItemsWidth | default false }} +{{ $constrainItemsWidth := site.Params.list.constrainItemsWidth | default false }} +{{ $disableImageOptimization := site.Params.disableImageOptimization | default false }} -{{ $articleClasses := "flex flex-wrap md:flex-nowrap article relative" }} -{{ if .Site.Params.list.showCards }} - {{ $articleClasses = delimit (slice $articleClasses "border border-neutral-200 dark:border-neutral-700 border-2 rounded-md overflow-hidden") " " }} +{{ $cardClasses := "flex flex-col md:flex-row relative" }} +{{ $figureClasses := "" }} +{{ $cardContentClasses := "" }} + +{{ if site.Params.list.showCards }} + {{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }} + {{ $figureClasses = "" }} + {{ $cardContentClasses = printf "%s p-4" $cardContentClasses }} {{ else }} - {{ $articleClasses = delimit (slice $articleClasses "") " " }} -{{ end }} - -{{ $articleImageClasses := "w-full md:w-auto h-full thumbnail nozoom" }} -{{ if .Site.Params.list.showCards }} - {{ $articleImageClasses = delimit (slice $articleImageClasses "") " " }} -{{ else }} - {{ $articleImageClasses = delimit (slice $articleImageClasses "thumbnailshadow md:mr-7") " " }} -{{ end }} - -{{ $disableImageOptimization := .Page.Site.Params.disableImageOptimization | default false }} - -{{ $articleInnerClasses := "" }} -{{ if .Site.Params.list.showCards }} - {{ $articleInnerClasses = delimit (slice $articleInnerClasses "p-4") " " }} -{{ else }} - {{ $articleInnerClasses = delimit (slice $articleInnerClasses "mt-3 md:mt-0") " " }} + {{ $cardClasses = $cardClasses }} + {{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }} + {{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }} {{ end }} {{ if $constrainItemsWidth }} - {{ $articleClasses = delimit (slice $articleClasses "max-w-prose") " " }} + {{ $cardClasses = printf "%s max-w-prose" $cardClasses }} {{ end }} {{ $featured := "" }} @@ -62,11 +54,19 @@ {{ end }} -