Update docker/nginx.conf

revert Update LICENSE

.github/pull_request_template.md

@@ -0,0 +1,15 @@
+## Description
+<!-- Adition information & context -->
+...
+
+## Issues
+<!-- Issues this PR will address -->
+- closes #___
+- owner/repo#___
+
+## Checklist
+<!-- Compelte after creating PR -->
+- [ ] Linked issues
+- [ ] Reviewed changes
+- [ ] Updated comments/documentation
+ 

.github/workflows/website.yaml

@@ -0,0 +1,54 @@
+name: Build Website
+run-name: Build Website
+
+on:
+    push:
+
+jobs:
+    build:
+        name: Build NPM Project
+        runs-on: ubuntu-latest
+        container: node
+        steps:
+            - name: Clone Repository
+              uses: ztimson/actions/clone@develop
+
+            - name: Install Dependencies
+              run: npm i
+
+            - name: Build Project
+              run: npm run build
+
+            - name: Upload Artifacts
+              if: ${{inputs.artifacts}} != "false"
+              uses: actions/upload-artifact@v3
+              with:
+                  name: website
+                  path: dist
+                  retention-days: 7
+
+    tag:
+        name: Tag Version
+        needs: build
+        runs-on: ubuntu-latest
+        container: node
+        steps:
+            - name: Clone Repository
+              uses: ztimson/actions/clone@develop
+
+            - name: Get Version Number
+              run: echo "VERSION=$(cat package.json | grep version | grep -Eo ':.+' | grep -Eo '[[:alnum:]\.\/\-]+')" >> $GITHUB_ENV
+
+            - name: Tag Version
+              uses: ztimson/actions/tag@develop
+              with:
+                  tag: ${{env.VERSION}}
+
+    publish:
+        name: Build & Push Dockerfile
+        needs: build
+        uses: ztimson/actions/.github/workflows/docker.yaml@develop
+        with:
+            name: ztimson/291st
+            repository: ${{github.server_url}}/${{github.repository}}.git
+            pass: ${{secrets.DEPLOY_TOKEN}}

.gitlab/.gitlab-ci.yml

@@ -1,82 +0,0 @@
-image: node:16
-
-stages:
-  - build
-  - test
-  - deploy
-
-npm:
-  stage: build
-  cache:
-    - key:
-        files:
-          - package-lock.json
-      paths:
-        - node_modules
-      policy: pull-push
-    - key: $CI_PIPELINE_ID
-      paths:
-        - dist
-      policy: push
-  script:
-    - npm install
-    - npm run build
-  artifacts:
-    paths:
-      - dist
-    expire_in: 1 week
-  rules:
-    - if: $CI_COMMIT_BRANCH
-
-audit:
-  stage: test
-  cache:
-    - key:
-        files:
-          - package-lock.json
-      paths:
-        - node_modules
-      policy: pull
-  script:
-    - echo "vulnerabilities_high $(npm audit | grep -oE '[0-9]+ high' | grep -oE '[0-9]+' || echo 0)" > metrics.txt
-    - echo "vulnerabilities_medium $(npm audit | grep -oE '[0-9]+ moderate' | grep -oE '[0-9]+' || echo 0)" >> metrics.txt
-    - echo "vulnerabilities_low $(npm audit | grep -oE '[0-9]+ low' | grep -oE '[0-9]+' || echo 0)" >> metrics.txt
-  artifacts:
-    reports:
-      metrics: metrics.txt
-  rules:
-    - if: $CI_COMMIT_BRANCH
-
-registry:
-  stage: deploy
-  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
-  allow_failure: true
-
-tag:
-  stage: deploy
-  image:
-    name: alpine/git
-    entrypoint: [ "" ]
-  cache: [ ]
-  before_script:
-    - git remote set-url origin https://ReleaseBot:$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

CODEOWNERS

@@ -0,0 +1 @@
+*	@ztimson

Dockerfile

@@ -17,7 +17,7 @@ COPY . .
 RUN if [ ! -d "dist" ] && [ ! -d "node_modules" ]; then npm install; fi
 
 # Build
-RUN BUILD_MODE=$([ "$NODE_ENV" = "prod" ] && echo "dynmaic-prod" || echo "dynamic") && \
+RUN BUILD_MODE=$([ "$NODE_ENV" = "prod" ] && echo "prod" || echo "dev") && \
 	if [ ! -d "dist" ]; then npm run "build:$BUILD_MODE"; fi
 
 # Use Nginx to serve

