Merge branch 'updates' of https://git.zakscode.com/ztimson/legio-30 into develop

src/app/app.module.ts

@@ -21,6 +21,7 @@ import {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
 import {DrillComponent} from './views/reenact/drill/drill.component';
 import {GettingStartedComponent} from './views/reenact/getting-started/getting-started.component';
+import {MaintenanceComponent} from './views/reenact/maintinance/maintenance.component';
 import {RulesComponent} from './views/reenact/rules/rules.component';
 
 export const APP_COMPONENTS: any[] = [
@@ -38,6 +39,7 @@ export const APP_COMPONENTS: any[] = [
 	HibernaComponent,
 	HomeComponent,
 	LogoComponent,
+	MaintenanceComponent,
 	NavbarComponent,
 	RulesComponent
 ]

src/app/app.routing.ts

@@ -10,19 +10,21 @@ import {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
 import {DrillComponent} from './views/reenact/drill/drill.component';
 import {GettingStartedComponent} from './views/reenact/getting-started/getting-started.component';
+import {MaintenanceComponent} from './views/reenact/maintinance/maintenance.component';
 import {RulesComponent} from './views/reenact/rules/rules.component';
 
 const routes: Routes = [
 	{path: '', pathMatch: 'full', component: HomeComponent},
 	{path: 'about', component: AboutComponent, data: {title: 'About'}},
 	{path: 'drill', component: DrillComponent, data: {title: 'Drill Commands'}},
-	{path: 'events/aestiva', component: AestivaComponent, data: {title: 'Castra Aestiva'}},
 	{path: 'events/agonium', component: AgoniumComponent, data: {title: 'Agonium'}},
-	{path: 'events/hiberna', component: HibernaComponent, data: {title: 'Castra Hiberna'}},
+	{path: 'events/castra-aestiva', component: AestivaComponent, data: {title: 'Castra Aestiva'}},
+	{path: 'events/castra-hiberna', component: HibernaComponent, data: {title: 'Castra Hiberna'}},
 	{path: 'events/calendar', component: CalendarComponent, data: {title: 'Calendar'}},
 	{path: 'gallery', component: GalleryComponent, data: {title: 'Gallery'}},
 	{path: 'getting-started', component: GettingStartedComponent, data: {title: 'Getting Started'}},
 	{path: 'rules', component: RulesComponent, data: {title: 'Rules & Regulations'}},
+	{path: 'maintenance', component: MaintenanceComponent, data: {title: 'Maintenance'}},
 	{path: '**', component: FourOFourComponent, data: {title: '404'}}
 ];
 

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

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

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

@@ -1,3 +1,7 @@
+a, a:visited {
+	color: rgba(255, 255, 255, 0.6);
+}
+
 ul {
 	list-style: none;
 	padding: 0;

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

@@ -1,7 +1,7 @@
 <mat-toolbar class="d-print-none">
 	<mat-toolbar-row>
 		<div>
-			<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner" (click)="scroll('banner')">
+			<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner" (click)="scroll('banner')" style="text-decoration: none">
 				<img src="assets/img/eagle.png" alt="SPQR" height="45px" width="45px">
 				<xxx-logo class="px-2" [expand]="true"></xxx-logo>
 			</a>

src/app/containers/app/app.component.html

@@ -1,7 +1,7 @@
 <xxx-navbar class="d-print-none" [hamburger]="mobile"></xxx-navbar>
 <div class="fill app-container">
 	<div id="top">
-		<img class="d-print-block d-none mt-4" src="/assets/img/header.png" width="250px" height="auto">
+		<img class="d-print-block d-none" src="/assets/img/header.png" width="250px" height="auto">
 	</div>
 	<router-outlet></router-outlet>
 	<xxx-footer class="d-print-none"></xxx-footer>

src/app/misc/navigation.ts

@@ -16,8 +16,8 @@ export const NAVIGATION: NavigationGroup = [
 			{label: 'Gallery', url: '/gallery'},
 	]]},
 	{label: 'Events', children: [[
-			{label: 'Castra Aestiva', url: '/events/aestiva'},
+			{label: 'Castra Aestiva', url: '/events/castra-aestiva'},
-			{label: 'Castra Hiberna', url: '/events/hiberna'},
+			{label: 'Castra Hiberna', url: '/events/castra-hiberna'},
 		], [
 			{label: 'Calendar', url: '/events/calendar'},
 	]]},
@@ -39,9 +39,9 @@ export const NAVIGATION: NavigationGroup = [
 			{label: 'Rules & Regulations', url: '/rules'},
 			{label: 'Drill Commands', url: '/drill'},
 		], [
-			{label: 'Trusted Vendors', url: '/vendors'},
+			{label: 'Buy Equipment', url: '/buy'},
-			{label: 'Kit Assembly', url: '/diy'},
+			{label: 'Build Equipment', url: '/diy'},
-			{label: 'Kit Maintenance', url: '/maintenance'},
+			{label: 'Maintenance', url: '/maintenance'},
 		]
 	]},
 ]

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

