Updated styles

2024-01-11 09:55:42 -05:00
parent fd6c97989c
commit c18f436e5d
21 changed files with 50 additions and 124 deletions
--- a/src/app/components/banner/banner.component.scss
+++ b/src/app/components/banner/banner.component.scss
@@ -1,5 +1,6 @@
 .banner-container {
 	position: relative;
+	overflow: hidden;
 	width: 100%;
 	height: 100%;
 }
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -20,9 +20,9 @@
 		</div>
 		<h3 class="mt-4 mb-0">so we can invade your feed ⚔️</h3>
 	</div>
-	<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 *ngFor="let group of navigation">
+	<div class="bg-dark text-center text-sm-start">
+		<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" class="mx-5">
 				<h2 class="sitemap-header">{{group.label}}</h2>
 				<ul>
 					<ng-container *ngFor="let section of group.children">
@@ -32,7 +32,7 @@
 					</ng-container>
 				</ul>
 			</div>
-			<div>
+			<div class="mx-5">
 				<h2 class="sitemap-header">Contact</h2>
 				<ul>
 					<li class="font-weight-strong">Robert Sacco</li>
--- a/src/app/components/logo/logo.component.html
+++ b/src/app/components/logo/logo.component.html
@@ -1,5 +1,6 @@
-<div class="logo">
-	<div class="d-flex" aria-label="Legio XXX">
+<div class="logo d-flex align-items-center">
+	<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 [@slide]="expand ? 'expand' : 'shrink'" style="overflow: hidden">EGIO · </div>
 		<div [@margin]="expand ? 'expand' : 'shrink'" [style.marginLeft]="expand ? '0.25rem' : 0">XXX</div>
--- a/src/app/components/logo/logo.component.scss
+++ b/src/app/components/logo/logo.component.scss
@@ -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);
-//  }
-//}
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,16 +1,14 @@
 <mat-toolbar class="d-print-none">
 	<mat-toolbar-row>
-		<div>
-			<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner" (click)="scroll('banner')" 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>
-			</a>
-		</div>
+		<!-- Brand -->
+		<a class="navbar-brand" routerLink="/" style="text-decoration: none">
+			<xxx-logo class="px-2" [expand]="true"></xxx-logo>
+		</a>
+		<!-- Spacer -->
 		<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">
+			<a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment">
 				<button mat-button class="navbar-button" aria-label="Menu">{{item.label}}</button>
 			</a>
 			<ng-container *ngFor="let group of links.other">
@@ -20,8 +18,7 @@
 				<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">
+						<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment">
 							{{item.label}}
 						</button>
 					</ng-container>
@@ -33,15 +30,15 @@
 			<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>
