From a0955b3b9c8c64b581bd9d11245eb3f0f3cac6f0 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
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 <manuel@fritteli.ch>
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 @@
<html>
<head>
<meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>Decode? Encode? DENcode!</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="utf8.js"></script>