Updating events

Adding new cave outing pdf
Removing merit badge page
Removing old pdfs

source/src/app/app.routes.ts

@@ -6,6 +6,8 @@ import {FormsComponent} from './forms/forms.component';
 import {CommitteeComponent} from './committee/committee.component';
 import {YouthLeadershipComponent} from './youth-leadership/youth-leadership.component';
 import {FundraisingComponent} from './fundraising/fundraising.component';
+import {InfoComponent} from "./info/info.component";
+import {MeritBadgeLibraryComponent} from "./merit-badge-library/merit-badge-library.component";
 
 export const routes: Routes = [
   {
@@ -35,5 +37,13 @@ export const routes: Routes = [
   {
     path: 'fundraising',
     component: FundraisingComponent
+  },
+  {
+    path: 'info',
+    component: InfoComponent
+  },
+  {
+    path: 'library',
+    component: MeritBadgeLibraryComponent
   }
 ];

source/src/app/footer/footer.component.html

@@ -1,30 +1,33 @@
-<div [class]="{'footer': !mobileService.isMobile(), 'footer-mobile': mobileService.isMobile()}">
-  <footer class="pv4 ph3 ph5-m ph6-l bg-black">
-    <small class="f6 db tc white">
-      © 2025
-      <b class="ttu">
-        Troop 2020G - Columbiana
-      </b>
-    </small>
-    <div class="tc mt3">
+<div class="footer">
+  <footer class="pv2 ph2 ph1-ns tc bg-black">
+    <a class="link dim gray dib h1 w1 br-100 mr3"
+       href="https://www.facebook.com/share/1Sbdr1Ho2y/"
+       title="Troop 20 Facebook">
+      <svg data-icon="facebook" viewBox="0 0 32 32" style="fill:currentcolor">
+        <title>facebook icon</title>
+        <path
+          d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
+      </svg>
+    </a>
+    <a class="link dim gray dib h1 w1 br-100 mr3"
+       href="mailto:troop2020g@gmail.com"
+       title="Email Us">
+      <svg data-icon="email" viewBox="0 0 8 6" style="fill:currentcolor">
+        <title>Email Us</title>
+        <path
+          d="m0 0h8v6h-8zm.75 .75v4.5h6.5v-4.5zM0 0l4 3 4-3v1l-4 3-4-3z"></path>
+      </svg>
+    </a>
+    <div class="mt2">
       <a href="https://www.scouting.org"
          target="_blank"
-         title="Scouting America"
-         class="f6 dib ph2 link white dim">
-        Scouting America
-      </a>
+         class="f6 link dim gray dib mr3 mr4-ns">Scouting America</a>
       <a href="https://www.buckeyecouncil.org"
          target="_blank"
-         title="Terms"
-         class="f6 dib ph2 link white dim">
-        Buckeye Council
-      </a>
+         class="f6 link dim gray dib mr3 mr4-ns">Buckeye Council</a>
       <a href="https://www.fortyandeight.org"
          target="_blank"
-         title="Privacy"
-         class="f6 dib ph2 link white dim">
-        40 & 8
-      </a>
+         class="f6 link dim gray dib">40 & 8</a>
     </div>
   </footer>
 </div>

source/src/app/footer/footer.component.scss

@@ -4,10 +4,3 @@
   bottom: 0;
   width: 100%;
 }
-
-.footer-mobile {
-  position: static;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-}

source/src/app/footer/footer.component.ts

@@ -1,12 +1,12 @@
-import {Component, inject} from '@angular/core';
-import {MobileService} from '../mobile.service';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-footer',
-  imports: [],
+  imports: [
+  ],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss'
 })
 export class FooterComponent {
-  public mobileService = inject(MobileService);
+
 }

source/src/app/forms/forms.component.html

