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: https://git.draconx.ca/gitweb/homepage.git/commitdiff_plain/d07907f27644b18d6d552907d31ae98f8585ef38

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; }
-}