LICENSE

@@ -0,0 +1,11 @@
+Copyright (c) 2023 Zakary Timson
+
+All Rights Reserved.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,46 +1,98 @@
-# 291st JTF
+<!-- Header -->
-[Clan page](https://291st.ca) for the 291st Joint Task Force
+<div id="top" align="center">
+  <br />
   
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.2.
+  <!-- Logo -->
+  <a href="/src/assets/img/header.png">
+  	<img src="./src/assets/img/logo.png" alt="Logo" width="200" height="200">
+  </a>
+
+  <!-- Title -->
+  ### 291st Joint Task Force
+  
+  <!-- Description -->
+  Clan website for the _291st Joint Task Force_
+
+  <!-- Repo badges -->
+  [![Version](https://img.shields.io/badge/dynamic/json.svg?label=Version&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/291st/tags&query=$[0].name)](https://git.zakscode.com/ztimson/291st/tags)
+  [![Pull Requests](https://img.shields.io/badge/dynamic/json.svg?label=Pull%20Requests&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/291st&query=open_pr_counter)](https://git.zakscode.com/ztimson/291st/pulls)
+  [![Issues](https://img.shields.io/badge/dynamic/json.svg?label=Issues&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/291st&query=open_issues_count)](https://git.zakscode.com/ztimson/291st/issues)
+
+  <!-- Links -->
+
+  ---
+  <div>
+    <a href="https://git.zakscode.com/ztimson/291st/releases" target="_blank">Release Notes</a>
+    • <a href="https://git.zakscode.com/ztimson/291st/issues/new?template=.github%2fissue_template%2fbug.md" target="_blank">Report a Bug</a>
+    • <a href="https://git.zakscode.com/ztimson/291st/issues/new?template=.github%2fissue_template%2fenhancement.md" target="_blank">Request a Feature</a>
+  </div>
+
+  ---
+</div>
 
 ## Table of Contents
-[[_TOC_]]
+- [291st](#top)
+  - [About](#about)
+    - [Demo](https://291st.ca)
+    - [Built With](#built-with)
+  - [Setup](#setup)
+    - [Production](#production)
+    - [Development](#development)
+  - [License](#license)
 
-## Prerequisites
+## About
-- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+
-- [NodeJS 16](https://nodejs.org/en/)
+This website was created for the _291st Joint Task Force_ to act as a simple landing page for their domain.
-- _[Docker](https://docs.docker.com/install/) (Optional)_
+
+It includes a list of managed servers & the _Discord_ server list.
+
+The technology stack consists of a front-end built with _Angular_ & is deployed using _Docker_.
+
+### Demo
+Website: https://291st.ca
+
+### Built With
+[![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular)](https://angular.io/)
+[![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)](https://getbootstrap.com)
+[![Docker](https://img.shields.io/badge/Docker-384d54?style=for-the-badge&logo=docker)](https://docker.com/)
+[![Node](https://img.shields.io/badge/Node.js-000000?style=for-the-badge&logo=nodedotjs)](https://nodejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://typescriptlang.org/)
 
 ## Setup
-The project can either be run using NPM or Docker. NPM is recommended for development.
-<details>
-<summary>NPM</summary>
 
+<details>
+<summary>
+  <h3 id="production" style="display: inline">
+    Production
+  </h3>
+</summary>
+
+#### Prerequisites
+- [Docker](https://docs.docker.com/install/)
+
+#### Instructions
+1. Run the docker image: `docker run -p 80:80 git.zakscode.com/ztimson/291st:latest`
+2. Open [http://localhost](http://localhost)
+</details>
+
+<details>
+<summary>
+  <h3 id="development" style="display: inline">
+    Development
+  </h3>
+</summary>
+
+#### Prerequisites
+- [Node.js](https://nodejs.org/en/download)
+
+#### Instructions
 1. Install the dependencies: `npm install`
 2. Start the Angular server: `npm run start`
-</details>
+3. Open [http://localhost:4200](http://localhost:4200)
-
-<details>
-<summary>Docker</summary>
-
-1. Build the docker image: `docker build -t 291st:<TAG> .`
-2. Start the new image: `docker run -p 4200:80 291st:<TAG>`
 
 </details>
 
-The website should now be accessible on [http://localhost:4200](http://localhost:4200)
+## License
+Copyright © 2023 Zakary Timson | All Rights Reserved
 
-## Cheatsheet
+See the [license](./LICENSE) for more information.
-```bash
-# Start Angular server
-npm run start
-
-# Build production
-npm run build:prod
-
-# Build docker image
-docker build -t 291st:<TAG>
-
-# Run docker image
-docker run -p 4200:80 291st:<TAG>
-```

angular.json

@@ -21,7 +21,7 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
+            "tsConfig": "tsconfig.json",
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/assets"

docker/nginx.conf

@@ -25,7 +25,7 @@ http {
     autoindex off;
 
     location / {
-      try_files $uri$args $uri$args/ /index.html;
+      try_files $uri $uri/ /index.html;
     }
   }
 }

package.json

@@ -1,13 +1,11 @@
 {
   "name": "291st",
-  "version": "0.0.0",
+  "version": "2.0.0",
   "scripts": {
-    "ng": "ng",
+    "start": "npx ng serve",
-    "start": "ng serve",
     "build": "npm run build:dev",
-    "build:dev": "ng build --configuration development",
+    "build:dev": "npx ng build --configuration development",
-    "build:prod": "ng build --configuration production",
+    "build:prod": "npx ng build --configuration production"
-    "watch": "ng build --watch --configuration development"
   },
   "private": true,
   "dependencies": {

src/app/app.module.ts

@@ -1,8 +1,9 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {AppRouting} from './app.routing';
+import {DiscordComponent} from './components/discord/discord.component';
 import {FooterComponent} from './components/footer/footer.component';
-import {NavbarComponent} from './components/navbar/navbar.component';
+import {ServersComponent} from './components/servers/servers.component';
 import {AppComponent} from './containers/app/app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MaterialModule} from './material.module';
@@ -10,9 +11,10 @@ import {HomeComponent} from './views/home/home.component';
 
 export const APP_COMPONENTS = [
 	AppComponent,
-	HomeComponent,
+	DiscordComponent,
 	FooterComponent,
-	NavbarComponent
+	HomeComponent,
+	ServersComponent,
 ]
 
 @NgModule({

src/app/components/discord/discord.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'app-discord',
+	template: `<iframe src="https://discordapp.com/widget?id=399625240927404033&theme=dark" width="100%" height="98%" allowtransparency="true" frameborder="0" style="min-height: 400px" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>`
+})
+export class DiscordComponent { }

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

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

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

@@ -1,16 +0,0 @@
-<mat-toolbar>
-	<mat-toolbar-row>
-		<div>
-			<a class="navbar-brand d-flex align-items-center" routerLink="/">
-				<div class="px-2">291st Joint Task Force</div>
-			</a>
-		</div>
-		<div class="flex-grow-1"></div>
-		<div *ngIf="!hamburger">
-		</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>

src/app/components/navbar/navbar.component.scss

@@ -1,58 +0,0 @@
-.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;
-		//font-weight: lighter;
-
-		&:hover img {
-			filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg);
-		}
-	}
-
-	.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;
-		}
-	}
-}

src/app/components/navbar/navbar.component.ts

@@ -1,34 +0,0 @@
-import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {Subscription} from 'rxjs';
-
-@Component({
-	selector: 'app-navbar',
-	templateUrl: './navbar.component.html',
-	styleUrls: ['./navbar.component.scss']
-})
-export class NavbarComponent implements AfterViewInit, OnDestroy {
-	private sub!: Subscription;
-
-	@Input() hamburger = true;
-
-	@Output() hamburgerClick = new EventEmitter<void>();
-
-	constructor(private route: ActivatedRoute) { }
-
-	ngAfterViewInit() {
-		this.sub = this.route.fragment.subscribe(frag => {
-			if(frag) this.scroll(frag);
-		});
-	}
-
-	ngOnDestroy(): void {
-		if(this.sub) this.sub.unsubscribe();
-	}
-
-	scroll(id: string) {
-		const el = document.getElementById(id);
-		if(el) el.scrollIntoView({behavior: 'smooth'});
-		else setTimeout(() => this.scroll(id), 500);
-	}
-}

src/app/components/servers/servers.component.html

@@ -0,0 +1,21 @@
+<div *ngFor="let s of servers">
+	<div class="d-flex p-2">
+		<div class="flex-shrink-1 align-self-center">
+			<img *ngIf="s.icon" [src]="s.icon">
+			<mat-icon *ngIf="!s.icon">dns</mat-icon>
+		</div>
+		<div class="d-flex flex-column flex-grow-1">
+			<div mat-line>{{s.name}}</div>
+			<div mat-line class="text-muted">{{s.url}}</div>
+			<div *ngIf="s.mods" mat-line><a [href]="s.mods.link">{{s.mods.num}} mods</a></div>
+		</div>
+		<div class="d-flex flex-shrink-1 justify-content-end">
+			<mat-icon [style.visibility]="s.private ? 'visible' : 'hidden'" class="text-muted" matTooltip="Private" style="font-size: 14px">lock</mat-icon>
+			<div style="width: 12px; height: 12px; border-radius: 6px;"
+			     [style.background-color]="s.online ? '#00FF00' : '#FF0000'"
+			     [matTooltip]="s.online ? 'Online' : 'Offline'">
+			</div>
+		</div>
+	</div>
+	<mat-divider></mat-divider>
+</div>

src/app/components/servers/servers.component.ts

@@ -0,0 +1,48 @@
+import {Component} from '@angular/core';
+
+type Server = {
+	icon?: string;
+	name: string;
+	private: boolean;
+	online: boolean;
+	mods?: {num: number, link: string};
+	url: string;
+}
+
+@Component({
+	selector: 'app-servers',
+	templateUrl: './servers.component.html'
+})
+export class ServersComponent {
+	servers: Server[] = [{
+		name: 'Arma 3',
+		private: false,
+		online: false,
+		url: '291st.ca:2302'
+	}, {
+		name: 'Astroneer',
+		private: true,
+		online: false,
+		url: '291st.ca:7777'
+	}, {
+		name: 'Minecraft (Bedrock)',
+		private: true,
+		online: true,
+		url: '291st.ca:19132'
+	}, {
+		name: 'Minecraft (Java)',
+		private: true,
+		online: true,
+		url: '291st.ca:25565'
+	}, {
+		name: 'Valheim',
+		private: true,
+		online: true,
+		url: '291st.ca:2456'
+	}, {
+		name: 'V Rising',
+		private: true,
+		online: false,
+		url: '291st.ca:27015'
+	}]
+}

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

@@ -1,5 +1,2 @@
-<app-navbar [hamburger]="mobile"></app-navbar>
+<router-outlet></router-outlet>
-<div class="fill app-container">
+<app-footer></app-footer>
-	<router-outlet></router-outlet>
-	<app-footer></app-footer>
-</div>

src/app/material.module.ts

@@ -1,12 +1,16 @@
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatListModule} from '@angular/material/list';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 export const MATERIAL_MODULES = [
 	MatButtonModule,
 	MatIconModule,
-	MatToolbarModule
+	MatListModule,
+	MatTabsModule,
+	MatTooltipModule,
 ];
 
 @NgModule({

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

@@ -1,9 +1,38 @@
-<section class="fill background d-flex flex-column flex-md-row">
+<div class="h-100 d-none d-sm-flex align-items-center justify-content-center" style="background: #000 url('/assets/img/helicopter.gif'); background-size: cover;">
-	<div class="flex-grow-1 p-3" style="flex-basis: 0">
+	<img src="/assets/img/logo.png" width="auto" height="60%" style="max-width: 60%">
-		<iframe src="https://discordapp.com/widget?id=399625240927404033&theme=dark" width="100%" height="100%" allowtransparency="true" frameborder="0" style="min-height: 500px" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
+</div>
+<div class="d-flex d-sm-none align-items-center justify-content-center" style="background: #000 url('/assets/img/helicopter.gif'); background-size: cover;">
+	<img src="/assets/img/logo.png" width="auto" height="60%" style="max-width: 60%">
+</div>
+
+<div style="position: absolute; top: 2rem; left: 2rem;">
+	<h1 class="mb-1 stencil" style="font-size: 3rem">
+		291st
+		<span class="d-none d-sm-inline">Joint Task Force</span>
+		<span class="d-inline d-sm-none">JTF</span>
+	</h1>
+	<h2 class="d-none d-sm-block stencil">"Putting the Damned to Rest"</h2>
+</div>
+
+<div class="content">
+	<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" class="h-100" style="min-height: 400px">
+		<mat-tab class="h-100">
+			<ng-template mat-tab-label>
+				<mat-icon class="me-2">discord</mat-icon>
+				Discord
+			</ng-template>
+			<app-discord></app-discord>
+		</mat-tab>
+		<mat-tab>
+			<ng-template mat-tab-label>
+				<mat-icon class="me-2">dns</mat-icon>
+				Servers
+			</ng-template>
+			<div class="d-flex justify-content-center">
+				<div class="pt-4" style="width: 300px">
+					<app-servers></app-servers>
 				</div>
-	<div class="flex-grow-1 p-3" style="flex-basis: 0">
 			</div>
-	<div class="flex-grow-1 p-3" style="flex-basis: 0">
+		</mat-tab>
-	</div>
+	</mat-tab-group>
-</section>
+</div>

src/app/views/home/home.component.scss

@@ -1,3 +1,23 @@
-.background {
+.content {
-	background: url("/assets/img/291st-background.png") no-repeat center center;
+	text-align: center;
+	background-color: #202225;
+	position: relative;
+	display: block;
+	width: 100%;
+}
+
+@media(orientation: landscape) {
+	.content {
+		position: fixed;
+		right: 0;
+		top: 0;
+		width: 30vw;
+		height: calc(100% - 2rem);
+		margin: 1rem;
+		box-shadow: 6px 6px 5px black;
+	}
+}
+
+::ng-deep .mat-tab-body-wrapper {
+	height: 100%;
 }

src/index.html

@@ -4,17 +4,16 @@
 <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="description" content="291st Joint Task Force">
 	<meta name="author" content="Zak Timson">
 
 	<title>291st JTF</title>
 
 	<link href="assets/img/logo.png" rel="icon" type="image/png">
-	<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
- <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">
+	<link href="https://fonts.googleapis.com/icon?family=Saira+Stencil+One" rel="stylesheet">
 </head>
 
 <body class="mat-typography" style="background: #000">

src/styles.scss

@@ -2,18 +2,18 @@
 @include mat.core();
 
 // hue. Available color palettes: https://material.io/design/color/
-$LegioXXX-primary: mat.define-palette(mat.$red-palette, 900);
+$JTF-primary: mat.define-palette(mat.$red-palette, 900);
-$LegioXXX-accent: mat.define-palette(mat.$indigo-palette, 900);
+$JTF-accent: mat.define-palette(mat.$indigo-palette, 900);
-$LegioXXX-warn: mat.define-palette(mat.$orange-palette, 500);
+$JTF-warn: mat.define-palette(mat.$orange-palette, 500);
-$LegioXXX-theme: mat.define-dark-theme((
+$JTF-theme: mat.define-dark-theme((
   color: (
-    primary: $LegioXXX-primary,
+    primary: $JTF-primary,
-    accent: $LegioXXX-accent,
+    accent: $JTF-accent,
-    warn: $LegioXXX-warn,
+    warn: $JTF-warn,
   )
 ));
 
-@include mat.all-component-themes($LegioXXX-theme);
+@include mat.all-component-themes($JTF-theme);
 
 @import '~bootstrap/dist/css/bootstrap-utilities.min.css';
 
@@ -39,16 +39,19 @@ body {
 	color: #fff;
 	font-family: Roboto, sans-serif;
 	margin: 0;
-	overflow: hidden;
 }
 
 a, a:visited {
 	text-decoration: none;
-	color: rgba(255, 255, 255, 0.6);
+	color: #3c0000;
 }
-a:hover, a:visited:hover { color: #b10000; }
+a:hover, a:visited:hover { color: #550000; }
 
 .fill {
 	height: 0;
 	min-height: calc(100vh - 64px);
 }
+
+.stencil {
+	font-family: Saira Stencil One !important;
+}

tsconfig.app.json

@@ -1,15 +0,0 @@
-/* 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"
-  ]
-}

tsconfig.json

@@ -1,9 +1,8 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
+    "outDir": "./out-tsc/app",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
@@ -17,6 +16,7 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2020",
+	"types": [],
     "module": "es2020",
     "lib": [
       "es2020",
@@ -28,5 +28,12 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
 }