From f153653bbd55750537a60478dae4f02bfa2459be Mon Sep 17 00:00:00 2001
From: Chris Newton <me@chrisnewtn.com>
Date: Wed, 24 Jan 2024 16:31:11 +0000
Subject: [PATCH] chore: turn the header into a simpson's joke

And animate the "Under construction" sign. We like to have fun here.
---
 docs-raw/index.html    |  11 ++-
 docs-raw/style.css     |  81 ++++++++++++++++++++-
 docs/index.html        |  13 ++--
 docs/style-8123f0b.css | 160 +++++++++++++++++++++++++++++++++++++++++
 docs/style-c2f6e97.css |  83 ---------------------
 5 files changed, 256 insertions(+), 92 deletions(-)
 create mode 100644 docs/style-8123f0b.css
 delete mode 100644 docs/style-c2f6e97.css
diff --git a/docs-raw/index.html b/docs-raw/index.html
index 97ce9f6..3e4b513 100644
--- a/docs-raw/index.html
+++ b/docs-raw/index.html
@@ -8,11 +8,16 @@
 </head>
 <body>
   <header>
-    <h1>Chris Newton</h1>
+    <section class="business-card">
+      <h1>Chris Newton</h1>
+      <p>Works on<br> contingency<span class="punctuation">?</span></p>
+      <p>No<span class="punctuation">,</span> money down<span class="punctuation">!</span></p>
+    </section>
   </header>
   <main>
-    <p>Programming for the web since 1873.</p>
-    <div class="under-construction">Under Construction</div>
+    <div class="under-construction">
+      <div class="inner">Under Construction</div>
+    </div>
   </main>
   <footer>
     <p><small>© Copyright 2024 Chris Newton. Hosted using <a href="https://pages.github.com/">GitHub Pages</a> (<a href="https://github.com/chrisnewtn/chrisnewtn.github.io/">repo</a>).</small></p>
