From a0955b3b9c8c64b581bd9d11245eb3f0f3cac6f0 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sat, 28 Mar 2015 23:53:14 +0100 Subject: [PATCH 1/2] first version of mobile-friendly design --- dencode.css | 38 +++++++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/dencode.css b/dencode.css index b1a927e..e13a5cc 100644 --- a/dencode.css +++ b/dencode.css @@ -1,5 +1,38 @@ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600&subset=latin,latin-ext); +@media (max-width: 800px) { + body { + margin: 0; + padding: 0; + } + + h1 { + margin: 0; + } + + div.wrapper { + border-radius: 0; + margin-left: 0; + margin-right: 0; + } + + textarea.input { + border-radius: 0; + } +} + +@media (min-width: 801px) { + div.wrapper { + border-radius: 0.5em; + margin-left: auto; + margin-right: auto; + width: 50%; + } + + textarea.input { + border-radius: 0.5em; + } +} body { font-family: 'Open Sans', sans-serif; font-weight: 300; @@ -17,19 +50,14 @@ strong { div.wrapper { background-color: #fc0; border-color: #da0; - border-radius: 0.5em; border-style: solid; border-width: 1px; box-shadow: 0 0 1px 1px #ea0 inset; margin-bottom: 0.5em; - margin-left: auto; - margin-right: auto; padding: 0.5em; - width: 50%; } textarea.input { - border-radius: 0.5em; border-style: solid; border-width: 1px; display: block; From 2bcf024941ff3019ed374204aa1fd7545f67fa45 Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Sun, 29 Mar 2015 00:21:51 +0100 Subject: [PATCH 2/2] make it display nicely on mobile devices --- dencode.css | 5 +++-- index.html | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/dencode.css b/dencode.css index e13a5cc..9074205 100644 --- a/dencode.css +++ b/dencode.css @@ -1,12 +1,13 @@ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600&subset=latin,latin-ext); -@media (max-width: 800px) { +@media (max-width: 980px) { body { margin: 0; padding: 0; } h1 { + font-size: 120%; margin: 0; } @@ -21,7 +22,7 @@ } } -@media (min-width: 801px) { +@media (min-width: 981px) { div.wrapper { border-radius: 0.5em; margin-left: auto; diff --git a/index.html b/index.html index 89a9ad5..dadf298 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + Decode? Encode? DENcode!