Fix container docs

docs/_layouts/documentation.html

@@ -39,6 +39,9 @@ route: documentation
           <li {% if page.doc-tab == 'grid' %}class="is-active"{% endif %}>
             <a href="{{ site.url }}/documentation/grid/columns">Grid</a>
           </li>
+          <li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
+            <a href="{{ site.url }}/documentation/layout/container/">Layout</a>
+          </li>
           <li {% if page.doc-tab == 'form' %}class="is-active"{% endif %}>
             <a href="{{ site.url }}/documentation/form/general">Form</a>
           </li>
@@ -52,9 +55,6 @@ route: documentation
               <a href="{{ site.url }}/documentation/components/card/">Components</a>
             {% endif %}
           </li>
-          <li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
-            <a href="{{ site.url }}/documentation/layout/container/">Layout</a>
-          </li>
         </ul>
       </div>
     </div>

docs/documentation/layout/container.html

@@ -51,17 +51,19 @@ doc-subtab: container
     <div class="content">
       <p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
       <ul>
-        <li><code>.nav</code></li>
+        <li><code>.navbar</code></li>
         <li><code>.hero</code></li>
         <li><code>.section</code></li>
         <li><code>.footer</code></li>
       </ul>
+      <p>
+        The container <strong>breakpoints</strong> have an <strong>offset</strong> defined by the <code>$container-offset</code> variable. It has a default value of <code>60px</code>.
+      </p>
       <p>This is how the container will behave:</p>
       <ul>
-        <li>on <strong>mobile</strong> and <strong>tablet</strong> {% include bp/touch.html %}, it will have a margin of <strong>24px</strong> on each side.</li>
-        <li>on <strong>desktop</strong> {% include bp/desktop.html %}, it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
-        <li>on <strong>widescreen</strong> {% include bp/widescreen.html %}, it will have a maximum width of <strong>1152px</strong>.</li>
-        <li>on <strong>fullhd</strong> {% include bp/fullhd.html %}, it will have a maximum width of <strong>1344px</strong>.</li>
+        <li>on <code>$desktop</code> + <code>$container-offset</code> = <code>>= 1068px</code> it will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</li>
+        <li>on <code>$widescreen</code> + <code>$container-offset</code> = <code>>= 1260px</code> it will have a maximum width of <strong>1152px</strong>.</li>
+        <li>on <code>$fullhd</code> + <code>$container-offset</code> = <code>>= 1452px</code> it will have a maximum width of <strong>1344px</strong>.</li>
       </ul>
       <p>
         The <code>$gap</code> variable has a default value of <code>24px</code> but can be modified.

sass/elements/_all.sass

@@ -2,6 +2,7 @@
 
 @import "box.sass"
 @import "button.sass"
+@import "container.sass"
 @import "content.sass"
 @import "form.sass"
 @import "icon.sass"

sass/elements/container.sass

@@ -0,0 +1,27 @@
+$container-offset: 60px !default
+
+.container
+  margin: 0 auto
+  position: relative
+  +from($desktop + $container-offset)
+    max-width: $desktop - (2 * $gap)
+    width: $desktop - (2 * $gap)
+    &.is-fluid
+      margin-left: $gap
+      margin-right: $gap
+      max-width: none
+      width: auto
+  +until($widescreen + $container-offset)
+    &.is-widescreen
+      max-width: $widescreen - (2 * $gap)
+      width: auto
+  +until($fullhd + $container-offset)
+    &.is-fullhd
+      max-width: $fullhd - (2 * $gap)
+      width: auto
+  +from($widescreen + $container-offset)
+    max-width: $widescreen - (2 * $gap)
+    width: $widescreen - (2 * $gap)
+  +from($fullhd + $container-offset)
+    max-width: $fullhd - (2 * $gap)
+    width: $fullhd - (2 * $gap)

sass/elements/other.sass

@@ -1,34 +1,6 @@
 .block
   +block
 
-$container-offset: 60px !default
-
-.container
-  margin: 0 auto
-  position: relative
-  +from($desktop + $container-offset)
-    max-width: $desktop - (2 * $gap)
-    width: $desktop - (2 * $gap)
-    &.is-fluid
-      margin-left: $gap
-      margin-right: $gap
-      max-width: none
-      width: auto
-  +until($widescreen + $container-offset)
-    &.is-widescreen
-      max-width: $widescreen - (2 * $gap)
-      width: auto
-  +until($fullhd + $container-offset)
-    &.is-fullhd
-      max-width: $fullhd - (2 * $gap)
-      width: auto
-  +from($widescreen + $container-offset)
-    max-width: $widescreen - (2 * $gap)
-    width: $widescreen - (2 * $gap)
-  +from($fullhd + $container-offset)
-    max-width: $fullhd - (2 * $gap)
-    width: $fullhd - (2 * $gap)
-
 .delete
   +delete