From 82e7672458b2b9a731616df4229914dcde1a3320 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Fri, 23 Dec 2016 13:59:26 +0000 Subject: [PATCH] Fix container --- docs/css/bulma-docs.css | 36 ++++++++++++------------ docs/documentation/layout/container.html | 6 ++-- sass/elements/other.sass | 6 ++-- sass/elements/title.sass | 2 +- sass/utilities/mixins.sass | 6 ++-- 5 files changed, 30 insertions(+), 26 deletions(-) diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 7703258d..d67a5242 100644 --- 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 a51a1da0..7a243901 100644 --- a/docs/documentation/layout/container.html +++ b/docs/documentation/layout/container.html @@ -23,8 +23,10 @@ doc-subtab: container
  • .section
  • .footer
    • -

    On mobile and tablet, the container will have a margin of 1.5rem on both the left and right sides.

    -

    On desktop (> 980px), the container will have a maximum width of 960px and will be horizontally centered.

    +

    On mobile and tablet, the container will have a margin of 20px on both the left and right sides.

    +

    On desktop (>= 1000px), the container will have a maximum width of 960px and will be horizontally centered.

    +

    On widescreen (>= 1192px), the container will have a maximum width of 1152px.

    +

    The values 960 and 1152 have been chosen because they are divisible by both 12 and 16.

    diff --git a/sass/elements/other.sass b/sass/elements/other.sass index 5b9fc2a8..ad89730f 100644 --- 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 c381ad9d..7414a6b7 100644 --- 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 9fe32e04..b246fadc 100644 --- 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)