Responsify /deprecations pages (#3046)

emberjs · Oct 24, 2017 · 214c5c0 · 214c5c0
1 parent 9602733
commit 214c5c0
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 20 deletions.
diff --git a/source/deprecations/ember-cli/v2.x.html.md b/source/deprecations/ember-cli/v2.x.html.md
@@ -2,6 +2,7 @@
 title: Deprecations for Ember CLI v2.x
 alias: guides/deprecations/
 layout: deprecations
+responsive: true
 ---
 
 ## Deprecations Added in Ember CLI 2.x

diff --git a/source/deprecations/ember-data/v2.x.html.md b/source/deprecations/ember-data/v2.x.html.md
@@ -2,6 +2,7 @@
 title: Deprecations for Ember Data v2.x
 alias: guides/deprecations/
 layout: deprecations
+responsive: true
 ---
 
 ## Deprecations Added in Ember Data 2.x

diff --git a/source/deprecations/index.html.md b/source/deprecations/index.html.md
@@ -1,5 +1,6 @@
 ---
 title: Deprecations
+responsive: true
 ---
 
 ## Deprecations

diff --git a/source/deprecations/v1.x.html.md b/source/deprecations/v1.x.html.md
@@ -2,6 +2,7 @@
 title: Deprecations for v1.x
 alias: guides/deprecations/
 layout: deprecations
+responsive: true
 ---
 
 ## Deprecations Added in Ember 1.x

diff --git a/source/deprecations/v2.x.html.md b/source/deprecations/v2.x.html.md
@@ -2,6 +2,7 @@
 title: Deprecations for v2.x
 alias: guides/deprecations/
 layout: deprecations
+responsive: true
 ---
 
 ## Deprecations Added in Ember 2.x

diff --git a/source/stylesheets/pages/deprecations.css.scss b/source/stylesheets/pages/deprecations.css.scss
@@ -1,5 +1,18 @@
 body.deprecations {
+  #content-wrapper {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   #content {
-    margin-top: 38px;
+    margin-top: 38px;  
+  }
+
+  @media (max-width: 60em) {
+    #sidebar {
+      margin-left: -1.5rem;
+      margin-right: -1.5rem;
+    }
   }
 }
+
diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss
@@ -45,16 +45,29 @@ body {
 
 #sidebar {
   font-weight: normal;
-  margin-top: 38px;
-  float: left;
-  width: $sidebar-width;
-  min-height: 475px;
-  margin-bottom: 28px;
-  padding-bottom: 120px;
   background: #f4ece9;
   border-left: 1px solid #d4ccc8;
   border-right: 1px solid #d4ccc8;
   position: relative;
+
+  @media (min-width: 48em) {
+    margin-top: 38px;
+    float: left;
+    width: 22.5%;
+    min-height: 475px;
+    margin-bottom: 28px;
+    padding-bottom: 120px;
+
+    &:after {
+      @include background-image(linear-gradient(rgba(250, 244, 241, 0), rgba(251, 245, 241, 1)));
+      position: absolute;
+      bottom: 0px;
+      left: -1px;
+      width: 220px;
+      height: 120px;
+      content: '';
+    }
+  }
 
   #back-to-top {
     padding-left: 13px;
@@ -187,16 +200,6 @@ body {
       }
     }
   }
-
-  &:after {
-    @include background-image(linear-gradient(rgba(250, 244, 241, 0), rgba(251, 245, 241, 1)));
-    position: absolute;
-    bottom: 0px;
-    left: -1px;
-    width: 220px;
-    height: 120px;
-    content: '';
-  }
 }
 
 #guide_search {
@@ -409,9 +412,14 @@ body {
 
 #content {
   &.has-sidebar {
-    margin: 38px 0 90px 2.1em;
-    width: $content-width;
-    float: left;
+    margin-top: 38px;
+    margin-bottom: 90px;
+
+    @media (min-width: 48em) {
+      width: 72.5%;
+      float: left;
+      margin-left: 5%;
+    }
   }
 
   ol + h2,