Graphic fixes & mobile navigation

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

@@ -34,9 +34,9 @@
 			</div>
 		</div>
 	</div>
-	<div class="py-2 text-center">
+	<div class="py-3 text-center">
 		<p class="copyright m-0">
-			Copyright &copy; Legio XXX 2023 | All Rights Reserved<br>
+			Copyright &copy; Legio XXX 2024 | All Rights Reserved<br>
 			Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
 		</p>
 	</div>

src/app/components/navbar/navbar.component.html

@@ -7,26 +7,13 @@
 			</a>
 		</div>
 		<div class="flex-grow-1"></div>
+		<!-- Full NavBar -->
 		<div *ngIf="!hamburger">
 			<a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment"
 			   (click)="item.fragment ? scroll(item.fragment) : null">
 				<button mat-button class="navbar-button" aria-label="Menu">{{item.label}}</button>
 			</a>
 			<ng-container *ngFor="let group of links.other">
-				<ng-template [ngTemplateOutlet]="navGroup" [ngTemplateOutletContext]="{'$implicit': group}"></ng-template>
-			</ng-container>
-<!--			<a href="#">-->
-<!--				<button mat-button class="navbar-button">Donate</button>-->
-<!--			</a>-->
-		</div>
-		<button *ngIf="hamburger" mat-icon-button class="mr-3">
-			<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>
-		</button>
-	</mat-toolbar-row>
-</mat-toolbar>
-<div class="navbar-spacing"><!-- Spacing --></div>
-
-<ng-template #navGroup let-group>
 				<button mat-button [matMenuTriggerFor]="menu" class="navbar-button">
 					{{group.label}} <mat-icon>expand_more</mat-icon>
 				</button>
@@ -39,4 +26,32 @@
 						</button>
 					</ng-container>
 				</mat-menu>
+			</ng-container>
+		</div>
+		<!-- Mobile NavBar -->
+		<button *ngIf="hamburger" mat-icon-button class="text-start" [matMenuTriggerFor]="menu">
+			<mat-icon>menu</mat-icon>
+		</button>
+		<mat-menu #menu="matMenu">
+			<button mat-menu-item *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment"
+			   (click)="item.fragment ? scroll(item.fragment) : null">{{item.label}}</button>
+			<ng-container *ngFor="let group of links.other">
+				<button mat-menu-item [matMenuTriggerFor]="menu">{{group.label}}</button>
+				<mat-menu #menu="matMenu">
+					<ng-container *ngFor="let section of group.children; let first = first">
+						<mat-divider *ngIf="!first"></mat-divider>
+						<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment"
+						        (click)="item.fragment ? scroll(item.fragment) : null">
+							{{item.label}}
+						</button>
+					</ng-container>
+				</mat-menu>
+			</ng-container>
+		</mat-menu>
+	</mat-toolbar-row>
+</mat-toolbar>
+<div class="navbar-spacing"><!-- Spacing --></div>
+
+<ng-template #navGroup let-group>
+
 </ng-template>

src/app/misc/navigation.ts

@@ -21,19 +21,19 @@ export const NAVIGATION: NavigationGroup = [
 		], [
 			{label: 'Calendar', url: '/events/calendar'},
 	]]},
