Update layout for people cards (full-sized pictures in desktop mode, …

…inspired and adapted from #50)
stfbk · Jan 11, 2024 · d630457 · d630457
1 parent 13c4c89
commit d630457
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/_includes/list-people.html b/_includes/list-people.html
@@ -216,7 +216,7 @@
         {% endif %}
 
         {% if style == "card" %}
-            <div class="column is-3-desktop is-4-tablet">
+            <div class="column is-one-fifth-desktop is-4-tablet">
                 <div class="card person">
                     {% if details contains "picture" %}
                         {% assign staticImageName = person.id | append: ".jpg" %}
@@ -228,10 +228,10 @@
                         {% elsif staticImage.size == 1 %}
                             {% assign personImage = staticImage[0].path %}
                         {% elsif person.usernameFBK %}
-                            {% capture personImage %}https://my.fbk.eu/fbk-api/v2/picture/{{ person.usernameFBK }}?w=200{% endcapture %}
+                            {% capture personImage %}https://my.fbk.eu/fbk-api/v2/picture/{{ person.usernameFBK }}?w=500{% endcapture %}
                         {% elsif person.email %}
                             {% if splitEmail[1] == "fbk.eu" %}
-                                {% capture personImage %}https://my.fbk.eu/fbk-api/v2/picture/{{ splitEmail[0] }}?w=200{% endcapture %}
+                                {% capture personImage %}https://my.fbk.eu/fbk-api/v2/picture/{{ splitEmail[0] }}?w=500{% endcapture %}
                             {% else %}
                                 {% capture personImage %}/assets/images/no-user.jpg{% endcapture %}
                             {% endif %}

diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -40,6 +40,7 @@
   height: 100%;
   -webkit-box-shadow: 0 .5em 1em -.125em rgba(10,10,10,0.1),0 0px 0 1px rgba(10,10,10,0.02);
   -moz-box-shadow: 0 .5em 1em -.125em rgba(10,10,10,0.1),0 0px 0 1px rgba(10,10,10,0.02);
+  border-radius: 20px;
 }
 
 .card:hover {
@@ -52,7 +53,6 @@
   font-size: 1rem;
 }
 
-.card.person,
 .card.project {
   padding-top: 1.3em;
 }
@@ -75,6 +75,11 @@
   opacity: 0.3;
 }
 
+.card-image:first-child img {
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+}
+
 .card.enterprise .card-image,
 .card.project .card-image {
   padding: 20px;
@@ -97,9 +102,18 @@
 }
 
 .card.person .card-image img {
-  border-radius: 15px;
-  width: auto;
-  max-height: 96px;
+  border-radius: 20px;
+  width: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+}
+
+@media (max-width: 768px) {
+  .card.person .card-image img {
+    margin-top: 30px;
+    width: 66%;
+    max-width: 200px;
+  }
 }
 
 .card.person .card-content {