Updates

2022-09-14 22:07:17 -04:00 · 2022-09-14 22:07:17 -04:00 · ea6bf2d09a
commit ea6bf2d09a
parent 5c685bee4c
99 changed files with 21064 additions and 60266 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,42 @@
-.idea
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/.gitlab/.gitlab-ci.yml
+++ b/.gitlab/.gitlab-ci.yml
@ -0,0 +1,97 @@
+image: node:16
+
+stages:
+  - build
+  - test
+  - publish
+  - deploy
+
+npm:
+  stage: build
+  artifacts:
+    paths:
+      - dist
+    expire_in: 1 week
+  cache:
+    - key:
+        files:
+          - package.json
+      paths:
+        - node_modules
+        - package-lock.json
+      policy: pull-push
+    - key: $CI_PIPELINE_ID
+      paths:
+        - dist
+      policy: push
+  script:
+    - npm i
+    - npm run build
+  rules:
+    - if: $CI_COMMIT_BRANCH
+
+audit:
+  stage: test
+  cache:
+    - key:
+        files:
+          - package.json
+      paths:
+        - node_modules
+      policy: pull
+  script:
+    - AUDIT=$(npm audit)
+    - echo "vulnerabilities_high $(echo $AUDIT | grep -oE '[0-9]+ high' | grep -oE '[0-9]+' || echo 0)" > metrics.txt
+    - echo "vulnerabilities_medium $(echo $AUDIT | grep -oE '[0-9]+ moderate' | grep -oE '[0-9]+' || echo 0)" >> metrics.txt
+    - echo "vulnerabilities_low $(echo $AUDIT | grep -oE '[0-9]+ low' | grep -oE '[0-9]+' || echo 0)" >> metrics.txt
+    - echo "$AUDIT"
+  artifacts:
+    reports:
+      metrics: metrics.txt
+  rules:
+    - if: $CI_COMMIT_BRANCH
+
+registry:
+  stage: publish
+  image: docker
+  cache:
+    - key: $CI_PIPELINE_ID
+      paths:
+        - dist
+      policy: pull
+  before_script:
+    - docker login -u $CI_REGISTRY_USER -p $CI_JOB_TOKEN $CI_REGISTRY
+  script:
+    - TAG=$([ "$CI_COMMIT_BRANCH" = "$CI_DEFAULT_BRANCH" ] && echo "latest" || echo "$CI_COMMIT_BRANCH" | sed -E "s/[_/]/-/g")
+    - docker build --no-cache -t "$CI_REGISTRY_IMAGE:$TAG" .
+    - docker push "$CI_REGISTRY_IMAGE:$TAG"
+  rules:
+    - if: $CI_COMMIT_BRANCH
+
+tag:
+  stage: publish
+  image:
+    name: alpine/git
+    entrypoint: [ "" ]
+  cache: [ ]
+  before_script:
+    - git remote set-url origin http://gitlab-ci-token:$DEPLOY_TOKEN@gitlab.zakscode.com/$CI_PROJECT_PATH.git
+  script:
+    - VERSION=$(cat package.json | grep version | grep -Eo ':.+' | grep -Eo '[[:alnum:]\.\/\-]+')
+    - git tag -f $VERSION $CI_COMMIT_SHA
+    - git push -f origin $VERSION
+  rules:
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH'
+  allow_failure: true
+
+production:
+  stage: deploy
+  image: node:16
+  cache: [ ]
+  script:
+    - curl -X POST https://portainer.zakscode.com/api/webhooks/9fcc5dce-a884-4063-8666-34c0acf0aec5
+  environment:
+    name: Production
+    url: https://legioxxx.zakscode.com
+  rules:
+    - if: '$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH && $CI_DEPLOY_FREEZE == null'
--- a/28
+++ b/28
@ -0,0 +1,28 @@
+FROM node:16 as build
+
+# Variables
+ARG NODE_ENV=prod
+ARG NODE_OPTIONS="--max_old_space_size=4096"
+ENV NG_CLI_ANALYTICS=ci \
+    NODE_ENV=${NODE_ENV} \
+    NODE_OPTIONS=${NODE_OPTIONS}
+
+# Setup
+RUN npm config set unsafe-perm true && \
+    mkdir /app
+WORKDIR /app
+COPY . .
+
+# Install
+RUN if [ ! -d "dist" ] && [ ! -d "node_modules" ]; then npm install; fi
+
+# Build
+RUN BUILD_MODE=$([ "$NODE_ENV" = "prod" ] && echo "dynmaic-prod" || echo "dynamic") && \
+	if [ ! -d "dist" ]; then npm run "build:$BUILD_MODE"; fi
+
+# Use Nginx to serve
+FROM nginx:1.20-alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY docker/config/robots.txt /usr/share/nginx/html/robots.txt
+COPY docker/config/nginx.conf /etc/nginx/nginx.conf
+EXPOSE 80
--- a/README.md
+++ b/README.md
@ -1,7 +1,48 @@
 # LEGIO · XXX
 Legio XXX is the website for a North American Roman re-enactment group.

