From: Nick Bowler <nbowler@draconx.ca>
Date: Fri, 10 Jul 2020 05:16:04 +0000 (-0400)
Subject: Fix media queries that disable justification.
X-Git-Url: http://git.draconx.ca/gitweb/homepage.git/commitdiff_plain/d07907f27644b18d6d552907d31ae98f8585ef38?hp=00a9b42301aeb19c08c43f3774dd4e2e27945b5e

Fix media queries that disable justification.

It seems at some point the rules to disable justification on narrow
displays stopped working (or maybe they never worked) due to the main
CSS selectors having higher specificity.

SCSS has a neat trick to expand the media query with matching selectors
which solves this problem nicely.  So let's use that.
---

diff --git a/content/style.scss b/content/style.scss
index f71a6a3..82b8720 100644
--- a/content/style.scss
+++ b/content/style.scss
@@ -56,6 +56,7 @@ p>img { max-width: 40em; width: 100%; height: auto; }
 
 p, dt, dd, li {
     text-align: justify;
+    @media (max-width: 28em) { text-align: left; }
     padding: 0;
     margin: 0;
 }
@@ -89,9 +90,7 @@ kbd {
     color: $annotationcolour;
 
     a:link, a:visited { color: inherit; }
-}
-@media not screen {
-    .permalink { visibility: hidden; }
+    @media not screen { visibility: hidden; }
 }
 
 // General table styles.
@@ -195,6 +194,3 @@ ul.ordered > {
     #sitetitle * { float: none; }
     #footer { padding: 0 1em; }
 }
-@media (max-width: 28em) {
-    * { text-align: left; }
-}