Fix hero banner on homepage

Set page layout of index.qmd to custom Put homepage text inside <section> with padding via a custom class
Cloud-SPAN · Aug 23, 2023 · b74f229 · b74f229
1 parent 2a3f969
commit b74f229
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 46 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -34,6 +34,7 @@
 <script src="site_libs/quarto-html/quarto.js"></script>
 <script src="site_libs/quarto-html/popper.min.js"></script>
 <script src="site_libs/quarto-html/tippy.umd.min.js"></script>
+<script src="site_libs/quarto-html/anchor.min.js"></script>
 <link href="site_libs/quarto-html/tippy.css" rel="stylesheet">
 <link href="site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
 <script src="site_libs/bootstrap/bootstrap.min.js"></script>
@@ -62,7 +63,7 @@
 
 </head>
 
-<body class="nav-fixed">
+<body class="nav-fixed fullcontent">
 
 <div id="quarto-search-results"></div>
   <header id="quarto-header" class="headroom fixed-top">
@@ -107,28 +108,30 @@
     </nav>
 </header>
 <!-- content -->
-<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-full page-navbar">
+<div id="quarto-content" class="quarto-container page-layout-custom page-navbar">
 <!-- sidebar -->
 <!-- margin-sidebar -->
-
 <!-- main -->
-<div class="quarto-about-jolla column-page">
-  <img src="images/clouds_cropped.jpg" class="about-image
-  rectangle " style="width: 70em;">
- <header id="title-block-header" class="quarto-title-block default">
-<div class="quarto-title">
-<h1 class="title">Cloud-SPAN</h1>
-</div>
-<div class="quarto-title-meta">
-  </div>
-</header><main class="content column-page" id="quarto-document-content">
-<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>
-<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>
 
 
-</main>  
-</div>
- <!-- /main -->
+
+<section class="hero">
+<h1 class="home_title">
+Welcome to Cloud-SPAN
+</h1>
+</section>
+<section class="padded">
+<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>
+<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>
+</section>
+
+
+
+
 <script id="quarto-html-after-body" type="application/javascript">
 window.document.addEventListener("DOMContentLoaded", function (event) {
   const toggleBodyColorMode = (bsSheetEl) => {
@@ -149,6 +152,13 @@ <h1 class="title">Cloud-SPAN</h1>
     }
   }
   toggleBodyColorPrimary();  
+  const icon = "";
+  const anchorJS = new window.AnchorJS();
+  anchorJS.options = {
+    placement: 'right',
+    icon: icon
+  };
+  anchorJS.add('.anchored');
   const isCodeAnnotation = (el) => {
     for (const clz of el.classList) {
       if (clz.startsWith('code-annotation-')) {                     

diff --git a/docs/search.json b/docs/search.json
@@ -13,13 +13,6 @@
     "section": "",
     "text": "No matching items"
   },
-  {
-    "objectID": "index.html",
-    "href": "index.html",
-    "title": "Cloud-SPAN",
-    "section": "",
-    "text": "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.\nWe offer Diversity Scholarships to cover travel and/or childcare to enable members of underrepresented groups to participate in online or in-person training."
-  },
   {
     "objectID": "self_study/Create Your Own AWS Instance/index.html",
     "href": "self_study/Create Your Own AWS Instance/index.html",

diff --git a/docs/site_libs/bootstrap/bootstrap.min.css b/docs/site_libs/bootstrap/bootstrap.min.css
diff --git a/docs/images/clouds_cropped.jpg → ..._libs/bootstrap/images/clouds_cropped.jpg b/docs/images/clouds_cropped.jpg → ..._libs/bootstrap/images/clouds_cropped.jpg
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
@@ -2,46 +2,46 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/about.html</loc>
-    <lastmod>2023-08-22T15:36:33.444Z</lastmod>
+    <lastmod>2023-08-23T15:18:05.443Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/blogs.html</loc>
-    <lastmod>2023-08-22T15:36:35.381Z</lastmod>
+    <lastmod>2023-08-23T15:18:07.109Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/index.html</loc>
-    <lastmod>2023-08-22T15:36:37.258Z</lastmod>
+    <lastmod>2023-08-23T15:18:08.733Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/self_study/Create Your Own AWS Instance/index.html</loc>
-    <lastmod>2023-08-22T15:36:38.853Z</lastmod>
+    <lastmod>2023-08-23T15:18:10.370Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/self_study/Genomics/index.html</loc>
-    <lastmod>2023-08-22T15:36:40.595Z</lastmod>
+    <lastmod>2023-08-23T15:18:11.847Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/self_study/Metagenomics for Microbiologists/index.html</loc>
-    <lastmod>2023-08-22T15:36:42.190Z</lastmod>
+    <lastmod>2023-08-23T15:18:13.347Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/self_study/Prenomics/index.html</loc>
-    <lastmod>2023-08-22T15:36:43.868Z</lastmod>
+    <lastmod>2023-08-23T15:18:14.918Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/self_study_courses.html</loc>
-    <lastmod>2023-08-22T15:36:45.976Z</lastmod>
+    <lastmod>2023-08-23T15:18:16.887Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/upcoming/Core R/index.html</loc>
-    <lastmod>2023-08-22T15:36:47.611Z</lastmod>
+    <lastmod>2023-08-23T15:18:18.489Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/upcoming/NERC Metagenomics/index.html</loc>
-    <lastmod>2023-08-22T15:36:49.159Z</lastmod>
+    <lastmod>2023-08-23T15:18:19.889Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/upcoming_courses.html</loc>
-    <lastmod>2023-08-22T15:36:50.943Z</lastmod>
+    <lastmod>2023-08-23T15:18:21.731Z</lastmod>
   </url>
 </urlset>
diff --git a/images/clouds.jpg b/images/clouds.jpg
diff --git a/index.qmd b/index.qmd
@@ -1,13 +1,19 @@
 ---
-title: Cloud-SPAN
-page-layout: full
-image: images/clouds_cropped.jpg
-about:
-  template: jolla
-  image-shape: rectangle
-  image-width: 70em
+# title: Cloud-SPAN
+# image: images/clouds_cropped.jpg
+# about:
+#   template: jolla
+#   image-shape: rectangle
+#   image-width: 70em
+page-layout: custom
 ---
 
-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.
+<section class="hero">
+  <h1 class="home_title">Welcome to Cloud-SPAN</h1>
+</section>
 
-We offer Diversity Scholarships to cover travel and/or childcare to enable members of underrepresented groups to participate in online or in-person training.
+<section class="padded">
+<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>
+
+<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>
+</section>
diff --git a/styles.scss b/styles.scss
@@ -24,3 +24,43 @@ $link-color: $midnight_green; // hyperlinks
 
 /*-- scss:rules --*/
 
+/* The hero image */
+
+.hero {
+    /* Sizing */
+    width: 100vw;
+    height: 50vh;
+
+    /* Flexbox stuff */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* Text styles */
+    text-align: center;
+    color: white;
+
+    /* Background styles */
+    background-image: linear-gradient(rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)), url('images/clouds_cropped.jpg');
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+.home_title {
+    /* Text styles */
+    font-size: 5em;
+
+    /* Margins */
+    margin-top: 0;
+    margin-bottom: 0.5em;
+
+    vertical-align: text-bottom;
+}
+
+.padded {
+  margin-left: 22em;
+  margin-right: 22em;
+  margin-top: 3em;
+}