jcarrier-theme

commit 6fae6b7277c7630c8cbf99a89185d0b00c22e936
parent e671a1faf616df703a4675c6d145bbaedf845321
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sun, 22 Nov 2020 13:38:29 -0500

Tune the project image grid

Diffstat:
M
css/index.css
 | 
6
++++++
M
src/scss/modules/_project.scss
 | 
10
++++++++++
M
templates/projects.html.twig
 | 
5
++++-

3 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/css/index.css b/css/index.css
@@ -134,6 +134,12 @@ nav ul {
   position: relative; }
   .project-list__item > * {
     margin: 0; }
+  .project-list__item figure {
+    height: 15rem; }
+  .project-list__item img {
+    height: 100%;
+    object-fit: cover;
+    width: 100%; }
 
 .project-list__title {
   font-size: 1rem; }
diff --git a/src/scss/modules/_project.scss b/src/scss/modules/_project.scss
@@ -9,6 +9,16 @@
         & > * {
             margin: 0;
         }
+
+        figure {
+            height: rem-calc(240);
+        }
+
+        img {
+            height: 100%;
+	        object-fit: cover;
+	        width: 100%;
+        }
     }
 
     &__title {
diff --git a/templates/projects.html.twig b/templates/projects.html.twig
@@ -21,7 +21,10 @@
           </a>
         </h2>
 
-        {{ project_image.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').cropZoom(380,240).html() }}
+        {#{ project_image.derivatives(320,640,768,1024,1140,1440,1600).sizes('(max-width: 71.25rem) 100vw, 100vw').cropZoom(480,320).html() }#}
+        <figure>
+          {{ project_image.derivatives(320,640,768,1024,1140,1440,1600).sizes('(max-width: 71.25rem) 100vw, 100vw').html() }}
+        </figure>
       </article>
     {% endfor %}
   </section>