From ea52f6986b02b38e22bdbd60357e6106767fc065 Mon Sep 17 00:00:00 2001
From: n loewen <nick@nloewen.com>
Date: Fri, 22 Sep 2023 11:28:56 -0700
Subject: [PATCH] Add key links below monogram

---
 index.html | 17 ++++++++++++-----
 style.css  | 38 ++++++++++++++++++++++++--------------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 3e396be..080cd6c 100644
--- a/index.html
+++ b/index.html
@@ -41,11 +41,18 @@
       </div>
     </div>
 
-    <div class="navigation">
-      <h1> Elizabeth Pankratz </h1>
-      <a href="#">about</a>
-      <a href="#">blog</a>
-      <a href="#">contact</a>
+    <div class="intro">
+      <div class="bio"> I'm <h1>Elizabeth Pankratz</h1>,<br>
+        a <a href="#">linguist</a>,
+        <a href="#">textile artist</a>,
+        <br>
+        and <a href="#">applied statistician</a>
+      </div>
+      <div class="links">
+        <a href="#">about</a>
+        <a href="#">blog</a>
+        <a href="#">contact</a>
+      </div>
     </div>
   </div>
 
diff --git a/style.css b/style.css
index 6bb6a59..da9fbdb 100644
--- a/style.css
+++ b/style.css
@@ -92,33 +92,43 @@ body {
 /* Title and links */
 
 h1 {
+  display: inline;
   font-weight: bold;
-  font-size:  1.7rem;
-  margin-top: 1em;
+  font-size: 1em;
 }
 
-.navigation {
+.intro {
+  margin-top: 2em;
   font-size: 1.4rem;
+  line-height: 1.4;
 }
 
-.navigation a {
+.intro .bio {
+  margin-bottom: 1em;
+}
+
+.intro .links a {
+  gap: 1em; /* TODO */
+  margin-right: 0.5ch;
+}
+
+.intro a {
   color: black;
-  text-decoration: none;
-  margin-left: -0.25ch;
-  border-left: 0.25ch solid rgba(0,0,0,0);
-  border-right: 0.25ch solid rgba(0,0,0,0);
-  margin-right: 0.75ch;
+  border-left: 0.33ch solid rgba(0,0,0,0);
+  border-right: 0.33ch solid rgba(0,0,0,0);
+  margin-left: -0.33ch;
+  margin-right: -0.33ch;
 }
 
-.navigation a:visited {
+.intro a:visited {
   color: black;
 }
 
-.navigation a:active,
-.navigation a:hover {
+.intro a:active,
+.intro a:hover {
   background-color:hsl(50, 100%, 70%);
-  border-left: 0.25ch solid hsl(50, 100%, 70%);
-  border-right: 0.25ch solid hsl(50, 100%, 70%);
+  border-left: 0.33ch solid hsl(50, 100%, 70%);
+  border-right: 0.33ch solid hsl(50, 100%, 70%);
 }