Make separator sticky

diff --git a/src/bookshelf/index.html b/src/bookshelf/index.html
index cbbaaac314722a46879df92b97e683dfd0fd2cae..40124c62dd37147a7f5d8ceed5b408170bfafcaa 100644 (file)
--- a/src/bookshelf/index.html
+++ b/src/bookshelf/index.html
@@ -38,6 +38,7 @@
     <header>
       <h1>Ben's Bookshelf</h1>
     </header>
+    <hr />
     <main>
       <ol reversed start="2022">
         <li>

diff --git a/src/index.html b/src/index.html
index a849183e444ace6bf17d79c9180894e21c36d7e4..07011df20b73e5ccf32a72e44fd50da5e9b63405 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -23,6 +23,7 @@
     <header>
       <h1>Ben Larson</h1>
     </header>
+    <hr />
     <main>
       <p class="dropcap">
         I am a software developer in Nashville, Tennissee. For &eth;e past

diff --git a/src/styles/main.css b/src/styles/main.css
index 4bd1b7c34980497343234b72469633e3ad7b61b1..d00483195d127e82526c8f9f73ff35b975810b65 100644 (file)
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -19,7 +19,14 @@ body {
 header {
   background-color: var(--background-color-header);
   padding: 6rem 3rem 3rem 3rem;
-  box-shadow: 0 1px var(--separator-color);
+}
+
+hr {
+  position: sticky;
+  top: 0;
+  height: 1px;
+  border: 0;
+  background: var(--separator-color);
 }
 
 h1 {

diff --git a/src/wishlist/index.html b/src/wishlist/index.html
index 94dd5fd8eb21428cf9669ce2f3c0321012c9659b..40ca0ccd2b4835ec356e274b29d37754044f9d33 100644 (file)
--- a/src/wishlist/index.html
+++ b/src/wishlist/index.html
@@ -23,6 +23,7 @@
     <header>
       <h1>Ben's Wishlist</h1>
     </header>
+    <hr />
     <main>
       <p>Note: I'm &eth;e only one who can update &eth;is, so be careful.</p>
       <ul class="wishlist"></ul>