+			<button mat-menu-item *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment">
+				{{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">
+						<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment">
 							{{item.label}}
 						</button>
 					</ng-container>
@@ -50,8 +47,3 @@
 		</mat-menu>
 	</mat-toolbar-row>
 </mat-toolbar>
-<div class="navbar-spacing"><!-- Spacing --></div>
-
-<ng-template #navGroup let-group>
-
-</ng-template>
--- a/src/app/components/navbar/navbar.component.scss
+++ b/src/app/components/navbar/navbar.component.scss
@@ -1,16 +1,7 @@
-.navbar-spacing {
-	position: relative;
-	height: 64px;
-	width: 100%;
-}
-
 ::ng-deep mat-toolbar {
 	background: #000 !important;
 	border-bottom: #fff solid 1px;
 	height: 64px;
-	position: fixed;
-	top: 0;
-	z-index: 100;

 	.mat-toolbar-row {
 		height: 100%;
@@ -18,7 +9,6 @@

 	.navbar-brand {
 		color: #fff;
-		font-weight: lighter;

 		&:hover img { filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg); }
 		&:hover, &:visited:hover { color: #b10000; }
--- a/src/app/containers/app/app.component.html
+++ b/src/app/containers/app/app.component.html
@@ -1,8 +1,9 @@
 <xxx-navbar class="d-print-none" [hamburger]="mobile"></xxx-navbar>
-<div class="fill app-container">
-	<div id="top">
-		<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 id="top">
+	<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>
--- a/src/app/containers/app/app.component.scss
+++ b/src/app/containers/app/app.component.scss
@@ -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;
-	}
-}
--- a/src/app/views/about/about.component.html
+++ b/src/app/views/about/about.component.html
@@ -1,6 +1,6 @@
 <div class="invert">
 	<div class="banner d-print-none"></div>
-	<div class="container">
+	<div class="cap-width py-5 px-3">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">About</h1>
--- a/src/app/views/events/aestiva/aestiva.component.html
+++ b/src/app/views/events/aestiva/aestiva.component.html
@@ -1,6 +1,6 @@
 <div class="invert">
 	<div class="banner d-print-none"></div>
-	<div class="container">
+	<div class="cap-width py-5 px-3">
 		<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/src/app/views/events/agonium/agonium.component.html
+++ b/src/app/views/events/agonium/agonium.component.html
@@ -1,6 +1,6 @@
 <div class="invert">
 	<div class="banner d-print-none"></div>
-	<div class="container">
+	<div class="cap-width py-5 px-3">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0"><em>Agonium</em> (Janus Festival)</h1>
--- a/src/app/views/events/calendar/calendar.component.html
+++ b/src/app/views/events/calendar/calendar.component.html
@@ -1,5 +1,5 @@
 <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">
 			<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/src/app/views/events/hiberna/hiberna.component.html
+++ b/src/app/views/events/hiberna/hiberna.component.html
@@ -1,6 +1,6 @@
 <div class="invert">
 	<div class="banner d-print-none"></div>
-	<div class="container">
+	<div class="cap-width py-5 px-3">
 		<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/src/app/views/home/home.component.html
+++ b/src/app/views/home/home.component.html
@@ -1,9 +1,9 @@
 <!-- Banner -->
-<header id="banner" class="fill w-100">
+<header id="banner" style="height: calc(100vh - 64px)">
 	<xxx-banner></xxx-banner>
 </header>
 <!-- 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">
 		<img src="/assets/img/trajan.png" alt="Statue of Trajan" height="450px" width="auto">
 	</div>
@@ -30,8 +30,8 @@
 <section class="d-flex" style="background-color: #990000">
 	<div class="d-flex flex-grow-1">
 		<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">
+		<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" style="height: 200px; transform: translateX(-1px);">
 	</div>
 	<div class="d-flex justify-content-start align-items-center flex-grow-1 p-3">
 		<div class="d-block text-center">
@@ -49,7 +49,7 @@
 	</div>
 </section>
 <!-- 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">
 		<h2 class="mb-5 text-center">Resources</h2>
 		<div class="d-flex justify-content-around flex-wrap">
--- a/src/app/views/learn/.gitkeep
+++ b/src/app/views/learn/.gitkeep
@@ -1 +0,0 @@
-Z^C5kgHKfYgy
--- a/src/app/views/reenact/drill/drill.component.html
+++ b/src/app/views/reenact/drill/drill.component.html
@@ -1,5 +1,5 @@
 <div class="invert">
-	<div class="container">
+	<div class="cap-width py-5 px-3">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">Drill Commands</h1>
--- a/src/app/views/reenact/getting-started/getting-started.component.html
+++ b/src/app/views/reenact/getting-started/getting-started.component.html
@@ -1,5 +1,5 @@
 <div class="invert">
-	<div class="container">
+	<div class="cap-width py-5 px-3">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">Getting Started</h1>
--- a/src/app/views/reenact/maintinance/maintenance.component.html
+++ b/src/app/views/reenact/maintinance/maintenance.component.html
@@ -1,5 +1,5 @@
 <div class="invert">
-	<div class="container">
+	<div class="cap-width py-5 px-3">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">Equipment Maintenance</h1>
--- a/src/app/views/reenact/rules/rules.component.html
+++ b/src/app/views/reenact/rules/rules.component.html
@@ -1,5 +1,5 @@
 <div class="invert">
-	<div class="container">
+	<div class="cap-width py-5 px-3">
 		<div>
 			<div class="d-flex align-items-end justify-content-between mb-2">
 				<h1 class="mb-0">Rules & Regulations</h1>
--- a/src/assets/img/texture.png
+++ b/src/assets/img/texture.png
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -33,45 +33,35 @@ $LegioXXX-theme: mat.define-dark-theme((

 html, body {
 	height: 100%;
-}
-body {
 	background: #000;
 	color: #fff;
 	font-family: Roboto, sans-serif;
 	margin: 0;
-	overflow: hidden;

 	@media print {
 		background: #fff !important;
-		overflow: visible !important;
 	}
 }

 a, a:visited {
 	color: #b10000;
 	text-decoration: none;
-}
-a:hover {
-	color: #b10000;
-	text-decoration: underline;
+
+	&:hover {
+		color: #b10000;
+		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;
 	margin-left: auto;
 	margin-right: auto;
-	padding: 5rem 2rem;
-
-	@media screen and (max-width: 1200px) {
-		padding: 3rem 2rem;
-	}
-
-	@media print {
-		padding: 5rem 1rem;
-	}
-
 }

 .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 {
 	list-style-type: upper-roman;
 }