From acc339768e5f58ee74795cc1916db84092f6a6cc Mon Sep 17 00:00:00 2001
From: Tara Wilson <tara@taraformed.com>
Date: Wed, 19 Feb 2025 21:07:32 -0500
Subject: [PATCH] Adding mobile service Adding mobile components

---
 source/src/app/about/about.component.html     |  12 +
 .../app/committee/committee.component.html    | 161 +++++++-----
 .../src/app/committee/committee.component.ts  |   5 +-
 source/src/app/footer/footer.component.html   |   4 +-
 source/src/app/footer/footer.component.scss   |   7 +
 source/src/app/footer/footer.component.ts     |   5 +-
 source/src/app/forms/forms.component.html     |  88 +++----
 source/src/app/home/home.component.html       |   6 +-
 .../app/leadership/leadership.component.html  | 120 +++++----
 .../app/leadership/leadership.component.ts    |   5 +-
 source/src/app/mobile.service.ts              |  13 +
 source/src/app/top-nav/top-nav.component.html |   2 +-
 .../youth-leadership.component.html           | 232 ++++++++++++------
 .../youth-leadership.component.ts             |   5 +-
 source/src/styles.scss                        |   1 +
 15 files changed, 426 insertions(+), 240 deletions(-)
 create mode 100644 source/src/app/mobile.service.ts

diff --git a/source/src/app/about/about.component.html b/source/src/app/about/about.component.html
index e69de29..90e2a0f 100644
--- a/source/src/app/about/about.component.html
+++ b/source/src/app/about/about.component.html
@@ -0,0 +1,12 @@
+<article class="pa3 pa5-ns">
+  <p class="measure lh-copy bg-light-blue">
+    Founded in 2020, Troop 20 develops young women into tomorrow's leaders. The troop is a group of odd ducks enjoying
+    the outdoors through hiking and camping. The troop also goes on additional outings such as day trips to trampoline
+    parks, beaches, zoos, and other places as determined by the troop.
+  </p>
+  <p class="measure lh-copy bg-light-blue">
+    Troop 20 follows the Patrol Method, where the youth leadership, not the adults, plan and organize the troops actives
+    based on monthly themes. The troop is currently working on turning out our first Eagle Scouts - one of the founding members
+    is really close and we hope to celebrate her accomplishments.
+  </p>
+</article>
\ No newline at end of file
diff --git a/source/src/app/committee/committee.component.html b/source/src/app/committee/committee.component.html
index 57f5d17..81465d4 100644
--- a/source/src/app/committee/committee.component.html
+++ b/source/src/app/committee/committee.component.html
@@ -1,62 +1,111 @@
-<article class="vh-100 dt w-100 bg-transparent">
-  <div class="dtc v-mid tc ph3 ph4-l">
-    <div class="dt dt--fixed">
-      <div class="dtc tc pv0 bg-transparent">
-        <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
-          <div class="tc">
-            <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
-            <h1 class="f3 mb2">Richard Simpson</h1>
-            <h2 class="f5 fw4 gray mt0">Chartered Organization Rep</h2>
-          </div>
-        </article>
+@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/committee.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Richard Simpson</span>
+        <span class="f6 db black-70">Chartered Organization Rep</span>
       </div>
-      <div class="dtc tc pv0 bg-transparent">
-        <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
-          <div class="tc">
-            <img src="titles/committeechair.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee Chair">
-            <h1 class="f3 mb2">Rik Linebaugh</h1>
-            <h2 class="f5 fw4 gray mt0">Committee Chair</h2>
-          </div>
-        </article>
+    </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/committeechair.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Rik Linebaugh</span>
+        <span class="f6 db black-70">Committee Chair</span>
       </div>
