From bcd78d9cdfa6fe2343a247bc114a024e8125f018 Mon Sep 17 00:00:00 2001
From: Steven Engler <sengler@uwaterloo.ca>
Date: Wed, 18 Sep 2019 18:26:55 -0400
Subject: [PATCH] When in portrait, ':target' elements are moved downwards

This prevents them from being hidden by the header on mobile devices.
---
 static/css/styles.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/static/css/styles.css b/static/css/styles.css
index 0cc78dd..ba22ced 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -432,6 +432,25 @@ body {
 		position: -webkit-sticky; /* needed for iOS */
 		box-shadow: 0 0 1em rgba(30, 30, 30, .3);
 	}
+
+	.body-content :target::before {
+		/* When linking to tags with 'id's (example:
+		   'website.com/post/#heading'), make them
+		   appear lower down the page so that they
+		   don't appear under the sticky header set
+		   above.
+		   See: https://stackoverflow.com/a/24298427
+		   Note that this causes the cursor text
+		   selection of the target to behave
+		   undesirably.
+		*/
+		content: '';
+		display: block;
+		height: 3em;
+		margin-top: -3em;
+		visibility: hidden;
+		pointer-events: none;
+	}
 }