style(web/homepage): Wrap links around the entire entry r/507

This makes it much easier to click on them. Required some style
reshuffling to satisfy CSS.

3 files changed, 18 insertions, 17 deletions

diff --git a/web/homepage/default.nix b/web/homepage/default.nix
index e7190bbc9d..d2905a7eb6 100644
--- a/web/homepage/default.nix
+++ b/web/homepage/default.nix
@@ -46,16 +46,16 @@ let
   });
 
   entryToDiv = defun [ entry string ] (entry: ''
-    <div class="entry ${entry.class}">
-      <p>
-        <a class="entry-title" href="${entry.url}">${escape entry.title}</a>
-      </p>
-      ${
-        lib.optionalString ((entry ? description) && (entry.description != null))
-        "<p class=\"entry-description\">${escape entry.description}</p>"
-      }
-      <p class="entry-date">${formatEntryDate entry}</p>
-    </div>
+    <a href="${entry.url}" class="entry ${entry.class}">
+      <div>
+        <p class="entry-title">${escape entry.title}</p>
+        ${
+          lib.optionalString ((entry ? description) && (entry.description != null))
+          "<p class=\"entry-description\">${escape entry.description}</p>"
+        }
+        <p class="entry-date">${formatEntryDate entry}</p>
+      </div>
+    </a>
   '');
 
   index = entries: third_party.writeText "index.html" (lib.concatStrings (
diff --git a/web/homepage/header.html b/web/homepage/header.html
index 64579586d1..ec81fa04dc 100644
--- a/web/homepage/header.html
+++ b/web/homepage/header.html
@@ -17,11 +17,11 @@
     <p>Hello, illuminated visitor.</p>
     <p>
       I'm tazjin. Usually you can find
-      me <a href="https://git.tazj.in/about">programming computers</a>
-      using tools such as <a href="https://nixos.org/nix">Nix</a>
-      and <a href="https://www.gnu.org/software/emacs/">Emacs</a>,
-      cuddling <a href="https://twitter.com/edefic">people I love</a>
-      or posting nonsense <a href="https://twitter.com/tazjin">on the
+      me <a class="dark-link" href="https://git.tazj.in/about">programming computers</a>
+      using tools such as <a class="dark-link" href="https://nixos.org/nix">Nix</a>
+      and <a class="dark-link" href="https://www.gnu.org/software/emacs/">Emacs</a>,
+      cuddling <a class="dark-link" href="https://twitter.com/edefic">people I love</a>
+      or posting nonsense <a class="dark-link" href="https://twitter.com/tazjin">on the
       internet</a>.
     </p>
     <p>
diff --git a/web/homepage/static/tazjin.css b/web/homepage/static/tazjin.css
index 7175a36df1..68e72577c3 100644
--- a/web/homepage/static/tazjin.css
+++ b/web/homepage/static/tazjin.css
@@ -50,7 +50,7 @@ h1, h2, h3 {
     color: #e4e4ef;
 }
 
-.dark a {
+.dark-link, .interblag-title {
     color: #96a6c8;
 }
 
@@ -68,11 +68,12 @@ h1, h2, h3 {
 .entry {
     width: 42%;
     margin: 5px;
-    padding-left: 5px;
+    padding-left: 7px;
     padding-right: 5px;
     border: 2px solid;
     border-radius: 5px;
     flex-grow: 1;
+    text-decoration: none;
 }
 
 .misc {