From 9de769604a686822981ae3f97061e8bc46078266 Mon Sep 17 00:00:00 2001
From: Yinchuan Song <songyinchuan@gmail.com>
Date: Fri, 5 Aug 2016 02:12:01 -0700
Subject: [PATCH] Optimize Packer document view for iPad portrait mode

- reduced margin, padding, line-height of several elements
- created iPad specific media selector
- removed unnecessary spaces around headers and list elements
- reduced code font size to 12px
- removed unnecessary optimization of page footer for tablets
---
 .../source/assets/stylesheets/_footer.scss    |  5 +-
 website/source/assets/stylesheets/_ipad.scss  | 62 +++++++++++++++++++
 .../assets/stylesheets/application.scss       |  3 +
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 website/source/assets/stylesheets/_ipad.scss

diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss
index 1f90c387f..09eac9445 100644
--- a/website/source/assets/stylesheets/_footer.scss
+++ b/website/source/assets/stylesheets/_footer.scss
@@ -68,7 +68,7 @@ body{
 
     .footer-hashi{
       display: block;
-      float: none !important;
+      float: right !important;
       .hashicorp-project{
         margin-left: -30px;
       }
@@ -76,10 +76,9 @@ body{
 
     ul{
       display: block;
-      width: 100%;
       li{
         display: block;
-        float: none;
+        float: left;
       }
 
       &.external-links{
diff --git a/website/source/assets/stylesheets/_ipad.scss b/website/source/assets/stylesheets/_ipad.scss
new file mode 100644
index 000000000..5978e681d
--- /dev/null
+++ b/website/source/assets/stylesheets/_ipad.scss
@@ -0,0 +1,62 @@
+@media only screen 
+and (min-device-width : 768px) 
+and (max-device-width : 1024px) 
+and (orientation : portrait) {
+  #main-content {
+    display: flex;
+    flex-direction: row;
+
+    #sidebar-docs {
+      flex: 3;
+      h2 {
+        padding: 0;
+      }
+
+      ul {
+        padding: 0;
+        li {
+          padding: 10px 0;
+        }
+      }
+    }
+    .docs-body {
+      flex: 7;
+      h2 {
+        margin-top: 20px;
+      }
+
+      .docs-content {
+        padding: 0 0 80px;
+        div.alert {
+          padding: 20px 30px;
+        }
+
+        code {
+          font-size: 12px;
+        }
+
+        pre {
+          margin: 0 -15px;
+          padding: 15px;
+        }
+
+        ul {
+          margin-top: 0;
+          margin-left: 30px;
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+
+  #footer {
+    padding: 20px 0 30px;
+    .edit-page-link {
+      top: -70px;
+    }
+  }
+
+  p {
+    line-height: 1.5;
+  }
+}
diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss
index 1ae2ff694..adf278595 100644
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@@ -20,3 +20,6 @@
 @import "_footer";
 @import "_components";
 @import "_sidebar";
+
+// Fix view on iPad
+@import "_ipad";