Adding mobile service

Adding mobile components

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>

source/src/app/committee/committee.component.html

@@ -1,5 +1,55 @@
-<article class="vh-100 dt w-100 bg-transparent">
+@if (mobileService.isMobile()) {
-  <div class="dtc v-mid tc ph3 ph4-l">
+  <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>
+    </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>
+    </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">
@@ -58,5 +108,4 @@
       </article>
     </div>
   </div>
-  </div>
+}
-</article>

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

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

@@ -1,5 +1,5 @@
-<div class="footer">
+<div [class]="{'footer': !mobileService.isMobile(), 'footer-mobile': mobileService.isMobile()}">
-  <footer class="pv4 ph3 ph5-m ph6-l bg-near-black">
+  <footer class="pv4 ph3 ph5-m ph6-l bg-black">
     <small class="f6 db tc white">
       © 2025
       <b class="ttu">

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

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

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

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

@@ -1,16 +1,16 @@
-<article class="vh-100 dt w-100 bg-transparent">
+<article class="center mw5 mw6-ns hidden ba mv4">
-  <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">
+      <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>
-    <article class="center mw5 mw6-ns hidden ba mv4">
+<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">
@@ -19,18 +19,20 @@
       </a>
     </p>
   </div>
-    </article>
+</article>
-    <article class="center mw5 mw6-ns hidden ba mv4">
+<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">
+      <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>
-    <article class="center mw5 mw6-ns hidden ba mv4">
+<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">
@@ -41,6 +43,4 @@
       Forms A, B, and C are required for Summer Camp
     </p>
   </div>
-    </article>
-  </div>
 </article>

source/src/app/home/home.component.html

@@ -1,5 +1,5 @@
-<article class="vh-100 dt w-100 bg-transparent">
+<article class="vh-75 dt w-100">
-  <div class="dtc v-mid tc ph3 ph4-l">
+  <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>

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

@@ -1,7 +1,33 @@
-<article class="vh-100 dt w-100 bg-transparent">
+@if (mobileService.isMobile()) {
-  <div class="dtc v-mid tc ph3 ph4-l">
+  <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>
+    </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>
+    </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 pv4 bg-transparent">
+    <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">
@@ -11,12 +37,14 @@
         </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>
+          <a href="https://www.scouting.org/training/resources-for-program-trainers-training-committees/woodbadge/">Wood
-            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.
+            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 pv4 bg-transparent">
+    <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">
@@ -31,7 +59,7 @@
         </p>
       </article>
     </div>
-      <div class="dtc tc pv4 bg-transparent">
+    <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">
@@ -40,12 +68,12 @@
           <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.
+          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>
-  </div>
+}
-</article>

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

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

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>

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

@@ -1,5 +1,77 @@
-<article class="vh-100 dt w-100 bg-transparent">
+@if (mobileService.isMobile()) {
-  <div class="dtc v-mid tc ph3 ph4-l">
+  <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>
+} @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">
@@ -12,7 +84,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/aspl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
+          <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>
@@ -20,7 +93,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/oeg.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
+          <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>
@@ -28,7 +101,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/qm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
+          <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>
@@ -36,7 +109,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="Senior Patrol Leader">
+          <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>
@@ -46,7 +119,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/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
+          <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>
@@ -54,7 +127,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/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
+          <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>
@@ -62,7 +135,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="Senior Patrol Leader">
+          <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>
@@ -70,7 +143,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="Senior Patrol Leader">
+          <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>
@@ -78,11 +151,10 @@
     <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">
+          <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>
-  </div>
+}
-</article>

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

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