make guides more readable on mobile

Sadly, the max width completely fucked the style on mobile devices, as
you basically had a single word per line. This made the guides
unreadable on any smaller display.

The reason for having so much whitespace is to make it easier to read
the guide on bigger screens, so that you don't have to go all the way
from left to right and you can read at a more comfortable width. Smaller
screens don't have this issue in the first place, so we just disable the
whitespace there and use the full width of the screen.

2 files changed, 15 insertions, 3 deletions

diff --git a/custom.css b/custom.css
index db5d227..71fe780 100644
--- a/custom.css
+++ b/custom.css
@@ -1,4 +1,11 @@
 /* see https://github.com/huyng/latex-simple-css */
+@media only screen and (min-width: 900px) {
+    body {
+        margin: 10em;
+        max-width: 42em;
+    }
+}
+
 body {
     /* Serif options */
     /*font-family: "Times New Roman", Times, serif;*/
@@ -18,8 +25,6 @@ body {
     font-size: 14px;
     font-weight:300;    
     line-height: 20px;
-    margin:10em;
-    max-width:42em;
     background:#fefefe;
     color:#333;
 }
@@ -113,3 +118,10 @@ div.triviabox {
   border-left: 5px solid blue;
   border-right: 5px solid blue;
 }
+
+.yt-embed {
+    width: 588px;
+    height: 331px;
+
+    max-width: 100%;
+}
diff --git a/preamble.tex b/preamble.tex
index a51a5ae..dd0ff70 100644
--- a/preamble.tex
+++ b/preamble.tex
@@ -80,7 +80,7 @@
   \iftexforhtTF{
     \begin{figure}
       \HCode{
-  <iframe width="588" height="331" src="https://www.youtube.com/embed/#1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <iframe class="yt-embed" src="https://www.youtube.com/embed/#1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       }
       \caption{#2}
     \end{figure}