Fix container

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 7703258de165fe4f9f8df7b2d387072dd120d3c3..d67a5242bd0868a3192e4bf362f68c8be1a6cd8c 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -251,13 +251,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-block-desktop-only {
     display: block !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-block-widescreen {
     display: block !important;
   }
@@ -297,13 +297,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-flex-desktop-only {
     display: flex !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-flex-widescreen {
     display: flex !important;
   }
@@ -343,13 +343,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-inline-desktop-only {
     display: inline !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-inline-widescreen {
     display: inline !important;
   }
@@ -389,13 +389,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-inline-block-desktop-only {
     display: inline-block !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-inline-block-widescreen {
     display: inline-block !important;
   }
@@ -435,13 +435,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-inline-flex-desktop-only {
     display: inline-flex !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-inline-flex-widescreen {
     display: inline-flex !important;
   }
@@ -519,13 +519,13 @@ table th {
   }
 }
 
-@media screen and (min-width: 1000px) and (max-width: 1239px) {
+@media screen and (min-width: 1000px) and (max-width: 1191px) {
   .is-hidden-desktop-only {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .is-hidden-widescreen {
     display: none !important;
   }
@@ -2700,7 +2700,7 @@ a.box:active {
 
 .title .tag,
 .subtitle .tag {
-  vertical-align: bottom;
+  vertical-align: middle;
 }
 
 .title {
@@ -2799,14 +2799,14 @@ a.box:active {
     max-width: 960px;
   }
   .container.is-fluid {
-    margin: 0 1.5rem;
+    margin: 0 20px;
     max-width: none;
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .container {
-    max-width: 1200px;
+    max-width: 1152px;
   }
 }
 
@@ -4815,7 +4815,7 @@ label.panel-block:hover {
   }
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .column.is-narrow-widescreen {
     flex: none;
   }
@@ -5175,7 +5175,7 @@ label.panel-block:hover {
   padding: 3rem 1.5rem;
 }
 
-@media screen and (min-width: 1240px) {
+@media screen and (min-width: 1192px) {
   .hero-body {
     padding-left: 0;
     padding-right: 0;

diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html
index a51a1da0cf48f43a9f911a0da4df0200498f38e5..7a243901fda051e0dd041bbbc73b7c0986d5cfb7 100644 (file)
--- a/docs/documentation/layout/container.html
+++ b/docs/documentation/layout/container.html
@@ -23,8 +23,10 @@ doc-subtab: container
         <li><code>.section</code></li>
         <li><code>.footer</code></li>
       </ul>
-      <p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>1.5rem</strong> on both the left and right sides.</p>
-      <p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
+      <p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
+      <p>On <strong>desktop</strong> (>= 1000px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
+      <p>On <strong>widescreen</strong> (>= 1192px), the container will have a maximum width of <strong>1152px</strong>.</p>
+      <p>The values <strong>960</strong> and <strong>1152</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
     </div>
   </div>
 

diff --git a/sass/elements/other.sass b/sass/elements/other.sass
index 5b9fc2a8dd94e178efae03941f49b8ded1aced73..ad89730fadeb4a04d84c8c621b9bf1a46fd2802a 100644 (file)
--- a/sass/elements/other.sass
+++ b/sass/elements/other.sass
@@ -5,13 +5,13 @@
   position: relative
   +desktop
     margin: 0 auto
-    max-width: $desktop - 40px
+    max-width: $desktop - 40px // 960px
     // Modifiers
     &.is-fluid
-      margin: 0 1.5rem
+      margin: 0 20px
       max-width: none
   +widescreen
-    max-width: $widescreen - 40px
+    max-width: $widescreen - 40px // 1152px
 
 .delete
   +delete

diff --git a/sass/elements/title.sass b/sass/elements/title.sass
index c381ad9dca93fe9c24169e241aa4c268e62687b2..7414a6b731060050009c33fb9babf3975aa787f0 100644 (file)
--- a/sass/elements/title.sass
+++ b/sass/elements/title.sass
@@ -18,7 +18,7 @@ $subtitle-weight:   $weight-light !default
   strong
     font-weight: $title-weight-bold
   .tag
-    vertical-align: bottom
+    vertical-align: middle
 
 .title
   color: $title

diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 9fe32e042df6f51bd487190bbf645c36d353bec9..b246fadc3fd6458fa313e987b92c656df7213f58 100644 (file)
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -185,8 +185,10 @@
 // Responsiveness
 
 $tablet: 769px !default
-$desktop: 1000px !default
-$widescreen: 1240px !default
+$desktop: 1000px !default // 960px container + 40px
+$widescreen: 1192px !default // 1152px container + 40
+// 960 and 1152 have been chosen because
+// they are divisible by both 12 and 16
 
 =from($device)
   @media screen and (min-width: $device)