From 4654244cd83c830be8ff1a17260a6c7902dae59b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Jastrz=C4=99bowski?=
 <michal.jastrzebowski@gmail.com>
Date: Fri, 20 Dec 2013 00:27:35 +0100
Subject: [PATCH] first responsive version

---
 _includes/css/responsive.css | 179 +++++++++++++++++++++++++++++++++++
 _includes/header.html        |   1 +
 css/application.css          |   2 +
 3 files changed, 182 insertions(+)
 create mode 100644 _includes/css/responsive.css

diff --git a/_includes/css/responsive.css b/_includes/css/responsive.css
new file mode 100644
index 0000000..3383e34
--- /dev/null
+++ b/_includes/css/responsive.css
@@ -0,0 +1,179 @@
+/* iPads (landscape) ----------- */
+@media only screen and (max-width : 1050px) {
+  .container {
+    width: 100%;
+    padding: 0 20px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .triptych {
+    width: 100%;
+  }
+  .triptych li {
+    width: 33%;
+    margin-left: 0;
+    padding: 0 20px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .triptych h3 {
+    width: auto;
+    padding: 0 30px;
+  }
+  .home h2 {
+    line-height: 30px;
+    padding: 20px 100px;
+    position: relative;
+  }
+  .home h2 span {
+    position: absolute;
+    display: block;
+    float: left;
+    top: 50%;
+    margin-top: -22px;
+  }
+  .home h2 span:first-child {
+    left: 65px;
+  }
+  .home h2 span:last-child {
+    right: 65px;
+  }
+  .sidebar a.button {
+    margin: 14px 0 20px;
+  }
+  .license-body {
+    width: calc(100% - 250px);
+  }
+}
+
+/* iPads (portrait) ----------- */
+@media only screen and (max-width : 800px), (max-device-width : 1050px) and (orientation : portrait) {
+  .triptych h3 {
+    width: auto;
+    padding: 0 10px;
+    margin-bottom: 10px;
+  }
+  .sidebar {
+    float: left;
+    width: 50%;
+  }
+  .license-body {
+    width: 100%;
+  }
+  .license-rules {
+    border-bottom: none;
+  }
+  .license-details {
+    width: 65%;
+  }
+}
+
+/* Smartphones  ----------- */
+@media only screen and (max-width : 680px) {
+  .triptych li {
+    float: none;
+    width: 100%;
+    margin-bottom: 50px;
+  }
+  .home h2 {
+    padding: 20px 70px;
+  }
+  .home h2 span:first-child {
+    left: 35px;
+  }
+  .home h2 span:last-child {
+    right: 35px;
+  }
+  .license-family {
+    margin-bottom: 20px;
+  }
+  .license-family-heading {
+    float: none;
+    width: 100%;
+  }
+  .license-details {
+    float: none;
+    width: 100%;
+    padding-left: 0;
+  }
+  .license-variations {
+    height: auto;
+    padding-top: 0;
+  }
+  .license-variations ul {
+    height: 31px;
+  }
+  .site-footer {
+    text-align: center;
+  }
+  .site-footer nav, .site-footer p, .with-love {
+    float: none;
+  }
+  .site-footer nav {
+    margin: 0 auto 10px;
+  }
+}
+
+/* Smartphones (landscape) ----------- */
+@media only screen and (max-width : 481px) {
+  h1 {
+    font-size: 30px;
+    margin-bottom: 15px;
+  }
+  .home h1 {
+    font-size: 33px;
+  }
+  .home h2 {
+    font-size: 17px;
+    line-height: 20px;
+    padding: 20px 45px;
+  }
+  .home h2 span:first-child {
+    left: 0;
+  }
+  .home h2 span:last-child {
+    right: 0;
+  }
+  .home h2 span {
+    margin-top: -16px;
+  }
+  .sidebar {
+    width: 100%;
+  }
+  .license-body {
+    word-wrap: break-word;
+  }
+  .license-body pre {
+    font-size: 10px;
+  }
+  .license-rules:not(.license-rules-sidebar) li {
+    margin-right: 5px;
+    font-size: 10px;
+    -webkit-text-size-adjust: none;
+  }
+  .license-rules:not(.license-rules-sidebar) li span {
+    background-size: 44px;
+    width: 10px;
+    height: 10px;
+    top: 1px;
+    position: relative;
+  }
+  .license-rules:not(.license-rules-sidebar) .license-required span {
+    background-position: -34px 0;
+  }
+  .license-rules:not(.license-rules-sidebar) .license-permitted span {
+    background-position: -24px 0px;
+  }
+  .license-rules:not(.license-rules-sidebar) .license-forbidden span {
+    background-position: -14px 0;
+  }
+}
+
+/* Smartphones (portrait) ----------- */
+@media only screen and (max-width : 321px) {
+  .container {
+    padding: 0 10px;
+  }
+}
diff --git a/_includes/header.html b/_includes/header.html
index edeca62..c12a75d 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -11,6 +11,7 @@
     <!--[if lt IE 9]>
     <script src="/js/html5shiv.js"></script>
     <![endif]-->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   </head>
   <body class="{{ page.layout }}{% if page.class %} {{ page.class }}{% endif %}">
     <div class="container">
diff --git a/css/application.css b/css/application.css
index d267ecf..b66db2c 100644
--- a/css/application.css
+++ b/css/application.css
@@ -492,3 +492,5 @@ strong {
   }
 
 }
+
+{% include css/responsive.css %}