Graphic fixes & mobile navigation
This commit is contained in:
parent
5ec05c0f27
commit
1ab563ca96
@ -34,9 +34,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-2 text-center">
|
||||
<div class="py-3 text-center">
|
||||
<p class="copyright m-0">
|
||||
Copyright © Legio XXX 2023 | All Rights Reserved<br>
|
||||
Copyright © Legio XXX 2024 | All Rights Reserved<br>
|
||||
Created by <a href="https://zakscode.com" target="_blank">Zak Timson</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -7,26 +7,13 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-grow-1"></div>
|
||||
<!-- Full NavBar -->
|
||||
<div *ngIf="!hamburger">
|
||||
<a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment"
|
||||
(click)="item.fragment ? scroll(item.fragment) : null">
|
||||
<button mat-button class="navbar-button" aria-label="Menu">{{item.label}}</button>
|
||||
</a>
|
||||
<ng-container *ngFor="let group of links.other">
|
||||
<ng-template [ngTemplateOutlet]="navGroup" [ngTemplateOutletContext]="{'$implicit': group}"></ng-template>
|
||||
</ng-container>
|
||||
<!-- <a href="#">-->
|
||||
<!-- <button mat-button class="navbar-button">Donate</button>-->
|
||||
<!-- </a>-->
|
||||
</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>
|
||||
|
||||
<ng-template #navGroup let-group>
|
||||
<button mat-button [matMenuTriggerFor]="menu" class="navbar-button">
|
||||
{{group.label}} <mat-icon>expand_more</mat-icon>
|
||||
</button>
|
||||
@ -39,4 +26,32 @@
|
||||
</button>
|
||||
</ng-container>
|
||||
</mat-menu>
|
||||
</ng-container>
|
||||
</div>
|
||||
<!-- Mobile NavBar -->
|
||||
<button *ngIf="hamburger" mat-icon-button class="text-start" [matMenuTriggerFor]="menu">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment"
|
||||
(click)="item.fragment ? scroll(item.fragment) : null">{{item.label}}</button>
|
||||
<ng-container *ngFor="let group of links.other">
|
||||
<button mat-menu-item [matMenuTriggerFor]="menu">{{group.label}}</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-container>
|
||||
</mat-menu>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
<div class="navbar-spacing"><!-- Spacing --></div>
|
||||
|
||||
<ng-template #navGroup let-group>
|
||||
|
||||
</ng-template>
|
||||
|
||||
@ -21,19 +21,19 @@ export const NAVIGATION: NavigationGroup = [
|
||||
], [
|
||||
{label: 'Calendar', url: '/events/calendar'},
|
||||
]]},
|
||||
{label: 'Learn', children: [[
|
||||
{label: 'Trajan', url: '/info/trajan'},
|
||||
{label: 'Legio XXX', url: '/info/legio-xxx'},
|
||||
{label: 'Legion Camp', url: '/info/camp'},
|
||||
{label: 'Legion Headquarters', url: '/info/headquarters'},
|
||||
{label: 'Legion Organization', url: '/info/organization'},
|
||||
{label: 'Legionairy Equipment', url: '/info/equipment'},
|
||||
{label: 'Legionairy Training', url: '/info/training'},
|
||||
], [
|
||||
{label: 'Common Questions', url: '/info/questions'},
|
||||
{label: 'Glossary', url: '/info/glossary'},
|
||||
{label: 'Resources', url: '/info/resources'},
|
||||
]]},
|
||||
// {label: 'Learn', children: [[
|
||||
// {label: 'Trajan', url: '/info/trajan'},
|
||||
// {label: 'Legio XXX', url: '/info/legio-xxx'},
|
||||
// {label: 'Legion Camp', url: '/info/camp'},
|
||||
// {label: 'Legion Headquarters', url: '/info/headquarters'},
|
||||
// {label: 'Legion Organization', url: '/info/organization'},
|
||||
// {label: 'Legionairy Equipment', url: '/info/equipment'},
|
||||
// {label: 'Legionairy Training', url: '/info/training'},
|
||||
// ], [
|
||||
// {label: 'Common Questions', url: '/info/questions'},
|
||||
// {label: 'Glossary', url: '/info/glossary'},
|
||||
// {label: 'Resources', url: '/info/resources'},
|
||||
// ]]},
|
||||
{label: 'Reenact', children: [[
|
||||
{label: 'Getting Started', url: '/getting-started'},
|
||||
{label: 'Rules & Regulations', url: '/rules'},
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div class="invert">
|
||||
<div class="banner d-print-none"></div>
|
||||
<div class="container py-4 px-3">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="d-flex align-items-end justify-content-between mb-2">
|
||||
<h1 class="mb-0">About</h1>
|
||||
<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
|
||||
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
|
||||
<mat-icon class="me-1">print</mat-icon>
|
||||
Print
|
||||
</a>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: max(300px, 30vh);
|
||||
height: 50vh;
|
||||
background: white url("/assets/img/castra.jpg") center 35% no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div class="invert">
|
||||
<div class="banner d-print-none"></div>
|
||||
<div class="container py-4 px-3">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="d-flex align-items-end justify-content-between mb-2">
|
||||
<h1 class="mb-0"><em>Castra Aestiva</em> (Summer Camp)</h1>
|
||||
<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
|
||||
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
|
||||
<mat-icon class="me-1">print</mat-icon>
|
||||
Print
|
||||
</a>
|
||||
@ -21,7 +21,7 @@
|
||||
<h2 class="mb-2">Details</h2>
|
||||
<p>
|
||||
Tom Ross hosts a Castra Aestiva event every Memorial Day weekend (in May) near Tillsonburg Ontario. It's a private multi-day training event involving Romans and their enemies and is the perfect opportunity for new Roman reenactors. Participants
|
||||
sleep in <em>sub pellibus</em> (tents) within the protective walls of the <em>castrum</em> (fort). If May doesn't work for you, consider coming to <a routerLink="/events/hiberna">Castra Hiberna</a> in September.
|
||||
sleep in <em>sub pellibus</em> (tents) within the protective walls of the <em>castrum</em> (fort). If May doesn't work for you, consider coming to <a routerLink="/events/castra-hiberna">Castra Hiberna</a> in September.
|
||||
</p>
|
||||
<h3 class="mb-0">Activities</h3>
|
||||
<ul class="mt-0">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: max(300px, 30vh);
|
||||
height: 50vh;
|
||||
background: white url("/assets/img/interior.jpg") center 35% no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
<div class="invert">
|
||||
<div class="banner d-print-none"></div>
|
||||
<div class="container py-4 px-3">
|
||||
<div class="container">
|
||||
<div>
|
||||
<h1 class="mb-2"><em>Agonium</em> (Janus Festival)</h1>
|
||||
<div class="d-flex align-items-end justify-content-between mb-2">
|
||||
<h1 class="mb-0"><em>Agonium</em> (Janus Festival)</h1>
|
||||
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
|
||||
<mat-icon class="me-1">print</mat-icon>
|
||||
Print
|
||||
</a>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: max(300px, 30vh);
|
||||
height: 50vh;
|
||||
background: white url("/assets/img/agonium.png") center center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<div class="invert">
|
||||
<div class="container py-4 px-3">
|
||||
<h1 class="mb-2">Calendar</h1>
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-end justify-content-between mb-2">
|
||||
<h1 class="mb-0">Calendar</h1>
|
||||
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
|
||||
<mat-icon class="me-1">print</mat-icon>
|
||||
Print
|
||||
</a>
|
||||
</div>
|
||||
<mat-divider class="mb-4"></mat-divider>
|
||||
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=America%2FToronto&showTitle=0&showNav=1&showPrint=1&showTabs=0&showCalendars=0&src=Y18wYTIxNTM3ZDgwMWMzNTQ0MTUwYzk5YTUwNjI5Yjc5MjM0MjYyYjY0YzYyNzZiZTQ3OWJlMzA4OWU0MmM3NTQ5QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23D50000" style="border-width:0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<div class="invert">
|
||||
<div class="banner d-print-none"></div>
|
||||
<div class="container py-4 px-3">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="d-flex align-items-end justify-content-between mb-2">
|
||||
<h1 class="mb-0"><em>Castra Hiberna</em> (Winter Camp)</h1>
|
||||
<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
|
||||
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
|
||||
<mat-icon class="me-1">print</mat-icon>
|
||||
Print
|
||||
</a>
|
||||
@ -22,7 +22,7 @@
|
||||
<h2 class="mb-2">Details</h2>
|
||||
<p>
|
||||
Tom Ross hosts a Castra Hiberna event every September near Tillsonburg Ontario. It's a private single day event between Romans and their adversaries. It's an excellent opportunity for new Roman reenactors. If May doesn't work for you, consider coming to
|
||||
<a routerLink="/events/aestiva">Castra Aestiva</a> in May.
|
||||
<a routerLink="/events/castra-aestiva">Castra Aestiva</a> in May.
|
||||
</p>
|
||||
<h3 class="mb-0">Activities</h3>
|
||||
<ul class="mt-0">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: max(300px, 30vh);
|
||||
height: 50vh;
|
||||
background: white url("/assets/img/morning-mist.jpg") center center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
</section>
|
||||
<!-- Recruitment -->
|
||||
<section id="recruitment" class="d-flex flex-column flex-md-row align-items-center justify-content-center fill invert">
|
||||
<div class="flex-grow-1 p-5 pb-0 text-center text-md-end" style="flex-basis: 0">
|
||||
<div class="flex-grow-1 mt-5 mt-md-0 p-5 pb-0 text-center text-md-end" style="flex-basis: 0">
|
||||
<img src="/assets/img/recruitment.png" alt="I want you for Legio XXX" style="max-width: min(90%, 400px)">
|
||||
</div>
|
||||
<div class="d-flex flex-grow-1 justify-content-start align-items-center" style="flex-basis: 0">
|
||||
@ -74,7 +74,7 @@
|
||||
</section>
|
||||
<!-- Contact -->
|
||||
<section id="contact" class="d-flex flex-column align-items-center justify-content-center fill">
|
||||
<div>
|
||||
<div class="container">
|
||||
<h2 class="text-center">Contact</h2>
|
||||
<div class="d-flex flex-row">
|
||||
<form class="pe-3" style="width: min(100%, 600px)">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<div class="invert">
|
||||
<div class="container py-4 px-3">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="d-flex align-items-end justify-content-between mb-2">
|
||||
<h1 class="mb-0">Drill Commands</h1>
|
||||
<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
|
||||
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
|
||||
<mat-icon class="me-1">print</mat-icon>
|
||||
Print
|
||||
</a>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<div class="invert">
|
||||
<div class="container py-4 px-3">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="d-flex align-items-end justify-content-between mb-2">
|
||||
<h1 class="mb-0">Getting Started</h1>
|
||||
<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
|
||||
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
|
||||
<mat-icon class="me-1">print</mat-icon>
|
||||
Print
|
||||
</a>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<div class="invert">
|
||||
<div class="container py-4 px-3">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="d-flex align-items-end justify-content-between mb-2">
|
||||
<h1 class="mb-0">Equipment Maintenance</h1>
|
||||
<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
|
||||
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
|
||||
<mat-icon class="me-1">print</mat-icon>
|
||||
Print
|
||||
</a>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<div class="invert">
|
||||
<div class="container py-4 px-3">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="d-flex align-items-end justify-content-between mb-2">
|
||||
<h1 class="mb-0">Rules & Regulations</h1>
|
||||
<a class="d-flex d-print-none justify-content-center text-muted" href="javascript:window.print()">
|
||||
<a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">
|
||||
<mat-icon class="me-1">print</mat-icon>
|
||||
Print
|
||||
</a>
|
||||
|
||||
@ -62,6 +62,13 @@ h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 5rem 2rem;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.container {
|
||||
padding: 5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.invert {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user