@@ -2,7 +2,13 @@
 	<div class="banner d-print-none"></div>
 	<div class="container py-4 px-3">
 		<div>
-			<h1 class="mb-2">About</h1>
+			<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()">
+					<mat-icon class="me-1">print</mat-icon>
+					Print
+				</a>
+			</div>
 			<mat-divider class="mb-4"></mat-divider>
 			<div>
 				<h2 class="mb-2">Legio XXX</h2>
@@ -12,7 +18,7 @@
 					Over the years, they have participated in a wide range of events.
 				</p>
 				<h3 class="mb-2">Events</h3>
-				<div class="d-flex flex-wrap">
+				<div class="d-flex flex-column flex-wrap">
 					<div class="mx-3">
 						<h4 class="mb-2">Film Shoots & Commercials</h4>
 						<ul class="mt-0">
@@ -29,6 +35,7 @@
 							<li>Canadian Museum of History (formerly the Museum of Civilization), Gatineau PQ (2005)</li>
 							<li>Royal Ontario Museum, Toronto ON (2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019)</li>
 							<li>RCR Museum, Wolseley Barracks, London ON (2019)</li>
+							<li>Ontario Regiment RCAC Museum (2013)</li>
 						</ul>
 					</div>
 					<div class="mx-3">
@@ -37,7 +44,8 @@
 							<li>Montessori School, Hamilton ON (2012)</li>
 							<li>Our Lady of Mount Carmel Academy (2016)</li>
 							<li>John Chrysostom Catholic Elementary School (2017)</li>
-							<li>Saunders Secondary School, London ON (2017, 2019)</li>
+							<li>Saunders Secondary School, London ON (2017, 2019, 2022, 2023)</li>
+							<li>Toronto Waldorf School, Thornhill ON (2023)</li>
 						</ul>
 					</div>
 					<div class="mx-3">
@@ -51,7 +59,7 @@
 						</ul>
 					</div>
 					<div class="mx-3">
-						<h4 class="mb-2">Re-enactment Events</h4>
+						<h4 class="mb-2">Re-enactments</h4>
 						<ul class="mt-0">
 							<li>Fort Malden, Amherstburg ON (2004, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2015, 2016)</li>
 							<li>Roman Market Days (2004)</li>
@@ -66,7 +74,7 @@
 						</ul>
 					</div>
 				</div>
-				<h2 class="mb-2">Castrum</h2>
+				<h3 class="mb-2">Castrum</h3>
 				<p>Legio XXX has a re-enactment facility near Tillsonburg Ontario, graciously provided by Tom Ross. Over the years, the group has constructed it's own <em>castrum</em> (fort) nestled amidst farmland and forest.</p>
 				<p class="mb-2">The <em>castrum</em> (fort) was slowly constructed over several years & is a work in progress:</p>
 				<ul class="mt-0">
@@ -84,9 +92,9 @@
 				</ul>
 				<h2>Special Thanks</h2>
 				<p>Robert Sacco - <em>Aquilifer</em> (Eagle bearer) & Legio XXX's president</p>
-				<p>David Blain - <em>Tribunus angusticlavius</em> (staff officer) & subject matter expert, providing much of this site's content</p>
+				<p>Tom Ross - Legio XXX's <em>patronus</em> (patron) providing re-enactment facilities for Castra</p>
-				<p>Tom Ross - Legio XXX's <em>patronus</em> (patron) providing re-enactment facilities near Tillsonburg Ontario</p>
+				<p>David Blain - <em>Tribunus angusticlavius</em> (staff officer) & subject matter expert</p>
-				<p>Robert Norton - <em>Armicustos</em> (Quartermaster) & provider of most of our <a routerLink="/diy">manuals</a></p>
+				<p>Robert Norton - <em>Armicustos</em> (Quartermaster) who provides equipment, repairs & <a routerLink="/diy">manuals</a></p>
 			</div>
 		</div>
 	</div>

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

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

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

@@ -2,7 +2,13 @@
 	<div class="banner d-print-none"></div>
 	<div class="container py-4 px-3">
 		<div>
