Troop20/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Adding mobile service

Browse Source 
Adding mobile components
This commit is contained in:
Tara Wilson 2025-02-19 21:07:32 -05:00
parent cf82be2b5f
commit acc339768e
15 changed files with 426 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
source/src/app/about/about.component.html
View File

@ -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>

161
source/src/app/committee/committee.component.html
View File

@ -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>
<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>
}

5
source/src/app/committee/committee.component.ts
View File

@ -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);
}

4
source/src/app/footer/footer.component.html
View File

@ -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">

7
source/src/app/footer/footer.component.scss
View File

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

5
source/src/app/footer/footer.component.ts
View File

@ -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);
}

88
source/src/app/forms/forms.component.html
View File

@ -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>

6
source/src/app/home/home.component.html
View File

@ -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>

120
source/src/app/leadership/leadership.component.html
View File

@ -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>
}

5
source/src/app/leadership/leadership.component.ts
View File

@ -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);
}

13
source/src/app/mobile.service.ts Normal file
View File

@ -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 );
}
}

2
source/src/app/top-nav/top-nav.component.html
View File

@ -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>

232
source/src/app/youth-leadership/youth-leadership.component.html
View File

@ -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>
<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>
}

5
source/src/app/youth-leadership/youth-leadership.component.ts
View File

@ -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);
}

1
source/src/styles.scss
View File

@ -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;
}