diff --git a/docs-raw/style.css b/docs-raw/style.css
index f5dbc6b..abf088b 100644
--- a/docs-raw/style.css
+++ b/docs-raw/style.css
@@ -22,6 +22,8 @@ body {
   --blue-600: #2563eb;
   --purple-500: #a855f7;
   --purple-600: #9333ea;
+  --red-600: #dc2626;
+  --red-700: #b91c1c;
   --amber-400: #fbbf24;
 
   font-family: Helvetica, Arial, sans-serif;
@@ -48,6 +50,9 @@ body > header {
 body > main {
   text-align: center;
   grid-area: main;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 body > footer {
@@ -55,11 +60,83 @@ body > footer {
   grid-area: footer;
 }
 
+.business-card {
+  font-family: Georgia, Times, 'Times New Roman', serif;
+  line-height: 1rem;
+  text-transform: uppercase;
+  margin: 1rem;
+  padding: 0 .25rem;
+  position: relative;
+  display: inline-block;
+  border: solid thin var(--primary-text);
+  outline: solid thin var(--primary-text);
+  outline-offset: 1px;
+}
+
+.business-card > h1 {
+  margin: 1rem 0 1.5rem 0;
+  font-weight: normal;
+  padding: 0 2rem .25rem 2rem;
+  border-bottom: solid thin var(--primary-text);
+  position: relative;
+}
+
+.business-card > h1::after {
+  content: 'ESQ.';
+  font-size: small;
+  position: absolute;
+  display: block;
+  float: left;
+  bottom: -1rem;
+  right: 2rem;
+}
+
+.business-card > p {
+  margin: 1.5rem 0;
+}
+
+.business-card .punctuation {
+  font-family: cursive;
+  font-weight: bold;
+  font-size: 1.5rem;
+  color: var(--red-600);
+}
+
 .under-construction {
-  background-color: var(--amber-400);
-  border: dashed var(--neutral-950);
+  background-image: repeating-linear-gradient(
+    -45deg,
+    var(--neutral-950) 0,
+    var(--neutral-950) 10px,
+    var(--amber-400) 10px,
+    var(--amber-400) 20px
+  );
+  background-size: 28px 28px;
   padding: 1rem;
   color: var(--neutral-950);
+
+  animation-duration: 1s;
+  animation-name: scrollhatching;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes scrollhatching {
+  from {
+    background-position-x: 0px;
+  }
+  to {
+    background-position-x: 28px;
+  }
+}
+
+.under-construction > .inner {
+  height: 8rem;
+  font-size: 2rem;
+  text-transform: uppercase;
+  background-color: var(--amber-400);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
 }
 
 /** Colours **/
diff --git a/docs/index.html b/docs/index.html
index 61efe0c..7b47a9d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,15 +4,20 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Chris Newton</title>
-  <link rel="stylesheet" href="style-c2f6e97.css">
+  <link rel="stylesheet" href="style-8123f0b.css">
 </head>
 <body>
   <header>
-    <h1>Chris Newton</h1>
+    <section class="business-card">
+      <h1>Chris Newton</h1>
+      <p>Works on<br>contingency<span class="punctuation">?</span></p>
+      <p>No<span class="punctuation">,</span> money down<span class="punctuation">!</span></p>
+    </section>
   </header>
   <main>
-    <p>Programming for the web since 1873.</p>
-    <div class="under-construction">Under Construction</div>
+    <div class="under-construction">
+      <div class="inner">Under Construction</div>
+    </div>
   </main>
   <footer>
     <p><small>© Copyright 2024 Chris Newton. Hosted using <a href="https://pages.github.com/">GitHub Pages</a> (<a href="https://github.com/chrisnewtn/chrisnewtn.github.io/">repo</a>).</small></p>
diff --git a/docs/style-8123f0b.css b/docs/style-8123f0b.css
new file mode 100644
index 0000000..abf088b
--- /dev/null
+++ b/docs/style-8123f0b.css
@@ -0,0 +1,160 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+a {
+  color: var(--link);
+}
+a:visited {
+  color: var(--link-visited);
+}
+
+body {
+  /* https://tailwindcss.com/docs/customizing-colors#default-color-palette */
+  --neutral-50: #fafafa;
+  --neutral-950: #0a0a0a;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --purple-500: #a855f7;
+  --purple-600: #9333ea;
+  --red-600: #dc2626;
+  --red-700: #b91c1c;
+  --amber-400: #fbbf24;
+
+  font-family: Helvetica, Arial, sans-serif;
+
+  color: var(--primary-text);
+  background-color: var(--bg-color);
+
+  margin: 0;
+
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: max-content auto max-content;
+  grid-template-areas:
+    ". header ."
+    ". main ."
+    ". footer .";
+}
+
+body > header {
+  text-align: center;
+  grid-area: header;
+}
+
+body > main {
+  text-align: center;
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+body > footer {
+  text-align: center;
+  grid-area: footer;
+}
+
+.business-card {
+  font-family: Georgia, Times, 'Times New Roman', serif;
+  line-height: 1rem;
+  text-transform: uppercase;
+  margin: 1rem;
+  padding: 0 .25rem;
+  position: relative;
+  display: inline-block;
+  border: solid thin var(--primary-text);
+  outline: solid thin var(--primary-text);
+  outline-offset: 1px;
+}
+
+.business-card > h1 {
+  margin: 1rem 0 1.5rem 0;
+  font-weight: normal;
+  padding: 0 2rem .25rem 2rem;
+  border-bottom: solid thin var(--primary-text);
+  position: relative;
+}
+
+.business-card > h1::after {
+  content: 'ESQ.';
+  font-size: small;
+  position: absolute;
+  display: block;
+  float: left;
+  bottom: -1rem;
+  right: 2rem;
+}
+
+.business-card > p {
+  margin: 1.5rem 0;
+}
+
+.business-card .punctuation {
+  font-family: cursive;
+  font-weight: bold;
+  font-size: 1.5rem;
+  color: var(--red-600);
+}
+
+.under-construction {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    var(--neutral-950) 0,
+    var(--neutral-950) 10px,
+    var(--amber-400) 10px,
+    var(--amber-400) 20px
+  );
+  background-size: 28px 28px;
+  padding: 1rem;
+  color: var(--neutral-950);
+
+  animation-duration: 1s;
+  animation-name: scrollhatching;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes scrollhatching {
+  from {
+    background-position-x: 0px;
+  }
+  to {
+    background-position-x: 28px;
+  }
+}
+
+.under-construction > .inner {
+  height: 8rem;
+  font-size: 2rem;
+  text-transform: uppercase;
+  background-color: var(--amber-400);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+/** Colours **/
+
+/** Light **/
+body {
+  --primary-text: var(--neutral-950);
+  --bg-color: var(--neutral-50);
+  --link: var(--blue-600);
+  --link-visited: var(--purple-600);
+}
+
+/** Dark **/
+@media (prefers-color-scheme: dark) {
+  body {
+    --primary-text: var(--neutral-50);
+    --bg-color: var(--neutral-950);
+    --link: var(--blue-500);
+    --link-visited: var(--purple-500);
+  }
+}
diff --git a/docs/style-c2f6e97.css b/docs/style-c2f6e97.css
deleted file mode 100644
index f5dbc6b..0000000
--- a/docs/style-c2f6e97.css
+++ /dev/null
@@ -1,83 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-a {
-  color: var(--link);
-}
-a:visited {
-  color: var(--link-visited);
-}
-
-body {
-  /* https://tailwindcss.com/docs/customizing-colors#default-color-palette */
-  --neutral-50: #fafafa;
-  --neutral-950: #0a0a0a;
-  --blue-500: #3b82f6;
-  --blue-600: #2563eb;
-  --purple-500: #a855f7;
-  --purple-600: #9333ea;
-  --amber-400: #fbbf24;
-
-  font-family: Helvetica, Arial, sans-serif;
-
-  color: var(--primary-text);
-  background-color: var(--bg-color);
-
-  margin: 0;
-
-  display: grid;
-  grid-template-columns: auto auto auto;
-  grid-template-rows: max-content auto max-content;
-  grid-template-areas:
-    ". header ."
-    ". main ."
-    ". footer .";
-}
-
-body > header {
-  text-align: center;
-  grid-area: header;
-}
-
-body > main {
-  text-align: center;
-  grid-area: main;
-}
-
-body > footer {
-  text-align: center;
-  grid-area: footer;
-}
-
-.under-construction {
-  background-color: var(--amber-400);
-  border: dashed var(--neutral-950);
-  padding: 1rem;
-  color: var(--neutral-950);
-}
-
-/** Colours **/
-
-/** Light **/
-body {
-  --primary-text: var(--neutral-950);
-  --bg-color: var(--neutral-50);
-  --link: var(--blue-600);
-  --link-visited: var(--purple-600);
-}
-
-/** Dark **/
-@media (prefers-color-scheme: dark) {
-  body {
-    --primary-text: var(--neutral-50);
-    --bg-color: var(--neutral-950);
-    --link: var(--blue-500);
-    --link-visited: var(--purple-500);
-  }
-}
