Remove obsolete $container-offset variable from documentation (#1504)

* Remove obsolete $container-offset variable from documentation

* Fix .container docs

diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html
index 5d5326f42a7547e3d38caa9b2a6bddc19bc24b49..dd398b69022a1a5e6b8795c7af2a420820ed2116 100644 (file)
--- a/docs/documentation/layout/container.html
+++ b/docs/documentation/layout/container.html
@@ -16,7 +16,8 @@ doc-subtab: container
 {% capture container_fluid_example %}
 <div class="container is-fluid">
   <div class="notification">
-    This container is <strong>fluid</strong>: it will have a 24px gap on either side, on any viewport size.
+    This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
+    viewport size.
   </div>
 </div>
 {% endcapture %}
@@ -57,17 +58,16 @@ doc-subtab: container
         <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>.
+        The containers <strong>width</strong> for each <strong>breakpoint</strong> is the result
+        of: <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code>
+        32px</code> but can be modified.
       </p>
       <p>This is how the container will behave:</p>
       <ul>
-        <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>
+        <li>on <code>$desktop</code> it will have a maximum width of <strong>960px</strong>.</li>
+        <li>on <code>$widescreen</code> it will have a maximum width of <strong>1152px</strong>.</li>
+        <li>on <code>$fullhd</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.
-      </p>
       <p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
     </div>
   </div>
@@ -83,7 +83,8 @@ doc-subtab: container
 <div class="container">
   <h3 class="title is-4">Fluid container</h3>
   <div class="content">
-    <p>If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
+    <p>If you don't want to have a maximum width but want to keep the 32px margin on the left and
+       right sides, add the <code>is-fluid</code> modifier:</p>
   </div>
 </div>
 </section>