Revert icons back to previous way of doing things

But keep md styling for rest of homepage
+ increase minimum size of h2 text

docs/index.html

@@ -120,9 +120,6 @@
 <p>Welcome to Cloud-SPAN</p>
 </div>
 </div>
-<!-- <section class="hero"> -->
-<!--   <div class="home-title">Welcome to Cloud-SPAN</div> -->
-<!-- </section> -->
 <div class="blue-bkg">
 <div class="side-padding">
 <div class="p-blue">
@@ -136,26 +133,26 @@
 <div class="h2">
 <p>Challenges in Environmental ’Omics</p>
 </div>
-<section class="container">
-<div class="responsive">
+<section class="side-padding">
+<div class="responsive gallery">
 <a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html"> <img src="images/software_icon.png" alt="Software" width="300" height="auto"> </a>
 <div class="desc">
 Software installation for data analysis is <strong>complex</strong> and involves <strong>multiple dependencies</strong>.
 </div>
 </div>
-<div class="responsive">
+<div class="responsive gallery">
 <a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html"> <img src="images/hardware_icon.png" alt="Hardware" width="300" height="auto"> </a>
 <div class="desc">
 HPC architectures <strong>vary</strong> between institutions and <strong>accessibility is a lottery</strong>.
 </div>
 </div>
-<div class="responsive">
+<div class="responsive gallery">
 <a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html"> <img src="images/time_icon.png" alt="Time" width="300" height="auto"> </a>
 <div class="desc">
 Metagenomic analyses involve <strong>large datasets</strong> and take a <strong>long time</strong> to run.
 </div>
 </div>
-<div class="responsive">
+<div class="responsive gallery">
 <a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html"> <img src="images/skills_icon.png" alt="Skills" width="300" height="auto"> </a>
 <div class="desc">
 Big data ’omics analyses using HPC are <strong>not core skills</strong> for researchers and have a <strong>steep learning curve</strong>.

docs/sitemap.xml

@@ -30,7 +30,7 @@
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/index.html</loc>
-    <lastmod>2023-09-14T16:05:44.892Z</lastmod>
+    <lastmod>2023-09-14T16:09:54.353Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/self_study/Create Your Own AWS Instance/index.html</loc>

index.qmd

@@ -27,30 +27,29 @@ We offer Diversity Scholarships to cover travel and/or childcare to enable membe
 ::: {.h2}
 Challenges in Environmental 'Omics
 :::
-
-  <section class="container">
-   <div class="responsive">
+<section class="side-padding">
+   <div class="responsive gallery">
    <a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html">
       <img src="images/software_icon.png" alt="Software" width="300" height="auto">
     </a>
     <div class="desc">Software installation for data analysis is **complex** and involves **multiple dependencies**.</div>
   </div>
 
-  <div class="responsive">
+  <div class="responsive gallery">
    <a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html">
       <img src="images/hardware_icon.png" alt="Hardware" width="300" height="auto">
     </a>
     <div class="desc">HPC architectures **vary** between institutions and **accessibility is a lottery**.</div>
   </div>
 
-  <div class="responsive">
+  <div class="responsive gallery">
    <a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html">
       <img src="images/time_icon.png" alt="Time" width="300" height="auto">
     </a>
     <div class="desc">Metagenomic analyses involve **large datasets** and take a **long time** to run.</div>
   </div>
 
-  <div class="responsive">
+  <div class="responsive gallery">
    <a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html">
       <img src="images/skills_icon.png" alt="Skills" width="300" height="auto">
     </a>

styles.scss

@@ -81,20 +81,7 @@ $link-color: $midnight_green; // hyperlinks
 
 
 /* IMAGE GALLERY (based on W3 schools responsive image gallery tutorial) */
-.container {
-  display: flex;
-  justify-content: center;
-  margin-left: 16vw;
-  margin-right: 16vw;
-}
-
-.container > div {
-  margin-top: 1vw;
-  text-align: center;
-  flex: 1;
-}
-
-div.container img {
+div.gallery img {
   width: 100%;
   height: auto;
 }
@@ -135,7 +122,6 @@ div.desc {
   }
 }
 
-
 .clearfix:after {
   content: "";
   display: table;