-			<h1 class="mb-2"><em>Castra Aestiva</em> (Summer Camp)</h1>
+			<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()">
+					<mat-icon class="me-1">print</mat-icon>
+					Print
+				</a>
+			</div>
 			<mat-divider></mat-divider>
 			<br>
 		</div>
@@ -14,7 +20,7 @@
 			</p>
 			<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
+				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.
 			</p>
 			<h3 class="mb-0">Activities</h3>
@@ -35,7 +41,7 @@
 				<li>Roman games</li>
 				<li>Food & Drink</li>
 			</ul>
-			<p>Come, participate and enjoy the camaraderie only the field of Mars can forge.</p>
+			<p>Participate and enjoy the camaraderie only the field of Mars can forge.</p>
 		</div>
 	</div>
 </div>

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

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

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

@@ -40,9 +40,9 @@
 				</ul>
 				<li><em>Fabrica</em> (Craftsmanship)</li>
 				<li>Drill & Patrols</li>
-				<li>Campfires</li>
 				<li>Roman games</li>
 				<li>Food & Drink</li>
+				<li>Camping</li>
 			</ul>
 			<p>Come, participate and enjoy the camaraderie only the field of Mars can forge.</p>
 		</div>

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

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

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

@@ -2,7 +2,13 @@
 	<div class="banner d-print-none"></div>
 	<div class="container py-4 px-3">
 		<div>
-			<h1 class="mb-2"><em>Castra Hiberna</em> (Winter Camp)</h1>
+			<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()">
+					<mat-icon class="me-1">print</mat-icon>
+					Print
+				</a>
+			</div>
 			<mat-divider></mat-divider>
 			<br>
 		</div>
@@ -15,7 +21,7 @@
 			<p>In the fall, the indigenous people had to focus their efforts on harvesting crops & preparing for the cold harsh winter. This left little time for raids & hostilities giving Roman soldiers time to rest, train & recoup.</p>
 			<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
+				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.
 			</p>
 			<h3 class="mb-0">Activities</h3>
@@ -32,11 +38,11 @@
 				</ul>
 				<li><em>Fabrica</em> (Craftsmanship)</li>
 				<li>Drill & Patrols</li>
-				<li>Campfires</li>
 				<li>Roman games</li>
 				<li>Food & Drink</li>
+				<li>Camping</li>
 			</ul>
-			<p>Come, participate and enjoy the camaraderie only the field of Mars can forge.</p>
+			<p>Participate and enjoy the camaraderie only the field of Mars can forge.</p>
 		</div>
 	</div>
 </div>

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

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

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

@@ -3,21 +3,24 @@
 	<xxx-banner></xxx-banner>
 </header>
 <!-- ABout -->
-<section id="about" class="d-flex flex-column flex-md-row align-items-center justify-content-center bg-black text-white fill py-5 py-md-0">
+<section id="about" class="d-flex flex-column flex-md-row align-items-center justify-content-center bg-black fill py-5 py-md-0">
 	<div class="d-none d-md-inline flex-grow-1 text-end" style="flex-basis: 0">
 		<img src="/assets/img/trajan.png" alt="Statue of Trajan" height="450px" width="auto">
 	</div>
 	<div class="flex-grow-0 text-center px-5">
