ztimson/legio-30
ztimson/legio-30
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Updated styling

Browse Source
This commit is contained in:
Zakary Timson 2022-09-24 17:54:51 -04:00
parent 0e76d7c1b1
commit 6b6765891b
25 changed files with 206 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
old/index.css
View File

@ -1,17 +0,0 @@
html, body {
height: 100%;
width: 100%;
margin: 0;
position: relative;
background: black;
}
header {
height: 100vh;
background: black url("../img/colosseum.jpg") no-repeat top center;
background-size: cover;
}
a { color: #ff0000; }
a:hover { color: #aa0000; }
a:visited { color: #ff5555; }

163
old/index.html
View File

@ -1,163 +0,0 @@
<!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="img/capricorn.png" rel="icon" type="image/png">
<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>
<body data-bs-spy="scroll" data-bs-target="#navbar">
<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark bg-black px-3 border-bottom border-white">
<div>
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="img/capricorn.png" alt="Capricorn" height="45" width="45">
<div class="px-2">LEGIO · XXX</div>
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="me-auto"></div>
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a id="learn" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Learn</a>
<ul class="dropdown-menu dropdown-menu-dark bg-black border-1 border-white" aria-labelledby="learn">
<li><a class="dropdown-item" href="#">Legio XXX</a></li>
<li><a class="dropdown-item" href="#">Legion Structure</a></li>
<li><a class="dropdown-item" href="#">Legionary Camp</a></li>
<li><a class="dropdown-item" href="#">Legion HQ</a></li>
<li><a class="dropdown-item" href="#">Equipment</a></li>
<li><a class="dropdown-item" href="#">Basic Training</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Resources</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a id="events" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Events</a>
<ul class="dropdown-menu dropdown-menu-dark bg-black border-1 border-white" aria-labelledby="events">
<li><a class="dropdown-item" href="#">Castra Aestiva</a></li>
<li><a class="dropdown-item" href="#">Castra Hiberna</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Calendar</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a id="members" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Members</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark bg-black border-1 border-white" aria-labelledby="members">
<li><a class="dropdown-item" href="#">Register</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Rules</a></li>
<li><a class="dropdown-item" href="#">Getting Started</a></li>
<li><a class="dropdown-item" href="#">Purchase Kit</a></li>
<li><a class="dropdown-item" href="#">Kit Maintinance</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<header>
<div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center">
<img src="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="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="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 bg-white" style="height: 100vh">
<div class="mb-5 py-5"><!-- Spacer --></div>
<h2>Gallery</h2>
</section>
<section class="bg-white">
<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>
<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>
<footer class="bg-dark text-center text-white py-2">
<p class="m-0">
Copyright &copy; Legio XXX 2022 | All Rights Reserved
<br>
Created by <a href="https://zakscode.com">Zak Timson</a>
</p>
</footer>
</body>
</htmL>

2
src/app/components/banner/banner.component.html
View File

@ -12,7 +12,7 @@
<mat-icon *ngIf="manual">play_arrow</mat-icon> <mat-icon *ngIf="manual">play_arrow</mat-icon>
</div> </div>
<div *ngIf="!manual" class="banner-seal d-flex flex-column align-items-center justify-content-center"> <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);"> <img src="/assets/img/eagle.png" class="mt-5" alt="SPQR" height="250" width="250" style="filter: drop-shadow(2px 4px 6px black);">
<div> <div>
<a class="text-white" routerLink="" fragment="about"> <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> <i class="fa fa-angle-double-down fa-4x" style="filter: drop-shadow(2px 4px 6px black);"></i>

2
src/app/components/banner/banner.component.scss
View File

@ -23,7 +23,7 @@
.banner-next { .banner-next {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 50px; right: 26px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }

5
src/app/components/banner/banner.component.ts
View File

@ -1,13 +1,10 @@
import { import {
AfterViewInit, AfterViewInit,
Component, Component,
ElementRef,
Host,
HostListener, HostListener,
Input, Input,
OnDestroy, OnDestroy,
OnInit, OnInit
ViewChild
} from '@angular/core'; } from '@angular/core';
import {interval, Subscription} from 'rxjs'; import {interval, Subscription} from 'rxjs';
import {shuffle} from '../../misc/utils'; import {shuffle} from '../../misc/utils';

53
src/app/components/footer/footer.component.html
View File

@ -1,7 +1,7 @@
<footer> <footer>
<div class="social text-center py-3"> <div class="social text-center py-3" style="background: #990000">
<h2 class="mb-4">Follow us on social media</h2> <h2 class="mb-4">Follow us on social media</h2>
<div class="d-flex justify-content-around mx-auto" style="max-width: 300px"> <div class="d-flex justify-content-around mx-auto transparent-link" style="max-width: 300px">
<a href="https://discord.gg/wW458KYR79" target="_blank"> <a href="https://discord.gg/wW458KYR79" target="_blank">
<i class="fa-brands fa-discord fa-2xl"></i> <i class="fa-brands fa-discord fa-2xl"></i>
</a> </a>
@ -18,47 +18,18 @@
<i class="fa-brands fa-youtube fa-2xl"></i> <i class="fa-brands fa-youtube fa-2xl"></i>
</a> </a>
</div> </div>
<h3 class="mt-4 mb-0">so we can invade your feed</h3> <h3 class="mt-4 mb-0">so we can invade your feed ⚔️</h3>
</div> </div>
<div class="p-2" style="background: #333"> <div style="background: #333">
<div class="mx-auto d-flex justify-content-around" style="max-width: 800px"> <div class="mx-auto d-flex justify-content-center flex-wrap">
<div> <div *ngFor="let group of navigation" class="m-3" style="min-width: 175px">
<h2 class="sitemap-header">Home</h2> <h2 class="sitemap-header">{{group.label}}</h2>
<ul class="m-0"> <ul class="m-0">
<li><a routerLink="/">About</a></li> <ng-container *ngFor="let section of group.children">
<li><a routerLink="/">Contact</a></li> <li *ngFor="let item of section">
<li><a routerLink="/">Gallery</a></li> <a [routerLink]="item.url" [fragment]="item.fragment">{{item.label}}</a>
</ul> </li>
</div> </ng-container>
<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">Learn</h2>
<ul class="m-0">
<li><a routerLink="/">Legio XXX</a></li>
<li><a routerLink="/">Legion Camp</a></li>
<li><a routerLink="/">Legion Headquarters</a></li>
<li><a routerLink="/">Legion Organization</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">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> </ul>
</div> </div>
</div> </div>

9
src/app/components/footer/footer.component.scss
View File

@ -8,16 +8,7 @@ ul {
margin: 0; margin: 0;
} }
.social {
background: #7f0000;
a, a:visited { color: #fff; }
a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
}
.copywright { .copywright {
a, a:visited { color: #b10000; } a, a:visited { color: #b10000; }
a:hover, a:visited:hover { color: #cc0000; } a:hover, a:visited:hover { color: #cc0000; }
} }

5
src/app/components/footer/footer.component.ts
View File

@ -1,8 +1,11 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {NAVIGATION} from '../../misc/navigation';
@Component({ @Component({
selector: 'xxx-footer', selector: 'xxx-footer',
templateUrl: './footer.component.html', templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'] styleUrls: ['./footer.component.scss']
}) })
export class FooterComponent { } export class FooterComponent {
navigation = NAVIGATION;
}

64
src/app/components/navbar/navbar.component.html
View File

@ -1,51 +1,20 @@
<mat-toolbar> <mat-toolbar>
<mat-toolbar-row> <mat-toolbar-row>
<div> <div>
<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner"> <a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner" (click)="scroll('banner')">
<img src="assets/img/capricorn.png" alt="Capricorn" height="45" width="45"> <img src="assets/img/capricorn.png" alt="Capricorn" height="45px" width="45px">
<div class="px-2">LEGIO · XXX</div> <div class="px-2">LEGIO · XXX</div>
</a> </a>
</div> </div>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<div *ngIf="!hamburger"> <div *ngIf="!hamburger">
<a routerLink="/" fragment="about"><button mat-button class="navbar-button">About</button></a> <a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment"
<a routerLink="/" fragment="contact"><button mat-button class="navbar-button">Contact</button ></a> (click)="item.fragment ? scroll(item.fragment) : null">
<a routerLink="gallery"><button mat-button class="navbar-button">Gallery</button></a> <button mat-button class="navbar-button">{{item.label}}</button>
<button mat-button [matMenuTriggerFor]="eventsMenu" class="navbar-button"> </a>
Events <mat-icon>expand_more</mat-icon> <ng-container *ngFor="let group of links.other">
</button> <ng-template [ngTemplateOutlet]="navGroup" [ngTemplateOutletContext]="{'$implicit': group}"></ng-template>
<mat-menu #eventsMenu="matMenu"> </ng-container>
<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]="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 Camp</button>
<button mat-menu-item>Legion Headquarters</button>
<button mat-menu-item>Legion Organization</button>
<button mat-menu-item>Legionairy 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]="membersMenu" class="navbar-button">
Members <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #membersMenu="matMenu">
<button mat-menu-item>Getting Started</button>
<button mat-menu-item>Rules & Regulations</button>
<mat-divider></mat-divider>
<button mat-menu-item>Kit Assembly</button>
<button mat-menu-item>Kit Maintinance</button>
<button mat-menu-item>Trusted Vendors</button>
<mat-divider></mat-divider>
<button mat-menu-item>Login/Register</button>
</mat-menu>
</div> </div>
<button *ngIf="hamburger" mat-icon-button class="mr-3"> <button *ngIf="hamburger" mat-icon-button class="mr-3">
<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon> <mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>
@ -53,3 +22,18 @@
</mat-toolbar-row> </mat-toolbar-row>
</mat-toolbar> </mat-toolbar>
<div class="navbar-spacing"><!-- Spacing --></div> <div class="navbar-spacing"><!-- Spacing --></div>
<ng-template #navGroup let-group>
<button mat-button [matMenuTriggerFor]="menu" class="navbar-button">
{{group.label}} <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #menu="matMenu">
<ng-container *ngFor="let section of group.children; let first = first">
<mat-divider *ngIf="!first"></mat-divider>
<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment"
(click)="item.fragment ? scroll(item.fragment) : null">
{{item.label}}
</button>
</ng-container>
</mat-menu>
</ng-template>

16
src/app/components/navbar/navbar.component.scss
View File

@ -19,19 +19,16 @@
color: #fff; color: #fff;
font-weight: lighter; font-weight: lighter;
&:hover img { &:hover img { filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg); }
filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg); &:hover, &:visited:hover { color: #b10000; }
}
} }
.navbar-button { .navbar-button {
//color: rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.6);
font-weight: normal; font-weight: normal;
padding: 0 8px 0 8px; padding: 0 8px 0 8px;
//&:hover { &:hover { color: #b10000; }
// color: rgba(255, 255, 255, 0.75);
//}
} }
} }
@ -48,11 +45,10 @@
} }
button { button {
color: rgba(255, 255, 255, 0.6);
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
&:hover { &:hover { color: #b10000; }
background: rgba(255, 255, 255, 0.15) !important;
}
} }
} }

