banner & styling

src/app/app.module.ts

@@ -1,15 +1,19 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRouting } from './app.routing';
+import {BannerComponent} from './components/banner/banner.component';
 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 {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
 
 export const APP_COMPONENTS = [
 	AppComponent,
+	BannerComponent,
+	GalleryComponent,
 	HomeComponent,
 	FooterComponent,
 	NavbarComponent

src/app/app.routing.ts

@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
 
 const routes: Routes = [
-	{path: '', pathMatch: 'full', component: HomeComponent}
+	{path: '', pathMatch: 'full', component: HomeComponent},
+	{path: 'gallery', component: GalleryComponent}
 ];
 
 @NgModule({

src/app/components/banner/banner.component.html

@@ -0,0 +1,22 @@
+<div class="banner-container">
+	<img class="banner-background" [src]="images[selected]">
+	<img class="banner-image" [src]="images[selected]">
+	<div class="banner-previous" (click)="previous()">
+		<mat-icon>skip_previous</mat-icon>
+	</div>
+	<div class="banner-next" (click)="next()">
+		<mat-icon>skip_next</mat-icon>
+	</div>
+	<div class="banner-pause" (click)="manual = !manual">
+		<mat-icon *ngIf="!manual">pause</mat-icon>
+		<mat-icon *ngIf="manual">play_arrow</mat-icon>
+	</div>
+	<div *ngIf="!manual" class="banner-seal 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 class="text-white" routerLink="" fragment="about">
+				<i class="fa fa-angle-double-down fa-4x" style="filter: drop-shadow(2px 4px 6px black);"></i>
+			</a>
+		</div>
+	</div>
+</div>

src/app/components/banner/banner.component.scss

@@ -0,0 +1,49 @@
+.banner-container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.banner-background {
+	width: 100%;
+	height: 100%;
+	filter: blur(10px);
+	-webkit-filter: blur(10px);
+}
+
+.banner-image {
+	position: absolute;
+	height: 90%;
+	width: auto;
+	top: 5%;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.banner-next {
+	position: absolute;
+	top: 50%;
+	right: 50px;
+	transform: translate(-50%, -50%);
+}
+
+.banner-previous {
+	position: absolute;
+	top: 50%;
+	left: 50px;
+	transform: translate(-50%, -50%);
+}
+
+.banner-seal {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.banner-pause {
+	position: absolute;
+	bottom: 25px;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}

src/app/components/banner/banner.component.ts

@@ -0,0 +1,70 @@
+import {
+	AfterViewInit,
+	Component,
+	ElementRef,
+	Host,
+	HostListener,
+	Input,
+	OnDestroy,
+	OnInit,
+	ViewChild
+} from '@angular/core';
+import {interval, Subscription} from 'rxjs';
+import {shuffle} from '../../misc/utils';
+
+@Component({
+	selector: 'xxx-banner',
+	templateUrl: './banner.component.html',
+	styleUrls: ['./banner.component.scss']
+})
+export class BannerComponent implements AfterViewInit, OnDestroy, OnInit {
+	private container!: HTMLDivElement;
+	private dimmensions!: [number, number];
+	private sub?: Subscription;
+
+	images = [
+		'/assets/img/banner/aquilifer.jpg',
+		'/assets/img/banner/castra.jpg',
+		'/assets/img/banner/ROM.jpg',
+		'/assets/img/banner/shield.jpg',
+		'/assets/img/banner/tripod.jpg',
+	];
+	selected  = 0;
+
+	@Input() speed = 5000;
+	@Input() manual = false;
+
+	constructor() {
+		this.images = shuffle(this.images);
+	}
+
+	ngOnInit() {
+		this.sub = interval(this.speed)
+			.subscribe( i => {
+				if(this.manual) return;
+ 				this.selected = i % this.images.length
+			});
+	}
+
+	@HostListener('window:resize')
+	ngAfterViewInit() {
+		this.container = <HTMLDivElement>document.getElementsByClassName('banner-container')[0];
+		this.dimmensions = [this.container.clientWidth, this.container.clientHeight];
+	}
+
+	ngOnDestroy() {
+		if(this.sub) this.sub.unsubscribe();
+	}
+
+	next() {
+		this.manual = true;
+		this.selected++;
+		if(this.selected >= this.images.length) this.selected = 0;
+	}
+
+	previous() {
+		this.manual = true;
+		this.selected--;
+		if(this.selected < 0) this.selected = this.images.length - 1;
+	}
+}

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

@@ -1,16 +1,25 @@
 <footer>
-	<div class="text-center py-3" style="background: #7f0000">
+	<div class="social text-center py-3">
 		<h2 class="mb-4">Follow us on social media</h2>
 		<div class="d-flex justify-content-around mx-auto" style="max-width: 300px">
-			<i class="fa-brands fa-discord fa-2xl"></i>
+			<a href="https://discord.gg/wW458KYR79" target="_blank">
-			<i class="fa-brands fa-facebook fa-2xl"></i>
+				<i class="fa-brands fa-discord fa-2xl"></i>
-			<i class="fa-brands fa-instagram fa-2xl"></i>
+			</a>
-			<i class="fa-brands fa-tiktok fa-2xl"></i>
+			<a href="https://facebook.com" target="_blank">
-			<i class="fa-brands fa-youtube fa-2xl"></i>
+				<i class="fa-brands fa-facebook fa-2xl"></i>
+			</a>
+			<a href="https://instagram.com" target="_blank">
+				<i class="fa-brands fa-instagram fa-2xl"></i>
+			</a>
+			<a href="https://tiktok.com" target="_blank">
+				<i class="fa-brands fa-tiktok fa-2xl"></i>
+			</a>
+			<a href="https://youtube.com" target="_blank">
+				<i class="fa-brands fa-youtube fa-2xl"></i>
+			</a>
 		</div>
 		<h3 class="mt-4 mb-0">so we can invade your feed</h3>
 	</div>
-	<div class="footer-map"></div>
 	<div class="p-2" style="background: #333">
 		<div class="mx-auto d-flex justify-content-around" style="max-width: 800px">
 			<div>
@@ -55,7 +64,7 @@
 		</div>
 	</div>
 	<div class="py-2 text-center">
-		<p class="m-0">
+		<p class="copywright m-0">
 			Copyright &copy; Legio XXX 2022 | All Rights Reserved<br>
 			Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
 		</p>

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

@@ -1,23 +1,23 @@
 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); }
-}
-
-.footer-map {
-	height: 200px;
-	background: black url("/assets/img/map.png") no-repeat top center;
-	background-attachment: fixed;
-	background-size: cover;
 }
 
 .sitemap-header {
 	color: rgba(255, 255, 255, 0.8);
 	margin: 0;
 }
+
+.social {
+	background: #7f0000;
+
+	a, a:visited { color: #fff; }
+	a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
+}
+
+.copywright {
+	a, a:visited { color: #b10000; }
+	a:hover, a:visited:hover { color: #cc0000; }
+}
+
+

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

@@ -1,16 +1,16 @@
 <mat-toolbar>
 	<mat-toolbar-row>
 		<div>
-			<a class="navbar-brand d-flex align-items-center" href="#">
+			<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner">
 				<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 routerLink="/" fragment="about"><button mat-button class="navbar-button">About</button></a>
-			<a href="#contact"><button mat-button class="navbar-button">Contact</button ></a>
+			<a routerLink="/" fragment="contact"><button mat-button class="navbar-button">Contact</button ></a>
-			<a href="#gallery"><button mat-button class="navbar-button">Gallery</button></a>
+			<a routerLink="gallery"><button mat-button class="navbar-button">Gallery</button></a>
 			<button mat-button [matMenuTriggerFor]="eventsMenu" class="navbar-button">
 				Events <mat-icon>expand_more</mat-icon>
 			</button>

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

@@ -17,18 +17,21 @@
 
 	.navbar-brand {
 		color: #fff;
-		text-decoration: none;
 		font-weight: lighter;
+
+		&:hover img {
+			filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg);
+		}
 	}
 
 	.navbar-button {
-		color: rgba(255, 255, 255, 0.55);
+		//color: rgba(255, 255, 255, 0.55);
 		font-weight: normal;
 		padding: 0 8px 0 8px;
 
-		&:hover {
+		//&:hover {
-			color: rgba(255, 255, 255, 0.75);
+		//	color: rgba(255, 255, 255, 0.75);
-		}
+		//}
 	}
 }
 

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

@@ -1,12 +1,34 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {filter, Subscription} from 'rxjs';
 
 @Component({
 	selector: 'xxx-navbar',
 	templateUrl: './navbar.component.html',
 	styleUrls: ['./navbar.component.scss']
 })
-export class NavbarComponent {
+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/containers/app/app.component.html

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

src/app/containers/app/app.component.scss

@@ -0,0 +1,5 @@
+.app-container {
+	overflow-x: hidden;
+	overflow-y: auto;
+	scroll-behavior: smooth;
+}

src/app/containers/app/app.component.ts

@@ -16,7 +16,6 @@ export class AppComponent {
 	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;
 		})

src/app/misc/utils.ts

@@ -0,0 +1,7 @@
+export function shuffle(arr: any[]) {
+	arr.forEach((val, i) => {
+		const i2 = ~~(Math.random() * (i + 1));
+		[arr[i], arr[i2]] = [arr[i2], arr[i]];
+	})
+	return arr;
+}

src/app/views/gallery/gallery.component.ts

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

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

@@ -1,12 +1,5 @@
-<header class="fill">
+<header id="banner" class="fill w-100">
-	<div class="fill d-flex flex-column align-items-center justify-content-center">
+	<xxx-banner></xxx-banner>
-		<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>
@@ -14,7 +7,7 @@
 	<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">
+				<img src="/assets/img/trajan.png" height="auto" width="275px">
 			</div>
 			<div class="text-center">
 				<h4>Legio XXX Vlpia Victrix</h4>
@@ -41,12 +34,13 @@
 	<div class="mb-5 py-5"><!-- Spacer --></div>
 	<div class="d-flex align-items-center justify-content-center">
 		<div>
-			<img src="/assets/img/recruitment.png" height="50%" width="auto">
+			<img src="/assets/img/recruitment.png" height="500px" width="auto">
 		</div>
 		<div class="ms-5 text-center">
 			<h2>Enlist Today!</h2>
 			<p>Legio XXX is looking for new recruits.</p>
-			<p>Check out the <a>Getting Started</a> page to learn more.</p>
+			<p>Check out the <a>Getting Started</a> page to learn more</p>
+			<p>and <a>register here.</a></p>
 		</div>
 	</div>
 </section>

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

@@ -1,4 +0,0 @@
-header {
-	background: black url("/assets/img/colosseum.jpg") no-repeat top center;
-	background-size: cover;
-}

src/styles.scss

@@ -17,6 +17,20 @@ $LegioXXX-theme: mat.define-dark-theme((
 
 @import '~bootstrap/dist/css/bootstrap-utilities.min.css';
 
+::-webkit-scrollbar-track {
+	background: rgba(0, 0, 0, 0);
+}
+
+::-webkit-scrollbar {
+	width: 10px;
+	background: rgba(0, 0, 0, 0);
+}
+
+::-webkit-scrollbar-thumb {
+	background: rgba(255, 255, 255, 0.6);
+	&:hover { background: rgba(255, 255, 255, 0.8); }
+}
+
 html, body {
 	height: 100%;
 }
@@ -25,14 +39,16 @@ body {
 	color: #fff;
 	font-family: Roboto, sans-serif;
 	margin: 0;
+	overflow: hidden;
 }
 
-* { scroll-behavior: smooth !important; }
+a, a:visited {
-
+	text-decoration: none;
-a { color: #ff0000; }
+	color: rgba(255, 255, 255, 0.6);
-a:visited:hover, a:hover { color: #aa0000; }
+}
-a:visited { color: #ff5555; }
+a:hover, a:visited:hover { color: #b10000; }
 
 .fill {
+	height: 0;
 	min-height: calc(100vh - 64px);
 }