-		<h1>About</h1>
+		<div class="text-white">
-		<h2>Legio XXX - Vlpia Victrix</h2>
+			<h1>About</h1>
-		<h3 class="mb-4">(Trajan's Victorious Thirtieth Legion)</h3>
+			<h2>Legio XXX - Vlpia Victrix</h2>
-		<p>
+			<h3 class="mb-4">(Trajan's Victorious Thirtieth Legion)</h3>
-			Legio XXX is a North American Roman reenactment group established in 2004.
+			<p>
-			<br><br>
+				Legio XXX is a North American Roman reenactment group established in 2004.
-			It's members represent a cross between living history enthusiasts and "edu-tainers"
+				<br><br>
-			<br><br>
+				It's members represent a cross between living history enthusiasts and "edu-tainers"
-			that recreate the lives of soldiers found in Trajan's legions during the 1st - 2nd Century AD
+				<br><br>
-		</p>
+				that recreate the lives of soldiers found in Trajan's legions during the 1st - 2nd Century AD
+			</p>
+		</div>
+		<a routerLink="/about">More</a>
 	</div>
 	<div class="flex-md-grow-1" style="flex-basis: 0">
 		<img class="mt-5" src="/assets/img/standard.png" alt="Legio XXX Standard" height="250px" width="auto">
@@ -71,40 +74,55 @@
 </section>
 <!-- Contact -->
 <section id="contact" class="d-flex flex-column align-items-center justify-content-center fill">
-	<div style="width: 80%; max-width: 600px;">
+	<div>
 		<h2 class="text-center">Contact</h2>
-		<form>
+		<div class="d-flex flex-row">
-			<div>
+			<form class="pe-3" style="width: min(100%, 600px)">
-				<mat-form-field appearance="fill" class="w-100">
-					<mat-label>Email</mat-label>
-					<input matInput>
-				</mat-form-field>
-			</div>
-			<div>
-				<mat-form-field appearance="fill" class="w-100">
-					<mat-label>Subject</mat-label>
-					<mat-select>
-						<mat-option value="castra">Castra Aestiva/Hiberna</mat-option>
-						<mat-option value="host">Host Legio XXX</mat-option>
-						<mat-option value="reenacting">Reenacting</mat-option>
-						<mat-option value="other">Other</mat-option>
-					</mat-select>
-				</mat-form-field>
-			</div>
-			<div>
-				<mat-form-field appearance="fill" class="w-100">
-					<mat-label>Message</mat-label>
-					<textarea matInput rows="8"></textarea>
-				</mat-form-field>
-			</div>
-			<div class="d-flex justify-content-between align-items-center">
 				<div>
-					<mat-checkbox color="primary">Send me a copy</mat-checkbox>
+					<mat-form-field appearance="fill" class="w-100">
+						<mat-label>Email</mat-label>
+						<input matInput>
+					</mat-form-field>
 				</div>
 				<div>
-					<button mat-raised-button color="primary">Send</button>
+					<mat-form-field appearance="fill" class="w-100">
+						<mat-label>Subject</mat-label>
+						<mat-select [(value)]="contact">
+							<mat-option value="general">General Inquiry</mat-option>
+							<mat-option value="castra">Castra Event</mat-option>
+						</mat-select>
+					</mat-form-field>
+				</div>
+				<div>
+					<mat-form-field appearance="fill" class="w-100">
+						<mat-label>Message</mat-label>
+						<textarea matInput rows="8"></textarea>
+					</mat-form-field>
+				</div>
+				<div class="d-flex justify-content-between align-items-center">
+					<div>
+						<mat-checkbox color="primary">Send me a copy</mat-checkbox>
+					</div>
+					<div>
+						<button mat-raised-button color="primary">Send</button>
+					</div>
+				</div>
+			</form>
+			<mat-divider vertical></mat-divider>
+			<div class="d-flex flex-column justify-content-center ps-3" style="width: min(100%, 600px)">
+				<div *ngIf="contact == 'general'">
+					<h3>Robert Sacco</h3>
+					<h4 class="mb-0">Legio XXX President</h4>
+					<h5>Portrays: Aquilifer Primus Marius Maximus</h5>
+					<a href="mailto:sacco.c.r@bell.net">sacco.c.r@bell.net</a>
+				</div>
+				<div *ngIf="contact == 'castra'">
+					<h3>Tom Ross</h3>
+					<h4 class="mb-0">Legio XXX <em>Patronus</em> (Patron)</h4>
+					<h5>Portrays: Titus Quartinius Saturnalus</h5>
+					<a href="mailto:tomlongwoods@gmail.com">tomlongwoods@gmail.com</a>
 				</div>
 			</div>
-		</form>
+		</div>
 	</div>
 </section>

src/app/views/home/home.component.ts

@@ -7,5 +7,6 @@ import {NAVIGATION} from '../../misc/navigation';
 	styleUrls: ['./home.component.scss']
 })
 export class HomeComponent {
+	contact: string = '';
 	navigation = NAVIGATION;
 }

src/app/views/members/.gitkeep

@@ -1 +0,0 @@
-Z^C5kgHKfYgy

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

@@ -1,7 +1,13 @@
 <div class="invert">
 	<div class="container py-4 px-3">
 		<div>
-			<h1 class="mb-2">Drill Commands</h1>
+			<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()">
+					<mat-icon class="me-1">print</mat-icon>
+					Print
+				</a>
+			</div>
 			<mat-divider></mat-divider>
 			<br>
 		</div>
@@ -32,11 +38,6 @@
 					<td>Fall In</td>
 					<td>Fall into position to the left of the <em>vexillum</em> (standard); stand at ease</td>
 				</tr>
-				<tr>
-					<td><em>Vos Dimitto</em></td>
-					<td>Dismissed</td>
-					<td>Fall out of formation</td>
-				</tr>
 				<tr>
 					<td><em>Mandata captate</em></td>
 					<td>Attention</td>
