From 591750470938473d4b95fdf43a03924687a6b84e Mon Sep 17 00:00:00 2001
From: Max Coplan <mchcopl@gmail.com>
Date: Thu, 26 Jan 2023 10:21:48 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Make=20`:target`=20elements=20st?=
 =?UTF-8?q?and=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a tall monitor (where you can fit the content of the whole screen
without scrolling), it can be difficult seeing where a particular in-page
link takes you.  This commit makes these elements stand out more
---
 website/public/main.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/website/public/main.css b/website/public/main.css
index 649ab8fa58..8e85a7e7c6 100644
--- a/website/public/main.css
+++ b/website/public/main.css
@@ -250,6 +250,18 @@ nav.breadcrumbs ol > li:not(:first-child)::before {
   content: "➤ ";
 }
 
+/* make "#" selected sections stand out */
+h4:target::before {
+  content: "👉"; /*TODO(😎): localize for different layout directions (e.g. rtl)*/
+}
+h4:target {
+  transition-property: box-shadow, transform;
+  transition-duration: 333ms;
+  transition-timing-function: ease;
+  box-shadow: 0 0.8rem 1.0rem 0.1rem rgba(0, 0, 0, 0.2);
+  transform: translateY(-0.4rem);
+}
+
 /* HACK(strager): The '>' symbol pushes some breadcrumbs down for some reason.
    This causes vertical misalignment between breadcrumbs. Fix this by tweaking
    line-height. I don't know why this works. */