Improve 'help' modal style on large screens
authorBenjamin Auder <benjamin.auder@somewhere>
Mon, 10 Dec 2018 09:56:51 +0000 (10:56 +0100)
committerBenjamin Auder <benjamin.auder@somewhere>
Mon, 10 Dec 2018 09:56:51 +0000 (10:56 +0100)
public/stylesheets/index.sass
views/index.pug

index 77ba9ae..6f5fedf 100644 (file)
   max-height: 100vh
   max-width: 90vw
 
+.conditional-jump
+  display: block
+
+@media screen and (max-width: 710px)
+  .conditional-jump
+    display: inline
+
 @media screen and (max-width: 400px)
   #welcome, #help
     max-width: 100vw
index 2a2a2d2..6e8cc0b 100644 (file)
@@ -16,10 +16,10 @@ block content
                                        #help.card
                                                label.modal-close(for="modal-help")
                                                h3.blue.section Tips
-                                               p.section.
-                                                       On a variant page, read the rules by clicking on the title "&lt;Variant&gt; rules".
-                                                       Try playing against a human: click the leftmost "new game" button :)
-                                                       ...then, while waiting you can play against a (rather weak) bot or a friend.
+                                               p.section
+                                                       span.conditional-jump On a variant page, read the rules by clicking on the title "&lt;Variant&gt; rules". 
+                                                       span.conditional-jump Try playing against a human: click the leftmost "new game" button :) 
+                                                       ...then, while waiting you can play against a (rather weak) bot or a friend.
                                                // TODO? On the index page, try typing the first letters of a variant.
                                                h3.blue.section Comments
                                                p.section.