Basic style improve (for smartphones)

diff --git a/TODO b/TODO
index 7ed21c6..a51301d 100644 (file)
--- a/TODO
+++ b/TODO
@@ -1,4 +1,3 @@
-Styles must be improved (full width for smartphones, ...)
 PGN text is not selectable (understand why?!)
 Change cursor when computer "think" (sablier)
 Tooltip text should fade (even when mouse stay on it, especially for small screens)

diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass
index 2487523..f46fca5 100644 (file)
--- a/public/stylesheets/index.sass
+++ b/public/stylesheets/index.sass
@@ -7,10 +7,6 @@
   a
     color: #663300
 
-@media screen and (min-width: 800px)
-  .card
-    max-width: 600px
-
 .help
   cursor: pointer
 

diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass
index 8a26260..18bd1cf 100644 (file)
--- a/public/stylesheets/layout.sass
+++ b/public/stylesheets/layout.sass
@@ -3,7 +3,11 @@ html, *
   font-family: "Open Sans", Arial, sans-serif
 
 body
-  padding: 1%
+  padding: 1% 0
+
+@media screen and (min-width: 800px)
+  .card
+    max-width: 600px
 
 a
   color: #00B7FF

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 6a8da83..b2c678a 100644 (file)
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -1,6 +1,19 @@
 .container#variantPage
   padding: 0
 
+//.container#variantPage > .row > div
+@media screen and (max-width: 767px)
+  .col-sm-12
+    padding: 0
+
+@media screen and (max-width: 767px)
+  h4
+    margin: 0 0 10px 0
+  p
+    margin-left: 0
+    margin-right: 0
+    padding: 0 3px
+
 .warn
   padding: 3px
   color: red