-	{label: 'Learn', children: [[
+	// {label: 'Learn', children: [[
-			{label: 'Trajan', url: '/info/trajan'},
+	// 		{label: 'Trajan', url: '/info/trajan'},
-			{label: 'Legio XXX', url: '/info/legio-xxx'},
+	// 		{label: 'Legio XXX', url: '/info/legio-xxx'},
-			{label: 'Legion Camp', url: '/info/camp'},
+	// 		{label: 'Legion Camp', url: '/info/camp'},
-			{label: 'Legion Headquarters', url: '/info/headquarters'},
+	// 		{label: 'Legion Headquarters', url: '/info/headquarters'},
-			{label: 'Legion Organization', url: '/info/organization'},
+	// 		{label: 'Legion Organization', url: '/info/organization'},
-			{label: 'Legionairy Equipment', url: '/info/equipment'},
+	// 		{label: 'Legionairy Equipment', url: '/info/equipment'},
-			{label: 'Legionairy Training', url: '/info/training'},
+	// 		{label: 'Legionairy Training', url: '/info/training'},
-		], [
+	// 	], [
-			{label: 'Common Questions', url: '/info/questions'},
+	// 		{label: 'Common Questions', url: '/info/questions'},
-			{label: 'Glossary', url: '/info/glossary'},
+	// 		{label: 'Glossary', url: '/info/glossary'},
-			{label: 'Resources', url: '/info/resources'},
+	// 		{label: 'Resources', url: '/info/resources'},
-	]]},
+	// ]]},
 	{label: 'Reenact', children: [[
 			{label: 'Getting Started', url: '/getting-started'},
 			{label: 'Rules & Regulations', url: '/rules'},

src/app/views/about/about.component.html

@@ -1,10 +1,10 @@
 <div class="invert">
 	<div class="banner d-print-none"></div>
-	<div class="container py-4 px-3">
+	<div class="container">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">About</h1>
-				<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
+				<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
 					<mat-icon class="me-1">print</mat-icon>
 					Print
 				</a>

src/app/views/about/about.component.scss

@@ -1,6 +1,6 @@
 .banner {
 	width: 100%;
-	height: max(300px, 30vh);
+	height: 50vh;
 	background: white url("/assets/img/castra.jpg") center 35% no-repeat;
 	background-size: cover;
 }

src/app/views/events/aestiva/aestiva.component.html

@@ -1,10 +1,10 @@
 <div class="invert">
 	<div class="banner d-print-none"></div>
-	<div class="container py-4 px-3">
+	<div class="container">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0"><em>Castra Aestiva</em> (Summer Camp)</h1>
-				<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
+				<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
 					<mat-icon class="me-1">print</mat-icon>
 					Print
 				</a>
@@ -21,7 +21,7 @@
 			<h2 class="mb-2">Details</h2>
 			<p>
 				Tom Ross hosts a Castra Aestiva event every Memorial Day weekend (in May) near Tillsonburg Ontario. It's a private multi-day training event involving Romans and their enemies and is the perfect opportunity for new Roman reenactors. Participants
-				sleep in <em>sub pellibus</em> (tents) within the protective walls of the <em>castrum</em> (fort). If May doesn't work for you, consider coming to <a routerLink="/events/hiberna">Castra Hiberna</a> in September.
+				sleep in <em>sub pellibus</em> (tents) within the protective walls of the <em>castrum</em> (fort). If May doesn't work for you, consider coming to <a routerLink="/events/castra-hiberna">Castra Hiberna</a> in September.
 			</p>
 			<h3 class="mb-0">Activities</h3>
 			<ul class="mt-0">

src/app/views/events/aestiva/aestiva.component.scss

@@ -1,6 +1,6 @@
 .banner {
 	width: 100%;
-	height: max(300px, 30vh);
+	height: 50vh;
 	background: white url("/assets/img/interior.jpg") center 35% no-repeat;
 	background-size: cover;
 }

src/app/views/events/agonium/agonium.component.html

@@ -1,8 +1,14 @@
 <div class="invert">
 	<div class="banner d-print-none"></div>
-	<div class="container py-4 px-3">
+	<div class="container">
 		<div>
-			<h1 class="mb-2"><em>Agonium</em> (Janus Festival)</h1>
+			<div class="d-flex align-items-end justify-content-between mb-2">
+				<h1 class="mb-0"><em>Agonium</em> (Janus Festival)</h1>
+				<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
+					<mat-icon class="me-1">print</mat-icon>
+					Print
+				</a>
+			</div>
 			<mat-divider></mat-divider>
 			<br>
 		</div>

src/app/views/events/agonium/agonium.component.scss

@@ -1,6 +1,6 @@
 .banner {
 	width: 100%;
-	height: max(300px, 30vh);
+	height: 50vh;
 	background: white url("/assets/img/agonium.png") center center no-repeat;
 	background-size: cover;
 }

src/app/views/events/calendar/calendar.component.html

@@ -1,6 +1,12 @@
 <div class="invert">
-	<div class="container py-4 px-3">
+	<div class="container">
-		<h1 class="mb-2">Calendar</h1>
+		<div class="d-flex align-items-end justify-content-between mb-2">
+			<h1 class="mb-0">Calendar</h1>
+			<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
+				<mat-icon class="me-1">print</mat-icon>
+				Print
+			</a>
+		</div>
 		<mat-divider class="mb-4"></mat-divider>
 		<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=America%2FToronto&showTitle=0&showNav=1&showPrint=1&showTabs=0&showCalendars=0&src=Y18wYTIxNTM3ZDgwMWMzNTQ0MTUwYzk5YTUwNjI5Yjc5MjM0MjYyYjY0YzYyNzZiZTQ3OWJlMzA4OWU0MmM3NTQ5QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23D50000" style="border-width:0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
 	</div>

src/app/views/events/hiberna/hiberna.component.html

@@ -1,10 +1,10 @@
 <div class="invert">
 	<div class="banner d-print-none"></div>
-	<div class="container py-4 px-3">
+	<div class="container">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0"><em>Castra Hiberna</em> (Winter Camp)</h1>
-				<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
+				<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
 					<mat-icon class="me-1">print</mat-icon>
 					Print
 				</a>
@@ -22,7 +22,7 @@
 			<h2 class="mb-2">Details</h2>
 			<p>
 				Tom Ross hosts a Castra Hiberna event every September near Tillsonburg Ontario. It's a private single day event between Romans and their adversaries. It's an excellent opportunity for new Roman reenactors. If May doesn't work for you, consider coming to
-				<a routerLink="/events/aestiva">Castra Aestiva</a> in May.
+				<a routerLink="/events/castra-aestiva">Castra Aestiva</a> in May.
 			</p>
 			<h3 class="mb-0">Activities</h3>
 			<ul class="mt-0">

src/app/views/events/hiberna/hiberna.component.scss

@@ -1,6 +1,6 @@
 .banner {
 	width: 100%;
-	height: max(300px, 30vh);
+	height: 50vh;
 	background: white url("/assets/img/morning-mist.jpg") center center no-repeat;
 	background-size: cover;
 }

src/app/views/home/home.component.html

@@ -50,7 +50,7 @@
 </section>
 <!-- Recruitment -->
 <section id="recruitment" class="d-flex flex-column flex-md-row align-items-center justify-content-center fill invert">
-	<div class="flex-grow-1 p-5 pb-0 text-center text-md-end" style="flex-basis: 0">
+	<div class="flex-grow-1 mt-5 mt-md-0 p-5 pb-0 text-center text-md-end" style="flex-basis: 0">
 		<img src="/assets/img/recruitment.png" alt="I want you for Legio XXX" style="max-width: min(90%, 400px)">
 	</div>
 	<div class="d-flex flex-grow-1 justify-content-start align-items-center" style="flex-basis: 0">
@@ -74,7 +74,7 @@
 </section>
 <!-- Contact -->
 <section id="contact" class="d-flex flex-column align-items-center justify-content-center fill">
-	<div>
+	<div class="container">
 		<h2 class="text-center">Contact</h2>
 		<div class="d-flex flex-row">
 			<form class="pe-3" style="width: min(100%, 600px)">

src/app/views/reenact/drill/drill.component.html

@@ -1,9 +1,9 @@
 <div class="invert">
-	<div class="container py-4 px-3">
+	<div class="container">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">Drill Commands</h1>
-				<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
+				<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
 					<mat-icon class="me-1">print</mat-icon>
 					Print
 				</a>

src/app/views/reenact/getting-started/getting-started.component.html

@@ -1,9 +1,9 @@
 <div class="invert">
-	<div class="container py-4 px-3">
+	<div class="container">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">Getting Started</h1>
-				<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
+				<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
 					<mat-icon class="me-1">print</mat-icon>
 					Print
 				</a>

src/app/views/reenact/maintinance/maintenance.component.html

@@ -1,9 +1,9 @@
 <div class="invert">
-	<div class="container py-4 px-3">
+	<div class="container">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">Equipment Maintenance</h1>
-				<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
+				<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
 					<mat-icon class="me-1">print</mat-icon>
 					Print
 				</a>

src/app/views/reenact/rules/rules.component.html

@@ -1,9 +1,9 @@
 <div class="invert">
-	<div class="container py-4 px-3">
+	<div class="container">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">Rules & Regulations</h1>
-				<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
+				<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
 					<mat-icon class="me-1">print</mat-icon>
 					Print
 				</a>

src/styles.scss

@@ -62,6 +62,13 @@ h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }
 	max-width: 1200px;
 	margin-left: auto;
 	margin-right: auto;
+	padding: 5rem 2rem;
+}
+
+@media print {
+	.container {
+		padding: 5rem 1rem;
+	}
 }
 
 .invert {