@@ -1,46 +1,48 @@
-<article class="center mw5 mw6-ns hidden ba mv4">
-  <h1 class="f4 bg-near-black white mv0 pv2 ph3">Youth Application</h1>
-  <div class="pa3 bt bg-light-blue">
-    <p class="f6 f5-ns lh-copy measure mv0">
-      <a
-        href="https://filestore.scouting.org/filestore/pdf/524-406.pdf?_gl=1*wtt3bs*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1MzM5LjU2LjAuMA..&_ga=2.6189623.583820647.1679520579-13622772.1675274891"
-        target="_blank">
-        Download and fill out the form
-      </a>
-    </p>
-  </div>
-</article>
-<article class="center mw5 mw6-ns hidden ba mv4">
-  <h1 class="f4 bg-near-black white mv0 pv2 ph3">Adult Leader Application</h1>
-  <div class="pa3 bt bg-light-blue">
-    <p class="f6 f5-ns lh-copy measure mv0">
-      <a href="https://filestore.scouting.org/filestore/pdf/524-501.pdf" target="_blank">
-        Download and fill out the form
-      </a>
-    </p>
-  </div>
-</article>
-<article class="center mw5 mw6-ns hidden ba mv4">
-  <h1 class="f4 bg-near-black white mv0 pv2 ph3">Merit Badge Councilor Application</h1>
-  <div class="pa3 bt bg-light-blue">
-    <p class="f6 f5-ns lh-copy measure mv0">
-      <a
-        href="https://filestore.scouting.org/filestore/pdf/34405.pdf?_gl=1*1hlrsjt*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1NDE2LjYwLjAuMA..&_ga=2.61297192.583820647.1679520579-13622772.1675274891"
-        target="_blank">
-        Download and fill out the form
-      </a>
-    </p>
-  </div>
-</article>
-<article class="center mw5 mw6-ns hidden ba mv4">
-  <h1 class="f4 bg-near-black white mv0 pv2 ph3">BSA Medical Form</h1>
-  <div class="pa3 bt bg-light-blue">
-    <p class="f6 f5-ns lh-copy measure mv0">
-      <a href="https://filestore.scouting.org/filestore/healthsafety/pdf/680-001_abc.pdf" target="_blank">
-        Download and fill out the form
-      </a>
-      <br/>
-      Forms A, B, and C are required for Summer Camp
-    </p>
-  </div>
-</article>
+<div [class]="{'': !mobileService.isMobile(), 'mb5': mobileService.isMobile()}">
+  <article class="center mw5 mw6-ns hidden ba mv4">
+    <h1 class="f4 bg-near-black white mv0 pv2 ph3">Youth Application</h1>
+    <div class="pa3 bt bg-light-blue">
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="https://filestore.scouting.org/filestore/pdf/524-406.pdf?_gl=1*wtt3bs*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1MzM5LjU2LjAuMA..&_ga=2.6189623.583820647.1679520579-13622772.1675274891"
+          target="_blank">
+          Download and fill out the form
+        </a>
+      </p>
+    </div>
+  </article>
+  <article class="center mw5 mw6-ns hidden ba mv4">
+    <h1 class="f4 bg-near-black white mv0 pv2 ph3">Adult Leader Application</h1>
+    <div class="pa3 bt bg-light-blue">
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a href="https://filestore.scouting.org/filestore/pdf/524-501.pdf" target="_blank">
+          Download and fill out the form
+        </a>
+      </p>
+    </div>
+  </article>
+  <article class="center mw5 mw6-ns hidden ba mv4">
+    <h1 class="f4 bg-near-black white mv0 pv2 ph3">Merit Badge Councilor Application</h1>
+    <div class="pa3 bt bg-light-blue">
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="https://filestore.scouting.org/filestore/pdf/34405.pdf?_gl=1*1hlrsjt*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1NDE2LjYwLjAuMA..&_ga=2.61297192.583820647.1679520579-13622772.1675274891"
+          target="_blank">
+          Download and fill out the form
+        </a>
+      </p>
+    </div>
+  </article>
+  <article class="center mw5 mw6-ns hidden ba mv4">
+    <h1 class="f4 bg-near-black white mv0 pv2 ph3">BSA Medical Form</h1>
+    <div class="pa3 bt bg-light-blue">
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a href="https://filestore.scouting.org/filestore/healthsafety/pdf/680-001_abc.pdf" target="_blank">
+          Download and fill out the form
+        </a>
+        <br/>
+        Forms A, B, and C are required for Summer Camp
+      </p>
+    </div>
+  </article>
+</div>