-      <div class="dtc tc pv0 bg-transparent">
-        <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
-          <div class="tc">
-            <img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster">
-            <h1 class="f3 mb2">Linda Linebaugh</h1>
-            <h2 class="f5 fw4 gray mt0">Scoutmaster</h2>
-          </div>
-        </article>
+    </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/sm.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Linda Linebaugh</span>
+        <span class="f6 db black-70">Scoutmaster</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/committee.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Jaime Seidler</span>
+        <span class="f6 db black-70">Fundraising Chair</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/committee.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Tara Wilson</span>
+        <span class="f6 db black-70">Advancement Chair</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/committee.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Jessica Wilson</span>
+        <span class="f6 db black-70">Secretary</span>
+      </div>
+    </li>
+  </ul>
+} @else {
+  <div class="dt dt--fixed">
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
+          <h1 class="f3 mb2">Richard Simpson</h1>
+          <h2 class="f5 fw4 gray mt0">Chartered Organization Rep</h2>
+        </div>
+      </article>
     </div>
-    <div class="dt dt--fixed">
-      <div class="dtc tc pv0 bg-transparent">
-        <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
-          <div class="tc">
-            <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
-            <h1 class="f3 mb2">Jaime Seidler</h1>
-            <h2 class="f5 fw4 gray mt0">Fundraising Chair</h2>
-          </div>
-        </article>
-      </div>
-      <div class="dtc tc pv0 bg-transparent">
-        <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
-          <div class="tc">
-            <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
-            <h1 class="f3 mb2">Tara Wilson</h1>
-            <h2 class="f5 fw4 gray mt0">Advancement Chair</h2>
-          </div>
-        </article>
-      </div>
-      <div class="dtc tc pv0 bg-transparent">
-        <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
-          <div class="tc">
-            <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
-            <h1 class="f3 mb2">Jessica Wilson</h1>
-            <h2 class="f5 fw4 gray mt0">Secretary</h2>
-          </div>
-        </article>
-      </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committeechair.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee Chair">
+          <h1 class="f3 mb2">Rik Linebaugh</h1>
+          <h2 class="f5 fw4 gray mt0">Committee Chair</h2>
+        </div>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster">
+          <h1 class="f3 mb2">Linda Linebaugh</h1>
+          <h2 class="f5 fw4 gray mt0">Scoutmaster</h2>
+        </div>
+      </article>
     </div>
   </div>
-</article>
\ No newline at end of file
+  <div class="dt dt--fixed">
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
+          <h1 class="f3 mb2">Jaime Seidler</h1>
+          <h2 class="f5 fw4 gray mt0">Fundraising Chair</h2>
+        </div>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
+          <h1 class="f3 mb2">Tara Wilson</h1>
+          <h2 class="f5 fw4 gray mt0">Advancement Chair</h2>
+        </div>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
+          <h1 class="f3 mb2">Jessica Wilson</h1>
+          <h2 class="f5 fw4 gray mt0">Secretary</h2>
+        </div>
+      </article>
+    </div>
+  </div>
+}
\ No newline at end of file
diff --git a/source/src/app/committee/committee.component.ts b/source/src/app/committee/committee.component.ts
index c685300..3b7fbb5 100644
--- a/source/src/app/committee/committee.component.ts
+++ b/source/src/app/committee/committee.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-committee',
@@ -7,5 +8,5 @@ import { Component } from '@angular/core';
   styleUrl: './committee.component.scss'
 })
 export class CommitteeComponent {
-
+  public mobileService = inject(MobileService);
 }
diff --git a/source/src/app/footer/footer.component.html b/source/src/app/footer/footer.component.html
index 086513f..12c555a 100644
--- a/source/src/app/footer/footer.component.html
+++ b/source/src/app/footer/footer.component.html
@@ -1,5 +1,5 @@
-<div class="footer">
-  <footer class="pv4 ph3 ph5-m ph6-l bg-near-black">
+<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">
diff --git a/source/src/app/footer/footer.component.scss b/source/src/app/footer/footer.component.scss
index a58e9e5..b6222ae 100644
--- a/source/src/app/footer/footer.component.scss
+++ b/source/src/app/footer/footer.component.scss
@@ -3,4 +3,11 @@
   left: 0;
   bottom: 0;
   width: 100%;
+}
+
+.footer-mobile {
+  position: static;
+  left: 0;
+  bottom: 0;
+  width: 100%;
 }
