Give everyone the same circles

content/assets/stylesheets/includes/index.scss

@@ -0,0 +1,16 @@
+.rounded-container {
+    position: relative;
+    width: 100%;
+    padding-bottom: 100%; /* Maintain aspect ratio (1:1 square) */
+    border-radius: 50%; /* Make it rounded */
+    overflow: hidden; /* Hide overflow content */
+}
+
+.rounded-container img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    top: 0;
+    left: 0;
+}

content/assets/stylesheets/main.scss

@@ -8,38 +8,37 @@
 @import "node_modules/bulma/bulma";
 @import "node_modules/bulma-timeline/src/sass/index.sass";
 
-
 // Sticky footer
 body {
-  &.site {
-    overflow-x: hidden;
+    &.site {
+        overflow-x: hidden;
 
-    display: flex;
-    min-height: 100vh;
-    flex-direction: column;
-  }
+        display: flex;
+        min-height: 100vh;
+        flex-direction: column;
+    }
 
-  .wrapper {
-    flex: 1;
-  }
+    .wrapper {
+        flex: 1;
+    }
 }
 
 .mirrored {
-  transform: scaleX(-1);
+    transform: scaleX(-1);
 }
 
 .mirror {
-  transition: 5s;
-  transform: scaleX(-1);
+    transition: 5s;
+    transform: scaleX(-1);
 }
 
 .unmirror {
-  transition: 5s;
-  transform: scaleX(1);
+    transition: 5s;
+    transform: scaleX(1);
 }
 
 a.email span {
-	display: none;
+    display: none;
 }
 
 @import "includes/animations";
@@ -55,3 +54,4 @@ a.email span {
 @import "includes/about";
 @import "includes/privacy";
 @import "includes/toc";
+@import "includes/index.scss";

content/index.erb

@@ -137,11 +137,11 @@
           <div class="columns is-centered is-multiline is-mobile">
             <% current_sponsoring_members.shuffle.each do |member| %>
               <div class='column is-2-desktop is-one-fifth-tablet is-one-third-mobile'>
-                <figure class="image is-squared">
+                <div class="rounded-container">
                   <a href="https://zeus.ugent.be/sponsors/members/#<%= member[:nickname] %>">
                     <img class="is-rounded" src="<%= member[:photo] %>" alt="<%= member[:name] %>">
                   </a>
-                </figure>
+                </div>
               </div>
             <% end %>
           </div>
@@ -165,11 +165,11 @@
           <div class="columns is-centered is-multiline is-mobile">
             <% current_sponsors.shuffle.each do |sponsor| %>
               <div class='column is-2-desktop is-one-fifth-tablet is-one-third-mobile'>
-                <figure class="image is-squared">
+                <div class="rounded-container">
                   <a href="https://zeus.ugent.be/sponsors/sponsors/#<%= sponsor[:name] %>">
                     <img class="is-rounded" src="<%= sponsor[:photo] %>" alt="<%= sponsor[:name] %>">
                   </a>
-                </figure>
+                </div>
               </div>
             <% end %>
           </div>
@@ -178,5 +178,3 @@
     </div>
   </div>
 </div>
-
-<!-- TODO: Change url -->