8
src/app/components/navbar/navbar.component.ts
View File

@ -1,6 +1,7 @@
import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core'; import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {filter, Subscription} from 'rxjs'; import {filter, Subscription} from 'rxjs';
import {NAVIGATION} from '../../misc/navigation';
@Component({ @Component({
selector: 'xxx-navbar', selector: 'xxx-navbar',
@ -10,6 +11,11 @@ import {filter, Subscription} from 'rxjs';
export class NavbarComponent implements AfterViewInit, OnDestroy { export class NavbarComponent implements AfterViewInit, OnDestroy {
private sub!: Subscription; private sub!: Subscription;
links = {
topLevel: NAVIGATION[0].children[0],
other: NAVIGATION.slice(1)
}
@Input() hamburger = true; @Input() hamburger = true;
@Output() hamburgerClick = new EventEmitter<void>(); @Output() hamburgerClick = new EventEmitter<void>();
@ -18,7 +24,9 @@ export class NavbarComponent implements AfterViewInit, OnDestroy {
ngAfterViewInit() { ngAfterViewInit() {
this.sub = this.route.fragment.subscribe(frag => { this.sub = this.route.fragment.subscribe(frag => {
console.log('fire');
if(frag) this.scroll(frag); if(frag) this.scroll(frag);
else this.scroll('top');
}); });
} }

1
src/app/containers/app/app.component.html
View File

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

44
src/app/misc/navigation.ts Normal file
View File

@ -0,0 +1,44 @@
export type NavigationItem = {
label: string,
url: string,
fragment?: string
};
export type NavigationGroup = {
label: string,
children: NavigationItem[][]
}[];
export const NAVIGATION: NavigationGroup = [
{label: 'Home', children: [[
{label: 'About', url: '/', fragment: 'about'},
{label: 'Contact', url: '/', fragment: 'contact'},
{label: 'Gallery', url: '/gallery'},
]]},
{label: 'Events', children: [[
{label: 'Castra Aestiva', url: '/event', fragment: 'aestiva'},
{label: 'Castra Hiberna', url: '/event', fragment: 'hiberna'},
], [
{label: 'Calendar', url: '/event/calendar'},
]]},
{label: 'Learn', children: [[
{label: 'Legio XXX', url: '/info/legio-xxx'},
{label: 'Legion Camp', url: '/info/legion-camp'},
{label: 'Legion Headquarters', url: '/info/legion-headquarters'},
{label: 'Legion Organization', url: '/info/legion-organization'},
{label: 'Legionairy Equipment', url: '/info/legionairy-equipment'},
{label: 'Legionairy Training', url: '/info/legionairy-training'},
], [
{label: 'Resources', url: '/info/resources'},
]]},
{label: 'Reenact', children: [[
{label: 'Getting Started', url: '/getting-started'},
{label: 'Rules & Regulations', url: '/rules'},
], [
{label: 'Kit Assembly', url: '/diy'},
{label: 'Kit Maintinance', url: '/info/maintinance'},
{label: 'Trusted Vendors', url: '/vendors'},
], [
{label: 'Login/Register', url: '/login'},
]]},
]

5
src/app/views/404/404.component.html
View File

@ -1,11 +1,12 @@
<section class="p-5 invert"> <section class="p-5 invert">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center text-center">
<div> <div>
<img src="/assets/img/column.png" alt="" height="300px" width="auto"> <img src="/assets/img/column.png" alt="" height="300px" width="auto">
</div> </div>
<div class="d-flex flex-column align-items-center justify-content-center px-5"> <div class="d-flex flex-column align-items-center justify-content-center px-5">
<h1>CDIV</h1>
<h2>404</h2> <h2>404</h2>
<h3>Page Not Found</h3> <p>Page Not Found</p>
</div> </div>
<div> <div>
<img src="/assets/img/column.png" alt="" height="300px" width="auto"> <img src="/assets/img/column.png" alt="" height="300px" width="auto">

95
src/app/views/home/home.component.html
View File

@ -1,52 +1,75 @@
<!-- Banner -->
<header id="banner" class="fill w-100"> <header id="banner" class="fill w-100">
<xxx-banner></xxx-banner> <xxx-banner></xxx-banner>
</header> </header>
<section id="about" class="d-flex flex-column align-items-center bg-black text-white" style="height: 100vh"> <!-- ABout -->
<div class="mb-5 py-5"><!-- Spacer --></div> <section id="about" class="d-flex flex-column flex-md-row align-items-center justify-content-center bg-black text-white fill py-5 py-md-0">
<h2>About</h2> <div class="d-none d-md-inline flex-grow-1 text-end" style="flex-basis: 0">
<div class="container"> <img src="/assets/img/trajan2.png" alt="Statue of Trajan" height="450px" width="auto">
<div class="d-flex align-items-center justify-content-around"> </div>
<div class=""> <div class="flex-grow-0 text-center px-5">
<img src="/assets/img/trajan.png" height="auto" width="275px"> <h1>About</h1>
</div> <h2>Legio XXX - Vlpia Victrix</h2>
<div class="text-center"> <h3 class="mb-4">(Trajan's Victorious Thirtieth Legion)</h3>
<h4>Legio XXX Vlpia Victrix</h4> <p>
<h4 class="mb-4">(Trajan's Victorious Thirtieth Legion)</h4> Legio XXX is a North American Roman reenactment group established in 2004.
<p>Legio XXX is a North American Roman re-enactment group that has been active since 2004.</p> <br><br>
<p>It's members represent a cross between living history enthusiasts and edutainers</p> It's members represent a cross between living history enthusiasts and "edutainers"
<p>recreating the lives of LEGIO XXX, founded by emperor Trajan in the 2nd centery AD.</p> <br><br>
</div> that recreate the lives of soldiers found in Trajan's leagions during the 1st - 2nd Century AD
<div class="ps-4"> </p>
<div class="p-1 text-center" style="border: solid 5px white;"> </div>
<div class="p-1" style="border: dashed 5px white;"> <div class="flex-md-grow-1" style="flex-basis: 0">
<div class="p-3" style="border: solid 5px white;"> <img class="mt-5" src="/assets/img/standard.png" alt="Legio XXX Standard" height="250px" width="auto">
<h3 class="text-nowrap" style="font-size: 2em">LEGIO · XXX</h3> </div>
<img src="/assets/img/capricorn.png" class="my-3" alt="capricorn" height="140em" width="140em"> </section>
<h4 class="text-nowrap" style="font-size: 1.5em">VLPIA · VICTRIX</h4> <!-- Discord -->
</div> <section class="d-flex" style="background-color: #990000">
</div> <div class="d-flex flex-grow-1">
</div> <div class="h-100 w-100" style="background: #7289d9"></div>
<img class="d-block d-md-none" src="/assets/img/discord.png" height="100px" width="auto">
<img class="d-none d-md-block" src="/assets/img/discord.png" height="200px" width="auto">
</div>
<div class="d-flex justify-content-start align-items-center flex-grow-1 p-3">
<div class="d-block text-center">
<h1 class="d-block m-0 mb-md-3 transparent-link">
<a href="https://discord.gg/wW458KYR79" target="_blank">Join us on Discord</a>
</h1>
<div class="d-none d-md-inline">
<p>
Ask us questions, get involved
<br><br>
and celebrate the glory of Rome with us!
</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section id="recruitment" class="d-flex flex-column align-items-center" style="height: 100vh; background: #fff; color: #000;"> <!-- Recruitment -->
<div class="mb-5 py-5"><!-- Spacer --></div> <section id="recruitment" class="d-flex flex-column flex-md-row align-items-center justify-content-center fill invert">
<div class="d-flex align-items-center justify-content-center"> <div class="flex-grow-1 p-5 pb-0 text-center text-md-end" style="flex-basis: 0">
<div> <img src="/assets/img/recruitment.png" alt="I want you for Legio XXX" style="max-width: min(90%, 400px)">
<img src="/assets/img/recruitment.png" height="500px" width="auto"> </div>
</div> <div class="d-flex flex-grow-1 justify-content-start align-items-center" style="flex-basis: 0">
<div class="ms-5 text-center"> <div class="d-block text-center">
<h2>Enlist Today!</h2> <h2>Enlist Today!</h2>
<p>Legio XXX is looking for new recruits.</p> <p>
<p>Check out the <a>Getting Started</a> page to learn more</p> Interested in any <a routerLink="/calendar">events</a>?
<p>and <a>register here.</a></p> <br><br>
Legio XXX is looking for new recruits.
<br><br>
Check out the <a routerLink="/getting-starterd">Getting Started</a> page to learn more
<br><br>
or <a routerLink="/login">register here.</a>
</p>
</div> </div>
</div> </div>
</section> </section>
<!-- Page Break-->
<section style="background: #fff"> <section style="background: #fff">
<img src="/assets/img/formation.png" width="100%" height="auto"> <img src="/assets/img/formation.png" alt="Legion formation" width="100%" height="auto" style="transform: translateY(10px)">
</section> </section>
<!-- Contact -->
<section id="contact" class="d-flex flex-column align-items-center py-5 bg-black text-white" style="min-height: 100vh"> <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> <div class="mb-5 py-5"><!-- Spacer --></div>
<h2>Contact</h2> <h2>Contact</h2>

3
src/app/views/home/home.component.ts
View File

@ -1,4 +1,5 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {NAVIGATION} from '../../misc/navigation';
@Component({ @Component({
selector: 'xxx-home', selector: 'xxx-home',
@ -6,5 +7,5 @@ import {Component} from '@angular/core';
styleUrls: ['./home.component.scss'] styleUrls: ['./home.component.scss']
}) })
export class HomeComponent { export class HomeComponent {
navigation = NAVIGATION;
} }

BIN
src/assets/img/banner/ROM.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 421 KiB

BIN
src/assets/img/banner/castra.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 749 KiB

BIN
src/assets/img/discord.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
src/assets/img/eagle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

0
src/assets/img/old/standard.png → src/assets/img/standard.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 365 KiB

After

Width:  |  Height:  |  Size: 365 KiB

BIN
src/assets/img/trajan2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 486 KiB

BIN
src/assets/img/wall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

40
src/index.html
View File

@ -1,23 +1,31 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta charset="utf-8">
<!-- TODO: Description--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Zak Timson">
<title>LEGIO · XXX</title> <meta name="author" content="Zak Timson">
<meta property="og:title" content="LEGIO · XXX">
<meta property="og:site_name" content="LEGIO · XXX">
<meta property="og:type" content="article" />
<meta property="og:url" content="https://legioxxx.zakscode.com">
<meta property="og:image" content="https://legioxxx.zakscode.com/assets/img/standard.png">
<meta name="twitter:card" content="https://legioxxx.zakscode.com/assets/img/standard.png">
<meta name="twitter:image:alt" content="Alt text for image">
<meta name="description" content="Legio XXX is a North American Roman reenactment group established in 2004. It's members represent a cross between living history enthusiasts and 'edutainers' that recreate the lives of soldiers found in Trajan's leagions during the 1st - 2nd Century AD">
<meta property="og:description" content="Legio XXX is a North American Roman reenactment group established in 2004. It's members represent a cross between living history enthusiasts and 'edutainers' that recreate the lives of soldiers found in Trajan's leagions during the 1st - 2nd Century AD">
<link href="assets/img/capricorn.png" rel="icon" type="image/png"> <title>LEGIO · XXX</title>
<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">
</head>
<body class="mat-typography" style="background: #000"> <link href="assets/img/capricorn.png" rel="icon" type="image/png">
<app-root></app-root> <link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet">
</body> <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> </html>

16
src/styles.scss
View File

@ -48,7 +48,23 @@ a, a:visited {
} }
a:hover, a:visited:hover { color: #b10000; } a:hover, a:visited:hover { color: #b10000; }
.invert {
background: #fff;
color: #000;
a, a:visited {
text-decoration: none;
color: #b10000;
}
a:hover, a:visited:hover { color: #cc0000; }
}
.fill { .fill {
height: 0; height: 0;
min-height: calc(100vh - 64px); min-height: calc(100vh - 64px);
} }
.transparent-link {
a, a:visited { color: #fff; }
a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
}