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

Updated styles
All checks were successful
Build Website / Build NPM Project (push) Successful in 1m43s
Details
Build Website / Tag Version (push) Successful in 11s
Details
Build Website / Build & Push Dockerfile (push) Successful in 2m49s
Details

Browse Source
This commit is contained in:
Zakary Timson 2024-01-11 09:55:42 -05:00
parent fd6c97989c
commit c18f436e5d
21 changed files with 50 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
.banner-container { .banner-container {
position: relative; position: relative;
overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

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

@ -20,9 +20,9 @@
</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="bg-dark text-center text=sm=start"> <div class="bg-dark text-center text-sm-start">
<div class="d-flex flex-column flex-sm-row flex-wrap justify-content-around container p-3"> <div class="d-flex flex-column flex-sm-row flex-wrap justify-content-center container p-3 pb-0">
<div *ngFor="let group of navigation"> <div *ngFor="let group of navigation" class="mx-5">
<h2 class="sitemap-header">{{group.label}}</h2> <h2 class="sitemap-header">{{group.label}}</h2>
<ul> <ul>
<ng-container *ngFor="let section of group.children"> <ng-container *ngFor="let section of group.children">
@ -32,7 +32,7 @@
</ng-container> </ng-container>
</ul> </ul>
</div> </div>
<div> <div class="mx-5">
<h2 class="sitemap-header">Contact</h2> <h2 class="sitemap-header">Contact</h2>
<ul> <ul>
<li class="font-weight-strong">Robert Sacco</li> <li class="font-weight-strong">Robert Sacco</li>

5
src/app/components/logo/logo.component.html
View File

@ -1,5 +1,6 @@
<div class="logo"> <div class="logo d-flex align-items-center">
<div class="d-flex" aria-label="Legio XXX"> <img src="assets/img/eagle.png" class="me-1" alt="SPQR" style="height: 2.5rem; width: auto;">
<div class="d-inline-flex" aria-label="Legio XXX" style="font-family: Serif; font-weight: lighter">
<div>L</div> <div>L</div>
<div [@slide]="expand ? 'expand' : 'shrink'" style="overflow: hidden">EGIO · </div> <div [@slide]="expand ? 'expand' : 'shrink'" style="overflow: hidden">EGIO · </div>
<div [@margin]="expand ? 'expand' : 'shrink'" [style.marginLeft]="expand ? '0.25rem' : 0">XXX</div> <div [@margin]="expand ? 'expand' : 'shrink'" [style.marginLeft]="expand ? '0.25rem' : 0">XXX</div>

26
src/app/components/logo/logo.component.scss
View File

@ -1,26 +0,0 @@
//.logo {
// .expandable {
// width: 0;
// }
//
// &.expanded {
// .expandable {
// width: auto;
// }
// }
//
// .logo-segment {
// font-family: Arial, sans-serif !important;
// overflow: hidden;
// padding: 0.3em 0;
// width: auto;
// }
//
// .logo-dots {
// width: 30px;
// }
//
// .logo-footer {
// transform: translate(-15px, -8px);
// }
//}

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

@ -1,16 +1,14 @@
<mat-toolbar class="d-print-none"> <mat-toolbar class="d-print-none">
<mat-toolbar-row> <mat-toolbar-row>
<div> <!-- Brand -->
<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner" (click)="scroll('banner')" style="text-decoration: none"> <a class="navbar-brand" routerLink="/" style="text-decoration: none">
<img src="assets/img/eagle.png" alt="SPQR" height="45px" width="45px"> <xxx-logo class="px-2" [expand]="true"></xxx-logo>
<xxx-logo class="px-2" [expand]="true"></xxx-logo> </a>
</a> <!-- Spacer -->
</div>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<!-- Full NavBar --> <!-- Full NavBar -->
<div *ngIf="!hamburger"> <div *ngIf="!hamburger">
<a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment" <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> <button mat-button class="navbar-button" aria-label="Menu">{{item.label}}</button>
</a> </a>
<ng-container *ngFor="let group of links.other"> <ng-container *ngFor="let group of links.other">
@ -20,8 +18,7 @@
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<ng-container *ngFor="let section of group.children; let first = first"> <ng-container *ngFor="let section of group.children; let first = first">
<mat-divider *ngIf="!first"></mat-divider> <mat-divider *ngIf="!first"></mat-divider>
<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment" <button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment">
(click)="item.fragment ? scroll(item.fragment) : null">
{{item.label}} {{item.label}}
</button> </button>
</ng-container> </ng-container>
@ -33,15 +30,15 @@
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment" <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> {{item.label}}
</button>
<ng-container *ngFor="let group of links.other"> <ng-container *ngFor="let group of links.other">
<button mat-menu-item [matMenuTriggerFor]="menu">{{group.label}}</button> <button mat-menu-item [matMenuTriggerFor]="menu">{{group.label}}</button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<ng-container *ngFor="let section of group.children; let first = first"> <ng-container *ngFor="let section of group.children; let first = first">
<mat-divider *ngIf="!first"></mat-divider> <mat-divider *ngIf="!first"></mat-divider>
<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment" <button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment">
(click)="item.fragment ? scroll(item.fragment) : null">
{{item.label}} {{item.label}}
</button> </button>
</ng-container> </ng-container>
@ -50,8 +47,3 @@
</mat-menu> </mat-menu>
</mat-toolbar-row> </mat-toolbar-row>
</mat-toolbar> </mat-toolbar>
<div class="navbar-spacing"><!-- Spacing --></div>
<ng-template #navGroup let-group>
</ng-template>

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

@ -1,16 +1,7 @@
.navbar-spacing {
position: relative;
height: 64px;
width: 100%;
}
::ng-deep mat-toolbar { ::ng-deep mat-toolbar {
background: #000 !important; background: #000 !important;
border-bottom: #fff solid 1px; border-bottom: #fff solid 1px;
height: 64px; height: 64px;
position: fixed;
top: 0;
z-index: 100;
.mat-toolbar-row { .mat-toolbar-row {
height: 100%; height: 100%;
@ -18,7 +9,6 @@
.navbar-brand { .navbar-brand {
color: #fff; color: #fff;
font-weight: lighter;
&:hover img { filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg); } &:hover img { filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg); }
&:hover, &:visited:hover { color: #b10000; } &:hover, &:visited:hover { color: #b10000; }

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

@ -1,8 +1,9 @@
<xxx-navbar class="d-print-none" [hamburger]="mobile"></xxx-navbar> <xxx-navbar class="d-print-none" [hamburger]="mobile"></xxx-navbar>
<div class="fill app-container">
<div id="top"> <div id="top">
<img class="d-print-block d-none" src="/assets/img/header.png" width="250px" height="auto"> <img class="d-print-block d-none" src="/assets/img/header.png" width="250px" height="auto">
</div>
<router-outlet></router-outlet>
<xxx-footer class="d-print-none"></xxx-footer>
</div> </div>
<router-outlet></router-outlet>
<xxx-footer class="d-print-none"></xxx-footer>

10
src/app/containers/app/app.component.scss
View File

@ -1,10 +0,0 @@
.app-container {
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
@media print {
overflow-x: inherit !important;
overflow-y: inherit !important;
}
}

2
src/app/views/about/about.component.html
View File

@ -1,6 +1,6 @@
<div class="invert"> <div class="invert">
<div class="banner d-print-none"></div> <div class="banner d-print-none"></div>
<div class="container"> <div class="cap-width py-5 px-3">
<div> <div>
<div class="d-flex align-items-end justify-content-between mb-2"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0">About</h1> <h1 class="mb-0">About</h1>

2
src/app/views/events/aestiva/aestiva.component.html
View File

@ -1,6 +1,6 @@
<div class="invert"> <div class="invert">
<div class="banner d-print-none"></div> <div class="banner d-print-none"></div>
<div class="container"> <div class="cap-width py-5 px-3">
<div> <div>
<div class="d-flex align-items-end justify-content-between mb-2"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0"><em>Castra Aestiva</em> (Summer Camp)</h1> <h1 class="mb-0"><em>Castra Aestiva</em> (Summer Camp)</h1>

2
src/app/views/events/agonium/agonium.component.html
View File

@ -1,6 +1,6 @@
<div class="invert"> <div class="invert">
<div class="banner d-print-none"></div> <div class="banner d-print-none"></div>
<div class="container"> <div class="cap-width py-5 px-3">
<div> <div>
<div class="d-flex align-items-end justify-content-between mb-2"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0"><em>Agonium</em> (Janus Festival)</h1> <h1 class="mb-0"><em>Agonium</em> (Janus Festival)</h1>

2
src/app/views/events/calendar/calendar.component.html
View File

@ -1,5 +1,5 @@
<div class="invert"> <div class="invert">
<div class="container"> <div class="cap-width py-5 px-3">
<div class="d-flex align-items-end justify-content-between mb-2"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0">Calendar</h1> <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()"> <a class="d-none d-print-none d-sm-flex justify-content-center text-muted" href="javascript:window.print()">

2
src/app/views/events/hiberna/hiberna.component.html
View File

@ -1,6 +1,6 @@
<div class="invert"> <div class="invert">
<div class="banner d-print-none"></div> <div class="banner d-print-none"></div>
<div class="container"> <div class="cap-width py-5 px-3">
<div> <div>
<div class="d-flex align-items-end justify-content-between mb-2"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0"><em>Castra Hiberna</em> (Winter Camp)</h1> <h1 class="mb-0"><em>Castra Hiberna</em> (Winter Camp)</h1>

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

@ -1,9 +1,9 @@
<!-- Banner --> <!-- Banner -->
<header id="banner" class="fill w-100"> <header id="banner" style="height: calc(100vh - 64px)">
<xxx-banner></xxx-banner> <xxx-banner></xxx-banner>
</header> </header>
<!-- ABout --> <!-- ABout -->
<section id="about" class="d-flex flex-column flex-md-row align-items-center justify-content-center" style="padding: 10rem 0"> <section id="about" class="d-flex flex-column flex-md-row align-items-center justify-content-center" style="height: 100vh">
<div class="d-none d-md-inline flex-grow-1 text-end" style="flex-basis: 0"> <div class="d-none d-md-inline flex-grow-1 text-end" style="flex-basis: 0">
<img src="/assets/img/trajan.png" alt="Statue of Trajan" height="450px" width="auto"> <img src="/assets/img/trajan.png" alt="Statue of Trajan" height="450px" width="auto">
</div> </div>
@ -30,8 +30,8 @@
<section class="d-flex" style="background-color: #990000"> <section class="d-flex" style="background-color: #990000">
<div class="d-flex flex-grow-1"> <div class="d-flex flex-grow-1">
<div class="h-100 w-100" style="background: #7289d9"></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-block d-md-none" src="/assets/img/discord.png" style="height: 100px; transform: translateX(-1px);">
<img class="d-none d-md-block" src="/assets/img/discord.png" height="200px" width="auto"> <img class="d-none d-md-block" src="/assets/img/discord.png" style="height: 200px; transform: translateX(-1px);">
</div> </div>
<div class="d-flex justify-content-start align-items-center flex-grow-1 p-3"> <div class="d-flex justify-content-start align-items-center flex-grow-1 p-3">
<div class="d-block text-center"> <div class="d-block text-center">
@ -49,7 +49,7 @@
</div> </div>
</section> </section>
<!-- Resources --> <!-- Resources -->
<section id="resources" class="d-flex flex-column flex-md-row align-items-center justify-content-center invert" style="padding: 10rem 0"> <section id="resources" class="d-flex flex-column flex-md-row align-items-center justify-content-center invert" style="min-height: 50vh; max-height: 100vh; background: url('/assets/img/texture.png') repeat;">
<div class="py-5 container"> <div class="py-5 container">
<h2 class="mb-5 text-center">Resources</h2> <h2 class="mb-5 text-center">Resources</h2>
<div class="d-flex justify-content-around flex-wrap"> <div class="d-flex justify-content-around flex-wrap">

1
src/app/views/learn/.gitkeep
View File

@ -1 +0,0 @@
Z^C5kgHKfYgy

2
src/app/views/reenact/drill/drill.component.html
View File

@ -1,5 +1,5 @@
<div class="invert"> <div class="invert">
<div class="container"> <div class="cap-width py-5 px-3">
<div> <div>
<div class="d-flex align-items-end justify-content-between mb-2"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0">Drill Commands</h1> <h1 class="mb-0">Drill Commands</h1>

2
src/app/views/reenact/getting-started/getting-started.component.html
View File

@ -1,5 +1,5 @@
<div class="invert"> <div class="invert">
<div class="container"> <div class="cap-width py-5 px-3">
<div> <div>
<div class="d-flex align-items-end justify-content-between mb-2"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0">Getting Started</h1> <h1 class="mb-0">Getting Started</h1>

2
src/app/views/reenact/maintinance/maintenance.component.html
View File

@ -1,5 +1,5 @@
<div class="invert"> <div class="invert">
<div class="container"> <div class="cap-width py-5 px-3">
<div> <div>
<div class="d-flex align-items-end justify-content-between mb-2"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0">Equipment Maintenance</h1> <h1 class="mb-0">Equipment Maintenance</h1>

2
src/app/views/reenact/rules/rules.component.html
View File

@ -1,5 +1,5 @@
<div class="invert"> <div class="invert">
<div class="container"> <div class="cap-width py-5 px-3">
<div> <div>
<div class="d-flex align-items-end justify-content-between mb-2"> <div class="d-flex align-items-end justify-content-between mb-2">
<h1 class="mb-0">Rules & Regulations</h1> <h1 class="mb-0">Rules & Regulations</h1>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

42
src/styles.scss
View File

@ -33,45 +33,35 @@ $LegioXXX-theme: mat.define-dark-theme((
html, body { html, body {
height: 100%; height: 100%;
}
body {
background: #000; background: #000;
color: #fff; color: #fff;
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
margin: 0; margin: 0;
overflow: hidden;
@media print { @media print {
background: #fff !important; background: #fff !important;
overflow: visible !important;
} }
} }
a, a:visited { a, a:visited {
color: #b10000; color: #b10000;
text-decoration: none; text-decoration: none;
}
a:hover { &:hover {
color: #b10000; color: #b10000;
text-decoration: underline; text-decoration: underline;
}
} }
h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; } .transparent-link {
a, a:visited { color: #fff; }
a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
}
.container { .cap-width {
max-width: 1200px; max-width: 1200px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 5rem 2rem;
@media screen and (max-width: 1200px) {
padding: 3rem 2rem;
}
@media print {
padding: 5rem 1rem;
}
} }
.invert { .invert {
@ -83,18 +73,6 @@ h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }
} }
} }
@media screen {
.fill {
height: 0;
min-height: calc(100vh - 64px);
}
}
.transparent-link {
a, a:visited { color: #fff; }
a:hover, a:visited:hover { color: rgba(255, 255, 255, 0.8); }
}
ol { ol {
list-style-type: upper-roman; list-style-type: upper-roman;
} }