Skip to content

Commit

Permalink
Attempt new way to lay out icons on front page
Browse files Browse the repository at this point in the history
  • Loading branch information
@evelyngreeves
evelyngreeves committed Sep 14, 2023
1 parent a5ff216 commit 258a7b2
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 42 deletions.
37 changes: 20 additions & 17 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,44 +115,47 @@



<section class="hero">
<div class="hero">
<div class="home-title">
Welcome to Cloud-SPAN
<p>Welcome to Cloud-SPAN</p>
</div>
</section>
</div>
<!-- <section class="hero"> -->
<!-- <div class="home-title">Welcome to Cloud-SPAN</div> -->
<!-- </section> -->
<div class="blue-bkg">
<div class="side-padding">
<p class="p-blue">
Cloud-SPAN trains researchers, and the research software engineers that support them, to run specialised analyses on cloud-based high-performance computing (HPC) infrastructure. Cloud-SPAN is developing highly accessible resources which integrate with existing Carpentries courses.
</p>
<p class="p-blue">
We offer Diversity Scholarships to cover travel and/or childcare to enable members of underrepresented groups to participate in online or in-person training.
</p>
<div class="p-blue">
<p>Cloud-SPAN trains researchers, and the research software engineers that support them, to run specialised analyses on cloud-based high-performance computing (HPC) infrastructure. Cloud-SPAN is developing highly accessible resources which integrate with existing Carpentries courses.</p>
</div>
<div class="p-blue">
<p>We offer Diversity Scholarships to cover travel and/or childcare to enable members of underrepresented groups to participate in online or in-person training.</p>
</div>
<h2>
Challenges in Environmental ’Omics
</h2>
<section class="side-padding">
<div class="responsive gallery">
</div>
</div>
<div class="h2">
<p>Challenges in Environmental ’Omics</p>
</div>
<section class="container">
<div class="responsive">
<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 gallery">
<div class="responsive">
<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 gallery">
<div class="responsive">
<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 gallery">
<div class="responsive">
<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>.
Expand Down
2 changes: 1 addition & 1 deletion docs/site_libs/bootstrap/bootstrap.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/sitemap.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</url>
<url>
<loc>https://cloud-span.github.io/cloud-span-quarto-site/index.html</loc>
<lastmod>2023-09-14T09:36:14.460Z</lastmod>
<lastmod>2023-09-14T16:05:44.892Z</lastmod>
</url>
<url>
<loc>https://cloud-span.github.io/cloud-span-quarto-site/self_study/Create Your Own AWS Instance/index.html</loc>
Expand Down
49 changes: 28 additions & 21 deletions index.qmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,45 +7,50 @@
# image-width: 70em
page-layout: custom
---
<section class="hero">
<div class="home-title">Welcome to Cloud-SPAN</div>
</section>

<div class="blue-bkg">
<div class="side-padding">
<p class="p-blue">Cloud-SPAN trains researchers, and the research software engineers that support them, to run specialised analyses on cloud-based high-performance computing (HPC) infrastructure. Cloud-SPAN is developing highly accessible resources which integrate with existing Carpentries courses. </p>

<p class="p-blue">We offer Diversity Scholarships to cover travel and/or childcare to enable members of underrepresented groups to participate in online or in-person training. </p>
</div>
</div>

<h2>
::: {.hero}
::: {.home-title}
Welcome to Cloud-SPAN
:::
:::

::: {.blue-bkg}
::: {.side-padding}
::: {.p-blue}
Cloud-SPAN trains researchers, and the research software engineers that support them, to run specialised analyses on cloud-based high-performance computing (HPC) infrastructure. Cloud-SPAN is developing highly accessible resources which integrate with existing Carpentries courses.
:::
::: {.p-blue}
We offer Diversity Scholarships to cover travel and/or childcare to enable members of underrepresented groups to participate in online or in-person training.
:::
:::
:::

::: {.h2}
Challenges in Environmental 'Omics
</h2>
:::

<section class="side-padding">
<div class="responsive gallery">
<section class="container">
<div class="responsive">
<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 gallery">
<div class="responsive">
<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 gallery">
<div class="responsive">
<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 gallery">
<div class="responsive">
<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>
Expand All @@ -55,14 +60,16 @@ Challenges in Environmental 'Omics
</class>

</section>

<div class="clearfix"></div>

<h2>
Our Solutions
</h2>

<section class="side-padding">
<div class="responsive gallery">
<div class="responsive gallery">

<a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html">
<img src="images/cloud_icon.png" alt="Cloud HPC" width="300" height="auto">
</a>
Expand Down Expand Up @@ -94,7 +101,7 @@ Our Approach
<div class="responsive gallery">
<a target="_blank" href="https://cloud-span.github.io/cloud-span-quarto-site/blogs.html">
<img src="images/community_icon.png" alt="Icon" width="300" height="auto">
</a>
</a>
<div class="desc">We are building a **community of practice**: a community of bioinformaticians who can support one another.</div>
</div>

Expand Down
21 changes: 19 additions & 2 deletions styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ $link-color: $midnight_green; // hyperlinks
/* Flexbox stuff */
display: flex;
justify-content: center;
align-content: center;
align-items: center;
vertical-align: middle;
text-align: center;
Expand Down Expand Up @@ -78,8 +79,22 @@ $link-color: $midnight_green; // hyperlinks
background-position: center center;
}


/* IMAGE GALLERY (based on W3 schools responsive image gallery tutorial) */
div.gallery img {
.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 {
width: 100%;
height: auto;
}
Expand Down Expand Up @@ -120,6 +135,7 @@ div.desc {
}
}


.clearfix:after {
content: "";
display: table;
Expand Down Expand Up @@ -209,4 +225,5 @@ $font-diff-p-blue: ($font-max-p-blue / 1px - $font-min-p-blue / 1px);
img {
max-width: 100%;
height: auto;
}
}

0 comments on commit 258a7b2

Please sign in to comment.