framework for seahawk feature showcase

Author: steph1111

_includes/seahawk-II-rov-features.html

@@ -1,4 +1,4 @@
-<section class="section" id="rov-features">
+<section class="section" id="seahawk-II-rov-features">
     <div class="container">
         <h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
             ROV Features

_includes/seahawk-rov-features.html

@@ -0,0 +1,7 @@
+<section class="section" id="seahawk-rov-features">
+    <div class="container">
+        <h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
+            ROV Features
+        </h2>
+    </div>
+</section>

_includes/seahawk.html

@@ -0,0 +1,8 @@
+<div class="container">
+    <section class="hero" id="seahawk-info-graphic">
+        <figure class="hero-background" style="background-image: url('https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/14d24d1b212df580f18441c23426d07a719ebab4/assets/images/seahawk-II/seahawk-II-info-graphic.webp');">
+        </figure>
+    </section>
+</div>
+
+{% include seahawk-rov-features.html %}

_site/assets/css/style.css

@@ -279,7 +279,7 @@ body { background-color: var(--background); }
     }
 }
 
-#rov-features {
+#seahawk-II-rov-features {
     .features {
         display: flex;
         flex-wrap: wrap;
@@ -351,6 +351,26 @@ body { background-color: var(--background); }
     }
 }
 
+#seahawk-info-graphic {
+    position: relative;
+    height: 80vh;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .hero-background {
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}
+
 #about {
     // three buttons in a line, flexible sizes
     .buttons {

_site/assets/css/style.css.map

@@ -8,6 +8,7 @@ subtitle: "Pioneer First Place Overall MATE World Championship"
 hero-image: https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/what-a-theme-test/assets/images/seahawk/seahawk-hero.webp
 description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 pdf: technical-report-2023.pdf
+showcase: "seahawk.html"
 gallery:
     - image: https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/what-a-theme-test/assets/images/seahawk/gallery-seahawk/bonus-mission.webp
       text: Cabrillo Robotics at the Bonus Mission