\ No newline at end of file
diff --git a/source/src/app/footer/footer.component.ts b/source/src/app/footer/footer.component.ts
index 2e208c3..60200a7 100644
--- a/source/src/app/footer/footer.component.ts
+++ b/source/src/app/footer/footer.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-footer',
@@ -7,5 +8,5 @@ import { Component } from '@angular/core';
   styleUrl: './footer.component.scss'
 })
 export class FooterComponent {
-
+  public mobileService = inject(MobileService);
 }
diff --git a/source/src/app/forms/forms.component.html b/source/src/app/forms/forms.component.html
index c63afb6..9aa9ff5 100644
--- a/source/src/app/forms/forms.component.html
+++ b/source/src/app/forms/forms.component.html
@@ -1,46 +1,46 @@
-<article class="vh-100 dt w-100 bg-transparent">
-  <div class="dtc v-mid tc ph3 ph4-l">
-    <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>
+<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>
\ No newline at end of file
diff --git a/source/src/app/home/home.component.html b/source/src/app/home/home.component.html
index f87dc3c..fe7713c 100644
--- a/source/src/app/home/home.component.html
+++ b/source/src/app/home/home.component.html
@@ -1,6 +1,6 @@
-<article class="vh-100 dt w-100 bg-transparent">
-  <div class="dtc v-mid tc ph3 ph4-l">
+<article class="vh-75 dt w-100">
+  <div class="dtc v-mid tc white ph3 ph4-l">
     <img ngSrc="bsa-logo.png" priority height="336" width="294" alt="Scouting USA Logo"/>
     <h1 class="f3 f2-m f1-l fw2 white mv3">Prepared. For life.</h1>
   </div>
-</article>
+</article>
\ No newline at end of file
diff --git a/source/src/app/leadership/leadership.component.html b/source/src/app/leadership/leadership.component.html
index b53f0a4..6c81390 100644
--- a/source/src/app/leadership/leadership.component.html
+++ b/source/src/app/leadership/leadership.component.html
@@ -1,51 +1,79 @@
-<article class="vh-100 dt w-100 bg-transparent">
-  <div class="dtc v-mid tc ph3 ph4-l">
-    <div class="dt dt--fixed">
-      <div class="dtc tc pv4 bg-transparent">
-        <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
-          <div class="tc">
-            <img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster">
-            <h1 class="f4">Linda Linebaugh</h1>
-            <h2 class="f5">Scoutmaster</h2>
-            <hr class="mw3 bb bw1 b--black-10">
-          </div>
-          <p class="lh-copy measure center f6 black-70">
-            Linda founded Troop 20 - then Troop 40 - in 2020. She received the
-            <a href="https://www.scouting.org/training/resources-for-program-trainers-training-committees/woodbadge/">Wood Badge</a>
-            in 2025. She also finds time to be a Den Leader for Pack 16 in Columbiana where she is developing the next generation of Scouts.
-          </p>
-        </article>
+@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/sm.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Linda Linebaugh</span>
+        <span class="f6 db black-70">Scoutmaster</span>
       </div>
-      <div class="dtc tc pv4 bg-transparent">
-        <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
-          <div class="tc">
-            <img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster">
-            <h1 class="f4">Jaime Seidler</h1>
-            <h2 class="f5">Assistant Scoutmaster</h2>
-            <hr class="mw3 bb bw1 b--black-10">
-          </div>
-          <p class="lh-copy measure center f6 black-70">
-            Jaime joined Troop 20 in 2023 when her daughter crossed over from Cub Scouts.
-            She has taken several leadership trainings and has participated in the summer camp program.
-            She has also accompanied the scouts on several outings, including polar bears.
-          </p>
-        </article>
+    </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/asm.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Jaime Seidler</span>
+        <span class="f6 db black-70">Assistant Scoutmaster</span>
       </div>
