Added DIY page

src/app/app.module.ts

@@ -24,6 +24,7 @@ import {CalendarComponent} from './views/events/calendar/calendar.component';
 import {HibernaComponent} from './views/events/hiberna/hiberna.component';
 import {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
+import {DiyComponent} from './views/reenact/diy/diy.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';
@@ -38,6 +39,7 @@ export const APP_COMPONENTS: any[] = [
 	CalendarComponent,
 	CarouselComponent,
 	ContactComponent,
+	DiyComponent,
 	DrillComponent,
 	FooterComponent,
 	FourOFourComponent,

src/app/app.routing.ts

@@ -8,6 +8,7 @@ import {CalendarComponent} from './views/events/calendar/calendar.component';
 import {HibernaComponent} from './views/events/hiberna/hiberna.component';
 import {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
+import {DiyComponent} from './views/reenact/diy/diy.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';
@@ -17,6 +18,7 @@ const routes: Routes = [
 	{path: '', pathMatch: 'full', component: HomeComponent},
 	{path: 'about', component: AboutComponent, data: {title: 'About'}},
 	{path: 'drill', component: DrillComponent, data: {title: 'Drill Commands'}},
+	{path: 'diy', component: DiyComponent, data: {title: 'Build Equipment'}},
 	{path: 'events/agonium', component: AgoniumComponent, data: {title: 'Agonium'}},
 	{path: 'events/castra-aestiva', component: AestivaComponent, data: {title: 'Castra Aestiva'}},
 	{path: 'events/castra-hiberna', component: HibernaComponent, data: {title: 'Castra Hiberna'}},

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

@@ -0,0 +1,21 @@
+<div class="invert">
+	<div class="cap-width py-5 px-3">
+		<div class="mb-3">
+			<div class="d-flex align-items-end justify-content-between mb-2">
+				<h1 class="mb-0">Build Equipment</h1>
+			</div>
+			<mat-divider></mat-divider>
+		</div>
+		<div>
+			<ul>
+				<li><em>Beltus</em> (Belt): <a href="/assets/manuals/Beltus%20Part%201%20-%20Robert%20Norton.pdf" target="_blank"> Part 1</a>, <a href="/assets/manuals/Beltus%20Part%202%20-%20Robert%20Norton.pdf" target="_blank">Part 2</a></li>
+				<li><a href="/assets/manuals/Calcei%20-%20Lee%20Holeva.pdf" target="_blank"><em>Calcei</em> (Boots)</a></li>
+				<li><a href="/assets/manuals/Caligae%20-%20Robert%20Norton.pdf" target="_blank"><em>Caligae</em> (Sandals)</a></li>
+				<li><a href="/assets/manuals/Helmet%20Liner%20-%20Robert%20Norton.pdf" target="_blank">Helmet Liner</a></li>
+				<li><a href="/assets/manuals/Loculus%20-%20Robert%20Norton.pdf" target="_blank"><em>Loculus</em> (Bag)</a></li>
+				<li><em>Lorica Hamata</em> (Chain-mail): <a href="/assets/manuals/Lorica%20Hamata%20Part%201.pdf" target="_blank"> Part 1</a>, <a href="/assets/manuals/Lorica%20Hamata%20Part%202.pdf" target="_blank">Part 2</a></li>
+				<li><a href="/assets/manuals/Scutum.pdf" target="_blank"><em>Scutum</em> (Shield)</a></li>
+			</ul>
+		</div>
+	</div>
+</div>

src/app/views/reenact/diy/diy.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'xxx-diy',
+	templateUrl: './diy.component.html'
+})
+export class DiyComponent { }

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

@@ -1,32 +0,0 @@
-.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/drill/drill.component.ts

@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 
 @Component({
 	selector: 'xxx-drill',
-	templateUrl: './drill.component.html',
+	templateUrl: './drill.component.html'
-	styleUrls: ['./drill.component.scss']
 })
 export class DrillComponent { }

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

@@ -1,34 +0,0 @@
-.table2 {
-	-webkit-print-color-adjust: exact;
-	border: solid 1px #333333;
-	table-layout: fixed;
-	width: 100%;
-
-	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

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

src/styles.scss

@@ -53,9 +53,8 @@ a, a:visited {
 	}
 }
 
-.transparent-link {
+ol {
-	a, a:visited { color: #fff; }
+	list-style-type: upper-roman;
-	a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
 }
 
 .cap-width {
@@ -73,6 +72,42 @@ a, a:visited {
 	}
 }
 
-ol {
+.table2 {
-	list-style-type: upper-roman;
+	-webkit-print-color-adjust: exact;
+	border: solid 1px #333333;
+	table-layout: fixed;
+	width: 100%;
+
+	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;
+	}
+}
+
+.transparent-link {
+	a, a:visited { color: #fff; }
+	a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
 }