dedicated background page, where all you can see is noise

src/app/app-routing.module.ts

@@ -6,12 +6,18 @@ const routes: Routes = [
 		path: '',
 		redirectTo: '/gong',
 		pathMatch: 'full'
+	}, {
+		path: 'background',
+		loadChildren: () => import('src/app/pages/background/background.module')
+			.then(module => module.BackgroundModule),
 	}, {
 		path: 'gong',
-		loadChildren: () => import('./pages/gong/gong.module').then(m => m.GongModule),
+		loadChildren: () => import('src/app/pages/gong/gong.module')
+			.then(module => module.GongModule),
 	}, {
 		path: '**',
-		loadChildren: () => import('src/app/pages/not-found/not-found.module').then(m => m.NotFoundModule),
+		loadChildren: () => import('src/app/pages/not-found/not-found.module')
+			.then(module => module.NotFoundModule),
 	},
 ];
 

src/app/app.component.scss

@@ -1,7 +1,4 @@
 :host {
-	display: flex;
-	flex-flow: column nowrap;
-
 	.mat-sidenav-container {
 		color: var(--dark-text-color);
 		background-color: var(--lightest-theme-color);
@@ -13,11 +10,13 @@
 	}
 }
 
-:host, .mat-sidenav-container, .mat-sidenav-content {
+:host,
+.mat-sidenav-container,
+.mat-sidenav-content,
+section {
 	display: flex;
 	flex-flow: column nowrap;
 	height: 100%;
 	width: 100%;
 	overflow: hidden;
 }
-

src/app/navigation/background/models/circle.model.ts

@@ -48,10 +48,10 @@ export class Circle extends CanvasElement {
 
 		if (mouseDistance < 100) {
 			if (this.radius < Circle.maxRadius + this.dRadius) {
-				this.radius++;
+				this.radius += 1.5;
 			}
 		} else if (this.radius > Circle.minRadius + this.dRadius) {
-			this.radius--;
+			this.radius -= 0.25;
 		}
 	}
 

src/app/navigation/sidebar/sidebar-item/sidebar-item.component.html

@@ -3,7 +3,7 @@
 	<mat-card-header>
 		<mat-icon mat-card-avatar [svgIcon]="config.icon"></mat-icon>
 		<mat-card-title>
-			{{ config.title }}
+			<dyslexic-text [text]="config.title"></dyslexic-text>
 		</mat-card-title>
 	</mat-card-header>
 </mat-card>

src/app/navigation/sidebar/sidebar.component.ts

@@ -30,8 +30,9 @@ export class SidebarComponent {
 	private static get navigationItems(): ReadonlyArray<NavigationConfig> {
 		return [
 			NavigationConfig.from('About', SvgIcon.GOAT, 'about'),
+			NavigationConfig.from('Snek', SvgIcon.SNAKE, 'snek'),
 			NavigationConfig.from('Gong', SvgIcon.GONG, 'gong'),
-			NavigationConfig.from('404', SvgIcon.ONI, 'get-got'),
+			NavigationConfig.from('Noise', SvgIcon.ONI, 'background'),
 		];
 	}
 }

src/app/pages/background/background-noise.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'background-noise',
+	template: `
+		<h1>
+			<dyslexic-text text="Pure Background Noise"></dyslexic-text>
+		</h1>`,
+	styles: [
+		`:host {
+			text-align: center;
+			text-decoration: underline;
+		}`
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BackgroundNoiseComponent { }

src/app/pages/background/background-routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BackgroundNoiseComponent } from 'src/app/pages/background/background-noise.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		component: BackgroundNoiseComponent,
+		data: {
+			title: 'noise',
+		},
+	},
+];
+
+@NgModule({
+	imports: [ RouterModule.forChild(routes) ],
+	exports: [ RouterModule ]
+})
+export class BackgroundRoutingModule { }

src/app/pages/background/background.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BackgroundNoiseComponent } from 'src/app/pages/background/background-noise.component';
+import { BackgroundRoutingModule } from 'src/app/pages/background/background-routing.module';
+import { DyslexicTextModule } from 'src/app/shared/dyslexic-text/dyslexic-text.module';
+
+@NgModule({
+	declarations: [
+		BackgroundNoiseComponent,
+	],
+	imports: [
+		DyslexicTextModule,
+	],
+	exports: [
+		BackgroundRoutingModule,
+	],
+})
+export class BackgroundModule { }

src/app/shared/svg/internal-svg-icon.enum.ts

@@ -15,6 +15,7 @@ export enum InternalSvgIcon {
 	SINS_PRIDE = 'sins/pride',
 	SINS_SLOTH = 'sins/sloth',
 	SINS_WRATH = 'sins/wrath',
+	SNAKE = 'snake',
 	STACK = 'stack',
 	WHEEL = 'wheel',
 }