More changes to styling incl new content blocks and title styles

about.qmd

@@ -2,6 +2,7 @@
 title: "About"
 title-block-banner: false
 max-width: 1400px
+image: images/logo_cloud_only.png
 ---
 
 Cloud-SPAN trains researchers, and the research software engineers that support them, to run specialised analyses on cloud-based high-performance computing (HPC) infrastructure.

docs/sitemap.xml

@@ -2,7 +2,7 @@
 <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-09-21T11:53:54.524Z</lastmod>
+    <lastmod>2023-09-21T14:33:12.835Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/blogs/05-22-22/index.html</loc>
@@ -30,7 +30,7 @@
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/index.html</loc>
-    <lastmod>2023-09-21T11:54:32.926Z</lastmod>
+    <lastmod>2023-09-21T14:51:18.804Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/self_study/Create Your Own AWS Instance/index.html</loc>
@@ -66,7 +66,7 @@
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/upcoming_courses.html</loc>
-    <lastmod>2023-09-21T11:12:18.457Z</lastmod>
+    <lastmod>2023-09-21T14:38:17.823Z</lastmod>
   </url>
   <url>
     <loc>https://cloud-span.github.io/cloud-span-quarto-site/CopyOfindex.html</loc>

index.qmd

@@ -2,6 +2,7 @@
 page-layout: custom
 listing:
   id: homepage-content
+  #type: grid
   template: gallery.ejs
   contents: homepage-content.yaml
   grid-item-border: false

styles.scss

@@ -56,11 +56,6 @@ $link-color: $midnight_green; // hyperlinks
     text-align: center;
     margin: 0.625rem;
 }
-.hero-title {
-    font-size: 4.5rem;
-    font-weight: bold;
-    margin-bottom: 0;
-}
 
 .content-container {
   padding-left: 1.5em;
@@ -77,6 +72,31 @@ $link-color: $midnight_green; // hyperlinks
   background-color: $blue_green;
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1 {
+  color: $midnight_green;
+  font-size: 48px;
+}
+
+.pullout-container {
+  padding-left: 1.2em;
+  padding-right: 1.2em;
+  padding-top: 2.5em;
+}
+
+.pullout-block {
+  text-align: center;
+  max-width: calc(1000px + 6vw);
+  margin: 0 auto;
+  padding-top: 1em;
+  padding-bottom: 1.8em; 
+  box-sizing: border-box;
+}
+
 
 /* IMAGE GALLERY (based on W3 schools responsive image gallery tutorial) */
 div.gallery img {
@@ -132,102 +152,59 @@ $mobile: 500px; // Screen min
 $desktop: 1200px; // Screen max
 $screen-diff: ($desktop / 1px - $mobile / 1px);
 
-//font size variables for home-sub text (section titles on homepage)
-$font-min-home-sub: 30px; 
-$font-max-home-sub: 40px;
-$font-diff-home-sub: ($font-max-home-sub / 1px - $font-min-home-sub / 1px);
+//font size variables for hero-title text
+$font-min-hero-title: 50px; 
+$font-max-hero-title: 90px;
+$font-diff-hero-title: ($font-max-hero-title / 1px - $font-min-hero-title / 1px);
 
-.home-sub {
+.hero-title {
   text-align: center;
-  color: $blue_green;
+  color: white;
   font-weight: bold;
   // Mobile
   @media (max-width: 599px) {
-    font-size: $font-min-home-sub;
+    font-size: $font-min-hero-title;
   }
 
   // Everything in between mobile (600px) to desktop (1200px)
   @media (min-width: 600px) and (max-width: 1200px) {
-    font-size: calc(#{$font-min-home-sub} + (100vw - #{$mobile}) / #{$screen-diff} * #{$font-diff-home-sub});
+    font-size: calc(#{$font-min-hero-title} + (100vw - #{$mobile}) / #{$screen-diff} * #{$font-diff-hero-title});
   }
 // Desktop
   @media (min-width: 1201px) {
-    font-size: $font-max-home-sub;
+    font-size: $font-max-hero-title;
   }
 }
 
-//font size variables for p-blue text (p text inside blue flexbox)
-$font-min-p-blue: 16px; 
-$font-max-p-blue: 20px;
-$font-diff-p-blue: ($font-max-p-blue / 1px - $font-min-p-blue / 1px);
+//font size variables for home-sub text (section titles on homepage)
+$font-min-home-sub: 30px; 
+$font-max-home-sub: 40px;
+$font-diff-home-sub: ($font-max-home-sub / 1px - $font-min-home-sub / 1px);
 
-.p-blue {
-  text-align: left;
-  color: $seasalt;
-  margin-top: 5px;
-  margin-bottom: 25px;
+.home-sub {
+  text-align: center;
+  color: $blue_green;
+  font-weight: bold;
   // Mobile
   @media (max-width: 599px) {
-    font-size: $font-min-p-blue;
+    font-size: $font-min-home-sub;
   }
 
   // Everything in between mobile (600px) to desktop (1200px)
   @media (min-width: 600px) and (max-width: 1200px) {
-    font-size: calc(#{$font-min-p-blue} + (100vw - #{$mobile}) / #{$screen-diff} * #{$font-diff-p-blue});
+    font-size: calc(#{$font-min-home-sub} + (100vw - #{$mobile}) / #{$screen-diff} * #{$font-diff-home-sub});
   }
 // Desktop
   @media (min-width: 1201px) {
-    font-size: $font-max-p-blue;
+    font-size: $font-max-home-sub;
   }
 }
 
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-h1 {
-  color: $midnight_green;
-  font-size: 48px;
-}
-
-.pullout-container {
-  padding-left: 1.5em;
-  padding-right: 1.5em;
-  padding-top: 2.5em;
-}
-
-.pullout-block {
-  text-align: center;
-  max-width: calc(1000px + 6vw);
-  margin: 0 auto;
-  padding-top: 1em;
-  padding-bottom: 1.8em; 
-  box-sizing: border-box;
-}
 
-.pullout-text h2 {
-  text-align: center;
-  margin-left: 5vw;
-  margin-right: 5vw;
-  color: white;
-  margin-top: 0.5em;
-}
-
-/*
-.pullout-text p {
-  text-align: center;
-  font-family: 'Oswald';
-  font-weight: 500;
-  color: white;
-  margin-left: 1.5em;
-  margin-right: 1.5em;
-  text-transform: uppercase;
-  text-decoration: underline;
-  text-decoration-color: #939bc9;
-  text-decoration-thickness: 3px;
-  margin-bottom: 1.5rem;
-} */
+//font size variables for p-blue text (p text inside blue flexbox)
+$font-min-p-blue: 16px; 
+$font-max-p-blue: 20px;
+$font-diff-p-blue: ($font-max-p-blue / 1px - $font-min-p-blue / 1px);
 
 .pullout-text p {
   text-align: left;