banner & styling
This commit is contained in:
@ -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>
|
||||
|
||||
49
src/app/components/banner/banner.component.scss
Normal file
49
src/app/components/banner/banner.component.scss
Normal file
@ -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%);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
<i class="fa-brands fa-facebook fa-2xl"></i>
|
||||
<i class="fa-brands fa-instagram fa-2xl"></i>
|
||||
<i class="fa-brands fa-tiktok fa-2xl"></i>
|
||||
<i class="fa-brands fa-youtube fa-2xl"></i>
|
||||
<a href="https://discord.gg/wW458KYR79" target="_blank">
|
||||
<i class="fa-brands fa-discord fa-2xl"></i>
|
||||
</a>
|
||||
<a href="https://facebook.com" target="_blank">
|
||||
<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 © Legio XXX 2022 | All Rights Reserved<br>
|
||||
Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
|
||||
</p>
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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 href="#contact"><button mat-button class="navbar-button">Contact</button ></a>
|
||||
<a href="#gallery"><button mat-button class="navbar-button">Gallery</button></a>
|
||||
<a routerLink="/" fragment="about"><button mat-button class="navbar-button">About</button></a>
|
||||
<a routerLink="/" fragment="contact"><button mat-button class="navbar-button">Contact</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>
|
||||
|
||||
@ -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 {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
//&:hover {
|
||||
// color: rgba(255, 255, 255, 0.75);
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user