Misc. layout adjustments (#1849)

* Increase horizontal container padding

* Slightly reduce cloud space

* Tweaks to Sky Nav spacing

* Slightly reduce max container padding

* Other misc. sizing tweaks

Author: tylersticka

.changeset/fifty-terms-beg.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': major
+---
+
+Adjusted breakpoints, max-widths and padding sizes of all full-width patterns (most notably the Container and Deck objects and the Sky Nav component) to better compose actual site content.

src/components/cloud-cover/cloud-cover.scss

@@ -24,12 +24,12 @@ $_gap: ms.step(1);
 /// crunch those numbers together.
 ///
 /// @param {Number} $amount [1] - Optional multiplier for default space.
-/// @param {Number} $vh [14vh] - Amount of horizontal space in the result.
-/// @param {Number} $vw [14vw] - Amount of vertical space in the result.
+/// @param {Number} $vh [12vh] - Amount of horizontal space in the result.
+/// @param {Number} $vw [3vw] - Amount of vertical space in the result.
 /// @return {Calc}
 /// @access private
 
-@function _cloud-space($amount: 1, $vh: 14vh, $vw: 4vw) {
+@function _cloud-space($amount: 1, $vh: 12vh, $vw: 3vw) {
   @if $amount == 1 {
     @return calc(#{$vh} + #{$vw});
   }

src/components/sky-nav/sky-nav.scss

@@ -45,7 +45,7 @@ $_label-pad-vertical: ms.step(-9);
 
 // Use the widest standard layout `max-width` plus buffer for horizontal space
 $_max-width: #{unit.strip(size.$max-width-spread) +
-  unit.strip($_space-horizontal * 2)}em;
+  unit.strip($_space-horizontal * 3)}em;
 
 // Height of masthead on small screens.
 $_masthead-height-sm: ms.step(7);
@@ -153,20 +153,22 @@ $_masthead-height-sm: ms.step(7);
  * The logo link element.
  *
  * 1. We apply whitespace to this element directly so its hit area is larger
- *    than it would be if whitespace were applied to the parent element.
+ *    than it would be if whitespace were applied to the parent element. We use
+ *    a bit less space for the logo since it has circular edges that feels
+ *    misaligned when only the curves touch the edges.
  * 2. Prevents Flexbox squashing when menu items overflow.
  */
 .c-sky-nav__logo {
   align-items: center;
   block-size: 100%; /* 1 */
   display: flex;
   flex: none; /* 2 */
-  padding: 0 $_space-horizontal; /* 1 */
+  padding: 0 math.div($_space-horizontal, 1.5); /* 1 */
 
   @media (min-width: $_breakpoint-wide) {
     block-size: auto;
     display: block;
-    padding: $_space-vertical $_space-horizontal; /* 1 */
+    padding-block: $_space-vertical; /* 1 */
   }
 }
 

src/components/sky-nav/sky-nav.twig

@@ -81,7 +81,7 @@
   @see https://github.com/twigjs/twig.js/issues/262
 #}
 {% if include_main_demo %}
-  <main class="o-container u-pad-1" id="{{ main_id }}">
+  <main class="o-container o-container--pad" id="{{ main_id }}">
     <div class="o-container__content">
       <p>Hello world! This is the main content.</p>
     </div>

src/prototypes/speaking-listing/example/example.twig

@@ -27,9 +27,7 @@
             tag_name: 'h2',
             content: 'Future Events',
           } only %}
-          {% embed '@cloudfour/objects/deck/deck.twig' with {
-            class: 'o-deck--3-column@l'
-          } %}
+          {% embed '@cloudfour/objects/deck/deck.twig' %}
             {% block content %}
               {% for item in future %}
                 <a href="#" class="media-link">
@@ -55,9 +53,7 @@
             tag_name: 'h2',
             content: 'Our Talks',
           } only %}
-          {% embed '@cloudfour/objects/deck/deck.twig' with {
-            class: 'o-deck--3-column@l'
-          } %}
+          {% embed '@cloudfour/objects/deck/deck.twig' %}
             {% block content %}
               {% for item in speaking %}
                 {% embed '@cloudfour/components/card/card.twig' with {

src/tokens/size/padding.js

@@ -20,12 +20,12 @@ module.exports = {
       container: {
         horizontal: {
           min: {
-            value: modularRem(-1),
+            value: modularRem(1),
             comment:
               'Minimum inline (horizontal) fluid padding for container objects.',
           },
           max: {
-            value: modularRem(3),
+            value: modularRem(5),
             comment:
               'Maximum inline (horizontal) padding for container objects.',
           },

src/tokens/size/shirts.json

@@ -4,8 +4,8 @@
     "s": { "value": "30em" },
     "m": { "value": "40em" },
     "l": { "value": "60em" },
-    "xl": { "value": "80em" },
-    "xxl": { "value": "100em" },
-    "xxxl": { "value": "120em" }
+    "xl": { "value": "72em" },
+    "xxl": { "value": "84em" },
+    "xxxl": { "value": "96em" }
   }
 }

src/tokens/size/sizing.js

@@ -25,7 +25,7 @@ module.exports = {
     width: {
       card_column: {
         min: {
-          value: '15em',
+          value: '16em',
           comment: 'The minimum space to display a default card in a grid.',
         },
       },