source/src/app/forms/forms.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
+import {MobileService} from '../mobile.service';
 
 @Component({
   selector: 'app-forms',
@@ -7,5 +8,5 @@ import { Component } from '@angular/core';
   styleUrl: './forms.component.scss'
 })
 export class FormsComponent {
-
+  public mobileService = inject(MobileService);
 }

source/src/app/fundraising/fundraising.component.html

@@ -1,32 +1,31 @@
-<div class="row row-center">
-  <article class="bg-light-blue center mw5 ba b--black-10 mv4">
-    <div class="pv2 ph3">
-      <h1 class="f6 ttu tracked">Summer Cheese Steak Fundraiser</h1>
-    </div>
-    <img
-      src="https://www.simplyrecipes.com/thmb/CYRMLG6E3oa5TQMfvNrwknw-jbU=/5925x0/filters:no_upscale():max_bytes(150000):strip_icc()/Simply-Recipes-Philly-Cheesesteak-LEAD-2-b182ca21d19344159d44efd361db1477.jpg"
-      class="w-100 db" alt="Flowers">
-    <div class="pa3">
-      <p>
-        Join us on June 28th for delicious Philly Cheese Steak Sandwiches! More details will be posted soon!
-      </p>
-    </div>
-  </article>
-  <article style="padding-bottom: 5px;" class="bg-light-blue center mw5 ba b--black-10 mv4">
-    <div class="pv2 ph3">
-      <h1 class="f6 ttu tracked">Spring Flower Fundraiser</h1>
-    </div>
-    <img src="https://www.iraisemore.com/cdn/shop/files/wp85_1024x1024@2x.jpg?v=1734105510" class="w-100 db"
-         alt="Flowers">
-    <div class="pa3">
-      <p>
-        Fundraiser benefits the Troop and individual Scouts. Fundraiser runs from February 27th until March 20th.
-        Please enter the <b>Scout's name</b> and <b>Scouting America Troop 2020G</b> in the "Who are you Supporting"
-        fields in the checkout cart.
-      </p>
-      <p>
-        <b>This fundraiser has concluded.</b>
-      </p>
-    </div>
-  </article>
+<div [class]="{'': !mobileService.isMobile(), 'mb5': mobileService.isMobile()}">
+  <div class="row row-center">
+    <article class="bg-light-blue center mw5 ba b--black-10 mv4">
+      <div class="pv2 ph3">
+        <h1 class="f6 ttu tracked">Summer Cheese Steak Fundraiser</h1>
+      </div>
+      <a href="fundraiser/philly-flier.png">
+        <img
+          src="fundraiser/philly-flier.png"
+          class="w-100 db" alt="Flowers">
+      </a>
+    </article>
+    <article class="bg-light-blue center mw5 ba b--black-10 mv4">
+      <div class="pv2 ph3">
+        <h1 class="f6 ttu tracked">Spring Flower Fundraiser</h1>
+      </div>
+      <img src="https://www.iraisemore.com/cdn/shop/files/wp85_1024x1024@2x.jpg?v=1734105510" class="w-100 db"
+           alt="Flowers">
+      <div class="pa3">
+        <p>
+          Fundraiser benefits the Troop and individual Scouts. Fundraiser runs from February 27th until March 20th.
+          Please enter the <b>Scout's name</b> and <b>Scouting America Troop 2020G</b> in the "Who are you Supporting"
+          fields in the checkout cart.
+        </p>
+        <p>
+          <b>This fundraiser has concluded.</b>
+        </p>
+      </div>
+    </article>
+  </div>
 </div>

source/src/app/fundraising/fundraising.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
+import {MobileService} from '../mobile.service';
 
 @Component({
   selector: 'app-fundraising',
@@ -7,5 +8,5 @@ import { Component } from '@angular/core';
   styleUrl: './fundraising.component.scss'
 })
 export class FundraisingComponent {
-
+  public mobileService = inject(MobileService);
 }

source/src/app/info/info.component.html

