Fix Card layout bug #3

halfrost · Oct 21, 2020 · 88e009c · 88e009c
1 parent 9cb2a9c
commit 88e009c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
@@ -0,0 +1,30 @@
+.project-card-image {
+  width: 100%;
+  height: calc(33.3% - 2*20px); /* Fluid 3 columns (inc. 20px gutter) */
+}
+
+.project-card-image-auto {
+  width: 100%;
+  height: auto;
+}
+
+.project-card-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+@media screen and (max-width: 1199px) {
+  .project-card-image {
+    width: 100%;
+    height: calc(50% - 20px); /* Fluid 2 columns (inc. 20px gutter) */
+  }
+}
+@media screen and (max-width: 768px) {
+  .project-card-image {
+    width: 100%;
+    height: 100%; /* 1 column */
+  }
+}
diff --git a/layouts/partials/portfolio_li_card.html b/layouts/partials/portfolio_li_card.html
@@ -18,14 +18,14 @@
 {{ $js_tag_classes := delimit (apply (apply $item.Params.tags "replace" "." " " "-") "printf" "js-id-%s" ".") " " }}
 
 <div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
-  <div class="card">
+  <div class="card" style="padding-bottom: 35%;">
     {{ with $resource }}
     {{ $image := .Resize (printf "550x q90 %s") }}
-    <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
-      <img data-src="{{ $image.RelPermalink }}" alt="" class="img-responsive lazyload">
+    <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay project-card-content">
+      <img data-src="{{ $image.RelPermalink }}" alt="" class="img-responsive lazyload project-card-image-auto">
     </a>
     {{ end }}
-    <div class="card-text">
+    <div class="card-text project-card-content">
       <h4><a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{ $item.Title | markdownify | emojify }}</a></h4>
       {{ with $summary }}
       <div class="article-style">