@@ -47,6 +48,11 @@
 					<td>At Ease</td>
 					<td>Relax with feet shoulder's width apart, equipment may rest on the ground; maintain discipline (don't move feet, face the front & remain quite)</td>
 				</tr>
+				<tr>
+					<td><em>Vos Dimitto</em></td>
+					<td>Dismissed</td>
+					<td>Fall out of formation</td>
+				</tr>
 				<tr class="subtitle">
 					<th colspan="3">Dressing Ranks</th>
 				</tr>
@@ -329,7 +335,7 @@
 				<tr>
 					<td><em>Clamate</em></td>
 					<td>Battle cry</td>
-					<td></td>
+					<td><em>Ro..ma! Ro..ma! Ro..ma!</em></td>
 				</tr>
 				<tr>
 					<td><em>Silentium/Tacete</em></td>

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

@@ -1,9 +1,15 @@
 <div class="invert">
 	<div class="container py-4 px-3">
 		<div>
-			<h1 class="mb-4">Getting Started</h1>
+			<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()">
+					<mat-icon class="me-1">print</mat-icon>
+					Print
+				</a>
+			</div>
 			<mat-divider></mat-divider>
-			<div class="mx-5 my-5 text-center text-muted">
+			<div class="mx-5 my-3 text-center text-muted">
 				<h3 class="text-center mb-1 ms-3"><em>Sacramentum Militare</em> (Military Sacrament)</h3>
 				<p><em>"Iurant autem milites omnia se strenue facturos quae praeceperit imperator, numquam deserturos militiam nec mortem recusaturos pro Romana republica!"</em></p>
 				<p>"But the soldiers swear that they shall faithfully execute all that the Emperor commands, that they shall never desert the service, and that they shall not seek to avoid death for the Roman republic!"</p>
@@ -25,35 +31,38 @@
 					Historically, prospective legionaries had to be at least 17 years old, however exceptions can made for mature individuals. Members must be able to physically perform the role that they portray in a
 					realistic manner.
 				</p>
-				<h3 class="mb-0">Next Steps</h3>
+				<h3 class="mb-0">Process</h3>
-				<div class="d-flex flex-column flex-md-row">
+				<div class="d-flex flex-column flex-md-row justify-content-md-between">
 					<div class="me-md-3">
 						<ul class="mt-0">
-							<li>Familiarize yourself with <a routerLink="/rules">our rules</a></li>
+							<li>Familiarize yourself with our <a routerLink="/rules">Rules & Regulations</a></li>
 							<li>Pick out a Roman name:</li>
 							<ul>
 								<li>Period correct</li>
 								<li>Can be fictional or non-fictional</li>
 								<li>Avoid famous people/names</li>
 							</ul>
-							<li><a routerLink="/vendors">Purchase</a> or <a routerLink="/diy">assemble</a> your equipment, ordered by priority:</li>
+							<li><a routerLink="/vendors">Purchase</a> or <a routerLink="/diy">build</a> your equipment, ordered by priority:</li>
 							<ul>
 								<li><span class="fw-bold"><em>Tunica</em> (Tunic)</span> - A large shirt/dress held at the waist by a cord or cloth belt</li>
 								<li><span class="fw-bold"><em>Caligae</em> (Sandals)</span> - Modern leather sandals will do in a pinch</li>
 								<li><span class="fw-bold"><em>Balteus</em> (Belt)</span> - A leather ornamental apron used to affix weapons</li>
 								<li><span class="fw-bold"><em>Pugio</em> (Dagger)</span> - Attached to the <em>Balteus</em></li>
-								<li><em>Cassis</em> (Helmet) - To protect the noggin!</li>
+								<li><em>Cassis</em> (Helmet) - To protect your head</li>
-								<li><em>Gladius</em> (Sword) - The primary weapon of the empire</li>
+								<li><em>Subarmalis</em> (Padded Vest) - Worn under your armour for comfort and protection</li>
-								<li><em>Scutum</em> (Shield) - A large semicircle shield</li>
-								<li><em>Pilum</em> (Javelin) - A ranged weapon</li>
-								<li><em>Lorica</em> (Armour) - Segmata, hamata or plumata/squamta</li>
-								<li><em>Subarmalis</em> (Padded Vest) - Additional comfort & protection</li>
 								<li><em>Focale</em> (Scarf) - Protects the neck from chaffing</li>