@@ -0,0 +1,80 @@
+<div [class]="{'': !mobileService.isMobile(), 'mb5': mobileService.isMobile()}">
+  <article class="center mw5 mw6-ns hidden ba mv4">
+    <h1 class="f4 bg-near-black white mv0 pv2 ph3">General Troop Information</h1>
+    <div class="pa3 bt bg-light-blue">
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="https://docs.google.com/document/d/1al1knH02-Q8JXdgfq3pu9rHKHBGwfdjn8ATFFrvAfZk/edit?tab=t.0"
+          target="_blank">
+          General Weekend Packing List
+        </a>
+      </p>
+    </div>
+  </article>
+  <article class="center mw5 mw6-ns hidden ba mv4">
+    <h1 class="f4 bg-near-black white mv0 pv2 ph3">Summer Camp 2025</h1>
+    <div class="pa3 bt bg-light-blue">
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="https://drive.google.com/file/d/1aRW5LI044sdhQ64d-dmaZycnDAzv90Nk/view"
+          target="_blank">
+          Summer Camp Adult Leader Guide
+        </a>
+      </p>
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="upcoming-events/summer-camp-gear-drop-off.pdf"
+          target="_blank">
+          6/12/2025 - Summer Camp Gear Drop Off
+        </a>
+      </p>
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="upcoming-events/summer-camp-2025.pdf"
+          target="_blank">
+          6/15/2025 - Summer Camp
+        </a>
+      </p>
+    </div>
+  </article>
+  <article class="center mw5 mw6-ns hidden ba mv4">
+    <h1 class="f4 bg-near-black white mv0 pv2 ph3">Upcoming Events</h1>
+    <div class="pa3 bt bg-light-blue">
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="upcoming-events/upcoming-events.pdf"
+          target="_blank">
+          Upcoming Events May - August
+        </a>
+      </p>
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="upcoming-events/july-board-of-review.pdf"
+          target="_blank">
+          7/10/2025 - Board of Review
+        </a>
+      </p>
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="upcoming-events/cave-cavern-outing.pdf"
+          target="_blank">
+          7/26/2025 - Caving Event - Bring a friend
+        </a>
+      </p>
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="upcoming-events/five-year-picnic.pdf"
+          target="_blank">
+          8/2/2025 - Court of Honor - 5 Year Celebration
+        </a>
+      </p>
+      <p class="f6 f5-ns lh-copy measure mv0">
+        <a
+          href="upcoming-events/fundamentals-of-fishing.pdf"
+          target="_blank">
+          8/30/2025 - Fundamentals of Fishing
+        </a>
+      </p>
+    </div>
+  </article>
+</div>

source/src/app/info/info.component.ts

@@ -0,0 +1,12 @@
+import {Component, inject} from '@angular/core';
+import {MobileService} from '../mobile.service';
+
+@Component({
+  selector: 'app-info',
+  imports: [],
+  templateUrl: './info.component.html',
+  styleUrl: './info.component.scss'
+})
+export class InfoComponent {
+  public mobileService = inject(MobileService);
+}

source/src/app/merit-badge-library/merit-badge-library.component.html

@@ -0,0 +1,16 @@
+<article>
+  <h2 class="f3 fw4 pa3 mv0">Merit Badges</h2>
+  <div class="cf pa2">
+    <div class="fl w-50 w-25-m w-20-l pa2 bg-light-blue">
+      <a href="https://troop5.net/wp-content/uploads/2019/07/wilderness-survival-merit-badge-pamphlet-35966.pdf"
+         target="_blank" class="db link dim tc">
+        <img src="merit-badges/wilderness-survival.png"
+             alt="Wilderness Survival" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">Wilderness Survival</dd>
+        </dl>
+      </a>
+    </div>
+  </div>
+</article>

source/src/app/merit-badge-library/merit-badge-library.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-merit-badge-library',
+  imports: [],
+  templateUrl: './merit-badge-library.component.html',
+  styleUrl: './merit-badge-library.component.scss'
+})
+export class MeritBadgeLibraryComponent {
+
+}

source/src/app/top-nav/top-nav.component.html