-It is writen using [Bootstrap 5](https://getbootstrap.com/).
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.2.

-### Table of Contents
+## Table of Contents
 [[_TOC_]]
+
+## Prerequisites
+- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+- [NodeJS 16](https://nodejs.org/en/)
+- _[Docker](https://docs.docker.com/install/) (Optional)_
+
+## Setup
+If you are setting up CWB for the first time, please check out the [CWB project](https://gitlab.psdcitywide.com/cwb/cwb).
+
+<details>
+<summary>NPM</summary>
+
+1. Install the dependencies: `npm install`
+2. Start the Angular server: `npm run start`
+</details>
+
+<details>
+<summary>Docker</summary>
+
+1. Build the docker image: `docker build -t legio-xxx:<TAG> .`
+2. Start the new image: `docker run -p 4200:80 legio-xxx:<TAG>`
+
+</details>
+
+The website should now be accessible on [http://localhost:4200](http://localhost:4200)
+
+## Cheatsheet
+```bash
+# Start Angular server
+npm run start
+
+# Build production
+npm run build
+
+# Run unit tests
+npm test
+
+# Run linter
+npm run lint
+```
+
--- a/angular.json
+++ b/angular.json
@ -0,0 +1,94 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "LegioXXX": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "xxx",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/legio-xxx",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [
+	          "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "LegioXXX:build:production"
+            },
+            "development": {
+              "browserTarget": "LegioXXX:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "LegioXXX:build"
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}
--- a/css/bootstrap-grid.css
+++ b/css/bootstrap-grid.css
--- a/css/bootstrap-grid.css.map
+++ b/css/bootstrap-grid.css.map
--- a/css/bootstrap-grid.min.css
+++ b/css/bootstrap-grid.min.css
--- a/css/bootstrap-grid.min.css.map
+++ b/css/bootstrap-grid.min.css.map
--- a/css/bootstrap-grid.rtl.css
+++ b/css/bootstrap-grid.rtl.css
--- a/css/bootstrap-grid.rtl.css.map
+++ b/css/bootstrap-grid.rtl.css.map
--- a/css/bootstrap-grid.rtl.min.css
+++ b/css/bootstrap-grid.rtl.min.css
--- a/css/bootstrap-grid.rtl.min.css.map
+++ b/css/bootstrap-grid.rtl.min.css.map
--- a/css/bootstrap-reboot.css
+++ b/css/bootstrap-reboot.css
@ -1,485 +0,0 @@
-/*!
- * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */
-:root {
-  --bs-blue: #0d6efd;
-  --bs-indigo: #6610f2;
-  --bs-purple: #6f42c1;
-  --bs-pink: #d63384;
-  --bs-red: #dc3545;
-  --bs-orange: #fd7e14;
-  --bs-yellow: #ffc107;
-  --bs-green: #198754;
-  --bs-teal: #20c997;
-  --bs-cyan: #0dcaf0;
-  --bs-white: #fff;
-  --bs-gray: #6c757d;
-  --bs-gray-dark: #343a40;
-  --bs-gray-100: #f8f9fa;
-  --bs-gray-200: #e9ecef;
-  --bs-gray-300: #dee2e6;
-  --bs-gray-400: #ced4da;
-  --bs-gray-500: #adb5bd;
-  --bs-gray-600: #6c757d;
-  --bs-gray-700: #495057;
-  --bs-gray-800: #343a40;
-  --bs-gray-900: #212529;
-  --bs-primary: #0d6efd;
-  --bs-secondary: #6c757d;
-  --bs-success: #198754;
-  --bs-info: #0dcaf0;
-  --bs-warning: #ffc107;
-  --bs-danger: #dc3545;
-  --bs-light: #f8f9fa;
-  --bs-dark: #212529;
-  --bs-primary-rgb: 13, 110, 253;
-  --bs-secondary-rgb: 108, 117, 125;
-  --bs-success-rgb: 25, 135, 84;
-  --bs-info-rgb: 13, 202, 240;
-  --bs-warning-rgb: 255, 193, 7;
-  --bs-danger-rgb: 220, 53, 69;
-  --bs-light-rgb: 248, 249, 250;
-  --bs-dark-rgb: 33, 37, 41;
-  --bs-white-rgb: 255, 255, 255;
-  --bs-black-rgb: 0, 0, 0;
-  --bs-body-color-rgb: 33, 37, 41;
-  --bs-body-bg-rgb: 255, 255, 255;
-  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-font-size: 1rem;
-  --bs-body-font-weight: 400;
-  --bs-body-line-height: 1.5;
-  --bs-body-color: #212529;
-  --bs-body-bg: #fff;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  :root {
-    scroll-behavior: smooth;
-  }
-}
-
-body {
-  margin: 0;
-  font-family: var(--bs-body-font-family);
-  font-size: var(--bs-body-font-size);
-  font-weight: var(--bs-body-font-weight);
-  line-height: var(--bs-body-line-height);
-  color: var(--bs-body-color);
-  text-align: var(--bs-body-text-align);
-  background-color: var(--bs-body-bg);
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-hr {
-  margin: 1rem 0;
-  color: inherit;
-  background-color: currentColor;
-  border: 0;
-  opacity: 0.25;
-}
-
-hr:not([size]) {
-  height: 1px;
-}
-
-h6, h5, h4, h3, h2, h1 {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-h1 {
-  font-size: calc(1.375rem + 1.5vw);
-}
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 2.5rem;
-  }
-}
-
-h2 {
-  font-size: calc(1.325rem + 0.9vw);
-}
-@media (min-width: 1200px) {
-  h2 {
-    font-size: 2rem;
-  }
-}
-
-h3 {
-  font-size: calc(1.3rem + 0.6vw);
-}
-@media (min-width: 1200px) {
-  h3 {
-    font-size: 1.75rem;
-  }
-}
-
-h4 {
-  font-size: calc(1.275rem + 0.3vw);
-}
-@media (min-width: 1200px) {
-  h4 {
-    font-size: 1.5rem;
-  }
-}
-
-h5 {
-  font-size: 1.25rem;
-}
-
-h6 {
-  font-size: 1rem;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-abbr[title],
-abbr[data-bs-original-title] {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-  cursor: help;
-  -webkit-text-decoration-skip-ink: none;
-  text-decoration-skip-ink: none;
-}
-
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
-
-ol,
-ul {
-  padding-left: 2rem;
-}
-
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-dt {
-  font-weight: 700;
-}
-
-dd {
-  margin-bottom: 0.5rem;
-  margin-left: 0;
-}
-
-blockquote {
-  margin: 0 0 1rem;
-}
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-small {
-  font-size: 0.875em;
-}
-
-mark {
-  padding: 0.2em;
-  background-color: #fcf8e3;
-}
-
-sub,
-sup {
-  position: relative;
-  font-size: 0.75em;
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-a {
-  color: #0d6efd;
-  text-decoration: underline;
-}
-a:hover {
-  color: #0a58ca;
-}
-
-a:not([href]):not([class]), a:not([href]):not([class]):hover {
-  color: inherit;
-  text-decoration: none;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: var(--bs-font-monospace);
-  font-size: 1em;
-  direction: ltr /* rtl:ignore */;
-  unicode-bidi: bidi-override;
-}
-
-pre {
-  display: block;
-  margin-top: 0;
-  margin-bottom: 1rem;
-  overflow: auto;
-  font-size: 0.875em;
-}
-pre code {
-  font-size: inherit;
-  color: inherit;
-  word-break: normal;
-}
-
-code {
-  font-size: 0.875em;
-  color: #d63384;
-  word-wrap: break-word;
-}
-a > code {
-  color: inherit;
-}
-
-kbd {
-  padding: 0.2rem 0.4rem;
-  font-size: 0.875em;
-  color: #fff;
-  background-color: #212529;
-  border-radius: 0.2rem;
-}
-kbd kbd {
-  padding: 0;
-  font-size: 1em;
-  font-weight: 700;
-}
-
-figure {
-  margin: 0 0 1rem;
-}
-
-img,
-svg {
-  vertical-align: middle;
-}
-
-table {
-  caption-side: bottom;
-  border-collapse: collapse;
-}
-
-caption {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  color: #6c757d;
-  text-align: left;
-}
-
-th {
-  text-align: inherit;
-  text-align: -webkit-match-parent;
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
-}
-
-label {
-  display: inline-block;
-}
-
-button {
-  border-radius: 0;
-}
-
-button:focus:not(:focus-visible) {
-  outline: 0;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-[role=button] {
-  cursor: pointer;
-}
-
-select {
-  word-wrap: normal;
-}
-select:disabled {
-  opacity: 1;
-}
-
-[list]::-webkit-calendar-picker-indicator {
-  display: none;
-}
-
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button;
-}
-button:not(:disabled),
-[type=button]:not(:disabled),
-[type=reset]:not(:disabled),
-[type=submit]:not(:disabled) {
-  cursor: pointer;
-}
-
-::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-textarea {
-  resize: vertical;
-}
-
-fieldset {
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-legend {
-  float: left;
-  width: 100%;
-  padding: 0;
-  margin-bottom: 0.5rem;
-  font-size: calc(1.275rem + 0.3vw);
-  line-height: inherit;
-}
-@media (min-width: 1200px) {
-  legend {
-    font-size: 1.5rem;
-  }
-}
-legend + * {
-  clear: left;
-}
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-  padding: 0;
-}
-
-::-webkit-inner-spin-button {
-  height: auto;
-}
-
-[type=search] {
-  outline-offset: -2px;
-  -webkit-appearance: textfield;
-}
-
-/* rtl:raw:
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
-  direction: ltr;
-}
-*/
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-}
-
-::file-selector-button {
-  font: inherit;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-  -webkit-appearance: button;
-}
-
-output {
-  display: inline-block;
-}
-
-iframe {
-  border: 0;
-}
-
-summary {
-  display: list-item;
-  cursor: pointer;
-}
-
-progress {
-  vertical-align: baseline;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-/*# sourceMappingURL=bootstrap-reboot.css.map */
--- a/css/bootstrap-reboot.css.map
+++ b/css/bootstrap-reboot.css.map
--- a/css/bootstrap-reboot.min.css
+++ b/css/bootstrap-reboot.min.css
--- a/css/bootstrap-reboot.min.css.map
+++ b/css/bootstrap-reboot.min.css.map
--- a/css/bootstrap-reboot.rtl.css
+++ b/css/bootstrap-reboot.rtl.css
@ -1,482 +0,0 @@
-/*!
- * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */
-:root {
-  --bs-blue: #0d6efd;
-  --bs-indigo: #6610f2;
-  --bs-purple: #6f42c1;
-  --bs-pink: #d63384;
-  --bs-red: #dc3545;
-  --bs-orange: #fd7e14;
-  --bs-yellow: #ffc107;
-  --bs-green: #198754;
-  --bs-teal: #20c997;
-  --bs-cyan: #0dcaf0;
-  --bs-white: #fff;
-  --bs-gray: #6c757d;
-  --bs-gray-dark: #343a40;
-  --bs-gray-100: #f8f9fa;
-  --bs-gray-200: #e9ecef;
-  --bs-gray-300: #dee2e6;
-  --bs-gray-400: #ced4da;
-  --bs-gray-500: #adb5bd;
-  --bs-gray-600: #6c757d;
-  --bs-gray-700: #495057;
-  --bs-gray-800: #343a40;
-  --bs-gray-900: #212529;
-  --bs-primary: #0d6efd;
-  --bs-secondary: #6c757d;
-  --bs-success: #198754;
-  --bs-info: #0dcaf0;
-  --bs-warning: #ffc107;
-  --bs-danger: #dc3545;
-  --bs-light: #f8f9fa;
-  --bs-dark: #212529;
-  --bs-primary-rgb: 13, 110, 253;
-  --bs-secondary-rgb: 108, 117, 125;
-  --bs-success-rgb: 25, 135, 84;
-  --bs-info-rgb: 13, 202, 240;
-  --bs-warning-rgb: 255, 193, 7;
-  --bs-danger-rgb: 220, 53, 69;
-  --bs-light-rgb: 248, 249, 250;
-  --bs-dark-rgb: 33, 37, 41;
-  --bs-white-rgb: 255, 255, 255;
-  --bs-black-rgb: 0, 0, 0;
-  --bs-body-color-rgb: 33, 37, 41;
-  --bs-body-bg-rgb: 255, 255, 255;
-  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-font-size: 1rem;
-  --bs-body-font-weight: 400;
-  --bs-body-line-height: 1.5;
-  --bs-body-color: #212529;
-  --bs-body-bg: #fff;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  :root {
-    scroll-behavior: smooth;
-  }
-}
-
-body {
-  margin: 0;
-  font-family: var(--bs-body-font-family);
-  font-size: var(--bs-body-font-size);
-  font-weight: var(--bs-body-font-weight);
-  line-height: var(--bs-body-line-height);
-  color: var(--bs-body-color);
-  text-align: var(--bs-body-text-align);
-  background-color: var(--bs-body-bg);
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-hr {
-  margin: 1rem 0;
-  color: inherit;
-  background-color: currentColor;
-  border: 0;
-  opacity: 0.25;
-}
-
-hr:not([size]) {
-  height: 1px;
-}
-
-h6, h5, h4, h3, h2, h1 {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-h1 {
-  font-size: calc(1.375rem + 1.5vw);
-}
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 2.5rem;
-  }
-}
-
-h2 {
-  font-size: calc(1.325rem + 0.9vw);
-}
-@media (min-width: 1200px) {
-  h2 {
-    font-size: 2rem;
-  }
-}
-
-h3 {
-  font-size: calc(1.3rem + 0.6vw);
-}
-@media (min-width: 1200px) {
-  h3 {
-    font-size: 1.75rem;
-  }
-}
-
-h4 {
-  font-size: calc(1.275rem + 0.3vw);
-}
-@media (min-width: 1200px) {
-  h4 {
-    font-size: 1.5rem;
-  }
-}
-
-h5 {
-  font-size: 1.25rem;
-}
-
-h6 {
-  font-size: 1rem;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-abbr[title],
-abbr[data-bs-original-title] {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-  cursor: help;
-  -webkit-text-decoration-skip-ink: none;
-  text-decoration-skip-ink: none;
-}
-
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
-
-ol,
-ul {
-  padding-right: 2rem;
-}
-
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-dt {
-  font-weight: 700;
-}
-
-dd {
-  margin-bottom: 0.5rem;
-  margin-right: 0;
-}
-
-blockquote {
-  margin: 0 0 1rem;
-}
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-small {
-  font-size: 0.875em;
-}
-
-mark {
-  padding: 0.2em;
-  background-color: #fcf8e3;
-}
-
-sub,
-sup {
-  position: relative;
-  font-size: 0.75em;
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-a {
-  color: #0d6efd;
-  text-decoration: underline;
-}
-a:hover {
-  color: #0a58ca;
-}
-
-a:not([href]):not([class]), a:not([href]):not([class]):hover {
-  color: inherit;
-  text-decoration: none;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: var(--bs-font-monospace);
-  font-size: 1em;
-  direction: ltr ;
-  unicode-bidi: bidi-override;
-}
-
-pre {
-  display: block;
-  margin-top: 0;
-  margin-bottom: 1rem;
-  overflow: auto;
-  font-size: 0.875em;
-}
-pre code {
-  font-size: inherit;
-  color: inherit;
-  word-break: normal;
-}
-
-code {
-  font-size: 0.875em;
-  color: #d63384;
-  word-wrap: break-word;
-}
-a > code {
-  color: inherit;
-}
-
-kbd {
-  padding: 0.2rem 0.4rem;
-  font-size: 0.875em;
-  color: #fff;
-  background-color: #212529;
-  border-radius: 0.2rem;
-}
-kbd kbd {
-  padding: 0;
-  font-size: 1em;
-  font-weight: 700;
-}
-
-figure {
-  margin: 0 0 1rem;
-}
-
-img,
-svg {
-  vertical-align: middle;
-}
-
-table {
-  caption-side: bottom;
-  border-collapse: collapse;
-}
-
-caption {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  color: #6c757d;
-  text-align: right;
-}
-
-th {
-  text-align: inherit;
-  text-align: -webkit-match-parent;
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
-}
-
-label {
-  display: inline-block;
-}
-
-button {
-  border-radius: 0;
-}
-
-button:focus:not(:focus-visible) {
-  outline: 0;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-[role=button] {
-  cursor: pointer;
-}
-
-select {
-  word-wrap: normal;
-}
-select:disabled {
-  opacity: 1;
-}
-
-[list]::-webkit-calendar-picker-indicator {
-  display: none;
-}
-
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button;
-}
-button:not(:disabled),
-[type=button]:not(:disabled),
-[type=reset]:not(:disabled),
-[type=submit]:not(:disabled) {
-  cursor: pointer;
-}
-
-::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-textarea {
-  resize: vertical;
-}
-
-fieldset {
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-legend {
-  float: right;
-  width: 100%;
-  padding: 0;
-  margin-bottom: 0.5rem;
-  font-size: calc(1.275rem + 0.3vw);
-  line-height: inherit;
-}
-@media (min-width: 1200px) {
-  legend {
-    font-size: 1.5rem;
-  }
-}
-legend + * {
-  clear: right;
-}
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-  padding: 0;
-}
-
-::-webkit-inner-spin-button {
-  height: auto;
-}
-
-[type=search] {
-  outline-offset: -2px;
-  -webkit-appearance: textfield;
-}
-
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
-  direction: ltr;
-}
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-}
-
-::file-selector-button {
-  font: inherit;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-  -webkit-appearance: button;
-}
-
-output {
-  display: inline-block;
-}
-
-iframe {
-  border: 0;
-}
-
-summary {
-  display: list-item;
-  cursor: pointer;
-}
-
-progress {
-  vertical-align: baseline;
-}
-
-[hidden] {
-  display: none !important;
-}
-/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
--- a/css/bootstrap-reboot.rtl.css.map
+++ b/css/bootstrap-reboot.rtl.css.map
--- a/css/bootstrap-reboot.rtl.min.css
+++ b/css/bootstrap-reboot.rtl.min.css
--- a/css/bootstrap-reboot.rtl.min.css.map
+++ b/css/bootstrap-reboot.rtl.min.css.map
--- a/css/bootstrap-utilities.css
+++ b/css/bootstrap-utilities.css
--- a/css/bootstrap-utilities.css.map
+++ b/css/bootstrap-utilities.css.map
--- a/css/bootstrap-utilities.min.css
+++ b/css/bootstrap-utilities.min.css
--- a/css/bootstrap-utilities.min.css.map
+++ b/css/bootstrap-utilities.min.css.map
--- a/css/bootstrap-utilities.rtl.css
+++ b/css/bootstrap-utilities.rtl.css
--- a/css/bootstrap-utilities.rtl.css.map
+++ b/css/bootstrap-utilities.rtl.css.map
--- a/css/bootstrap-utilities.rtl.min.css
+++ b/css/bootstrap-utilities.rtl.min.css
--- a/css/bootstrap-utilities.rtl.min.css.map
+++ b/css/bootstrap-utilities.rtl.min.css.map
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
--- a/css/bootstrap.css.map
+++ b/css/bootstrap.css.map
--- a/css/bootstrap.min.css
+++ b/css/bootstrap.min.css
--- a/css/bootstrap.min.css.map
+++ b/css/bootstrap.min.css.map
--- a/css/bootstrap.rtl.css
+++ b/css/bootstrap.rtl.css
--- a/css/bootstrap.rtl.css.map
+++ b/css/bootstrap.rtl.css.map
--- a/css/bootstrap.rtl.min.css
+++ b/css/bootstrap.rtl.min.css
--- a/css/bootstrap.rtl.min.css.map
+++ b/css/bootstrap.rtl.min.css.map
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@ -0,0 +1,31 @@
+worker_processes  auto;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+  include       mime.types;
+  default_type  application/octet-stream;
+
+  gzip on;
+  gzip_proxied any;
+  gzip_types text/plain text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/json application/x-font-woff;
+  gzip_vary on;
+  gzip_disable "MSIE [1-6]\.(?!.*SV1)";
+
+  sendfile off;
+  keepalive_timeout 65;
+
+  server {
+    listen 80;
+    index index.html;
+    root /usr/share/nginx/html;
+    autoindex off;
+
+    location / {
+      try_files $uri$args $uri$args/ /index.html;
+    }
+  }
+}
--- a/docker/robots.txt
+++ b/docker/robots.txt
@ -0,0 +1,2 @@
+User-Agent: *
+Allow: /
--- a/js/bootstrap.bundle.js
+++ b/js/bootstrap.bundle.js
--- a/js/bootstrap.bundle.js.map
+++ b/js/bootstrap.bundle.js.map
--- a/js/bootstrap.bundle.min.js
+++ b/js/bootstrap.bundle.min.js
--- a/js/bootstrap.bundle.min.js.map
+++ b/js/bootstrap.bundle.min.js.map
--- a/js/bootstrap.esm.js
+++ b/js/bootstrap.esm.js
--- a/js/bootstrap.esm.js.map
+++ b/js/bootstrap.esm.js.map
--- a/js/bootstrap.esm.min.js
+++ b/js/bootstrap.esm.min.js
--- a/js/bootstrap.esm.min.js.map
+++ b/js/bootstrap.esm.min.js.map
--- a/js/bootstrap.js
+++ b/js/bootstrap.js
--- a/js/bootstrap.js.map
+++ b/js/bootstrap.js.map
--- a/js/bootstrap.min.js
+++ b/js/bootstrap.min.js
--- a/js/bootstrap.min.js.map
+++ b/js/bootstrap.min.js.map
--- a/old/index.css
+++ b/old/index.css
@ -8,7 +8,7 @@ html, body {

 header {
    height: 100vh;
-    background: black url("/img/colosseum.jpg") no-repeat top center;
+    background: black url("../img/colosseum.jpg") no-repeat top center;
    background-size: cover;
 }

--- a/old/index.html
+++ b/old/index.html
@ -11,8 +11,8 @@
    <title>LEGIO · XXX</title>

    <link href="img/capricorn.png" rel="icon" type="image/png">
-    <link href="css/bootstrap.css" rel="stylesheet">
-    <link href="css/index.css" rel="stylesheet">
+    <link href="bootstrap.css" rel="stylesheet">
+    <link href="index.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
    <script src="js/bootstrap.js"></script>
 </head>
@ -91,10 +91,10 @@
        <div class="container">
            <div class="d-flex align-items-center justify-content-around">
                <div class="">
-                    <img src="/img/trajan-bust.png" height="auto" width="275px">
+                    <img src="img/trajan-bust.png" height="auto" width="275px">
                </div>
                <div class="text-center">
-                    <h4>Legio XXX Ulpia Victrix</h4>
+                    <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>
@ -119,7 +119,7 @@
        <h2>Gallery</h2>
    </section>
    <section class="bg-white">
-        <img src="/img/formation.png" width="100%" height="auto">
+        <img src="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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,44 @@
+{
+  "name": "legio-xxx",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "npm run build:dev",
+    "build:dev": "ng build --configuration development",
+    "build:prod": "ng build --configuration production",
+    "watch": "ng build --watch --configuration development"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^14.2.0",
+    "@angular/cdk": "^14.2.2",
+    "@angular/common": "^14.2.0",
+    "@angular/compiler": "^14.2.0",
+    "@angular/core": "^14.2.0",
+    "@angular/forms": "^14.2.0",
+    "@angular/material": "^14.2.2",
+    "@angular/platform-browser": "^14.2.0",
+    "@angular/platform-browser-dynamic": "^14.2.0",
+    "@angular/router": "^14.2.0",
+    "bootstrap": "^5.2.1",
+    "jquery": "^3.6.1",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "webstorage-decorators": "^4.2.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.2.2",
+    "@angular/cli": "~14.2.2",
+    "@angular/compiler-cli": "^14.2.0",
+    "@types/jasmine": "~4.0.0",
+    "jasmine-core": "~4.3.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.7.2"
+  }
+}
--- 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
--- 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
--- 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
--- 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);
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2020",
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}