+								<li><em>Lorica</em> (Armour) - Segmata, hamata or plumata/squamta</li>
+								<li><em>Gladius</em> (Sword) - The primary weapon of the empire</li>
+								<li><em>Scutum</em> (Shield) - A large curved shield</li>
+								<li><em>Pilum</em> (Javelin) - A ranged throwing weapon</li>
 							</ul>
-							<li>Submit an <a>application</a></li>
+							<li><a>Submit an application</a></li>
 						</ul>
 					</div>
-					<div class="d-flex d-print-none align-items-end justify-content-center">
+					<div class="d-flex d-print-none align-items-end">
+						<img src="/assets/img/recruitment2.jpg" alt="The Roman Empire Wants You!">
+					</div>
+					<div class="d-none d-print-block text-center mt-5 pt-5">
 						<img src="/assets/img/recruitment2.jpg" alt="The Roman Empire Wants You!">
 					</div>
 				</div>

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

@@ -0,0 +1,241 @@
+<div class="invert">
+	<div class="container py-4 px-3">
+		<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()">
+					<mat-icon class="me-1">print</mat-icon>
+					Print
+				</a>
+			</div>
+			<mat-divider></mat-divider>
+			<br>
+		</div>
+		<div>
+			<h2 class="mb-2">Table of Contents</h2>
+			<ul>
+				<li>Wood</li>
+				<ul>
+					<li>Mineral Oil</li>
+					<li>Linseed Oil</li>
+				</ul>
+				<li>Leather</li>
+				<ul>
+					<li>Damp Cloth</li>
+					<li>Conditioner</li>
+					<li>Lanolin</li>
+				</ul>
+				<li>Rust Removal</li>
+				<ul>
+					<li>White Wine Vinegar</li>
+				</ul>
+				<li>Metal Preservation</li>
+				<ul>
+					<li>WD-40</li>
+					<li>Lanolin</li>
+					<li>Wax</li>
+				</ul>
+			</ul>
+		</div>
+		<mat-divider></mat-divider>
+		<div class="my-4 mb-5">
+			<div>
+				<div class="mb-4">
+					<h2 class="mb-2">Leather</h2>
+					<p>Dust can discolour leather & it will become brittle if it dries.</p>
+					<div>
+						<h3 class="mb-2">Damp Cloth</h3>
+						<p>A moist cloth will remove dust and prevent the leather from dying out too much.</p>
+						<table>
+							<thead>
+							<tr>
+								<th>Pros</th>
+								<th>Cons</th>
+							</tr>
+							</thead>
+							<tbody>
+							<tr>
+								<td>
+									<ul>
+										<li>Free</li>
+									</ul>
+								</td>
+								<td>
+									<ul>
+										<li>Should be reapplied monthly</li>
+										<li>No additional protection</li>
+									</ul>
+								</td>
+							</tr>
+							</tbody>
+						</table>
+					</div>
+					<div>
+						<h3 class="mb-2">Conditioners</h3>
+						<p>A variety of leather conditioners exist to moisten and protect leather.</p>
+						<table>
+							<thead>
+							<tr>
+								<th>Pros</th>
+								<th>Cons</th>
+							</tr>
+							</thead>
+							<tbody>
+							<tr>
+								<td>
+									<ul>
+										<li>Provides protection</li>
+									</ul>
+								</td>
+								<td>
+									<ul>
+										<li>Not historically accurate</li>
+									</ul>
+								</td>
+							</tr>
+							</tbody>
+						</table>
+					</div>
+					<div>
+						<h3 class="mb-2">Lanolin <sup>[I]</sup></h3>
+						<p>Water disolvent can be sprayed liberally on metal surfaces to remove any moister.</p>
+						<table>
+							<thead>
+							<tr>
+								<th>Pros</th>
+								<th>Cons</th>
+							</tr>
+							</thead>
+							<tbody>
+							<tr>
+								<td>
+									<ul>
+										<li>Cheap</li>
+										<li>Easy</li>
+									</ul>
+								</td>
+								<td>
+									<ul>
+										<li>Extremely short term</li>
+										<li>Leaves surface oily & smelly</li>
+									</ul>
+								</td>
+							</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<div class="mb-3">
+					<h3 class="mb-2">Wood</h3>
+					<p>Like leather wood can become weathered, dry & crack over time if neglected.</p>
+					<div>
+						<h4 class="mb-2">Mineral Oil</h4>
+						<p>Wipe wooden areas down with a cloth soaked in mineral oil.</p>
+						<table>
+							<thead>
+							<tr>
+								<th>Pros</th>
+								<th>Cons</th>
+							</tr>
+							</thead>
+							<tbody>
+							<tr>
+								<td>
+									<ul>
+										<li>Conditions wood</li>
+										<li>Doesn't affect color</li>
+										<li>Brings out grain without adding color</li>
+									</ul>
+								</td>
+								<td>
+									<ul>
+										<li>Needs to be reapplied monthly</li>
+										<li>Not waterproof</li>
+										<li>Doesn't add any protection</li>
+									</ul>
+								</td>
+							</tr>
+							</tbody>
+						</table>
+					</div>
+					<div>
+						<h4 class="mb-2">Linseed Oil</h4>
+						<p>Lightly apply boiled linseed oil to wooden areas with a cloth. Then leave to dry; this can take 3-7 days.</p>
+						<table>
+							<thead>
+							<tr>
+								<th>Pros</th>
+								<th>Cons</th>
+							</tr>
+							</thead>
+							<tbody>
+							<tr>
+								<td>
+									<ul>
+										<li>Brings out color & texture</li>
+										<li>Penetrates deeply to protect against humidity</li>
+										<li>Adds a protective coating</li>
+										<li>Water proof</li>
+										<li>Reapply annually after base coat is established</li>
+									</ul>
+								</td>
+								<td>
+									<ul>
+										<li>Takes a while to dry</li>
+										<li>Can stain yellow over time</li>
+									</ul>
+								</td>
+							</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<div class="mb-3">
+					<h3 class="mb-2">Rust Removal</h3>
+					<p>Rust can form incredibly quick & keeping your armour polished can be a constant battle.</p>
+					<p>A simplre remideee </p>
+				</div>
+				<div class="mb-3">
+					<h3 class="mb-2">Metal Preservation</h3>
+					<div>
+						<h4 class="mb-2">WD-40</h4>
+						<p>Water disolvent can be sprayed liberally on metal surfaces to remove any moister.</p>
+						<table>
+							<thead>
+								<tr>
+									<th>Pros</th>
+									<th>Cons</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr>
+									<td>
+										<ul>
+											<li>Cheap</li>
+											<li>Easy</li>
+										</ul>
+									</td>
+									<td>
+										<ul>
+											<li>Extremely short term</li>
+											<li>Leaves surface oily & smelly</li>
+										</ul>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<h4>Lanolin <sup>[I]</sup></h4>
+					<h4>Wax <sup>[II]</sup></h4>
+				</div>
+			</div>
+			<div>
+				<h2>Sources</h2>
+				<ol>
+					<li>Tony D., <a href=""><em>Lanolin Used for Metal Preservation Grease and Rome</em></a></li>
+					<li>Robert A. Buerlein, <a href=""><em>Care and Preservation of Edged Weapons</em></a></li>
+				</ol>
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,32 @@
+.table2 {
+	-webkit-print-color-adjust: exact;
+	border: solid 1px #333333;
+
+	thead > tr {
+		//background-color: black !important;
+		//color: white !important;
+		border: solid 1px #333333;
+
+		th {
+			border-width: 0 !important;
+		}
+	}
+
+	tbody {
+		tr:nth-child(odd) {
+			--bs-table-accent-bg: #eee;
+			background: #eee;
+		}
+	}
+
+	tr.subtitle {
+		&, * {
+			background-color: #333333 !important;
+			color: white !important;
+		}
+	}
+
+	td, th {
+		padding: 0.5rem;
+	}
+}

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

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'xxx-maintenance',
+	templateUrl: './maintenance.component.html',
+	styleUrls: ['./maintenance.component.scss']
+})
+export class MaintenanceComponent { }

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