@@ -1,12 +1,18 @@
 <header class="bg-black w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
   <nav class="f6 fw6 ttu tracked">
     <a class="link dim white dib mr3" [routerLink]="['/']" title="Home">Home</a>
-    <a class="link dim white dib mr3" [routerLink]="['/about']" title="About">About</a>
-    <a class="link dim white dib mr3" [routerLink]="['/youth-leadership']" title="Youth Leadership">Youth Leadership</a>
-    <a class="link dim white dib mr3" [routerLink]="['/leadership']" title="Leaders">Adult Leadership</a>
-    <a class="link dim white dib mr3" [routerLink]="['/committee']" title="Committee">Committee</a>
-    <a class="link dim white dib mr3" [routerLink]="['/fundraising']" title="Fundraising">Fundraising</a>
+    <a class="link dim white dib mr3" [routerLink]="['about']" title="About">About</a>
+    <a class="link dim white dib mr3" [routerLink]="['youth-leadership']" title="Youth Leadership">Youth Leadership</a>
+    <a class="link dim white dib mr3" [routerLink]="['leadership']" title="Leaders">Adult Leadership</a>
+    <a class="link dim white dib mr3" [routerLink]="['committee']" title="Committee">Committee</a>
+    <a class="link dim white dib mr3" [routerLink]="['fundraising']" title="Fundraising">Fundraising</a>
     <a class="link dim white dib mr3" [routerLink]="['forms']" title="Forms">Forms</a>
-    <a class="link dim white dib mr3" href="mailto:troop2020g@gmail.com" title="Contact Us">Contact Us</a>
+    <a class="link dim white dib mr3" [routerLink]="['info']" title="Info">Info</a>
+    <a class="link dim white dib mr3"
+       href="https://www.scouting.org/skills/merit-badges/all/"
+       target="_blank"
+       title="Merit Badge Library">
+      Merit Badges
+    </a>
   </nav>
 </header>

source/src/app/youth-leadership/youth-leadership.component.html

