feat(not-found): add tip box

plus some padding and text align center

src/app/material-symbols.ts

@@ -18,3 +18,4 @@ export const DeployedCode = '\uf720'
 export const Terminal = '\ueb8e'
 export const Login = '\uea77'
 export const Security = '\ue32a'
+export const Lightbulb = '\ue0f0'

src/app/not-found/_not-found-theme.scss

@@ -0,0 +1,9 @@
+@use 'borders';
+
+@mixin color($theme) {
+  app-not-found {
+    .tip {
+      border-color: borders.panel-color($theme);
+    }
+  }
+}

src/app/not-found/not-found.component.html

@@ -9,3 +9,15 @@ <h2>
   <a href="https://www.youtube.com/watch?v=QCWGZT_oKwI&t=6">Oopsie doopsie!</a>
   Seems this page doesn't exist now
 </h2>
+<div class="tip">
+  <header>
+    <span [class]="MATERIAL_SYMBOLS_CLASS">{{ MaterialSymbol.Lightbulb }}</span
+    ><b>TIP: What if this page existed before?</b>
+  </header>
+  <p>
+    You can use
+    <a href="https://web.archive.org/">Internet Archive's Wayback Machine</a> to
+    see if a page existed in the past. <br />Maybe
+    <a>this page existed at some other point in time</a>
+  </p>
+</div>

src/app/not-found/not-found.component.scss

@@ -1,5 +1,8 @@
+@use 'borders';
 @use 'page';
 @use 'margins';
+@use 'material-symbols';
+@use 'paddings';
 
 :host {
   @include page.full-size;
@@ -8,8 +11,34 @@
   align-items: center;
   flex-direction: column;
   gap: margins.$m;
+  padding: paddings.$m;
 
   .icon {
     font-size: 96px;
   }
+
+  h1,
+  h2,
+  .tip {
+    text-align: center;
+  }
+
+  .tip {
+    @include borders.panel-style-width;
+    padding: paddings.$m;
+    display: flex;
+    flex-direction: column;
+    gap: margins.$s;
+
+    header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: margins.$xs;
+
+      @include material-symbols.class {
+        font-size: 1em;
+      }
+    }
+  }
 }

src/app/not-found/not-found.component.ts

@@ -1,8 +1,15 @@
 import { Component } from '@angular/core'
+import { Lightbulb } from '../material-symbols'
+import { MATERIAL_SYMBOLS_CLASS } from '../common/material-symbols'
 
 @Component({
   selector: 'app-not-found',
   templateUrl: './not-found.component.html',
   styleUrls: ['./not-found.component.scss'],
 })
-export class NotFoundComponent {}
+export class NotFoundComponent {
+  protected readonly MATERIAL_SYMBOLS_CLASS = MATERIAL_SYMBOLS_CLASS
+  protected readonly MaterialSymbol = {
+    Lightbulb,
+  }
+}

src/sass/_borders.scss

@@ -7,10 +7,10 @@ $panel-width: 1px;
   @return map.get($theme, hairline);
 }
 
-@mixin panel-style-width($side) {
+@mixin panel-style-width($side: 'all') {
   $panel-style: solid;
 
-  @if ($side == all) {
+  @if ($side == 'all') {
     border-width: $panel-width;
     border-style: $panel-style;
   } @else {

src/styles.scss

@@ -5,6 +5,7 @@
 @use 'app/header/header-theme';
 @use 'app/no-script/no-script-theme';
 @use 'app/navigation-tabs/navigation-tabs-theme';
+@use 'app/not-found/not-found-theme';
 @use 'font-awesome';
 @use 'material-symbols';
 @use 'theming';
@@ -54,6 +55,7 @@ a {
   @include no-script-theme.color($theme);
   @include about-theme.color($theme);
   @include navigation-tabs-theme.color($theme);
+  @include not-found-theme.color($theme);
 
   // TODO: cool effect for hovering
   $text-palette: map.get($theme, text);