-      <div class="dtc tc pv4 bg-transparent">
-        <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
-          <div class="tc">
-            <img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster">
-            <h1 class="f4">Tara Wilson</h1>
-            <h2 class="f5">Assistant Scoutmaster</h2>
-            <hr class="mw3 bb bw1 b--black-10">
-          </div>
-          <p class="lh-copy measure center f6 black-70">
-            Tara is a lifelong Scout, starting her journey back in the early 1990s as a Cub Scout and progressed all the way to Life Scout.
-            She went to the 2001 National Jamboree at Fort AP Hill, Virginia and holds a 5th year Pipestone.
-            She joined Troop 20 in 2025 when her daughter crossed over from Cub Scouts.
-          </p>
-        </article>
+    </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/asm.png"/>
+      <div class="pl3 flex-auto">
+        <span class="f6 db black-70">Tara Wilson</span>
+        <span class="f6 db black-70">Assistant Scoutmaster</span>
       </div>
+    </li>
+  </ul>
+} @else {
+  <div class="dt dt--fixed">
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster">
+          <h1 class="f4">Linda Linebaugh</h1>
+          <h2 class="f5">Scoutmaster</h2>
+          <hr class="mw3 bb bw1 b--black-10">
+        </div>
+        <p class="lh-copy measure center f6 black-70">
+          Linda founded Troop 20 - then Troop 40 - in 2020. She received the
+          <a href="https://www.scouting.org/training/resources-for-program-trainers-training-committees/woodbadge/">Wood
+            Badge</a>
+          in 2025. She also finds time to be a Den Leader for Pack 16 in Columbiana where she is developing the next
+          generation of Scouts.
+        </p>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster">
+          <h1 class="f4">Jaime Seidler</h1>
+          <h2 class="f5">Assistant Scoutmaster</h2>
+          <hr class="mw3 bb bw1 b--black-10">
+        </div>
+        <p class="lh-copy measure center f6 black-70">
+          Jaime joined Troop 20 in 2023 when her daughter crossed over from Cub Scouts.
+          She has taken several leadership trainings and has participated in the summer camp program.
+          She has also accompanied the scouts on several outings, including polar bears.
+        </p>
+      </article>
+    </div>
+    <div class="dtc tc pv0 bg-transparent">
+      <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
+        <div class="tc">
+          <img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster">
+          <h1 class="f4">Tara Wilson</h1>
+          <h2 class="f5">Assistant Scoutmaster</h2>
+          <hr class="mw3 bb bw1 b--black-10">
+        </div>
+        <p class="lh-copy measure center f6 black-70">
+          Tara is a lifelong Scout, starting her journey back in the early 1990s as a Cub Scout and progressed all
+          the way to Life Scout.
+          She went to the 2001 National Jamboree at Fort AP Hill, Virginia and holds a 5th year Pipestone.
+          She joined Troop 20 in 2025 when her daughter crossed over from Cub Scouts.
+        </p>
+      </article>
     </div>
   </div>
-</article>
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/source/src/app/leadership/leadership.component.ts b/source/src/app/leadership/leadership.component.ts
index 8ed776a..9cfe375 100644
--- a/source/src/app/leadership/leadership.component.ts
+++ b/source/src/app/leadership/leadership.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-leadership',
@@ -7,5 +8,5 @@ import { Component } from '@angular/core';
   styleUrl: './leadership.component.scss'
 })
 export class LeadershipComponent {
-
+  public mobileService = inject(MobileService);
 }
diff --git a/source/src/app/mobile.service.ts b/source/src/app/mobile.service.ts
new file mode 100644
index 0000000..4e9bb08
--- /dev/null
+++ b/source/src/app/mobile.service.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MobileService {
+  /**
+   * Determines if the user is using a small resolution or mobile browser
+   */
+  public isMobile(): boolean {
+    return (window.innerWidth <= 667 );
+  }
+}
diff --git a/source/src/app/top-nav/top-nav.component.html b/source/src/app/top-nav/top-nav.component.html
index 1cc916d..89dae6b 100644
--- a/source/src/app/top-nav/top-nav.component.html
+++ b/source/src/app/top-nav/top-nav.component.html
@@ -1,4 +1,4 @@
-<header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
+<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>
diff --git a/source/src/app/youth-leadership/youth-leadership.component.html b/source/src/app/youth-leadership/youth-leadership.component.html
index f899ffb..46e59cf 100644
--- a/source/src/app/youth-leadership/youth-leadership.component.html
+++ b/source/src/app/youth-leadership/youth-leadership.component.html
@@ -1,88 +1,160 @@
-<article class="vh-100 dt w-100 bg-transparent">
-  <div class="dtc v-mid tc ph3 ph4-l">
-    <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">
-            <h1 class="f3 mb2">Juliahna Seidler</h1>
-          </div>
-        </article>
+@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>
-      <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/aspl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
-            <h1 class="f3 mb2">Kenzie Witherow</h1>
-          </div>
-        </article>
+    </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>
-      <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="Senior Patrol Leader">
-            <h1 class="f3 mb2">Carlie Sorrell</h1>
-          </div>
-        </article>
+    </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>
-      <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="Senior Patrol Leader">
-            <h1 class="f3 mb2">Ella Mercer</h1>
-          </div>
-        </article>
+    </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>
-      <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="Senior Patrol Leader">
-            <h1 class="f3 mb2">Nora Wilson</h1>
-          </div>
-        </article>
+    </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>
+} @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">
+          <h1 class="f3 mb2">Juliahna Seidler</h1>
+        </div>
+      </article>
     </div>
