main: make website bloo like british passports

public/css/dirlist.css

@@ -1,6 +1,6 @@
 body {
-  background-color: #f2efbd;
-  color: #2a271c;
+  background-color: #bfd5f2;
+  color: #2f2f42;
   margin: 20px;
 }
 
@@ -9,12 +9,12 @@ img {
 }
 
 a {
-  color: hsl(183, 93%, 27%);
+  color: #2f2f42;
   text-decoration: underline dotted;
 }
 
 a:hover {
-  color: hsl(183, 93%, 15%);
+  color: #2f2f42;
   text-decoration: underline solid;
 }
 
@@ -47,3 +47,8 @@ .description {
   font-size: 90%;
 }
 
+hr {
+    border: none;
+    border-bottom: 2px solid #2f2f42;
+}
+

public/css/master.css

@@ -1,14 +1,14 @@
 :root {
-    --background: #f2efbd;
-    --foreground: #2a271c;
-    --border-color: #f27405;
+    --background: hsl(214, 67%, 85%);
+    --foreground: hsl(214, 20%, 14%);
+    --border-color: hsl(214, 96%, 48%);
     --border: var(--border-color) 2px solid;
-    --shadow-color: hsla(11, 96%, 43%, 0.4);
+    --shadow-color: hsla(214, 96%, 43%, 0.4);
     --shadow: drop-shadow(8px 8px var(--shadow-color));
     --shadow-small: drop-shadow(3px 3px var(--shadow-color));
-    --links: hsl(92, 27%, 22%);
-    --links-hover: hsl(92, 27%, 15%)
-    --table-header: hsla(11, 96%, 43%, 0.2);
+    --links: hsl(214, 27%, 22%);
+    --links-hover: hsl(214, 27%, 15%);
+    --table-header: hsla(214, 96%, 43%, 0.2);
 }
 
 /* ───────────────────────────────────── Fonts ────────────────────────────────────── */
@@ -98,24 +98,13 @@ html {
 body {
     color: var(--foreground);
     min-height: 100%;
-    background-color: hsla(0, 0%, 0%, 0);
+    background: url('/images/roscoe_tile.jpg');
     padding: 5px;
-    font-family: "PT Serif";
+    font-family: "PT Serif", serif;
 }
 
-body::before {
-    content: "";
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-image: url("/images/background.jpg");
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    opacity: 0.8;
-    background-size: cover;
-    background-attachment: fixed;
-    overflow: hidden;
+img.logo_paw {
+    filter: grayscale(100%) sepia(100%) hue-rotate(180deg) saturate(300%);
 }
 
 h1,
@@ -170,7 +159,7 @@ div.page-container > div:last-child {
 
 header {
     display: grid;
-    grid-template-columns: 80px 1fr;
+    grid-template-columns: 64px 1fr;
     grid-template-rows: 1fr;
     grid-column-gap: 15px;
     grid-row-gap: 0;

resources/views/components/layout.blade.php

@@ -27,7 +27,7 @@
         <div id="header">
             <header>
                 <div>
-                    <img src="{{ asset('/images/wah-paw-v2.gif') }}" width="84" alt="A pixel art depiction of a paw, in three alternating shades of orange.">
+                    <img class="logo_paw" src="{{ asset('/images/logo-v2.png') }}" width="65" alt="A pixel art depiction of a paw, in three alternating shades of blue.">
                 </div>
                 <div>
                     <h1>wah!</h1>