@@ -1,14 +1,20 @@
 <div class="invert">
 	<div class="container py-4 px-3">
 		<div>
-			<h1 class="mb-2">Rules & Regulations</h1>
+			<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()">
+					<mat-icon class="me-1">print</mat-icon>
+					Print
+				</a>
+			</div>
 			<mat-divider></mat-divider>
 			<br>
 		</div>
 		<div>
 			<h2 class="mb-2">General</h2>
 			<p>It is the responsibility of members to:</p>
-			<ol class="mt-1">
+			<ol class="mt-1" >
 				<li>Respect the chain of command</li>
 				<li>Behave like a professional Roman soldier</li>
 				<li>Follow the dress code at all times & stay in character</li>
@@ -21,7 +27,7 @@
 				</li>
 				<li>Posses the minimum amount of kit needed to participate (Let us know if you need something)</li>
 				<li>Equipment is to be as period correct and functional as materials and costs permit</li>
-				<li>All kit should be inspected for cleanliness and serviceability; see our <a href="/maintenance">maintenance guide</a></li>
+				<li>All kit should be inspected for cleanliness and serviceability; see our <a href="/maintenance">maintenance</a> page</li>
 				<li>Absolutely no modern day paraphernalia is permitted (i.e., sunglasses, eyeglasses, wrist watches, piercings of any kind, eccentric hair colour, inappropriate visible tattoos, etc.)</li>
 				<li>Some modern equipment (camping, food, etc.) is permitted after hours provided it is hidden during operational hours</li>
 				<li>During public events all belongings should be secured by at least one member or an assistant</li>
