From 41d2e553c664022609d9272ed7fa52c72c9dc9b2 Mon Sep 17 00:00:00 2001
From: Daniel Schadt <kingdread@gmx.de>
Date: Thu, 1 Aug 2019 13:13:08 +0200
Subject: 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.
---
 custom.css   | 16 ++++++++++++++--
 preamble.tex |  2 +-
 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}
-- 
cgit v1.2.3