support better reading in a tablet screen (#467)

* support better reading in a tablet screen
* use scss variables

Signed-off-by: nachoparker <nacho@ownyourbits.com>

1 files changed, 46 insertions, 0 deletions

diff --git a/css/mobile.scss b/css/mobile.scss
new file mode 100644
index 000000000..02271a263
--- /dev/null
+++ b/css/mobile.scss
@@ -0,0 +1,46 @@
+@media only screen and (max-width: $breakpoint_mobile) {
+    #app-content .utils .date {
+        display: none;
+    }
+
+    #app-shortcuts th:first-child {
+        padding-left: 44px;
+    }
+
+    #app-navigation:not(.hidden) + #app-content {
+        width: 100%;
+    }
+
+    #mark-all-read-button {
+        display: block;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    #app-content .article-actions ul {
+        max-width: 164px;
+    }
+
+    #app-content .heading .date {
+        display: none;
+    }
+
+    #app-content .heading h1 {
+        margin-right: 0;
+    }
+
+    #app-content .utils {
+        padding-right: 15px;
+    }
+
+    #app-content .article {
+        padding-right: 15px;
+        padding-left: 44px;
+    }
+}
+
+@media only screen and (max-width: 340px) {
+    #app-content .article-actions  {
+        max-width: 82px;
+    }
+}