Adding info page

Adding Camp Packing List
Adding Merit Badge Library
Adding Wilderness Survival

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/info/info.component.html

@@ -0,0 +1,12 @@
+<article class="center mw5 mw6-ns hidden ba mv4">
+  <h1 class="f4 bg-near-black white mv0 pv2 ph3">Weekend Camp Packing List</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">
+        View the List
+      </a>
+    </p>
+  </div>
+</article>

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

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

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,11 +1,13 @@
 <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" [routerLink]="['info']" title="Info">Info</a>
+    <a class="link dim white dib mr3" [routerLink]="['library']" title="Merit Badge Library">Library</a>
   </nav>
 </header>