Fix media queries that disable justification.
authorNick Bowler <nbowler@draconx.ca>
Fri, 10 Jul 2020 05:16:04 +0000 (01:16 -0400)
committerNick Bowler <nbowler@draconx.ca>
Fri, 10 Jul 2020 05:16:04 +0000 (01:16 -0400)
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.

content/style.scss

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