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 f71a6a37846b1f4bc48a40a1aa25f2b6e6222178..82b872028fc1db23c80e229cbcc3a0b33f59196f 100644 (file)
--- 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; }
-}