Robosub coverimage test

Author: steph1111

_includes/comp-showcase.html

@@ -0,0 +1,12 @@
+<section class="hero" id="comp-showcase">
+    <figure class="hero-background" style="background-image: url('{{page.hero-image}}');">
+        <div class="overlay">
+            <div class="container">
+                <div class="title-text">
+                    <h1 class="title has-text-white-ter is-size-1 has-text-weight-bold">
+                        {{page.title}}
+                    </h1>
+                </div>
+            </div>
+        </div>
+</section>

_site/assets/css/style.css

@@ -910,9 +910,6 @@ body { background-color: var(--background); }
             margin: 0 auto;
             margin-bottom: 1rem;
         }
-        .subtitle {
-            display: none;
-        }
     }
 }
 
@@ -1309,3 +1306,31 @@ body { background-color: var(--background); }
     }
 }
 
+#comp-showcase {
+    position: relative;
+    height: 60vh;
+    background: var(--background);
+
+    .hero-background {
+        width: 100%;
+        height: 100%;
+        background-size: cover;
+        background-position: center;
+        position: relative;
+    }
+    .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.7);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 2rem;
+    }
+    .title-text {
+        text-align: center;
+    }
+}

assets/css/style.scss

@@ -1,7 +1,8 @@
 ---
 layout: comp
 title: "MATE"
-full-logo: "https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/what-a-theme-test/assets/images/mate-logo.webp"
+full-logo: "https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/what-a-theme-test/assets/images/comps/mate-logo.webp"
 title-logo: 
+hero-image: "https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/what-a-theme-test/assets/images/support-us-hero.webp"
 description: "The MATE ROV Competition is an international robotics competition in which teams create underwater Remotely Operated Vehicles (ROVs).  ROVs are piloted, and are typically used for ocean exploration and precise manipulation of objects in hazardous areas. MATE ROV's competition attempts to mirror these missions, with tasks involving coral restoration, mooring array maintenance, and sample collections."
 ---

assets/images/mate-logo.webp renamed to assets/images/comps/mate-logo.webp

@@ -1,7 +1,8 @@
 ---
 layout: comp
 title: "RoboSub"
-full-logo: "https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/what-a-theme-test/assets/images/robosub-logo.webp"
-title-logo: 
+full-logo: "https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/what-a-theme-test/assets/images/comps/robosub-logo.webp"
+title-logo:
+hero-image:  "https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/what-a-theme-test/assets/images/comps/robosub-hero.webp"
 description: "RoboSub is an international robotics competition in which teams compete to create Autonomous Underwater Vehicles (AUVs). These AUVs are completely unmanned, and must use sensor data to navigate and complete various tasks in a live competition. The competition tasks mirror real-world AUV missions, such as seafloor mapping and sonar localisation."
 ---