Updates

2022-09-14 22:07:17 -04:00
parent 5c685bee4c
commit ea6bf2d09a
99 changed files with 21064 additions and 60266 deletions
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppRouting } from './app.routing';
+import {FooterComponent} from './components/footer/footer.component';
+import {NavbarComponent} from './components/navbar/navbar.component';
+import { AppComponent } from './containers/app/app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MaterialModule} from './material.module';
+import {HomeComponent} from './views/home/home.component';
+
+export const APP_COMPONENTS = [
+	AppComponent,
+	HomeComponent,
+	FooterComponent,
+	NavbarComponent
+]
+
+@NgModule({
+  declarations: APP_COMPONENTS,
+  imports: [
+	  BrowserModule,
+	  AppRouting,
+	  BrowserAnimationsModule,
+	  MaterialModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {HomeComponent} from './views/home/home.component';
+
+const routes: Routes = [
+	{path: '', pathMatch: 'full', component: HomeComponent}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRouting { }
--- a/src/app/components/banner/banner.component.html
+++ b/src/app/components/banner/banner.component.html
--- a/src/app/components/banner/banner.component.ts
+++ b/src/app/components/banner/banner.component.ts
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -0,0 +1,51 @@
+<footer>
+	<div class="p-2" style="background: #333">
+		<div class="mx-auto d-flex justify-content-around" style="max-width: 800px">
+			<div>
+				<h2 class="sitemap-header">Home</h2>
+				<ul class="m-0">
+					<li><a routerLink="/">About</a></li>
+					<li><a routerLink="/">Gallery</a></li>
+					<li><a routerLink="/">Contact</a></li>
+				</ul>
+			</div>
+			<div>
+				<h2 class="sitemap-header">Learn</h2>
+				<ul class="m-0">
+					<li><a routerLink="/">Legio XXX</a></li>
+					<li><a routerLink="/">Legion Structure</a></li>
+					<li><a routerLink="/">Legion Camp</a></li>
+					<li><a routerLink="/">Legion Headquarters</a></li>
+					<li><a routerLink="/">Legionairy Equipment</a></li>
+					<li><a routerLink="/">Legionairy Training</a></li>
+					<li><a routerLink="/">Resources</a></li>
+				</ul>
+			</div>
+			<div>
+				<h2 class="sitemap-header">Events</h2>
+				<ul class="m-0">
+					<li><a routerLink="/">Castra Aestiva</a></li>
+					<li><a routerLink="/">Castra Hiberna</a></li>
+					<li><a routerLink="/">Callendar</a></li>
+				</ul>
+			</div>
+			<div>
+				<h2 class="sitemap-header">Members</h2>
+				<ul class="m-0">
+					<li><a routerLink="/">Getting Started</a></li>
+					<li><a routerLink="/">Rules & Regulations</a></li>
+					<li><a routerLink="/">Approved Vendors</a></li>
+					<li><a routerLink="/">Kit Assembly</a></li>
+					<li><a routerLink="/">Kit Maintinance</a></li>
+					<li><a routerLink="/">Login/Register</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+	<div class="py-2 text-center">
+		<p class="m-0">
+			Copyright &copy; Legio XXX 2022 | All Rights Reserved<br>
+			Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
+		</p>
+	</div>
+</footer>
--- a/src/app/components/footer/footer.component.scss
+++ b/src/app/components/footer/footer.component.scss
@@ -0,0 +1,16 @@
+.sitemap-header {
+	color: rgba(255, 255, 255, 0.8);
+	margin: 0;
+}
+
+ul {
+	list-style: none;
+	padding: 0;
+
+	a {
+		text-decoration: none;
+		color: rgba(255, 255, 255, 0.55);
+	}
+	a:visited:hover, a:hover { color: rgba(255, 255, 255, 0.75); }
+	a:visited { color: rgba(255, 255, 255, 0.55); }
+}
--- a/src/app/components/footer/footer.component.ts
+++ b/src/app/components/footer/footer.component.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'xxx-footer',
+	templateUrl: './footer.component.html',
+	styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent { }
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -0,0 +1,55 @@
+<mat-toolbar>
+	<mat-toolbar-row>
+		<div>
+			<a class="navbar-brand d-flex align-items-center" href="#">
+				<img src="assets/img/capricorn.png" alt="Capricorn" height="45" width="45">
+				<div class="px-2">LEGIO · XXX</div>
+			</a>
+		</div>
+		<div class="flex-grow-1"></div>
+		<div *ngIf="!hamburger">
+			<a href="#about"><button mat-button class="navbar-button">About</button></a>
+			<a href="#gallery"><button mat-button class="navbar-button">Gallery</button></a>
+			<a href="#contact"><button mat-button class="navbar-button">Contact</button></a>
+			<button mat-button [matMenuTriggerFor]="learnMenu" class="navbar-button">
+				Learn <mat-icon>expand_more</mat-icon>
+			</button>
+			<mat-menu #learnMenu="matMenu">
+				<button mat-menu-item>Legio XXX</button>
+				<button mat-menu-item>Legion Structure</button>
+				<button mat-menu-item>Legion Camp</button>
+				<button mat-menu-item>Legion Headquarters</button>
+				<button mat-menu-item>Legionary Equipment</button>
+				<button mat-menu-item>Legionairy Training</button>
+				<mat-divider></mat-divider>
+				<button mat-menu-item>Resources</button>
+			</mat-menu>
+			<button mat-button [matMenuTriggerFor]="eventsMenu" class="navbar-button">
+				Events <mat-icon>expand_more</mat-icon>
+			</button>
+			<mat-menu #eventsMenu="matMenu">
+				<button mat-menu-item>Castra Aestiva</button>
+				<button mat-menu-item>Castra Hiberna</button>
+				<mat-divider></mat-divider>
+				<button mat-menu-item>Calendar</button>
+			</mat-menu>
+			<button mat-button [matMenuTriggerFor]="membersMenu" class="navbar-button">
+				Members <mat-icon>expand_more</mat-icon>
+			</button>
+			<mat-menu #membersMenu="matMenu">
+				<button mat-menu-item>Getting Started</button>
+				<mat-divider></mat-divider>
+				<button mat-menu-item>Rules & Regulations</button>
+				<button mat-menu-item>Approved Vendors</button>
+				<button mat-menu-item>Kit Assembly</button>
+				<button mat-menu-item>Kit Maintinance</button>
+				<mat-divider></mat-divider>
+				<button mat-menu-item>Login/Register</button>
+			</mat-menu>
+		</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>
--- a/src/app/components/navbar/navbar.component.scss
+++ b/src/app/components/navbar/navbar.component.scss
@@ -0,0 +1,55 @@
+.navbar-spacing {
+	height: 64px;
+	width: 100%;
+}
+
+::ng-deep mat-toolbar {
+	background: #000 !important;
+	border-bottom: #fff solid 1px;
+	height: 64px;
+	position: fixed;
+	top: 0;
+	z-index: 100;
+
+	.mat-toolbar-row {
+		height: 100%;
+	}
+
+	.navbar-brand {
+		color: #fff;
+		text-decoration: none;
+		font-weight: lighter;
+	}
+
+	.navbar-button {
+		color: rgba(255, 255, 255, 0.55);
+		font-weight: normal;
+		padding: 0 8px 0 8px;
+
+		&:hover {
+			color: rgba(255, 255, 255, 0.75);
+		}
+	}
+}
+
+::ng-deep .mat-menu-content {
+	background: #000;
+	border: #fff solid 1px;
+	padding: 0 !important;
+	border-radius: 0.25rem;
+
+	mat-divider {
+		border-color: white;
+		margin-top: 0.2rem;
+		padding-bottom: 0.1rem;
+	}
+
+	button {
+		height: 36px;
+		line-height: 36px;
+
+		&:hover {
+			background: rgba(255, 255, 255, 0.15) !important;
+		}
+	}
+}
--- a/src/app/components/navbar/navbar.component.ts
+++ b/src/app/components/navbar/navbar.component.ts
@@ -0,0 +1,12 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+	selector: 'xxx-navbar',
+	templateUrl: './navbar.component.html',
+	styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent {
+	@Input() hamburger = true;
+
+	@Output() hamburgerClick = new EventEmitter<void>();
+}
--- a/src/app/containers/app/app.component.html
+++ b/src/app/containers/app/app.component.html
@@ -0,0 +1,3 @@
+<xxx-navbar [hamburger]="mobile"></xxx-navbar>
+<router-outlet></router-outlet>
+<xxx-footer></xxx-footer>
--- a/src/app/containers/app/app.component.scss
+++ b/src/app/containers/app/app.component.scss
--- a/src/app/containers/app/app.component.ts
+++ b/src/app/containers/app/app.component.ts
@@ -0,0 +1,25 @@
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import { Component } from '@angular/core';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {filter} from 'rxjs';
+import { LocalStorage } from 'webstorage-decorators';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+	mobile = false;
+	open = false;
+
+	constructor(private router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
+		router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => this.open = false);
+		breakpointObserver.observe(['(max-width: 750px)']).subscribe(result => {
+			console.log(result)
+			this.mobile = result.matches;
+			this.open = !this.mobile;
+		})
+	}
+
+}
--- a/src/app/material.module.ts
+++ b/src/app/material.module.ts
@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatToolbarModule} from '@angular/material/toolbar';
+
+export const MATERIAL_MODULES = [
+	MatButtonModule,
+	MatDividerModule,
+	MatIconModule,
+	MatMenuModule,
+	MatToolbarModule
+];
+
+@NgModule({
+	imports: MATERIAL_MODULES,
+	exports: MATERIAL_MODULES,
+})
+export class MaterialModule {}
--- a/src/app/views/events/.gitkeep
+++ b/src/app/views/events/.gitkeep
@@ -0,0 +1 @@
+Z^C5kgHKfYgy
--- a/src/app/views/home/home.component.html
+++ b/src/app/views/home/home.component.html
@@ -0,0 +1,77 @@
+<header class="fill">
+	<div class="fill d-flex flex-column align-items-center justify-content-center">
+		<img src="/assets/img/spqr.png" class="mt-5" alt="SPQR" height="250" width="250" style="filter: drop-shadow(2px 4px 6px black);">
+		<div>
+			<a href="#about" class="text-white">
+				<i class="fa fa-angle-double-down fa-4x" style="filter: drop-shadow(2px 4px 6px black);"></i>
+			</a>
+		</div>
+	</div>
+</header>
+<section id="about" class="d-flex flex-column align-items-center bg-black text-white" style="height: 100vh">
+	<div class="mb-5 py-5"><!-- Spacer --></div>
+	<h2>About</h2>
+	<div class="container">
+		<div class="d-flex align-items-center justify-content-around">
+			<div class="">
+				<img src="/assets/img/trajan-bust.png" height="auto" width="275px">
+			</div>
+			<div class="text-center">
+				<h4>Legio XXX Vlpia Victrix</h4>
+				<h4 class="mb-4">(Trajan's Victorious Thirtieth Legion)</h4>
+				<p>Legio XXX is a North American Roman re-enactment group that has been active since 2004.</p>
+				<p>It's members represent a cross between living history enthusiasts and edutainers</p>
+				<p>recreating the lives of LEGIO XXX, founded by emperor Trajan in the 2nd centery AD.</p>
+			</div>
+			<div class="ps-4">
+				<div class="p-1 text-center" style="border: solid 5px white;">
+					<div class="p-1" style="border: dashed 5px white;">
+						<div class="p-3" style="border: solid 5px white;">
+							<h3 class="text-nowrap" style="font-size: 2em">LEGIO · XXX</h3>
+							<img src="/assets/img/capricorn.png" class="my-3" alt="capricorn" height="140em" width="140em">
+							<h4 class="text-nowrap" style="font-size: 1.5em">VLPIA · VICTRIX</h4>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+<section id="gallery" class="d-flex flex-column align-items-center" style="height: 100vh; background: #fff; color: #000;">
+	<div class="mb-5 py-5"><!-- Spacer --></div>
+	<h2>Gallery</h2>
+</section>
+<section style="background: #fff">
+	<img src="/assets/img/formation.png" width="100%" height="auto">
+</section>
+<section id="contact" class="d-flex flex-column align-items-center py-5 bg-black text-white" style="min-height: 100vh">
+	<div class="mb-5 py-5"><!-- Spacer --></div>
+	<h2>Contact</h2>
+	<div class="w-100 px-5" style="max-width: 600px">
+		<form class="text-start">
+			<div class="mb-3">
+				<label class="text-white w-100" for="email">Email</label>
+				<input id="email" class="form-control w-100.0" type="email" placeholder="username@example.com">
+			</div>
+			<div class="mb-3">
+				<label class="text-white w-100" for="subject">Subject</label>
+				<select id="subject" class="form-control w-100.0">
+					<option>Castra Aestiva/Castra Hiberna</option>
+					<option>Re-enactment Inqueries</option>
+					<option>Other</option>
+				</select>
+			</div>
+			<div class="mb-3">
+				<label class="text-white w-100" for="message">Message</label>
+				<textarea id="message" class="form-control w-100" rows="5"></textarea>
+			</div>
+			<div class="d-flex justify-content-between align-items-center">
+				<div class="d-inline">
+					<input type="checkbox" class="form-check-input" id="copy">
+					<label class="form-check-label" for="copy">Send me a copy</label>
+				</div>
+				<button class="btn btn-primary">Send</button>
+			</div>
+		</form>
+	</div>
+</section>
--- a/src/app/views/home/home.component.scss
+++ b/src/app/views/home/home.component.scss
@@ -0,0 +1,4 @@
+header {
+	background: black url("/assets/img/colosseum.jpg") no-repeat top center;
+	background-size: cover;
+}
--- a/src/app/views/home/home.component.ts
+++ b/src/app/views/home/home.component.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'xxx-home',
+	templateUrl: './home.component.html',
+	styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {
+
+}
--- a/src/app/views/members/.gitkeep
+++ b/src/app/views/members/.gitkeep
@@ -0,0 +1 @@
+Z^C5kgHKfYgy
--- a/src/app/views/resources/.gitkeep
+++ b/src/app/views/resources/.gitkeep
@@ -0,0 +1 @@
+Z^C5kgHKfYgy
--- a/src/assets/img/baracks.svg
+++ b/src/assets/img/baracks.svg
--- a/src/assets/img/camp.svg
+++ b/src/assets/img/camp.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <svg x="0" y="0" width="100%" height="100%">
+        <rect x="2.5%" y="2.5%" width="95%" height="95%" rx="10%" fill="#009a17"></rect>
+        <!-- Ditch -->
+        <rect class="fossa-agar" x="2.5%" y="2.5%" width="95%" height="95%" rx="10%" fill-opacity="0" stroke="#836539" />
+        <!-- Palisade -->
+        <rect class="vallum" x="6%" y="6%" width="88%" height="88%" rx="6%" stroke-dasharray="0.5% 0.5%" fill-opacity="0" stroke="#000" />
+        <!-- Roads -->
+        <g class="roads">
+            <rect x="0" y="55%" width="100%" height="6%" fill="#009a17" />
+            <rect x="47%" y="0" width="6%" height="100%" fill="#009a17" />
+            <rect x="0" y="56%" width="100%" height="4%" fill="#666666" />
+            <rect x="48%" y="0" width="4%" height="100%" fill="#666666" />
+            <rect x="7%" y="42%" width="86%" height="2%" fill="#666666" />
+        </g>
+        <!-- Palisade -->
+        <rect class="vallum" x="5%" y="5%" width="90%" height="90%" rx="7.5%" />
+        <!-- North towers -->
+        <rect class="tower" x="44%" y="5%" width="3%" height="3%" fill="#c19a6b" stroke="black" stroke-width="1%"></rect>
+        <rect class="tower" x="53%" y="5%" width="3%" height="3%" fill="#c19a6b" stroke="black" stroke-width="1%"></rect>
+        <!-- East towers -->
+        <rect class="tower" x="92%" y="52%" width="3%" height="3%" fill="#c19a6b" stroke="black" stroke-width="1%"></rect>
+        <rect class="tower" x="92%" y="61%" width="3%" height="3%" fill="#c19a6b" stroke="black" stroke-width="1%"></rect>
+        <!-- South towers -->
+        <rect class="tower" x="44%" y="92%" width="3%" height="3%" fill="#c19a6b" stroke="black" stroke-width="1%"></rect>
+        <rect class="tower" x="53%" y="92%" width="3%" height="3%" fill="#c19a6b" stroke="black" stroke-width="1%"></rect>
+        <!-- West towers -->
+        <rect class="tower" x="5%" y="52%" width="3%" height="3%" fill="#c19a6b" stroke="black" stroke-width="1%"></rect>
+        <rect class="tower" x="5%" y="61%" width="3%" height="3%" fill="#c19a6b" stroke="black" stroke-width="1%"></rect>
+    </svg>
+    <!-- Fabricae -->
+    <svg class="fabricae" x="35%" y="25%" width="10%" height="10%" transform="rotate(90)">
+        <rect height="100%" width="100%" fill="#ff6600" stroke="#ff3300"></rect>
+        <rect x="26%" y="26%" width="50%" height="50%" fill="#009a17" stroke="#ff3300"></rect>
+        <rect x="76%" y="42%" width="20%" height="20%" fill="#009a17" stroke="#ff3300"></rect>
+        <rect x="72%" y="43%" width="31%" height="18%" fill="#009a17"></rect>
+        </svg>
+</svg>
--- a/src/assets/img/capricorn.png
+++ b/src/assets/img/capricorn.png
--- a/src/assets/img/colosseum.jpg
+++ b/src/assets/img/colosseum.jpg
--- a/src/assets/img/fabrica.svg
+++ b/src/assets/img/fabrica.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <style>
+        * {
+            fill: #ccc;
+            stroke: #000;
+        }
+    </style>
+    <g class="fabrica">
+        <rect x="0" y="0" height="300" width="300" style="stroke-opacity: 0"></rect>
+        <!-- Columns -->
+        <ellipse cx="290" cy="10" rx="2" ry="2"/>
+        <ellipse cx="290" cy="30" rx="2" ry="2"/>
+        <ellipse cx="290" cy="50" rx="2" ry="2"/>
+        <ellipse cx="290" cy="70" rx="2" ry="2"/>
+        <ellipse cx="290" cy="90" rx="2" ry="2"/>
+        <ellipse cx="290" cy="110" rx="2" ry="2"/>
+        <ellipse cx="290" cy="130" rx="2" ry="2"/>
+        <ellipse cx="290" cy="170" rx="2" ry="2"/>
+        <ellipse cx="290" cy="190" rx="2" ry="2"/>
+        <ellipse cx="290" cy="210" rx="2" ry="2"/>
+        <ellipse cx="290" cy="230" rx="2" ry="2"/>
+        <ellipse cx="290" cy="250" rx="2" ry="2"/>
+        <ellipse cx="290" cy="270" rx="2" ry="2"/>
+        <ellipse cx="290" cy="290" rx="2" ry="2"/>
+        <!-- Rooms -->
+        <line x1="225" y1="0" x2="225" y2="300" stroke-dasharray="140 20 140"></line>
+        <line x1="275" y1="0" x2="275" y2="300" stroke-dasharray="140 20 140"></line>
+        <line x1="225" y1="0" x2="275" y2="0"></line>
+        <line x1="225" y1="300" x2="275" y2="300"></line>
+        <rect x="225" y="50" width="50" height="75"></rect>
+        <rect x="225" y="175" width="50" height="75"></rect>
+        <!-- Courtyard -->
+        <ellipse cx="50" cy="50" rx="2" ry="2"/>
+        <ellipse cx="70" cy="50" rx="2" ry="2"/>
+        <ellipse cx="90" cy="50" rx="2" ry="2"/>
+        <ellipse cx="110" cy="50" rx="2" ry="2"/>
+        <ellipse cx="130" cy="50" rx="2" ry="2"/>
+        <ellipse cx="150" cy="50" rx="2" ry="2"/>
+        <ellipse cx="170" cy="50" rx="2" ry="2"/>
+        <ellipse cx="190" cy="50" rx="2" ry="2"/>
+
+        <ellipse cx="210" cy="50" rx="2" ry="2"/>
+        <ellipse cx="210" cy="70" rx="2" ry="2"/>
+        <ellipse cx="210" cy="90" rx="2" ry="2"/>
+        <ellipse cx="210" cy="110" rx="2" ry="2"/>
+        <ellipse cx="210" cy="130" rx="2" ry="2"/>
+        <ellipse cx="210" cy="170" rx="2" ry="2"/>
+        <ellipse cx="210" cy="190" rx="2" ry="2"/>
+        <ellipse cx="210" cy="210" rx="2" ry="2"/>
+        <ellipse cx="210" cy="230" rx="2" ry="2"/>
+        <ellipse cx="210" cy="250" rx="2" ry="2"/>
+
+        <ellipse cx="50" cy="250" rx="2" ry="2"/>
+        <ellipse cx="70" cy="250" rx="2" ry="2"/>
+        <ellipse cx="90" cy="250" rx="2" ry="2"/>
+        <ellipse cx="110" cy="250" rx="2" ry="2"/>
+        <ellipse cx="130" cy="250" rx="2" ry="2"/>
+        <ellipse cx="150" cy="250" rx="2" ry="2"/>
+        <ellipse cx="170" cy="250" rx="2" ry="2"/>
+        <ellipse cx="190" cy="250" rx="2" ry="2"/>
+
+        <ellipse cx="50" cy="70" rx="2" ry="2"/>
+        <ellipse cx="50" cy="90" rx="2" ry="2"/>
+        <ellipse cx="50" cy="110" rx="2" ry="2"/>
+        <ellipse cx="50" cy="130" rx="2" ry="2"/>
+        <ellipse cx="50" cy="150" rx="2" ry="2"/>
+        <ellipse cx="50" cy="170" rx="2" ry="2"/>
+        <ellipse cx="50" cy="190" rx="2" ry="2"/>
+        <ellipse cx="50" cy="210" rx="2" ry="2"/>
+        <ellipse cx="50" cy="230" rx="2" ry="2"/>
+
+        <ellipse cx="10" cy="10" rx="2" ry="2"/>
+        <ellipse cx="30" cy="10" rx="2" ry="2"/>
+        <ellipse cx="50" cy="10" rx="2" ry="2"/>
+        <ellipse cx="70" cy="10" rx="2" ry="2"/>
+        <ellipse cx="90" cy="10" rx="2" ry="2"/>
+        <ellipse cx="110" cy="10" rx="2" ry="2"/>
+        <ellipse cx="130" cy="10" rx="2" ry="2"/>
+        <ellipse cx="150" cy="10" rx="2" ry="2"/>
+        <ellipse cx="170" cy="10" rx="2" ry="2"/>
+        <ellipse cx="190" cy="10" rx="2" ry="2"/>
+        <ellipse cx="210" cy="10" rx="2" ry="2"/>
+
+        <ellipse cx="10" cy="30" rx="2" ry="2"/>
+        <ellipse cx="10" cy="50" rx="2" ry="2"/>
+        <ellipse cx="10" cy="70" rx="2" ry="2"/>
+        <ellipse cx="10" cy="90" rx="2" ry="2"/>
+        <ellipse cx="10" cy="110" rx="2" ry="2"/>
+        <ellipse cx="10" cy="130" rx="2" ry="2"/>
+        <ellipse cx="10" cy="150" rx="2" ry="2"/>
+        <ellipse cx="10" cy="170" rx="2" ry="2"/>
+        <ellipse cx="10" cy="190" rx="2" ry="2"/>
+        <ellipse cx="10" cy="210" rx="2" ry="2"/>
+        <ellipse cx="10" cy="230" rx="2" ry="2"/>
+        <ellipse cx="10" cy="250" rx="2" ry="2"/>
+        <ellipse cx="10" cy="270" rx="2" ry="2"/>
+
+        <ellipse cx="10" cy="290" rx="2" ry="2"/>
+        <ellipse cx="30" cy="290" rx="2" ry="2"/>
+        <ellipse cx="50" cy="290" rx="2" ry="2"/>
+        <ellipse cx="70" cy="290" rx="2" ry="2"/>
+        <ellipse cx="90" cy="290" rx="2" ry="2"/>
+        <ellipse cx="110" cy="290" rx="2" ry="2"/>
+        <ellipse cx="130" cy="290" rx="2" ry="2"/>
+        <ellipse cx="150" cy="290" rx="2" ry="2"/>
+        <ellipse cx="170" cy="290" rx="2" ry="2"/>
+        <ellipse cx="190" cy="290" rx="2" ry="2"/>
+        <ellipse cx="210" cy="290" rx="2" ry="2"/>
+    </g>
+</svg>
--- a/src/assets/img/formation.png
+++ b/src/assets/img/formation.png
--- a/src/assets/img/intro-bg.jpg
+++ b/src/assets/img/intro-bg.jpg
--- a/src/assets/img/principia.svg
+++ b/src/assets/img/principia.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <style>
+        * {
+            fill: #ccc;
+            stroke: #000;
+        }
+    </style>
+    <g class="principia">
+        <rect x="0" y="0" height="275" width="200" style="stroke-opacity: 0"></rect>
+        <!-- Perimeter -->
+        <line x1="0" y1="0" x2="200" y2="0"></line>
+        <line x1="200" y1="0" x2="200" y2="275" stroke-dasharray="102.5 20 152.5"></line>
+        <line x1="0" y1="0" x2="0" y2="275" stroke-dasharray="102.5 20 152.5"></line>
+        <line x1="200" y1="275" x2="0" y2="275" stroke-dasharray="90 20 90"></line>
+        <!-- Rooms -->
+        <line x1="0" y1="50" x2="200" y2="50" stroke-dasharray="51.25 10 28.75 20 28.75 10 51.25"></line>
+        <line x1="37.5" y1="0" x2="37.5" y2="50" stroke-dasharray="35 10 5"></line>
+        <line x1="75" y1="0" x2="75" y2="50"></line>
+        <line x1="125" y1="0" x2="125" y2="50"></line>
+        <line x1="162.5" y1="0" x2="162.5" y2="50" stroke-dasharray="35 10 5"></line>
+        <!-- Corridor -->
+        <line x1="0" y1="100" x2="200" y2="100" stroke-dasharray="10 20 20 20 20 20 20 20 20 20 10"></line>
+        <line x1="0" y1="125" x2="200" y2="125" stroke-dasharray="10 20 20 20 20 20 20 20 20 20 10"></line>
+        <!-- Courtyard -->
+        <ellipse cx="25" cy="150" rx="2" ry="2"/>
+        <ellipse cx="175" cy="150" rx="2" ry="2"/>
+        <ellipse cx="25" cy="175" rx="2" ry="2"/>
+        <ellipse cx="175" cy="175" rx="2" ry="2"/>
+        <ellipse cx="25" cy="200" rx="2" ry="2"/>
+        <ellipse cx="175" cy="200" rx="2" ry="2"/>
+        <ellipse cx="25" cy="225" rx="2" ry="2"/>
+        <ellipse cx="175" cy="225" rx="2" ry="2"/>
+        <ellipse cx="25" cy="250" rx="2" ry="2"/>
+        <ellipse cx="50" cy="250" rx="2" ry="2"/>
+        <ellipse cx="75" cy="250" rx="2" ry="2"/>
+        <ellipse cx="100" cy="250" rx="2" ry="2"/>
+        <ellipse cx="125" cy="250" rx="2" ry="2"/>
+        <ellipse cx="150" cy="250" rx="2" ry="2"/>
+        <ellipse cx="175" cy="250" rx="2" ry="2"/>
+    </g>
+</svg>
--- a/src/assets/img/spqr.png
+++ b/src/assets/img/spqr.png
--- a/src/assets/img/standard.png
+++ b/src/assets/img/standard.png
--- a/src/assets/img/trajan-bust.png
+++ b/src/assets/img/trajan-bust.png
--- a/src/assets/img/trajan-column.jpg
+++ b/src/assets/img/trajan-column.jpg
--- a/src/assets/img/trajan.png
+++ b/src/assets/img/trajan.png
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!-- TODO: Description-->
+	<meta name="description" content="">
+	<meta name="author" content="Zak Timson">
+
+	<title>LEGIO · XXX</title>
+
+	<link href="assets/img/capricorn.png" rel="icon" type="image/png">
+	<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
+	<script src="node_modules/jquery/dist/jquery.min.js"></script>
+	<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+
+<body class="mat-typography" style="background: #000">
+	<app-root></app-root>
+</body>
+</html>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -0,0 +1,38 @@
+@use '@angular/material' as mat;
+@include mat.core();
+
+// hue. Available color palettes: https://material.io/design/color/
+$LegioXXX-primary: mat.define-palette(mat.$red-palette, 900);
+$LegioXXX-accent: mat.define-palette(mat.$indigo-palette, 900);
+$LegioXXX-warn: mat.define-palette(mat.$orange-palette, 500);
+$LegioXXX-theme: mat.define-dark-theme((
+  color: (
+    primary: $LegioXXX-primary,
+    accent: $LegioXXX-accent,
+    warn: $LegioXXX-warn,
+  )
+));
+
+@include mat.all-component-themes($LegioXXX-theme);
+
+@import '~bootstrap/dist/css/bootstrap-utilities.min.css';
+
+html, body {
+	height: 100%;
+}
+body {
+	background: #000;
+	color: #fff;
+	font-family: Roboto, sans-serif;
+	margin: 0;
+}
+
+* { scroll-behavior: smooth !important; }
+
+a { color: #ff0000; }
+a:visited:hover, a:hover { color: #aa0000; }
+a:visited { color: #ff5555; }
+
+.fill {
+	min-height: calc(100vh - 64px);
+}