@@ -1,82 +1,85 @@
 @if (mobileService.isMobile()) {
-  <ul class="list pl0 mt0 measure center">
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/spl.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Juliahna Seidler</span>
-      </div>
-    </li>
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/aspl.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Kenzie Witherow</span>
-      </div>
-    </li>
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/aspl.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Carlie Sorrell</span>
-      </div>
-    </li>
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/qm.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Ella Mercer</span>
-      </div>
-    </li>
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/scribe.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Nora Wilson</span>
-      </div>
-    </li>
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Avery Elliot</span>
-      </div>
-    </li>
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Locklyn Linebaugh</span>
-      </div>
-    </li>
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/historian.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Natalie Sorrell</span>
-      </div>
-    </li>
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/librarian.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Kenzie Elliot</span>
-      </div>
-    </li>
-    <li
-      class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
-      <img class="w2 h2 w3-ns h3-ns br-100" src="titles/dc.png"/>
-      <div class="pl3 flex-auto">
-        <span class="f6 db black-70">Locklyn Linebaugh</span>
-      </div>
-    </li>
-  </ul>
+  <div class="mb5">
+    <ul class="list pl0 mt0 measure center">
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/spl.png" alt="Senior Patrol Leader"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Juliahna Seidler</span>
+        </div>
+      </li>
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/aspl.png" alt="Assistant Senior Patrol Leader"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Kenzie Witherow</span>
+        </div>
+      </li>
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/oeg.png" alt="Outdoor Ethics Guide"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Carlie Sorrell</span>
+        </div>
+      </li>
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/qm.png" alt="Quartermaster"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Ella Mercer</span>
+        </div>
+      </li>
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/scribe.png" alt="Scribe"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Nora Wilson</span>
+        </div>
+      </li>
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png" alt="Patrol Leader"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Avery Elliot</span>
+        </div>
+      </li>
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png" alt="Patrol Leader"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Locklyn Linebaugh</span>
+        </div>
+      </li>
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/historian.png" alt="Historian"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Natalie Sorrell</span>
+        </div>
+      </li>
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/librarian.png" alt="Librarian"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Kenzie Elliot</span>
+        </div>
+      </li>
+      <li
+        class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
+        <img class="w2 h2 w3-ns h3-ns br-100" src="titles/dc.png" alt="Den Chief"/>
+        <div class="pl3 flex-auto">
+          <span class="f6 db black-70">Locklyn Linebaugh</span>
+        </div>
+      </li>
+    </ul>
+  </div>
 } @else {
   <div class="cf">
     <div class="fl w-20 tc pv1 bg-transparent">
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
-          <img src="titles/spl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
+          <img src="titles/spl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"
+               alt="Senior Patrol Leader">
           <h1 class="f3 mb2">Juliahna Seidler</h1>
         </div>
       </article>
@@ -85,7 +88,7 @@
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
           <img src="titles/aspl.png" class="br-100 h4 w4 dib ba b--black-05 pa2"
-               title="Assistant Senior Patrol Leader">
+               title="Assistant Senior Patrol Leader" alt="Assistant Senior Patrol Leader">
           <h1 class="f3 mb2">Kenzie Witherow</h1>
         </div>
       </article>
@@ -93,7 +96,8 @@
     <div class="fl w-20 tc pv1 bg-transparent">
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
-          <img src="titles/oeg.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Outdoor Ethics Guide">
+          <img src="titles/oeg.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Outdoor Ethics Guide"
+               alt="Outdoor Ethics Guide">
           <h1 class="f3 mb2">Carlie Sorrell</h1>
         </div>
       </article>
@@ -101,7 +105,8 @@
     <div class="fl w-20 tc pv1 bg-transparent">
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
-          <img src="titles/qm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Quarter Master">
+          <img src="titles/qm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Quarter Master"
+               alt="Quartermaster">
           <h1 class="f3 mb2">Ella Mercer</h1>
         </div>
       </article>
@@ -109,7 +114,7 @@
     <div class="fl w-20 tc pv1 bg-transparent">
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
-          <img src="titles/scribe.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scribe">
+          <img src="titles/scribe.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scribe" alt="Scribe">
           <h1 class="f3 mb2">Nora Wilson</h1>
         </div>
       </article>
@@ -119,7 +124,8 @@
     <div class="fl w-20 tc pv1 bg-transparent">
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
-          <img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader">
+          <img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader"
+               alt="Patrol Leader">
           <h1 class="f3 mb2">Avery Elliot</h1>
         </div>
       </article>
@@ -127,7 +133,8 @@
     <div class="fl w-20 tc pv1 bg-transparent">
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
-          <img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader">
+          <img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader"
+               alt="Patrol Leader">
           <h1 class="f3 mb2">Locklyn Linebaugh</h1>
         </div>
       </article>
@@ -135,7 +142,7 @@
     <div class="fl w-20 tc pv1 bg-transparent">
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
-          <img src="titles/historian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Historian">
+          <img src="titles/historian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Historian" alt="Historian">
           <h1 class="f3 mb2">Natalie Sorrell</h1>
         </div>
       </article>
@@ -143,7 +150,7 @@
     <div class="fl w-20 tc pv1 bg-transparent">
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
-          <img src="titles/librarian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Librarian">
+          <img src="titles/librarian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Librarian" alt="Librarian">
           <h1 class="f3 mb2">Kenzie Elliot</h1>
         </div>
       </article>
@@ -151,7 +158,7 @@
     <div class="fl w-20 tc pv1 bg-transparent">
       <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
         <div class="tc">
-          <img src="titles/dc.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Den Chief">
+          <img src="titles/dc.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Den Chief" alt="Den Chief">
           <h1 class="f3 mb2">Locklyn Linebaugh</h1>
         </div>
       </article>

source/src/styles.scss

@@ -3,6 +3,7 @@
 body, html {
   height: 100%;
   margin: 0;
+  overflow: scroll;
   background-image: url('https://images.unsplash.com/photo-1505490096310-204ef067fe6b?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
   background-color: black;
 }
@@ -15,3 +16,10 @@ body, html {
     justify-content: center;
   }
 }
+
+.container {
+  min-height: 70%;
+  min-height: -webkit-calc(100% - 186px);
+  min-height: -moz-calc(100% - 186px);
+  min-height: calc(100% - 186px);
+}