Fixed project images

numbats · May 29, 2024 · 2f41ebd · 2f41ebd
1 parent 88785da
commit 2f41ebd
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 4 deletions.
diff --git a/docs/img/quarto.png b/docs/img/quarto.png
diff --git a/docs/projects.html b/docs/projects.html
@@ -238,7 +238,7 @@ <h1 class="title">Projects</h1>
     <div class="quarto-grid-item card h-100 card-left">
 
         <p class="card-img-top">
-          <a class="listing-href" href="https://numbats.github.io/WOMBAT2022/" target="_blank" rel="noopener"><img src="img/wombat2022.png" class="thumbnail-image card-img" style="height: auto;" alt=""></a>
+          <a class="listing-href" href="https://numbats.github.io/WOMBAT2022/" target="_blank" rel="noopener"><img src="img/wombat2022.png" class="thumbnail-image proj-img" style="height: auto; width: 100%;" alt=""></a>
         </p>
 
 
@@ -282,7 +282,7 @@ <h5 class="no-anchor card-title listing-title">WOMBAT 2022</h5>
     <div class="quarto-grid-item card h-100 card-left">
 
         <p class="card-img-top">
-          <a class="listing-href" href="https://tidyverts.org" target="_blank" rel="noopener"><img src="img/tidyverts.jpg" class="thumbnail-image card-img" style="height: auto;" alt=""></a>
+          <a class="listing-href" href="https://tidyverts.org" target="_blank" rel="noopener"><img src="img/tidyverts.jpg" class="thumbnail-image proj-img" style="height: auto; width: 100%;" alt=""></a>
         </p>
 
 
@@ -326,7 +326,7 @@ <h5 class="no-anchor card-title listing-title">tidyverts</h5>
     <div class="quarto-grid-item card h-100 card-left">
 
         <p class="card-img-top">
-          <a class="listing-href" href="https://github.com/quarto-monash" target="_blank" rel="noopener"><img src="img/quarto.png" class="thumbnail-image card-img" style="height: auto;" alt=""></a>
+          <a class="listing-href" href="https://github.com/quarto-monash" target="_blank" rel="noopener"><img src="img/quarto.png" class="thumbnail-image proj-img" style="height: auto; width: 100%;" alt=""></a>
         </p>
 
 

diff --git a/docs/styles.css b/docs/styles.css
@@ -6,3 +6,8 @@ img.card-img {
   width: auto;
   aspect-ratio: 1 !important;
 }
+
+img.proj-img {
+  vertical-align: middle;
+  border-radius: 50%;
+}
diff --git a/img/quarto.png b/img/quarto.png
diff --git a/projects.ejs b/projects.ejs
@@ -20,7 +20,7 @@ const imgHeight = "100%";
     <div class="quarto-grid-item card h-100 <%-`card-${align}`%><%= hideBorders ? ' borderless' : '' %>">
       <% if (item.image) { %>
         <p class="card-img-top">
-          <a class="listing-href" href="<%= item.url %>" target="_blank" rel="noopener"><img src="<%= item.image %>" class="thumbnail-image card-img" style="height: auto;" alt="<%= item['image-alt'] %>"></a>
+          <a class="listing-href" href="<%= item.url %>" target="_blank" rel="noopener"><img src="<%= item.image %>" class="thumbnail-image proj-img" style="height: auto; width: 100%;" alt="<%= item['image-alt'] %>"></a>
         </p>
       <% } else { %>
         <div class="card-img-bg" <%= imgHeight ? ` style="height: ${imgHeight};"` : '' %>>&nbsp;</div>

diff --git a/styles.css b/styles.css
@@ -6,3 +6,8 @@ img.card-img {
   width: auto;
   aspect-ratio: 1 !important;
 }
+
+img.proj-img {
+  vertical-align: middle;
+  border-radius: 50%;
+}