More styling

src/app/app.module.ts

@@ -4,6 +4,7 @@ import {NgxGoogleAnalyticsModule} from 'ngx-google-analytics';
 import {environment} from '../environments/environment';
 import {AppRouting} from './app.routing';
 import {BannerComponent} from './components/banner/banner.component';
+import {ContactComponent} from './components/contact/contact.component';
 import {FooterComponent} from './components/footer/footer.component';
 import {LogoComponent} from './components/logo/logo.component';
 import {NavbarComponent} from './components/navbar/navbar.component';
@@ -31,6 +32,7 @@ export const APP_COMPONENTS: any[] = [
 	AppComponent,
 	BannerComponent,
 	CalendarComponent,
+	ContactComponent,
 	DrillComponent,
 	FooterComponent,
 	FourOFourComponent,

src/app/components/contact/contact.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-contact',
+	templateUrl: './contact.component.html'
+})
+export class ContactComponent {
+
+}

src/app/components/footer/footer.component.html

@@ -20,11 +20,11 @@
 		</div>
 		<h3 class="mt-4 mb-0">so we can invade your feed ⚔️</h3>
 	</div>
-	<div style="background: #333">
+	<div class="bg-dark text-center text=sm=start">
-		<div class="mx-auto d-flex justify-content-center flex-wrap text-center text-sm-start">
+		<div class="d-flex flex-column flex-sm-row flex-wrap justify-content-around container p-3">
-			<div *ngFor="let group of navigation" class="m-3" style="min-width: 175px">
+			<div *ngFor="let group of navigation">
 				<h2 class="sitemap-header">{{group.label}}</h2>
-				<ul class="m-0">
+				<ul>
 					<ng-container *ngFor="let section of group.children">
 						<li *ngFor="let item of section">
 							<a [routerLink]="item.url" [fragment]="item.fragment">{{item.label}}</a>
@@ -32,6 +32,14 @@
 					</ng-container>
 				</ul>
 			</div>
+			<div>
+				<h2 class="sitemap-header">Contact</h2>
+				<ul>
+					<li class="font-weight-strong">Robert Sacco</li>
+					<li>Legio XXX President</li>
+					<li>Email: <a href="mailto:sacco.c.r@bell.net" target="_blank">sacco.c.r@bell.net</a></li>
+				</ul>
+			</div>
 		</div>
 	</div>
 	<div class="py-3 text-center">

src/app/components/footer/footer.component.scss

@@ -1,14 +1,20 @@
-a, a:visited {
+
-	color: rgba(255, 255, 255, 0.6);
-}
 
 ul {
 	list-style: none;
 	padding: 0;
+
+	a, a:visited {
+		color: rgba(255, 255, 255, 0.6);
+	}
+
+	li {
+		color: rgba(255, 255, 255, 0.75);
+	}
 }
 
 .sitemap-header {
-	color: rgba(255, 255, 255, 0.8);
+	color: rgba(255, 255, 255, 0.9);
 	margin: 0;
 }
 

src/styles.scss

@@ -63,12 +63,15 @@ h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }
 	margin-left: auto;
 	margin-right: auto;
 	padding: 5rem 2rem;
-}
 
-@media print {
+	@media screen and (max-width: 400px) {
-	.container {
+		padding: 3rem 2rem;
+	}
+
+	@media print {
 		padding: 5rem 1rem;
 	}
+
 }
 
 .invert {