-    <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/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
-            <h1 class="f3 mb2">Avery Elliot</h1>
-          </div>
-        </article>
-      </div>
-      <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="Senior Patrol Leader">
-            <h1 class="f3 mb2">Locklyn Linebaugh</h1>
-          </div>
-        </article>
-      </div>
-      <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="Senior Patrol Leader">
-            <h1 class="f3 mb2">Natalie Sorrell</h1>
-          </div>
-        </article>
-      </div>
-      <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="Senior Patrol Leader">
-            <h1 class="f3 mb2">Kenzie Elliot</h1>
-          </div>
-        </article>
-      </div>
-      <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="Senior Patrol Leader">
-            <h1 class="f3 mb2">Locklyn Linebaugh</h1>
-          </div>
-        </article>
-      </div>
+    <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/aspl.png" class="br-100 h4 w4 dib ba b--black-05 pa2"
+               title="Assistant Senior Patrol Leader">
+          <h1 class="f3 mb2">Kenzie Witherow</h1>
+        </div>
+      </article>
+    </div>
+    <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">
+          <h1 class="f3 mb2">Carlie Sorrell</h1>
+        </div>
+      </article>
+    </div>
+    <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">
+          <h1 class="f3 mb2">Ella Mercer</h1>
+        </div>
+      </article>
+    </div>
+    <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">
+          <h1 class="f3 mb2">Nora Wilson</h1>
+        </div>
+      </article>
     </div>
   </div>
-</article>
\ No newline at end of file
+  <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/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader">
+          <h1 class="f3 mb2">Avery Elliot</h1>
+        </div>
+      </article>
+    </div>
+    <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">
+          <h1 class="f3 mb2">Locklyn Linebaugh</h1>
+        </div>
+      </article>
+    </div>
+    <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">
+          <h1 class="f3 mb2">Natalie Sorrell</h1>
+        </div>
+      </article>
+    </div>
+    <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">
+          <h1 class="f3 mb2">Kenzie Elliot</h1>
+        </div>
+      </article>
+    </div>
+    <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">
+          <h1 class="f3 mb2">Locklyn Linebaugh</h1>
+        </div>
+      </article>
+    </div>
+  </div>
+}
\ No newline at end of file
diff --git a/source/src/app/youth-leadership/youth-leadership.component.ts b/source/src/app/youth-leadership/youth-leadership.component.ts
index 19d5cd8..147e572 100644
--- a/source/src/app/youth-leadership/youth-leadership.component.ts
+++ b/source/src/app/youth-leadership/youth-leadership.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-youth-leadership',
@@ -7,5 +8,5 @@ import { Component } from '@angular/core';
   styleUrl: './youth-leadership.component.scss'
 })
 export class YouthLeadershipComponent {
-
+  public mobileService = inject(MobileService);
 }
diff --git a/source/src/styles.scss b/source/src/styles.scss
index ad00667..1ed8cc8 100644
--- a/source/src/styles.scss
+++ b/source/src/styles.scss
@@ -4,4 +4,5 @@ body, html {
   height: 100%;
   margin: 0;
   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;
 }
\ No newline at end of file