From 2a3c4be9b9e7ab2f68011b9c31e5fced8dad85fc Mon Sep 17 00:00:00 2001
From: n loewen <nick@nloewen.com>
Date: Thu, 21 Sep 2023 15:20:34 -0700
Subject: [PATCH] Add highlight effect on links + make a few clarifying changes
 to the code

---
 index.html |  4 ++--
 style.css  | 29 +++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 736ca8f..8d4df4d 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
       <div class="column">
         <a href="#" class="triangle triangle-bottom">
           <img src="https://placekitten.com/200/200">
-          <div class="triangle-label multiline">Applied Statistician</div>
+          <div class="triangle-label multiline">Applied<br>Statistician</div>
         </a>
 
         <a href="#" class="triangle triangle-top">
@@ -41,7 +41,7 @@
       </div>
     </div>
 
-    <div class="heading">
+    <div class="navigation">
       <h1> Elizabeth Pankratz </h1>
       <a href="#">about</a> &emsp;
       <a href="#">blog</a> &emsp;
diff --git a/style.css b/style.css
index b923960..4f7a600 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,7 @@
+/* Home page */
+
 * { 
+  /* Make CSS behave more sensibly... */
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -77,8 +80,34 @@ body {
   top: 0.5rem;
 }
 
+
+/* Title and links */
+
 h1 {
   font-weight: bold;
   font-size:  1.7rem;
   margin-top: 1em;
+}
+
+.navigation {
+  font-size: 1.4rem;
+}
+
+.navigation 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);
+}
+
+.navigation a:visited {
+  color: black;
+}
+
+.navigation a:active,
+.navigation 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%);
 }
\ No newline at end of file