Merge pull request #6 from michaeldfallen/responsive

Responsive changes to make 12factor readable on tablets
heroku · Feb 3, 2014 · c86d82b · c86d82b
2 parents 48792fd + 2f7585a
commit c86d82b
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 10 deletions.
diff --git a/public/css/mobile.css b/public/css/mobile.css
@@ -1,3 +1,79 @@
+@media screen and (min-width: 1041px) {
+
+ section {
+ min-width: 65em;
+ }
+
+ article, nav {
+ max-width: 55em;
+ }
+}
+
+@media screen and (min-width: 481px) and (max-width: 800px) {
+ article img {
+ float: none;
+ display: block;
+ margin: 0 auto;
+ }
+}
+
+@media screen and (min-width: 481px) and (max-width: 1040px) {
+
+ header {
+ font-size: 1em;
+ }
+
+ article, nav {
+ width:85%;
+ min-width: none;
+ max-width: none;
+ }
+
+ section, footer {
+ width:100%;
+ min-width: none;
+ max-width: none;
+ }
+
+ article h1, article h2, article h3, article p, article table {
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+
+ article ul, article ol {
+ padding-left: 35px;
+ padding-right: 10px;
+ text-align: left;
+ }
+
+ article table {
+ font-size: 0.8em;
+ }
+
+ article table td {
+ padding-left: 0.25em;
+ padding-right: 0.25em;
+ }
+
+ article img {
+ max-width: 100%;
+ margin-bottom: 1em;
+ }
+
+ nav a {
+ padding:1em;
+ }
+
+ nav a {
+ padding:1em;
+ }
+
+ footer {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
 @media screen and (max-width: 480px) {
  header {
  font-size: 0.75em;
@@ -34,12 +110,8 @@
  margin-bottom: 1em;
  }
 
- #prev {
- margin-left: 1em;
- }
-
- #next {
- margin-right: 1em;
+ nav a {
+ padding: 1em;
  }
 
  footer {

diff --git a/public/css/screen.css b/public/css/screen.css
@@ -9,7 +9,7 @@ body {
 h1, h2, h3 {
  padding: 0;
  margin: 0;
-}
+} 
 
 h1, h2 {
  line-height: 1.25em;
@@ -40,25 +40,27 @@ header h1 a {
 section {
  padding-top: 16pt;
  text-align: center;
- min-width: 65em;
 }
+
 section h1 {
  font-size: 19pt;
 }
 
 article {
  padding-top: 8pt;
 }
+
 article, nav {
  margin: 0 auto;
  text-align: justify;
- max-width: 55em;
 }
+
 article p a, article li a {
  text-decoration: none;
  border-bottom: 1px dashed #444;
  color: #000;
 }
+
 article p a:hover, article li a:hover {
  color: #337;
 }
@@ -159,4 +161,4 @@ article img {
 article img.full {
  float: none;
  margin-left: 0;
-}
+}