Outdent navigation, keep a full width main content area

alphagov · Jul 2, 2016 · eb786c9 · eb786c9
1 parent ed284fe
commit eb786c9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/app/views/guide_style_guide.html b/app/views/guide_style_guide.html
@@ -10,7 +10,7 @@
   {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
-    <div class="column-one-quarter">
+    <div class="column-one-quarter outdent-navigation">
 
       <h2 class="heading-small">Layout</h2>
       <ul class="list list-underline font-xsmall">
@@ -95,7 +95,7 @@ <h2 class="heading-small">Alpha and beta banners</h2>
       </ul>
 
     </div>
-    <div class="column-two-thirds">
+    <div class="column-full">
       <h1 class="heading-xlarge no-top-margin">
         <span class="heading-secondary">GOV.UK elements</span>
         Front-end style guide

diff --git a/public/sass/elements-page.scss b/public/sass/elements-page.scss
@@ -17,6 +17,12 @@
   }
 }
 
+.outdent-navigation {
+  @include media(tablet) {
+    margin-left: -25%;
+  }
+}
+
 // Increase spacing above headings
 .heading-xlarge {
   @include media(tablet) {

diff --git a/public/sass/elements/_layout.scss b/public/sass/elements/_layout.scss
@@ -60,3 +60,7 @@
 .column-two-thirds {
   @include grid-column(2 / 3);
 }
+
+.column-full {
+  @include grid-column(1);
+}