@@ -32,7 +38,7 @@
 			<h3 class="mb-2">Legionaries</h3>
 			<p>
 				The following is a list of equipment needed to participate, depending on the weather & who you are portraying your requirements may be different.
-				Check the <a href="/info/equipment">equipment page</a> for a full list:
+				Check the <a href="/info/equipment">equipment</a> page for a full list:
 			</p>
 			<h4 class="mb-0">Minimum</h4>
 			<small class="text-muted">Around camp & public events</small>
@@ -46,16 +52,16 @@
 			<small class="text-muted">During drill & demonstrations</small>
 			<ul class="mt-1">
 				<li>Everything above</li>
-				<li><em>Cassis</em> (Helmet) - To protect the noggin!</li>
+				<li><em>Cassis</em> (Helmet) - To protect your head</li>
-				<li><em>Subarmalis</em> (Padded Vest) - Additional comfort & protection</li>
+				<li><em>Subarmalis</em> (Padded Vest) - Worn under your armour for comfort and protection</li>
-				<li><em>Lorica</em> (Armour) - Segmata, hamata or plumata/squamta</li>
 				<li><em>Focale</em> (Scarf) - Protects the neck from chaffing</li>
+				<li><em>Lorica</em> (Armour) - Segmata, hamata or plumata/squamta</li>
 				<li><em>Gladius</em> (Sword) - The primary weapon of the empire</li>
-				<li><em>Scutum</em> (Shield) - A large semicircle shield</li>
+				<li><em>Scutum</em> (Shield) - A large curved shield</li>
-				<li><em>Pilum</em> (Javelin) - A ranged weapon</li>
+				<li><em>Pilum</em> (Javelin) - A ranged throwing weapon</li>
 			</ul>
 			<h3 class="mb-2">Non-Legionaries</h3>
-			<p>Any re-enactors are welcome as long as they stay period correct to the 2nd century AD. This may include civilians, barbarians & Greeks.</p>
+			<p>Any re-enactors are welcome as long as they stay period correct for the 1st-2nd century AD. This could include civilians, barbarians & Greeks.</p>
 		</div>
 		<div>
 			<h2 class="mb-2">Weapons</h2>
@@ -65,7 +71,7 @@
 				<li>Use the verbal warning “Clear” before drawing weapons</li>
 				<li>Always follow the instructions of the Range Safety Officer (RSO) when applicable</li>
 				<li>Weapons are not to be handled by the public, under any circumstance</li>
-				<li>Swords and daggers will be secured at all events with a device to ensure that they cannot be removed by unauthorized personnel</li>
+				<li>Swords and daggers will be secured at all events with a device (like cord) to ensure that they cannot be removed by unauthorized personnel</li>
 			</ol>
 		</div>
 		<div>

src/styles.scss

@@ -48,15 +48,18 @@ body {
 }
 
 a, a:visited {
+	color: #b10000;
 	text-decoration: none;
-	color: rgba(255, 255, 255, 0.6);
 }
-a:hover, a:visited:hover { color: #b10000; }
+a:hover {
+	color: #b10000;
+	text-decoration: underline;
+}
 
 h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }
 
 .container {
-	max-width: 800px;
+	max-width: 1200px;
 	margin-left: auto;
 	margin-right: auto;
 }
@@ -65,23 +68,23 @@ h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }
 	background: #fff;
 	color: #000;
 
-	a, a:visited {
-		text-decoration: none;
-		color: #b10000;
-	}
-	a:hover, a:visited:hover { color: #cc0000; }
-
 	mat-divider {
 		border-color: rgba(0, 0, 0, 0.4);
 	}
 }
 
-.fill {
+@media screen {
-	height: 0;
+	.fill {
-	min-height: calc(100vh - 64px);
+		height: 0;
+		min-height: calc(100vh - 64px);
+	}
 }
 
 .transparent-link {
 	a, a:visited { color: #fff; }
 	a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
 }
+
+ol {
+	list-style-type: upper-roman;
+}