From c32e444e86f96f3d166694c049bd29b474a21306 Mon Sep 17 00:00:00 2001 From: Sherakama Date: Mon, 28 Jan 2019 11:55:22 -0800 Subject: [PATCH] Fluid centered container. (#286) * Fluid centered container. * Changed modular spacing to new values and applied to centered-column mixin. * Fix grid example background striping. * Revised margin variables. --- core/css/decanter.css | 540 ++++++++++++------ .../mixins/grid/_centered-column.scss | 16 +- .../variables/core/_breakpoints.scss | 2 +- .../variables/core/_magic-numbers.scss | 33 -- .../variables/core/_modular-spacing.scss | 2 +- .../variables/core/_screen-margins.scss | 27 + core/scss/utilities/variables/core/index.scss | 5 +- kss/builder/decanter/kss-assets/css/kss.css | 188 +++--- kss/builder/decanter/scss/_layout-colors.scss | 3 +- 9 files changed, 520 insertions(+), 296 deletions(-) create mode 100644 core/scss/utilities/variables/core/_screen-margins.scss diff --git a/core/css/decanter.css b/core/css/decanter.css index 1892e732a..6c396273f 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -2078,43 +2078,55 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .centered-container { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .centered-container { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .centered-container { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .centered-container { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .centered-container { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .centered-container { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-ibeam > section { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-ibeam > section { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-ibeam > section { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-ibeam > section { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-ibeam > section { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-ibeam > section { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-ibeam > section { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-bricks .layout__columns { margin: 0 auto; @@ -2122,22 +2134,28 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-bricks .layout__columns { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-bricks .layout__columns { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-bricks .layout__columns { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-bricks .layout__columns { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-bricks .layout__columns { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-bricks .layout__columns { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-bricks .layout__columns { -ms-grid-columns: 1fr; @@ -2294,22 +2312,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-molive > header { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-molive > header { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-molive > header { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-molive > header { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-molive > header { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-molive > header { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-molive > section { margin: 0 auto; @@ -2317,22 +2341,28 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-molive > section { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-molive > section { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-molive > section { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-molive > section { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-molive > section { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-molive > section { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-molive > section { -ms-grid-columns: 1fr; @@ -2501,22 +2531,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-molive > footer { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-molive > footer { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-molive > footer { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-molive > footer { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-molive > footer { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-molive > footer { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-bars > div { margin: 0 auto; @@ -2524,22 +2560,28 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-bars > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-bars > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-bars > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-bars > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-bars > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-bars > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-bars > div { -ms-grid-columns: 1fr; @@ -2704,22 +2746,28 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-battleship > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-battleship > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-battleship > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-battleship > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-battleship > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-battleship > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-battleship > div { -ms-grid-columns: 1fr; @@ -2912,22 +2960,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-blastila > header { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-blastila > header { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-blastila > header { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-blastila > header { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-blastila > header { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-blastila > header { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-blastila > div { margin: 0 auto; @@ -2938,22 +2992,28 @@ dfn { grid-template-areas: "sidebar head head" "sidebar A B"; } @media only screen and (min-width: 0) { .layout-blastila > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-blastila > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-blastila > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-blastila > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-blastila > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-blastila > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-blastila > div > * { margin-right: 20px; } @@ -3094,48 +3154,60 @@ dfn { @media only screen and (min-width: 0) { .layout-chess > header, .layout-chess > footer { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-chess > header, .layout-chess > footer { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-chess > header, .layout-chess > footer { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-chess > header, .layout-chess > footer { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-chess > header, .layout-chess > footer { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-chess > header, .layout-chess > footer { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-chess > section { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-chess > section { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-chess > section { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-chess > section { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-chess > section { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-chess > section { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-chess > section { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-chess > section > * { margin-right: 20px; } @@ -3290,22 +3362,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-cuttoner > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-cuttoner > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-cuttoner > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-cuttoner > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-cuttoner > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-cuttoner > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-cuttoner > div > * { margin-right: 20px; } @@ -3601,22 +3679,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-percles > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-percles > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-percles > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-percles > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-percles > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-percles > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-percles > div > * { margin-right: 20px; } @@ -3767,22 +3851,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-robot > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-robot > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-robot > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-robot > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-robot > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-robot > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-robot > div > * { margin-right: 20px; } @@ -3922,22 +4012,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-space-invader > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-space-invader > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-space-invader > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-space-invader > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-space-invader > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-space-invader > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-space-invader > div > * { margin-right: 20px; } @@ -4075,22 +4171,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-sunset-delorean > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-sunset-delorean > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-sunset-delorean > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-sunset-delorean > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-sunset-delorean > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-sunset-delorean > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-sunset-delorean > div > * { margin-right: 20px; } @@ -4254,22 +4356,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .layout-thions > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-thions > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-thions > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-thions > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-thions > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-thions > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-thions > div > * { margin-right: 20px; } @@ -4492,32 +4600,38 @@ dfn { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-valmer > header, .layout-valmer > footer, .layout-valmer > section { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-valmer > header > *, .layout-valmer > footer > *, @@ -4735,32 +4849,38 @@ dfn { .layout-donies > section, .layout-donies > header, .layout-donies > footer { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-donies > section, .layout-donies > header, .layout-donies > footer { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-donies > section, .layout-donies > header, .layout-donies > footer { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-donies > section, .layout-donies > header, .layout-donies > footer { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-donies > section, .layout-donies > header, .layout-donies > footer { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-donies > section, .layout-donies > header, .layout-donies > footer { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-donies > section { display: grid; @@ -4927,37 +5047,43 @@ dfn { .layout-frogger > section, .layout-frogger > header, .layout-frogger > footer { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-frogger > div, .layout-frogger > section, .layout-frogger > header, .layout-frogger > footer { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-frogger > div, .layout-frogger > section, .layout-frogger > header, .layout-frogger > footer { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-frogger > div, .layout-frogger > section, .layout-frogger > header, .layout-frogger > footer { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-frogger > div, .layout-frogger > section, .layout-frogger > header, .layout-frogger > footer { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-frogger > div, .layout-frogger > section, .layout-frogger > header, .layout-frogger > footer { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-frogger > section { display: grid; @@ -5122,32 +5248,38 @@ dfn { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-pacman > div, .layout-pacman > header, .layout-pacman > footer { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-pacman > div { display: grid; @@ -5347,32 +5479,38 @@ dfn { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-plakes > div, .layout-plakes > header, .layout-plakes > footer { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .layout-plakes > div { display: grid; @@ -5594,22 +5732,28 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-toucan > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-toucan > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-toucan > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-toucan > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-toucan > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-toucan > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-toucan > div { -ms-grid-columns: 1fr; @@ -5768,22 +5912,28 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-trunks > section { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-trunks > section { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-trunks > section { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-trunks > section { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-trunks > section { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-trunks > section { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-trunks > section { -ms-grid-columns: 1fr; @@ -5977,22 +6127,28 @@ dfn { display: -ms-grid; } @media only screen and (min-width: 0) { .layout-wedge > section { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-wedge > section { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-wedge > section { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-wedge > section { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-wedge > section { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-wedge > section { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .layout-wedge > section { -ms-grid-columns: 1fr; @@ -6208,53 +6364,65 @@ dfn { .layout-basic > header, .layout-basic > section, .layout-basic > footer { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .layout-basic > header, .layout-basic > section, .layout-basic > footer { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .layout-basic > header, .layout-basic > section, .layout-basic > footer { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .layout-basic > header, .layout-basic > section, .layout-basic > footer { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .layout-basic > header, .layout-basic > section, .layout-basic > footer { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .layout-basic > header, .layout-basic > section, .layout-basic > footer { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .centered-container { margin: 0 auto; } @media only screen and (min-width: 0) { .centered-container { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .centered-container { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .centered-container { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .centered-container { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .centered-container { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .centered-container { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .su-alert { padding: 2rem; @@ -6317,22 +6485,28 @@ dfn { margin: 0 auto; } @media only screen and (min-width: 0) { .su-brand-bar__container { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .su-brand-bar__container { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .su-brand-bar__container { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .su-brand-bar__container { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .su-brand-bar__container { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .su-brand-bar__container { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) and (max-width: 575px) { .su-brand-bar__container { padding-right: 20px; @@ -6856,22 +7030,28 @@ button, margin: 0 auto; } @media only screen and (min-width: 0) { .global-footer .global-footer__container { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .global-footer .global-footer__container { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .global-footer .global-footer__container { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .global-footer .global-footer__container { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .global-footer .global-footer__container { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .global-footer .global-footer__container { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 768px) { .global-footer .global-footer__container { display: -webkit-box; diff --git a/core/scss/utilities/mixins/grid/_centered-column.scss b/core/scss/utilities/mixins/grid/_centered-column.scss index 02b3f1347..611f3c635 100644 --- a/core/scss/utilities/mixins/grid/_centered-column.scss +++ b/core/scss/utilities/mixins/grid/_centered-column.scss @@ -1,20 +1,26 @@ @charset "UTF-8"; // -// @centered-column($grid: $grid-media, $screens: $grid-screens) +// @centered-column($grid: $grid-media, $margin: $screen-margins) // // Centers a single cellin a container based on max width in breakpoints. // // Style guide: Mixins.Grid.centered-column // -@mixin centered-column($grid: $grid-media, $screens: $grid-screens, $gutters: $grid-gutters) { +@mixin centered-column($grid: $grid-media, $screens: $grid-screens, $margin: $screen-margins) { @include margin(0 auto); @each $code, $breakpoint in $grid { - $max-width: map-get($screens, $code); - $gutter: map-get($gutters, $code); + $spacing: map-get($margin, $code); @media #{$breakpoint} { - max-width: $max-width - $gutter; + @if breakpoint-max($code, $grid) == null { + $max-width: map-get($screens, $code); + max-width: $max-width; + width: calc(100% - #{$spacing * 2}); + } @else { + max-width: calc(100% - #{$spacing * 2}); + width: calc(100% - #{$spacing * 2}); + } } } } diff --git a/core/scss/utilities/variables/core/_breakpoints.scss b/core/scss/utilities/variables/core/_breakpoints.scss index 4406520cd..45cb08950 100644 --- a/core/scss/utilities/variables/core/_breakpoints.scss +++ b/core/scss/utilities/variables/core/_breakpoints.scss @@ -58,7 +58,7 @@ $screen-xl: 1200px !default; // // Styleguide: Variables.Core.Breakpoints.screen-2xl // -$screen-2xl: 1500px !default; +$screen-2xl: $site-max-width !default; // // $breakpoint-xs diff --git a/core/scss/utilities/variables/core/_magic-numbers.scss b/core/scss/utilities/variables/core/_magic-numbers.scss index 631d526d5..f2ce789e2 100644 --- a/core/scss/utilities/variables/core/_magic-numbers.scss +++ b/core/scss/utilities/variables/core/_magic-numbers.scss @@ -41,28 +41,6 @@ $lead-max-width: 85rem !default; // $site-max-width: 1500px !default; -// -// $site-margins -// -// For setting the margins of the project's grid system. -// -// Markup: $site-margins: 3rem !default; -// -// Styleguide: Variables.Core.Magic.site-margins -// -$site-margins: 3rem !default; - -// -// $site-margins-mobile -// -// For setting the margins of the project's grid system in mobile. -// -// Markup: $site-margins-mobile: 1.5rem !default; -// -// Styleguide: Variables.Core.Magic.site-margins-mobile -// -$site-margins-mobile: 1.5rem !default; - // // $input-max-width // @@ -95,14 +73,3 @@ $border-radius: 3px !default; // Styleguide: Variables.Core.Magic.focus-shadow // $focus-shadow: 0 0 3px $color-cool-grey, 0 0 7px $color-cool-grey !default; - -// -// $hit-area -// -// 44 x 44 pixels hit target following Apple iOS Human Interface Guidelines. -// -// Markup: $hit-area: 4.4rem !default; -// -// Styleguide: Variables.Core.Magic.hit-area -// -$hit-area: 4.4rem !default; diff --git a/core/scss/utilities/variables/core/_modular-spacing.scss b/core/scss/utilities/variables/core/_modular-spacing.scss index 19480bde1..ddda4e519 100644 --- a/core/scss/utilities/variables/core/_modular-spacing.scss +++ b/core/scss/utilities/variables/core/_modular-spacing.scss @@ -11,7 +11,7 @@ // 'md': 36px, // 'lg': 36px, // 'xl': 36px, -// '2xl': 38px, +// '2xl': 38px // ) !default; // // Styleguide: Variables.Core.modular-spacing diff --git a/core/scss/utilities/variables/core/_screen-margins.scss b/core/scss/utilities/variables/core/_screen-margins.scss new file mode 100644 index 000000000..344f7181c --- /dev/null +++ b/core/scss/utilities/variables/core/_screen-margins.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +// $screen-margins +// +// A sass map of screen margins for edge containment +// +//``` +// $screen-margins: ( +// 'xs': 20px, +// 'sm': 30px, +// 'md': 50px, +// 'lg': 80px, +// 'xl': 100px, +// '2xl': 100px +// ) !default; +// ``` +// +// Style guide: Variables.Core.screen-margins +// +$screen-margins: ( + 'xs': 20px, + 'sm': 30px, + 'md': 50px, + 'lg': 80px, + 'xl': 100px, + '2xl': 100px +) !default; diff --git a/core/scss/utilities/variables/core/index.scss b/core/scss/utilities/variables/core/index.scss index a3eac9224..a683f0a31 100644 --- a/core/scss/utilities/variables/core/index.scss +++ b/core/scss/utilities/variables/core/index.scss @@ -9,13 +9,14 @@ // @import + 'colors', + 'magic-numbers', // Needs to be up at the top. 'box-shadow', 'breakpoints', - 'colors', 'file-paths', 'grid', 'gutter', - 'magic-numbers', 'modular-spacing', 'modular-typography', + 'screen-margins', 'typography'; diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 696fa7810..f9eeddfe9 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -805,22 +805,28 @@ sub { margin: 0 auto; } @media only screen and (min-width: 0) { .is-fullscreen > .kss-style { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .is-fullscreen > .kss-style { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .is-fullscreen > .kss-style { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .is-fullscreen > .kss-style { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .is-fullscreen > .kss-style { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .is-fullscreen > .kss-style { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } .is-fullscreen .kss-title { margin-top: 0; } @@ -978,22 +984,28 @@ body { margin: 0 auto; } @media only screen and (min-width: 0) { #kss-node.kss-home .section--welcome:first-child { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--welcome:first-child { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--welcome:first-child { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--welcome:first-child { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--welcome:first-child { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--welcome:first-child { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } #kss-node.kss-home .section--welcome h1, #kss-node.kss-home .section--welcome h2, #kss-node.kss-home .section--welcome h3, @@ -1038,22 +1050,28 @@ body { border: 0; } @media only screen and (min-width: 0) { #kss-node.kss-home .section--ui-components .su-card { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--ui-components .su-card { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--ui-components .su-card { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--ui-components .su-card { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--ui-components .su-card { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--ui-components .su-card { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } #kss-node.kss-home .section--ui-components .su-card > img { display: block; margin-left: 0; @@ -1067,44 +1085,56 @@ body { text-align: center; } @media only screen and (min-width: 0) { #kss-node.kss-home .section--dev-resources h2 { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources h2 { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--dev-resources h2 { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--dev-resources h2 { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--dev-resources h2 { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--dev-resources h2 { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } #kss-node.kss-home .section--dev-resources .cards-container { margin: 0 auto; display: grid; display: -ms-grid; } @media only screen and (min-width: 0) { #kss-node.kss-home .section--dev-resources .cards-container { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--dev-resources .cards-container { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--dev-resources .cards-container { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--dev-resources .cards-container { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--dev-resources .cards-container { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--dev-resources .cards-container { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 0) { #kss-node.kss-home .section--dev-resources .cards-container { -ms-grid-columns: 1fr; @@ -1279,22 +1309,28 @@ body { margin: 0 auto; } @media only screen and (min-width: 0) { #kss-node.kss-home .section--more-info > div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { #kss-node.kss-home .section--more-info > div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { #kss-node.kss-home .section--more-info > div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { #kss-node.kss-home .section--more-info > div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { #kss-node.kss-home .section--more-info > div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { #kss-node.kss-home .section--more-info > div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } #kss-node.kss-home .section--more-info h2 { text-align: center; margin-bottom: 60px; } @@ -1484,40 +1520,40 @@ body { text-decoration-color: #009b76; } .layout { - position: relative; overflow: hidden; } - .layout::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - margin-right: auto; - margin-left: auto; - width: calc(100% - (2 * var(--offset))); - max-width: var(--max_width); - content: ''; - background-image: var(--background-columns), var(--background-baseline); - background-size: var(--background-width) 100%; - background-position: 0 var(--baseline-shift); - z-index: -100; - pointer-events: none; } - .layout::after { - content: var(--media-query); - position: absolute; - top: 4px; - right: 4px; - font-family: -apple-system, sans-serif; - color: var(--color-text); - display: block; - background-color: rgba(238, 238, 238, 0.75); - text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.75); - padding: 4px 6px; - border: 1px solid; - border-radius: 6px; - opacity: .8; } .layout > * { + position: relative; border: dashed 1px #2e2d29; } + .layout > *::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin-right: auto; + margin-left: auto; + width: calc(100% - (2 * var(--offset))); + max-width: var(--max_width); + content: ''; + background-image: var(--background-columns), var(--background-baseline); + background-size: var(--background-width) 100%; + background-position: 0 var(--baseline-shift); + z-index: -100; + pointer-events: none; } + .layout > *::after { + content: var(--media-query); + position: absolute; + top: 4px; + right: 4px; + font-family: -apple-system, sans-serif; + color: var(--color-text); + display: block; + background-color: rgba(238, 238, 238, 0.75); + text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.75); + padding: 4px 6px; + border: 1px solid; + border-radius: 6px; + opacity: .8; } .layout header { background-color: rgba(0, 0, 139, 0.15); } .layout footer { @@ -1596,22 +1632,28 @@ body { display: -ms-grid; } @media only screen and (min-width: 0) { .masthead div { - max-width: -20px; } } + max-width: calc(100% - 40px); + width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { .masthead div { - max-width: 556px; } } + max-width: calc(100% - 60px); + width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { .masthead div { - max-width: 748px; } } + max-width: calc(100% - 100px); + width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { .masthead div { - max-width: 956px; } } + max-width: calc(100% - 160px); + width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { .masthead div { - max-width: 1160px; } } + max-width: calc(100% - 200px); + width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { .masthead div { - max-width: 1452px; } } + max-width: 1500px; + width: calc(100% - 200px); } } @media only screen and (min-width: 768px) { .masthead div { -ms-grid-columns: 1fr 11fr; diff --git a/kss/builder/decanter/scss/_layout-colors.scss b/kss/builder/decanter/scss/_layout-colors.scss index 8e86ff189..bd693d8f7 100644 --- a/kss/builder/decanter/scss/_layout-colors.scss +++ b/kss/builder/decanter/scss/_layout-colors.scss @@ -5,10 +5,11 @@ // .layout { - @include visible-grid; + overflow: hidden; > * { + @include visible-grid; border: dashed 1px $color-black; }