Changeset 11008

Timestamp:

06/04/2021 07:18:50 PM (3 years ago)

Author:

ryelle

Message:

Pattern Directory: Sync with git WordPress/pattern-directory@53b4aed1b62b05f8c61798ddc55ea0e02e1c765d

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns

Files:

• build/index.asset.php (modified) (1 diff)
• build/index.js (modified) (18 diffs)
• css/components/_copy-button.scss (modified) (1 diff)
• css/components/_favorite-button.scss (modified) (3 diffs)
• css/components/_pattern-grid.scss (modified) (1 diff)
• css/components/_pattern-preview.scss (modified) (1 diff)
• css/components/_pattern.scss (modified) (4 diffs)
• css/style.css (modified) (1 diff)
• functions.php (modified) (1 diff)
• package.json (modified) (2 diffs)
• single-wporg-pattern.php (modified) (1 diff)
• src/components/copy-pattern-button/index.js (modified) (3 diffs)
• src/components/pattern (added)
• src/components/pattern-preview-actions/copy-success-message.js (modified) (1 diff)
• src/components/pattern-preview-actions/index.js (modified) (1 diff)
• src/components/pattern-preview/index.js (modified) (2 diffs)
• src/components/pattern-thumbnail/index.js (modified) (3 diffs)
• src/components/pattern/index.js (added)
• src/index.js (modified) (2 diffs)
• src/store/test/reducer.js (modified) (1 diff)
• src/store/utils.js (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php

@@ -1 @@
-<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-data-controls', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-url', 'wp-viewport'), 'version' => '69bda82262cba00648d616539b4b3950');
+<?php return array('dependencies' => array('lodash', 'react', 'wp-a11y', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-data-controls', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-url', 'wp-viewport'), 'version' => '88b42ada86a2ad156755b4ba7a22b674');

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js

@@ -11198 +11198 @@
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils */ "./src/utils/index.js");
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lodash */ "lodash");
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/a11y */ "@wordpress/a11y");
+/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_a11y__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils/index.js");
+
 
 
@@ -11213 +11222 @@
 
 /**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
  * Internal dependencies
  */
@@ -11219 +11236 @@
 
 var CopyPatternButton = function CopyPatternButton(_ref) {
-  var onSuccess = _ref.onSuccess;
+  var _ref$isSmall = _ref.isSmall,
+      isSmall = _ref$isSmall === void 0 ? false : _ref$isSmall,
+      _ref$onSuccess = _ref.onSuccess,
+      onSuccess = _ref$onSuccess === void 0 ? lodash__WEBPACK_IMPORTED_MODULE_3__["noop"] : _ref$onSuccess,
+      content = _ref.content;
+
+  var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(false),
+      _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
+      copied = _useState2[0],
+      setCopied = _useState2[1];
+
+  if (!content) {
+    // Grab the pattern markup from hidden input
+    var blockData = document.getElementById('block-data');
+    content = JSON.parse(decodeURIComponent(blockData.value));
+  }
 
   var handleClick = function handleClick(_ref2) {
     var target = _ref2.target;
-    // Grab the pattern markup from hidden input
-    var blockData = document.getElementById('block-data');
-    var blockPattern = JSON.parse(decodeURIComponent(blockData.value));
-    var success = Object(_utils__WEBPACK_IMPORTED_MODULE_3__["copyToClipboard"])(blockPattern); // Make sure we reset focus in case it was lost in the 'copy' command.
+    var success = Object(_utils__WEBPACK_IMPORTED_MODULE_7__["copyToClipboard"])(content);
+    setCopied(success); // Make sure we reset focus in case it was lost in the 'copy' command.
 
     target.focus();
@@ -11236 +11266 @@
   };
 
-  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__["Button"], {
+  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
+    if (!copied) {
+      return;
+    }
+
+    Object(_wordpress_a11y__WEBPACK_IMPORTED_MODULE_5__["speak"])(Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__["__"])('Copied pattern to clipboard.', 'wporg-patterns'));
+    var timer = setTimeout(function () {
+      return setCopied(false);
+    }, 20000);
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [copied]);
+
+  var label = Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__["__"])('Copy Pattern', 'wporg-patterns');
+
+  if (isSmall) {
+    label = copied ? Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__["__"])('Copied', 'wporg-patterns') : Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__["__"])('Copy', 'wporg-patterns');
+  }
+
+  var classes = classnames__WEBPACK_IMPORTED_MODULE_2___default()({
+    'pattern__copy-button': true,
+    'is-small-label': isSmall
+  });
+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__["Button"], {
+    className: classes,
     isPrimary: true,
     onClick: handleClick
-  }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Copy Pattern', 'wporg-patterns'));
+  }, label);
 };
 
@@ -12013 +12068 @@
     className: "pattern-actions__notice",
     status: "success",
-    isDismissible: false
-  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("b", null, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Pattern copied!', 'wporg-patterns')), Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])(' Now you can paste it into any WordPress post or page.', 'wporg-patterns')), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__["Button"], {
-    onClick: onClick,
-    isSecondary: true
-  }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Learn More', 'wporg-patterns')));
+    isDismissible: false,
+    actions: [{
+      label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Learn More', 'wporg-patterns'),
+      onClick: onClick,
+      variant: 'secondary'
+    }]
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("b", null, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Pattern copied!', 'wporg-patterns')), Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])(' Now you can paste it into any WordPress post or page.', 'wporg-patterns')));
 };
 
@@ -12058 +12115 @@
 
 var PatternPreviewActions = function PatternPreviewActions(_ref) {
-  var patternId = _ref.patternId;
+  var postId = _ref.postId;
 
   var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(false),
@@ -12070 +12127 @@
       setShowGuide = _useState4[1];
 
-  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_copy_pattern_button__WEBPACK_IMPORTED_MODULE_2__["default"], {
+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
+    className: "pattern-actions"
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
+    className: "pattern-actions__container"
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_copy_pattern_button__WEBPACK_IMPORTED_MODULE_2__["default"], {
     onSuccess: function onSuccess() {
       return setShowSuccess(true);
     }
   }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_favorite_button__WEBPACK_IMPORTED_MODULE_3__["default"], {
-    patternId: patternId
+    patternId: postId
   }), showSuccess && Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_copy_success_message__WEBPACK_IMPORTED_MODULE_4__["default"], {
     onClick: function onClick() {
@@ -12084 +12145 @@
       return setShowGuide(false);
     }
-  }));
+  })));
 };
 
@@ -12216 +12277 @@
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose");
-/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _canvas__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./canvas */ "./src/components/pattern-preview/canvas.js");
-/* harmony import */ var _drag_handle__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./drag-handle */ "./src/components/pattern-preview/drag-handle.js");
+/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js");
+/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose");
+/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _canvas__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./canvas */ "./src/components/pattern-preview/canvas.js");
+/* harmony import */ var _drag_handle__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./drag-handle */ "./src/components/pattern-preview/drag-handle.js");
+
 
 
@@ -12246 +12310 @@
 /* eslint-disable jsx-a11y/anchor-is-valid -- These are just placeholders. */
 
-var INITIAL_WIDTH = 1200;
+var INITIAL_WIDTH = 960;
 
 function PatternPreview(_ref) {
   var blockContent = _ref.blockContent;
-  var instanceId = Object(_wordpress_compose__WEBPACK_IMPORTED_MODULE_3__["useInstanceId"])(PatternPreview);
-
-  var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(window.innerWidth < INITIAL_WIDTH ? window.innerWidth : INITIAL_WIDTH),
-      _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
+  var showViewportControl = Object(_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__["useViewportMatch"])('mobile', '>=');
+  var showViewportControlDefault = Object(_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__["useViewportMatch"])('large', '>=');
+  var showViewportControlLarge = Object(_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__["useViewportMatch"])('wide', '>=');
+  var instanceId = Object(_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__["useInstanceId"])(PatternPreview);
+
+  var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["useState"])(window.innerWidth < INITIAL_WIDTH ? window.innerWidth : INITIAL_WIDTH),
+      _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
       width = _useState2[0],
       setWidth = _useState2[1];
 
-  var onDragChange = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useCallback"])(function (delta) {
-    setWidth(function (value) {
+  var onDragChange = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["useCallback"])(function (delta) {
+    return setWidth(function (value) {
       return value + delta;
     });
   }, [setWidth]);
-  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
+  var availableWidths = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["useMemo"])(function () {
+    // Less than 480 wide.
+    if (!showViewportControl) {
+      return [];
+    }
+
+    if (showViewportControlLarge) {
+      // More than 1280 wide.
+      return [{
+        label: 'Full (1200px)',
+        value: 1200
+      }, {
+        label: 'Default (960px)',
+        value: 960
+      }, {
+        label: 'Medium (480px)',
+        value: 480
+      }, {
+        label: 'Narrow (320px)',
+        value: 320
+      }];
+    } else if (showViewportControlDefault) {
+      // Less than 1280, more than 960.
+      return [{
+        label: 'Default (960px)',
+        value: 960
+      }, {
+        label: 'Medium (480px)',
+        value: 480
+      }, {
+        label: 'Narrow (320px)',
+        value: 320
+      }];
+    } // Less than 960, but larger than 480.
+
+
+    return [{
+      label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Medium (480px)', 'wporg-patterns'),
+      value: 480
+    }, {
+      label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Narrow (320px)', 'wporg-patterns'),
+      value: 320
+    }];
+  }, [showViewportControl, showViewportControlDefault, showViewportControlLarge]);
+  var currentOpt = false;
+
+  if (!availableWidths.some(function (opt) {
+    return opt.value === width;
+  })) {
+    currentOpt = {
+      /* translators: %s is the width in pixels, ex 600. */
+      label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["sprintf"])(Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Current (%spx)', 'wporg-patterns'), width),
+      value: width
+    };
+  }
+
+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])("div", {
+    className: "pattern-preview__size-control"
+  }, showViewportControl && Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__["SelectControl"], {
+    hideLabelFromVision: true,
+    label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Preview Width', 'wporg-patterns'),
+    value: width,
+    options: currentOpt ? [currentOpt].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(availableWidths)) : availableWidths,
+    onChange: function onChange(value) {
+      return setWidth(Number(value));
+    }
+  })), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])("div", {
     className: "pattern-preview__viewport",
     style: {
-      width: width
+      width: width + 40
     }
-  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_drag_handle__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Drag to resize', 'wporg-patterns'),
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])(_drag_handle__WEBPACK_IMPORTED_MODULE_7__["default"], {
+    label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Drag to resize', 'wporg-patterns'),
     className: "is-left",
     onDragChange: onDragChange,
     direction: "left",
     "aria-describedby": "pattern-preview__resize-help-".concat(instanceId)
-  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_canvas__WEBPACK_IMPORTED_MODULE_5__["default"], {
+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])(_canvas__WEBPACK_IMPORTED_MODULE_6__["default"], {
     html: blockContent
-  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_drag_handle__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Drag to resize', 'wporg-patterns'),
+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])(_drag_handle__WEBPACK_IMPORTED_MODULE_7__["default"], {
+    label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Drag to resize', 'wporg-patterns'),
     className: "is-right",
     onDragChange: onDragChange,
     direction: "right",
     "aria-describedby": "pattern-preview__resize-help-".concat(instanceId)
-  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["VisuallyHidden"], {
+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__["VisuallyHidden"], {
     id: "pattern-preview__resize-help-".concat(instanceId),
     className: "pattern-preview__resize-help"
-  }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Use left and right arrow keys to resize the preview.', 'wporg-patterns'))));
+  }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Use left and right arrow keys to resize the preview.', 'wporg-patterns'))));
 }
 
@@ -12389 +12522 @@
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/a11y */ "@wordpress/a11y");
-/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
-/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _favorite_button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../favorite-button */ "./src/components/favorite-button/index.js");
-/* harmony import */ var _canvas__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./canvas */ "./src/components/pattern-thumbnail/canvas.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils/index.js");
-
-
-
-/**
- * WordPress dependencies
- */
-
-
-
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _favorite_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../favorite-button */ "./src/components/favorite-button/index.js");
+/* harmony import */ var _copy_pattern_button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../copy-pattern-button */ "./src/components/copy-pattern-button/index.js");
+/* harmony import */ var _canvas__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./canvas */ "./src/components/pattern-thumbnail/canvas.js");
+
+
+/**
+ * WordPress dependencies
+ */
 
 /**
@@ -12422 +12545 @@
 function PatternThumbnail(_ref) {
   var pattern = _ref.pattern;
-
-  var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(false),
-      _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
-      copied = _useState2[0],
-      setCopied = _useState2[1];
-
-  var handleCopy = function handleCopy() {
-    var result = Object(_utils__WEBPACK_IMPORTED_MODULE_7__["copyToClipboard"])(pattern.pattern_content);
-    setCopied(result);
-  };
-
-  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
-    if (!copied) {
-      return;
-    }
-
-    Object(_wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__["speak"])(Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["sprintf"])(
-    /* translators: %s: pattern title. */
-    Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Copied %s pattern to clipboard.', 'wporg-patterns'), pattern.title.rendered));
-    var timer = setTimeout(function () {
-      return setCopied(false);
-    }, 20000);
-    return function () {
-      clearTimeout(timer);
-    };
-  }, [copied]);
-  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
     className: "pattern-grid__pattern"
-  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("a", {
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("a", {
     href: pattern.link,
     rel: "bookmark"
-  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("span", {
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
     className: "screen-reader-text"
-  }, pattern.title.rendered), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Disabled"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_canvas__WEBPACK_IMPORTED_MODULE_6__["default"], {
+  }, pattern.title.rendered), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__["Disabled"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_canvas__WEBPACK_IMPORTED_MODULE_4__["default"], {
     className: "pattern-grid__preview",
     html: pattern.content.rendered
-  }))), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
+  }))), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
     className: "pattern-grid__actions"
-  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("h2", {
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("h2", {
     className: "pattern-grid__title"
-  }, pattern.title.rendered), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_favorite_button__WEBPACK_IMPORTED_MODULE_5__["default"], {
+  }, pattern.title.rendered), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_favorite_button__WEBPACK_IMPORTED_MODULE_2__["default"], {
     showLabel: false,
     patternId: pattern.id
-  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Button"], {
-    className: "pattern__copy-button is-small",
-    isPrimary: true,
-    onClick: handleCopy
-  }, copied ? Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Copied!', 'wporg-patterns') : Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Copy', 'wporg-patterns'))));
+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_copy_pattern_button__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    isSmall: true,
+    content: pattern.pattern_content
+  })));
 }
 
 /* harmony default export */ __webpack_exports__["default"] = (PatternThumbnail);
+
+/***/ }),
+
+/***/ "./src/components/pattern/index.js":
+/*!*****************************************!*\
+  !*** ./src/components/pattern/index.js ***!
+  \*****************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _pattern_preview__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../pattern-preview */ "./src/components/pattern-preview/index.js");
+/* harmony import */ var _pattern_preview_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../pattern-preview-actions */ "./src/components/pattern-preview-actions/index.js");
+/* harmony import */ var _report_pattern_button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../report-pattern-button */ "./src/components/report-pattern-button/index.js");
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+var Pattern = function Pattern(_ref) {
+  var content = _ref.content,
+      postId = _ref.postId,
+      userHasReported = _ref.userHasReported,
+      loggedIn = _ref.loggedIn;
+  // postId as passed from the HTML dataset is a string.
+  postId = Number(postId) || 0;
+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_preview_actions__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    postId: postId
+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_preview__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    blockContent: content
+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
+    className: "pattern__meta"
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_report_pattern_button__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    userHasReported: userHasReported === 'true',
+    loggedIn: loggedIn === 'true',
+    postId: postId
+  })));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (Pattern);
 
 /***/ }),
@@ -13049 +13192 @@
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _components_pattern_preview__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/pattern-preview */ "./src/components/pattern-preview/index.js");
-/* harmony import */ var _components_pattern_preview_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/pattern-preview-actions */ "./src/components/pattern-preview-actions/index.js");
-/* harmony import */ var _components_report_pattern_button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/report-pattern-button */ "./src/components/report-pattern-button/index.js");
-/* harmony import */ var _components_patterns__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/patterns */ "./src/components/patterns/index.js");
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js");
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _components_pattern__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/pattern */ "./src/components/pattern/index.js");
+/* harmony import */ var _components_patterns__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/patterns */ "./src/components/patterns/index.js");
+
 
 
@@ -13066 +13210 @@
 
 
-
-
- // Load the preview into any awaiting preview container.
+ // Load the grid into the awaiting preview container.
+
+var gridContainer = document.getElementById('patterns__container');
+
+if (gridContainer) {
+  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_components_patterns__WEBPACK_IMPORTED_MODULE_3__["default"], null), gridContainer);
+} // Load the preview into any awaiting preview container.
+
 
 var previewContainers = document.querySelectorAll('.pattern-preview__container');
@@ -13074 +13223 @@
 var _loop = function _loop(i) {
   var container = previewContainers[i];
-  var blockContent = JSON.parse(decodeURIComponent(container.innerText)); // Use `wp.blocks.parse` to convert HTML to block objects (for use in editor), if needed.
-
-  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_pattern_preview__WEBPACK_IMPORTED_MODULE_1__["default"], {
-    blockContent: blockContent
-  }), container, function () {
+  var blockContent = JSON.parse(decodeURIComponent(container.innerText));
+  var props = container.dataset;
+  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_components_pattern__WEBPACK_IMPORTED_MODULE_2__["default"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, props, {
+    content: blockContent
+  })), container, function () {
     // This callback is called after the render to unhide the container.
     container.hidden = false;
@@ -13086 +13235 @@
 for (var i = 0; i < previewContainers.length; i++) {
   _loop(i);
-} // Load the preview into any awaiting preview container.
-
-
-var gridContainer = document.getElementById('patterns__container');
-
-if (gridContainer) {
-  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_patterns__WEBPACK_IMPORTED_MODULE_4__["default"], null), gridContainer);
-} // Load the pattern preview actions
-
-
-var patternActionsContainer = document.getElementById('pattern-actions');
-
-if (patternActionsContainer) {
-  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_pattern_preview_actions__WEBPACK_IMPORTED_MODULE_2__["default"], {
-    patternId: Number(patternActionsContainer.dataset.id)
-  }), patternActionsContainer);
-} // Load report button
-
-
-var patternReportContainer = document.getElementById('pattern-report');
-
-if (patternReportContainer) {
-  var _patternReportContain = patternReportContainer.dataset,
-      loggedIn = _patternReportContain.loggedIn,
-      postId = _patternReportContain.postId,
-      userHasReported = _patternReportContain.userHasReported;
-  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_report_pattern_button__WEBPACK_IMPORTED_MODULE_3__["default"], {
-    userHasReported: userHasReported === 'true',
-    loggedIn: loggedIn === 'true',
-    postId: postId
-  }), patternReportContainer);
 }
 
@@ -14247 +14365 @@
     // Slug matches url
     name: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('All', 'wporg-patterns'),
-    link: '/'
+    link: wporgSiteUrl
   };
 }
@@ -14673 +14791 @@
 /***/ }),
 
+/***/ "lodash":
+/*!*************************!*\
+  !*** external "lodash" ***!
+  \*************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["lodash"]; }());
+
+/***/ }),
+
 /***/ "react":
 /*!************************!*\

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_copy-button.scss

@@ -1 +1 @@
 .pattern__copy-button {
-    transition: all 0.075s ease-in-out;
-
-    &.is-small {
-        font-size: 0.75rem;
-        padding: 0.75rem;
-        height: auto;
+    &.is-small-label {
+        box-shadow: 0 1px 2px rgba($color-black, 0.15);
     }
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss

@@ -5 +5 @@
     width: 2.25rem;
     border-radius: 2px;
-    color: $color-gray-400;
+    color: $color__text;
 
     svg {
@@ -39 +39 @@
     }
 
+    &.has-label {
+        padding: 12px 18px 12px 38px;
+        height: auto;
+        width: auto;
+
+        svg {
+            top: calc(50% - 12px);
+            left: 9px;
+
+            path {
+                fill: $color-black;
+            }
+        }
+    }
+
     &.is-favorited {
-        color: $color__text;
-
         svg path {
             fill: $color-alert-red;
@@ -62 +75 @@
             }
         }
-    }
-
-    &.has-label {
-        padding: 12px 18px 12px 38px;
-        height: auto;
-        width: auto;
-
-        svg {
-            top: calc(50% - 12px);
-            left: 9px;
-        }
-    }
-
-    &[disabled] {
-        background: transparent !important;
-        text-shadow: none !important;
-        color: $color-gray-400 !important;
     }
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-grid.scss

@@ -62 +62 @@
         }
 
-        .button + .button {
+        .button + .components-button {
             margin-left: 0.375rem;
         }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-preview.scss

@@ -1 +1 @@
 .pattern-preview__container {
-    padding: 2rem 0 0;
+    padding: 0;
     background: $color-gray-light-200;
+}
+
+.pattern-preview__size-control {
+    margin: 0 auto;
+    padding: 1rem 0;
+    max-width: 12rem;
+
+    .components-base-control__field {
+        margin-bottom: 0;
+    }
 }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern.scss

@@ -11 +11 @@
     }
 
-    .entry-header {
+    .entry-header,
+    .pattern-actions__container,
+    .pattern__meta {
         max-width: $size__site-main;
         padding: 1.5rem;
@@ -18 +20 @@
 
         @media only screen and (min-width: $breakpoint-large) {
-            padding: 1.5rem 0;
+            padding-left: 0;
+            padding-right: 0;
         }
+    }
+
+    .entry-header {
+        padding-top: 2.625rem;
+        padding-bottom: 1.875rem;
 
         .entry-title {
             margin-top: 0;
             line-height: 1.2;
+            font-weight: 600;
         }
     }
 
+    .pattern__categories a {
+        display: inline-block;
+        margin-right: 1rem;
+
+        &:last-of-type {
+            margin-right: 0;
+        }
+    }
+
+    .pattern__categories-label {
+        margin-right: 1rem;
+        font-weight: 600;
+        font-size: 0.75rem;
+        line-height: 1.3333;
+        text-transform: uppercase;
+    }
+
     .pattern-actions {
+        padding: 0 1.5rem 2rem;
+        background: $color-white;
+
+        button {
+            margin: 0;
+        }
+
+        @media only screen and (min-width: $breakpoint-large) {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+    .pattern-actions__container {
+        padding: 0;
         display: flex;
         justify-content: flex-start;
@@ -33 +74 @@
         flex-wrap: wrap;
         gap: 0.5em 2em;
-
-        button {
-            margin: 0;
-        }
 
         @media (max-width: $breakpoint-mobile) {
@@ -106 +143 @@
 
     .pattern__meta {
-        padding: 2rem 0;
-        background: $color-gray-light-200;
-
-        > div {
-            max-width: $size__site-main;
-            margin-left: auto;
-            margin-right: auto;
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .pattern-preview__report {
-            text-align: right;
-        }
+        display: flex;
+        justify-content: flex-end;
     }
-
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css

@@ -1 @@
-@charset "UTF-8";[class*=col-]{margin:inherit}.row{display:flex;flex-direction:row;flex-wrap:wrap}@media (max-width:768px){.row{flex-direction:column;flex-wrap:nowrap}}.row.gutters>.row{margin-left:-2%}@media (max-width:768px){.row.gutters>.row{margin-left:0}}.row.gutters>.row>[class*=col-]{margin-left:2%}@media (max-width:768px){.row.gutters>.row>[class*=col-]{margin-left:0}}.row.around{justify-content:space-around}.row.between{justify-content:space-between}.row.auto .col{flex-grow:1}.col-1{width:8.3333333333%}.offset-1{margin-left:8.3333333333%}.col-2{width:16.6666666667%}.offset-2{margin-left:16.6666666667%}.col-3{width:25%}.offset-3{margin-left:25%}.col-4{width:33.3333333333%}.offset-4{margin-left:33.3333333333%}.col-5{width:41.6666666667%}.offset-5{margin-left:41.6666666667%}.col-6{width:50%}.offset-6{margin-left:50%}.col-7{width:58.3333333333%}.offset-7{margin-left:58.3333333333%}.col-8{width:66.6666666667%}.offset-8{margin-left:66.6666666667%}.col-9{width:75%}.offset-9{margin-left:75%}.col-10{width:83.3333333333%}.offset-10{margin-left:83.3333333333%}.col-11{width:91.6666666667%}.offset-11{margin-left:91.6666666667%}.col-12{width:100%}.offset-12{margin-left:100%}.gutters>.col-1{width:6.33333%}.gutters>.col-1:nth-child(n+13){margin-top:2%}.gutters>.offset-1{margin-left:10.33333%!important}.gutters>.col-2{width:14.66667%}.gutters>.col-2:nth-child(n+7){margin-top:2%}.gutters>.offset-2{margin-left:18.66667%!important}.gutters>.col-3{width:23%}.gutters>.col-3:nth-child(n+5){margin-top:2%}.gutters>.offset-3{margin-left:27%!important}.gutters>.col-4{width:31.33333%}.gutters>.col-4:nth-child(n+4){margin-top:2%}.gutters>.offset-4{margin-left:35.33333%!important}.gutters>.col-5{width:39.66667%}.gutters>.offset-5{margin-left:43.66667%!important}.gutters>.col-6{width:48%}.gutters>.col-6:nth-child(n+3){margin-top:2%}.gutters>.offset-6{margin-left:52%!important}.gutters>.col-7{width:56.33333%}.gutters>.offset-7{margin-left:60.33333%!important}.gutters>.col-8{width:64.66667%}.gutters>.offset-8{margin-left:68.66667%!important}.gutters>.col-9{width:73%}.gutters>.offset-9{margin-left:77%!important}.gutters>.col-10{width:81.33333%}.gutters>.offset-10{margin-left:85.33333%!important}.gutters>.col-11{width:89.66667%}.gutters>.offset-11{margin-left:93.66667%!important}.gutters>.col-12{width:98%}.gutters>.offset-12{margin-left:102%!important}@media (max-width:768px){[class*=" offset-"],[class^=offset-]{margin-left:0}}.first{order:-1}.last{order:1}@media (max-width:768px){.row [class*=col-]{margin-left:0;width:100%}.row.gutters [class*=col-]{margin-bottom:16px}.first-sm{order:-1}.last-sm{order:1}}.gutters .column.push-left,.push-left{margin-right:auto}.gutters .column.push-right,.push-right{margin-left:auto}.gutters .column.push-center,.push-center{margin-left:auto;margin-right:auto}.gutters .column.push-middle,.push-middle{margin-top:auto;margin-bottom:auto}.push-bottom{margin-top:auto}@media (max-width:768px){.gutters .column.push-left-sm,.push-left-sm{margin-left:0}.gutters .column.push-center-sm,.push-center-sm{margin-left:auto;margin-right:auto}.push-top-sm{margin-top:0}}.align-middle{align-items:center}.align-right{justify-content:flex-end}.align-center{justify-content:center}@media (max-width:768px){.align-left-sm{justify-content:flex-start}}.float-right{float:right}.float-left{float:left}@media (max-width:768px){.float-left,.float-right{float:none}}.fixed{position:fixed;top:0;left:0;z-index:100;width:100%}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}optgroup{font-weight:700}table{border-spacing:0}td,th{padding:0}p{margin:1rem 0}cite,dfn,em,i{font-style:italic}blockquote{margin:0 1.5rem}address{margin:0 0 1.5rem}pre{background:#eee;font-family:Courier\ 10 Pitch,Courier,monospace;font-size:.9375rem;line-height:1.6;margin-bottom:1.6rem;max-width:100%;overflow:auto;padding:1.6rem}code,kbd,tt,var{font-family:Monaco,Consolas,Andale Mono,DejaVu Sans Mono,monospace;font-size:.9375rem}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{background:#fff9c0;text-decoration:none}big{font-size:125%}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background:#fff}blockquote,q{quotes:"" ""}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote{border-left:2px solid #767676;color:#767676;margin:1rem 0;padding-left:.8rem}blockquote cite{font-size:.8rem}figure{margin:0}hr{background-color:#eee;border:0;height:2px;margin:5rem auto}img{height:auto;max-width:100%}h1,h2,h3,h4,h5,h6{font-family:Open Sans,sans-serif;clear:both;line-height:1.5;margin:2rem 0 1rem}.h1,h1{font-size:2.44140625rem}.h1,.h2,h1,h2{font-weight:300}.h2,h2{font-size:1.953125rem}.h3,h3{font-size:1.5625rem;font-weight:400}.h4,h4{font-size:1.25rem;color:#32373c;font-weight:600;padding:0}.h5,h5{font-size:1rem;letter-spacing:.01rem}.h5,.h6,h5,h6{font-weight:600;text-transform:uppercase}.h6,h6{font-size:.8rem;letter-spacing:.8px}a{color:#0073aa;text-decoration:none}a:active,a:focus,a:hover{text-decoration:underline}a:focus{outline:thin dotted}a:active,a:hover{outline:0}li>a,p a{text-decoration:underline}li>a:hover,p a:hover{color:#d54e21}ol,ul{margin:0 0 1.5em 1.5em;padding:0}ul{list-style:square}ol{list-style:decimal}ol.unmarked-list,ul.unmarked-list{list-style:none;padding-left:0}li>ol,li>ul{margin-bottom:0}dt{font-weight:700}dd{margin:0 1.5em 1.5em}table{border:1px solid #eee;border-collapse:collapse;font-size:.8rem;margin:0 0 1rem;padding:0;width:100%}table thead{background:#32373c;color:#fff}table td,table th{border:1px solid #eee;font-weight:400;margin:0;padding:.4rem;text-align:left;vertical-align:top}table tbody tr:nth-child(2n){background:#f7f7f7}html{font-size:100%}body,button,input,select,textarea{color:#32373c;font-family:Open Sans,sans-serif;font-size:100%;line-height:1.5}@media screen and (min-width:737px){html{font-size:1.125rem}}.custom-select{display:inline-block;box-sizing:border-box;padding:.5rem 2rem .5rem .8rem;width:auto;font-size:1em;line-height:1.3;border:1px solid #6c7782;box-shadow:none;border-radius:.5em;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:transparent;background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A');background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}.custom-select::-ms-expand{display:none}.custom-select:focus{box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}.custom-select option{font-weight:400}html{font-size:1rem}@media screen and (min-width:737px){html{font-size:1rem}}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}.site-content[tabindex="-1"]:focus{outline:0}.no-js .hide-if-no-js{display:none}.alignleft{display:inline;float:left;margin-right:1.5em}.alignright{display:inline;float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}@media screen and (max-width:480px){.alignleft,.alignright{display:block;float:none;margin-left:auto;margin-right:auto}}.button,.button-primary,.button-secondary,.plugin-upload-form .button-primary{border:1px solid;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:.8rem;height:1.5625rem;line-height:1;margin:0;padding:0 .8rem;text-decoration:none;white-space:nowrap;-webkit-appearance:none}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0;padding:0}.button-group.button-xl .button,.button.button-xl{font-size:1rem;height:2.44140625rem;line-height:1;padding:0 1.5rem}.button-group.button-large .button,.button.button-large{height:1.953125rem;line-height:1;padding:0 1rem}.button-group.button-small .button,.button.button-small{font-size:.64rem;height:1.25rem;line-height:1;padding:0 .5rem}a.button,a.button-primary,a.button-secondary{line-height:1.5625rem}.button-group.button-large a.button,a.button.button-large{line-height:1.953125rem}.button-group.button-xl a.button,a.button.button-xl{line-height:2.44140625rem}.button-group.button-small a.button,a.button.button-small{line-height:1.25rem}.button:active,.button:focus{outline:none}.button.hidden{display:none}input[type=reset],input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{background:none;border:none;box-shadow:none;padding:0 2px 1px;width:auto}.button,.button-secondary,.button:visited{background:#f7f7f7;border-color:#ccc;box-shadow:0 1px 0 #ccc;color:#555;vertical-align:top}p .button{vertical-align:baseline}.button-secondary:focus,.button-secondary:hover,.button.focus,.button.hover,.button:focus,.button:hover{background:#fafafa;border-color:#999;color:#23282d}.button-link:focus,.button-secondary:focus,.button.focus,.button:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.button-secondary:active,.button.active,.button.active:hover,.button:active{background:#eee;border-color:#999;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);transform:translateY(1px)}.button.active:focus{border-color:#5b9dd9;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(0,115,170,.8)}.button-disabled,.button-secondary.disabled,.button-secondary:disabled,.button-secondary[disabled],.button.disabled,.button:disabled,.button[disabled]{background:#f7f7f7!important;border-color:#ddd!important;box-shadow:none!important;color:#a0a5aa!important;cursor:default;text-shadow:0 1px 0 #fff!important;transform:none!important}.button-link,input[type=submit].button-link{background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;margin:0;outline:none;padding:0}.button-link:focus{outline:1px solid #5b9dd9}.button-primary,.download-button,.plugin-upload-form .button-primary{text-decoration:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.button-primary,.button-primary:visited,.download-button,.download-button:visited,.plugin-upload-form .button-primary,.plugin-upload-form .button-primary:visited{background:#0085ba;border-color:#0073aa #006799 #006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary.hover,.button-primary:focus,.button-primary:hover,.download-button.focus,.download-button.hover,.download-button:focus,.download-button:hover,.plugin-upload-form .button-primary.focus,.plugin-upload-form .button-primary.hover,.plugin-upload-form .button-primary:focus,.plugin-upload-form .button-primary:hover{background:#008ec2;border-color:#006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary:focus,.download-button.focus,.download-button:focus,.plugin-upload-form .button-primary.focus,.plugin-upload-form .button-primary:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}.button-primary.active,.button-primary.active:focus,.button-primary.active:hover,.button-primary:active,.download-button.active,.download-button.active:focus,.download-button.active:hover,.download-button:active,.plugin-upload-form .button-primary.active,.plugin-upload-form .button-primary.active:focus,.plugin-upload-form .button-primary.active:hover,.plugin-upload-form .button-primary:active{background:#0073aa;border-color:#006799;box-shadow:inset 0 2px 0 #006799;vertical-align:top}.button-primary.disabled,.button-primary:disabled,.button-primary[disabled],.download-button.disabled,.download-button:disabled,.download-button[disabled],.plugin-upload-form .button-primary.disabled,.plugin-upload-form .button-primary:disabled,.plugin-upload-form .button-primary[disabled]{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-primary.button.button-hero,.download-button.button.button-hero,.plugin-upload-form .button-primary.button.button-hero{box-shadow:0 2px 0 #006799}.button-primary.button.button-hero.active,.button-primary.button.button-hero.active:focus,.button-primary.button.button-hero.active:hover,.button-primary.button.button-hero:active,.download-button.button.button-hero.active,.download-button.button.button-hero.active:focus,.download-button.button.button-hero.active:hover,.download-button.button.button-hero:active,.plugin-upload-form .button-primary.button.button-hero.active,.plugin-upload-form .button-primary.button.button-hero.active:focus,.plugin-upload-form .button-primary.button.button-hero.active:hover,.plugin-upload-form .button-primary.button.button-hero:active{box-shadow:inset 0 3px 0 #006799}.button-primary-disabled{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-group{display:inline-block;font-size:0;position:relative;vertical-align:middle;white-space:nowrap}.button-group>.button{border-radius:0;display:inline-block;margin-right:-1px;z-index:10}.button-group>.button-primary{z-index:100}.button-group>.button:hover{z-index:20}.button-group>.button:first-child{border-radius:3px 0 0 3px}.button-group>.button:last-child{border-radius:0 3px 3px 0}.button-group>.button:focus{position:relative;z-index:1}@media screen and (max-width:737px){.button,.button.button-large,.button.button-small,.plugin-upload-form .button-primary{font-size:14px;height:auto;line-height:normal;margin-bottom:4px;padding:6px 14px;vertical-align:middle}}.clear:after,.clear:before,.comment-content:after,.comment-content:before,.entry-content:after,.entry-content:before,.home-below:after,.home-below:before,.site-content:after,.site-content:before,.site-footer:after,.site-footer:before,.site-header:after,.site-header:before{content:"";display:table;table-layout:fixed}.clear:after,.comment-content:after,.entry-content:after,.home-below:after,.site-content:after,.site-footer:after,.site-header:after{clear:both}p.subheading{color:#82878c;font-weight:300;margin:-.4rem auto 2rem;text-align:center}p.intro,p.subheading{font-size:1.25rem}p.aside{font-size:.8rem}p.note{font-size:.64rem;letter-spacing:.01rem;max-width:18.1898940355rem}input,textarea{box-sizing:border-box}input[type=checkbox],input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=radio],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background-color:#fff;border:1px solid #ddd;box-shadow:inset 0 1px 2px rgba(0,0,0,.07);color:#32373c;outline:none;transition:border-color .05s ease-in-out}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#5b9dd9;box-shadow:0 0 2px rgba(30,140,190,.8)}input[type=email],input[type=url]{direction:ltr}input[type=number]{height:28px;line-height:inherit}input[type=checkbox],input[type=radio]{background:#fff;border:1px solid #b4b9be;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);clear:none;color:#555;cursor:pointer;display:inline-block;height:16px;line-height:0;margin:-4px 4px 0 0;min-width:16px;outline:0;padding:0!important;text-align:center;transition:border-color .05s ease-in-out;vertical-align:middle;width:16px;-webkit-appearance:none}input[type=checkbox]:checked:before,input[type=radio]:checked:before{display:inline-block;float:left;font:normal 21px/1 dashicons;vertical-align:middle;width:16px;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=checkbox].disabled,input[type=checkbox].disabled:checked:before,input[type=checkbox]:disabled,input[type=checkbox]:disabled:checked:before,input[type=radio].disabled,input[type=radio].disabled:checked:before,input[type=radio]:disabled,input[type=radio]:disabled:checked:before{opacity:.7}input[type=checkbox]:checked:before{color:#1e8cbe;content:"";margin:-3px 0 0 -4px}input[type=radio]{border-radius:50%;line-height:10px;margin-right:4px}input[type=radio]:checked+label:before{color:#82878c}input[type=radio]:checked:before{background-color:#1e8cbe;border-radius:50px;content:"•";font-size:24px;height:6px;line-height:16px;margin:4px;text-indent:-9999px;width:6px}input[type=reset]:active,input[type=reset]:hover{color:#00a0d2}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-decoration{display:none}button,input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}input,select,textarea{border-radius:0;font-size:14px;padding:3px 5px}textarea{line-height:1.4;overflow:auto;padding:2px 6px;resize:vertical}textarea.code{line-height:1.4;padding:4px 6px 1px}label{cursor:pointer;vertical-align:middle}input,select{margin:1px;padding:3px 5px}input.code{padding-top:6px}input.readonly,input[readonly],textarea.readonly,textarea[readonly]{background-color:#eee}.wp-core-ui :-moz-placeholder,:-moz-placeholder{color:#a9a9a9}input.disabled,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{background:hsla(0,0%,100%,.5);border-color:hsla(0,0%,87.1%,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);color:rgba(51,51,51,.5)}input[type=file].disabled,input[type=file]:disabled,input[type=range].disabled,input[type=range]:disabled{background:none;box-shadow:none}input.large-text,textarea.large-text{width:99%}input.regular-text{width:25em}input.small-text{padding:1px 6px;width:50px}input[type=number].small-text{width:65px}input.tiny-text{width:35px}input[type=number].tiny-text{width:45px}@media screen and (max-width:782px){textarea{-webkit-appearance:none}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;padding:6px 10px}input[type=number]{height:40px}input.code{padding-bottom:5px;padding-top:10px}input[type=checkbox]{-webkit-appearance:none;padding:10px}input[type=checkbox]:checked:before{font:normal 30px/1 dashicons;margin:-3px -5px}input[type=checkbox],input[type=radio]{height:25px;width:25px}input[type=radio]:checked:before{vertical-align:middle;width:9px;height:9px;margin:7px;line-height:16px}input,textarea{font-size:16px}input[type=number].small-text,input[type=password].small-text,input[type=search].small-text,input[type=text].small-text{width:auto;max-width:55px;display:inline;padding:3px 6px;margin:0 3px}input.regular-text{width:100%}label{font-size:14px}fieldset label{display:block}}a.button:active,a.button:focus,a.button:hover{text-decoration:none}.notice{background:#fff;border-left:4px solid #fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:1em 0;padding:1px 12px}.notice p{font-size:.8rem;margin:.5em 0;padding:2px}.notice.notice-alt{box-shadow:none}.notice.notice-large{padding:10px 20px}.notice.notice-success{border-left-color:#46b450}.notice.notice-success.notice-alt{background-color:#ecf7ed}.notice.notice-warning{border-left-color:#ffb900}.notice.notice-warning.notice-alt{background-color:#fff8e5}.notice.notice-error{border-left-color:#dc3232}.notice.notice-error.notice-alt{background-color:#fbeaea}.notice.notice-info{border-left-color:#00a0d2}.notice.notice-info.notice-alt{background-color:#e5f5fa}.error-404 .page-content,.error-404 .page-title{text-align:center}.error-404 .page-content .logo-swing{height:10rem;margin:6rem auto;position:relative;text-align:center;width:10rem}.error-404 .page-content .logo-swing .wp-logo{left:0;max-width:none;position:absolute;top:0;width:10rem}@keyframes hinge{10%{width:180px;height:180px;transform:rotate(0deg)}15%{width:185px;height:185px;transform:rotate(0deg)}20%{width:180px;height:180px;transform:rotate(5deg)}40%{transform-origin:top left;animation-timing-function:ease-in-out}60%{transform:rotate(40deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-duration:2s;animation-name:hinge}.comments-area{margin-top:5em}.comments-area>:last-child{margin-bottom:0}.comments-area .comment-list+.comment-respond{border-top:1px solid #eaeaea}.comments-area .comment-list+.comment-respond,.comments-area .comment-navigation+.comment-respond{padding-top:1.6em}.comments-area .comments-title{margin-bottom:1.3333em}.comments-area .comment-list{list-style:none;margin:0}.comments-area .comment-list .pingback,.comments-area .comment-list .trackback,.comments-area .comment-list article{border-top:1px solid #eaeaea;padding:1.6em 0}.comments-area .comment-list article:not(:only-child){padding-bottom:0}.comments-area .comment-list article+.comment-respond{padding-bottom:1.6em}.comments-area .comment-list .children{list-style:none;margin:0}.comments-area .comment-list .children>li{padding-left:.8em}.comments-area .comment-list .alt{background:none}.comments-area .comment-author{color:#999;margin-bottom:.4em}.comments-area .comment-author .avatar{float:left;height:24px;margin-right:.8em;width:24px}.comments-area .comment-metadata,.comments-area .pingback .edit-link{color:#999;line-height:1.5}.comments-area .comment-metadata a,.comments-area .pingback .edit-link a{color:#777}.comments-area .comment-metadata{font-size:.8rem;margin-bottom:1.6em}.comments-area .comment-metadata .edit-link,.comments-area .pingback .edit-link{margin-left:1em}.comments-area .pingback .edit-link:before{top:5px}.comments-area .comment-content ol,.comments-area .comment-content ul{margin:0 0 1.6em 1.3333em}.comments-area .comment-content>:last-child,.comments-area .comment-content li>ol,.comments-area .comment-content li>ul{margin-bottom:0}.comments-area .comment-content .reply{font-size:12px}.comments-area .comment-content .reply a{border:1px solid #eaeaea;color:#707070;display:inline-block;font-weight:700;line-height:1;margin-top:2em;padding:.4167em .8333em;text-transform:uppercase}.comments-area .comment-content .reply a:focus,.comments-area .comment-content .reply a:hover{border-color:#333;color:#333;outline:0}.comments-area .comment-reply-title a{font-weight:inherit}.comments-area .comment-form label{font-size:.8rem;font-weight:700;display:block;letter-spacing:.04em;line-height:1.5}.comments-area .comment-form input[type=email],.comments-area .comment-form input[type=text],.comments-area .comment-form input[type=url],.comments-area .comment-form textarea{width:100%}.comments-area .comment-awaiting-moderation,.comments-area .comment-notes,.comments-area .form-allowed-tags,.comments-area .logged-in-as{font-size:1rem;line-height:1.5;margin-bottom:2em}.comments-area .no-comments{border-top:1px solid #eaeaea;color:#999;font-weight:700;padding-top:1.6em}.comments-area .comment-navigation+.no-comments{border-top:0}.comments-area .form-allowed-tags code{font-family:Inconsolata,monospace}.comments-area .form-submit{margin-bottom:0}.comments-area .required{color:#c0392b}.entry-content{hyphens:auto;word-wrap:break-word}.entry-content>p:first-child{margin-top:0}.entry-content [class*=col-]~h1,.entry-content [class*=col-]~h2,.entry-content [class*=col-]~h3,.entry-content [class*=col-]~h4,.entry-content [class*=col-]~h5,.entry-content [class*=col-]~h6{clear:none}.entry-header{position:relative}.entry-header .sticky-post{color:#999;font-size:.8rem;font-style:italic;position:absolute;top:-.8rem}.entry-meta{color:#999;font-size:.8rem;margin-bottom:1rem}.entry-meta a{color:#777}.entry-meta>span{margin-right:1rem}.entry-meta>span :last-of-type{margin:0}.entry-meta .byline,.entry-meta .updated:not(.published),.sticky .entry-meta .posted-on{display:none}.group-blog .entry-meta .byline,.single .entry-meta .byline{display:inline}.entry-summary{hyphens:auto;word-wrap:break-word}body:not(.single):not(.search) .site-main .post{margin-bottom:3.0517578125rem;max-width:40em}.gallery{margin-bottom:1.5rem}.gallery .gallery-item{display:inline-block;margin:0;text-align:center;vertical-align:top;width:100%}.gallery.gallery-columns-2 .gallery-item{max-width:50%}.gallery.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery.gallery-columns-4 .gallery-item{max-width:25%}.gallery.gallery-columns-5 .gallery-item{max-width:20%}.gallery.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery .gallery-caption{display:block}.main-navigation{background:#0073aa;clear:both;left:0;position:absolute;top:60px;width:100%}.main-navigation ul{display:none;list-style:none;margin:0;padding-left:0}.main-navigation ul ul{box-shadow:0 3px 3px rgba(0,0,0,.2);float:left;left:-999em;position:absolute;top:1.5em;z-index:99999}.main-navigation ul ul ul{left:-999em;top:0}.main-navigation ul ul li.focus>ul,.main-navigation ul ul li:hover>ul{left:100%}.main-navigation ul ul a{width:200px}.main-navigation ul li.focus>ul,.main-navigation ul li:hover>ul{left:auto}.main-navigation li{border-top:1px solid hsla(0,0%,100%,.2);padding:1rem}.main-navigation a{color:hsla(0,0%,100%,.8);display:block;font-size:.8rem;text-decoration:none}.main-navigation a.active,.main-navigation a:hover{color:#fff}@media screen and (min-width:737px){.main-navigation a.active{border-bottom:1px solid}}.main-navigation.toggled{z-index:1}.main-navigation.toggled ul{display:block}.menu-toggle{background:transparent;border:none;color:#fff;height:3.5rem;position:absolute;right:1rem;top:-58px;width:3.5rem}.toggled .menu-toggle:before{content:""}@media screen and (min-width:737px){.menu-toggle{display:none}.main-navigation{float:right;position:static;width:auto}.main-navigation.toggled{padding:1px 0}.main-navigation ul{display:inline-block;font-size:0}.main-navigation ul li{border:0;display:inline-block;font-size:1rem;margin-right:1rem;padding:0}.main-navigation ul li:last-of-type{margin-right:0}}.comment-content .wp-smiley,.entry-content .wp-smiley,.page-content .wp-smiley{border:none;margin-bottom:0;margin-top:0;padding:0}embed,iframe,object{max-width:100%}body.page .gutters .col-12{width:100%}body.page .entry-header{background:#0073aa;padding:1rem 0}body.page .entry-header .entry-title{color:#fff;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 auto;padding:0 1.5625rem}body.page .entry-header.home{padding:1.5625rem 1.143rem;text-align:center}@media screen and (min-width:737px){body.page .site-header+.site-main .entry-title{padding:initial}}body.page .entry-content,body.page .entry-footer{margin:0 auto;max-width:960px;padding:3.0517578125rem 1.5625rem}.post-navigation{margin:5em auto;padding:0}.post-navigation a{border-bottom:1px solid #eaeaea;color:#444;display:block;font-weight:600;padding:11px 0 12px;text-transform:none;width:100%}.post-navigation a:hover{color:#21759b}.post-navigation .nav-links{border-top:1px solid #eaeaea;hyphens:auto;word-wrap:break-word}.post-navigation .meta-nav{color:#777;display:block;font-size:13px;line-height:2;text-transform:uppercase}.post-navigation .nav-next{text-align:right}.pagination .nav-links{text-align:center}.pagination .nav-links .page-numbers{background-color:#f9f9f9;cursor:hand;display:inline-block;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.dots,.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.prev{background:none;font-size:.9em;width:auto}.pagination .nav-links .page-numbers.dots{cursor:inherit}@media screen and (max-width:737px){.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.prev{font-size:0;min-width:0;padding:0}.pagination .nav-links .page-numbers.next:after,.pagination .nav-links .page-numbers.prev:before{background-color:#f9f9f9;display:inline-block;font-size:1rem;line-height:1.5;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.prev:before{content:"‹"}.pagination .nav-links .page-numbers.next:after{content:"›"}}.pagination .nav-links span.page-numbers{background-color:#f7f7f7;font-weight:700}.search-form .search-field{line-height:normal;margin:0;padding:4px 5px;vertical-align:text-bottom}body.search .gutters .col-12{width:100%}body.search .site-main{margin:0 auto;max-width:960px;padding:0 1.5625rem 3.0517578125rem}.site-content{max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-content{padding:0 10px 3.0517578125rem}}@media screen and (max-width:737px){.site-content .site-main{float:none;margin:0;width:auto}}.home .site-content,.page .site-content,.site-content.page{margin:auto;max-width:none;padding:0}.site-content .page-title{font-size:1.25rem;font-weight:400}.site-content .no-results{margin:0 auto 3.0517578125rem;max-width:40em;padding:0 2rem}.site-description{color:hsla(0,0%,100%,.8);font-size:1.25rem;font-weight:300;margin:-.4rem auto 2rem;text-align:center}.site-header{background:#0073aa;padding:1rem 0;position:relative}.site-header .site-branding{margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-header .site-branding{padding:0 10px}}.site-header.home{padding:1.5625rem 1.143rem;text-align:center}.site-title{display:inline-block;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 2rem 0 0;max-width:none}.site-title a{color:#fff;font-weight:300}.site-title a:active,.site-title a:focus,.site-title a:hover{text-decoration:none}.site-header.home .site-title{display:inherit;font-size:3.8146972656rem;margin:2rem 0 1rem}.widget-area{font-size:.8rem}@media screen and (min-width:480px) and (max-width:768px){.widget-area{display:flex}.widget-area .widget{width:48%}}#wporg-footer{background-color:#f7f7f7;border-top:1px solid #dfdfdf;padding:22px 14px 65px}#wporg-footer,#wporg-footer .wrapper{clear:both;margin:0 auto;overflow:auto}#wporg-footer .wrapper{max-width:930px}#wporg-footer ul{float:left;margin-bottom:20px;margin-left:24px;overflow:auto;padding-left:0;width:135px}@media screen and (min-width:960px){#wporg-footer ul:first-child{margin-left:0}}#wporg-footer ul li{color:#bbb;font-size:14px;list-style-type:none;margin-bottom:1px}#wporg-footer ul li a{text-decoration:none;text-decoration-skip-ink:none}#wporg-footer ul li a:hover{color:#0073aa;text-decoration:underline}#wporg-footer .cip{clear:both;color:#ccc;float:none;font-size:.8rem;letter-spacing:.3em;margin:35px auto 0;text-align:center;text-transform:uppercase}#wporg-footer .cip.cip-image{background:url(//s.w.org/style/images/codeispoetry.png?1=) 50% no-repeat;background-size:190px 15px;height:15px;text-indent:-9999px;width:190px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx),only screen and (min-resolution:144dpi){#wporg-footer .cip.cip-image{background-image:url(//s.w.org/style/images/codeispoetry-2x.png?1=)}}@media screen and (min-width:561px) and (max-width:959px){#wporg-footer .wrapper{max-width:600px}#wporg-footer ul{margin-left:2%;width:32%}#wporg-footer ul:nth-child(3n+1){margin-left:0}#wporg-footer ul:nth-child(4n){clear:both}}@media screen and (max-width:560px){#wporg-footer .wrapper{max-width:360px}#wporg-footer ul{margin-left:4%;width:48%}#wporg-footer ul:nth-child(odd){margin-left:0;clear:both}}#wporg-header{background:#23282d;height:140px;position:relative;text-align:center;width:100%}#wporg-header .wrapper{margin:0 auto;max-width:960px}#wporg-header h1{display:inline-block;margin:auto;width:303px}#wporg-header h1 a{background:url(//s.w.org/style/images/wporg-logo.svg?3=) 0 no-repeat;background-size:290px 46px;display:block;height:88px;text-indent:-9999px}#wporg-header h2.rosetta{clear:none;color:#dfdfdf;font-family:Georgia,Times New Roman,serif;font-size:30px;margin:0 0 0 60px}#wporg-header h2.rosetta a{border-bottom:none;color:#dfdfdf;display:block;height:52px;line-height:22px;padding:0}#wporg-header h2.rosetta a:hover{text-decoration:none}#wporg-header #wporg-header-menu{background:#23282d;left:-75%;list-style:none;margin:0;max-width:75%;min-width:200px;position:absolute;text-align:left;top:100%;transition:left .3s;z-index:100000}#wporg-header #wporg-header-menu.toggled{left:0}#wporg-header ul li{list-style-type:none;position:relative}#wporg-header ul li a{color:#eee;display:block;font-family:Open Sans,Helvetica,Arial,Liberation Sans,sans-serif;font-size:13px;font-weight:600;height:34px;line-height:34px;margin:0 4px;padding:10px 30px;text-decoration:none}#wporg-header ul li a.subcurrent{font-weight:700}@media (max-width:768px){#wporg-header ul li a{height:auto}}#wporg-header ul li.current-menu-item a,#wporg-header ul li.current_page_parent a,#wporg-header ul li a.current,#wporg-header ul li a:hover{color:#00a0d2}#wporg-header ul li#download,#wporg-header ul li.download{float:right;height:34px;margin-right:14px;overflow:hidden;padding:0 0 34px}@media screen and (max-width:767px){#wporg-header ul li#download,#wporg-header ul li.download{display:block;float:none;margin:10px 20px 20px;padding-bottom:0;height:auto}#wporg-header ul li#download a,#wporg-header ul li.download a{padding:4px 10px;text-align:center}}#wporg-header ul li#download a,#wporg-header ul li.download a{margin:0;padding:0 16px}#wporg-header ul li#download a:hover,#wporg-header ul li.download a:hover{color:#eee}#wporg-header ul li#download.current,#wporg-header ul li#download.current-menu-item,#wporg-header ul li#download .uparrow,#wporg-header ul li.download.current,#wporg-header ul li.download.current-menu-item,#wporg-header ul li.download .uparrow{display:none}#wporg-header ul li .nav-submenu{clip:rect(1px,1px,1px,1px);height:1px;left:-2px;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;z-index:99999}#wporg-header ul li .nav-submenu li a{display:inline-block;height:24px;line-height:24px;margin:0;white-space:nowrap}@media screen and (min-width:768px){#wporg-header #head-search{float:right;margin-right:14px;padding-top:30px}}#wporg-header #head-search form{border-bottom:1px solid #3f3f3f;display:inline-block;margin-left:60px;width:288px}#wporg-header #head-search form input.text{background:#191e23;border:0;border-radius:0;box-sizing:content-box;color:#b4b9be;float:left;font-family:Open Sans,sans-serif;font-size:12px;height:24px;margin:0;outline:none;padding:3px;vertical-align:top;width:256px}#wporg-header #head-search form input.text::-moz-placeholder{color:#eee}@media screen and (max-width:480px){#wporg-header #head-search form input.text{width:216px}}#wporg-header #head-search form .button{background:#191e23 url(//s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831) no-repeat 2px 5px;border:none;border-radius:0;box-shadow:none;float:left;height:30px;margin:0;padding:0;text-shadow:none!important;width:26px}@media screen and (max-width:480px){#wporg-header #head-search form{width:248px}}@media screen and (min-width:480px){#wporg-header #head-search form{margin-left:0}}@media screen and (min-width:768px){#wporg-header{height:120px;text-align:inherit}#wporg-header h1{float:left;padding-left:10px}#wporg-header h2.rosetta{float:left;margin-left:0;padding:36px 27px 0}#wporg-header #headline h2{text-rendering:optimizeLegibility}#wporg-header #wporg-header-menu{float:left;height:46px;list-style:none;margin:-15px 0 0;max-width:inherit;min-width:0;padding:0;position:static;width:100%}#wporg-header ul li{float:left;position:relative}#wporg-header ul li a{height:46px;padding:0 6px}#wporg-header ul li a.current~.uparrow{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-8px auto 0;width:0}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:50%;margin:-8px 0 0 -9px;position:absolute;width:0}#wporg-header ul li .nav-submenu:hover~.uparrow,#wporg-header ul li:hover .nav-submenu~.uparrow{border-bottom:9px solid #32373c;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-10px auto 0;width:0}#wporg-header ul li .nav-submenu{background:#32373c;border:1px solid #32373c;border-top:0;margin-top:-1px;min-width:0}#wporg-header ul li .nav-submenu li{float:none}#wporg-header ul li .nav-submenu li a{height:34px;line-height:34px}#wporg-header .nav-menu .focus>ul,#wporg-header .nav-menu ul li:hover>ul,#wporg-header ul.nav-menu .focus>ul,#wporg-header ul.nav-menu li:hover>ul{clip:inherit;height:inherit;overflow:inherit;width:inherit}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after,#wporg-header ul li a.current~.uparrow{border-bottom-color:#0073aa}}.page-download #wporg-header #download,.page-parent-download #wporg-header #download{display:none}#mobile-menu-button{background:none;border:none;box-shadow:none;display:block;float:left;font-family:dashicons;font-size:16px;font-style:normal;font-weight:400;left:10px;line-height:1;padding:1px;position:absolute;text-align:center;text-decoration:inherit;text-shadow:none;top:75px;transition:color .1s ease-in;vertical-align:top;-webkit-font-smoothing:antialiased}#mobile-menu-button:before{border:none;box-sizing:border-box;color:#888;content:"";display:inline-block;float:left;font:normal 50px/1 Dashicons;margin:0;outline:none;padding:3px;text-decoration:none;vertical-align:middle;-webkit-font-smoothing:antialiased}@media screen and (min-width:768px){#mobile-menu-button{display:none}}#download-mobile{background:#f7f7f7;border-bottom:1px solid #ddd}#download-mobile .wrapper{padding:20px 0;text-align:center}#download-mobile span.download-ready{font-size:1.6em;margin:0 .25em}#download-mobile a.download-button{font-size:1.6em;height:inherit;margin:10px .25em;padding:10px 15px}.category-context-bar{margin:0 1.5rem;background:#edeff0;border-radius:2px;font-size:.8125rem;overflow:auto;transition:all .3s ease-out}@media (prefers-reduced-motion){.category-context-bar{transition:none}}.category-context-bar>div{display:flex;align-items:center;justify-content:space-between}@media only screen and (min-width:782px){.category-context-bar{margin:0 1.5rem}}@media only screen and (min-width:960px){.category-context-bar{margin:0 auto;max-width:960px}}.category-context-bar ul{margin:0;padding:0;display:flex;justify-content:space-between}.category-context-bar ul li{list-style:none;font-size:.8125rem}.category-context-bar ul li a{display:block;padding:1.125rem .75rem;text-decoration:none}.category-context-bar ul li:last-child a{padding-right:1.5rem}.category-context-bar__copy{display:flex;align-items:center;margin:0;padding:1.125rem 1.5rem;font-size:.8125rem;font-weight:400}.category-context-bar__title{margin:0;padding-right:1.5rem;color:#555d66;font-size:.75rem;font-weight:400;text-transform:uppercase}.category-context-bar__links{display:flex;align-items:center}@media only screen and (max-width:782px){.category-context-bar__links{display:none}}.category-context-bar__spinner{display:flex;width:28px;margin:0;transition:transform .1s linear,width .15s ease-out,opacity 50ms linear 50ms;transform:scale(1)}@media (prefers-reduced-motion){.category-context-bar__spinner{transition:none}}.category-context-bar__spinner .components-spinner{margin:0}.category-context-bar__spinner--is-hidden{overflow:hidden;width:0;opacity:0;transform:scale(0)}.category-menu{margin:0;padding:0;position:relative}.category-menu li{display:inline-block;margin:0;list-style:none}.category-menu a{display:block;padding:.5rem .75rem;color:#40464d;font-size:.875rem;text-decoration:none}.category-menu a:active,.category-menu a:focus,.category-menu a:hover{color:#000}li .category-menu--is-active{color:#fff;background:#0073aa;border-radius:2px}li .category-menu--is-active:focus,li .category-menu--is-active:hover{color:#fff}.category-menu__mobile{padding:0!important;border-top:none!important}.category-menu__mobile ul{margin:0;padding:0;background:#23282d}.category-menu__mobile li{list-style:none;border-top:1px solid #32373c}.category-menu__mobile li a{display:block;padding:1rem 1.5rem;font-size:.875rem;text-decoration:none;color:#ccd0d4}.category-menu__mobile>.components-panel__body-title{margin:0!important}.category-menu__mobile>.components-panel__body-title>button{padding:1.5rem}.category-menu--is-loading{height:24px;position:relative}.category-menu--is-loading:after{content:"";position:absolute;background:#f3f4f5;border-radius:4px;width:80%;height:24px;left:0;top:calc(50% - 12px);transition:none}.category-search{display:flex;align-items:center;background:#fff;border:1px solid #6c7782;border-radius:2px}.category-search input[type=search]{flex-grow:1;margin:0;padding:.25rem .5rem;border:none;box-shadow:none;font-size:.8125rem}.category-search input[type=search]:focus{outline:1px auto #0073aa}.category-search__button{display:flex;background:transparent;border:none;color:#6c7782}.category-search__button:active{background:#d7dade}.category-search__button:focus{outline:1px auto #0073aa}.category-search--is-loading{display:block;height:24px;min-width:100%;background:#f3f4f5;border-radius:4px}@media only screen and (min-width:480px){.category-search--is-loading{width:224px!important;min-width:auto!important}}.pattern__copy-button{transition:all 75ms ease-in-out}.pattern__copy-button.is-small{font-size:.75rem;padding:.75rem;height:auto}.pattern__favorite-button{position:relative;font-size:.875rem;height:2.25rem;width:2.25rem;border-radius:2px;color:#606a74}.pattern__favorite-button svg{position:absolute;top:calc(50% - .75rem);left:calc(50% - .75rem);height:1.5rem;width:1.5rem;transition:all .15s ease-out}.pattern__favorite-button svg path{fill:#6c7782}.pattern__favorite-button .pattern__favorite-filled{opacity:0}.pattern__favorite-button:hover{color:#555d66;background:transparent}.pattern__favorite-button:hover svg path{fill:#555d66}.pattern__favorite-button:active{background:transparent;box-shadow:none;transform:none}.pattern__favorite-button.is-favorited{color:#555d66}.pattern__favorite-button.is-favorited svg path{fill:#d94f4f}.pattern__favorite-button.is-favorited .pattern__favorite-outline{opacity:0;transform:scale(2.8)}.pattern__favorite-button.is-favorited .pattern__favorite-filled{opacity:1}.pattern__favorite-button.is-favorited:hover .pattern__favorite-filled{animation:HeartBeat .9s infinite}@media (prefers-reduced-motion){.pattern__favorite-button.is-favorited:hover .pattern__favorite-filled{animation:none}}.pattern__favorite-button.has-label{padding:12px 18px 12px 38px;height:auto;width:auto}.pattern__favorite-button.has-label svg{top:calc(50% - 12px);left:9px}.pattern__favorite-button[disabled]{background:transparent!important;text-shadow:none!important;color:#606a74!important}@keyframes HeartBeat{0%{transform:scale(1)}25%{transform:scale(1.2)}40%{transform:scale(1)}60%{transform:scale(1.2)}to{transform:scale(1)}}.main-navigation{float:none;position:static;width:auto}.main-navigation a{font-size:.8125rem}.main-navigation.toggled div.menu{position:absolute;top:57px;right:0;width:100%;background:#0073aa}.menu-toggle{position:static;height:auto;width:auto;font-size:1.5625rem;overflow:hidden;-webkit-appearance:none}body.page .entry-header{background:none;padding:0}body.page .entry-header .entry-title{color:inherit;margin:2rem auto 1rem;max-width:960px}@media screen and (min-width:737px){body.page .entry-header .entry-title{padding:0 10px}}.pattern-grid-menu{margin:0 auto;max-width:960px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.pattern-grid-menu>:first-child,.pattern-grid-menu>:last-child{width:100%}.pattern-grid-menu>:last-child{margin:1.5rem;width:calc(100% - 3rem)}@media only screen and (min-width:782px){.pattern-grid-menu{margin:1.5rem;flex-direction:row}.pattern-grid-menu>:last-child{margin:0;width:auto}}@media only screen and (min-width:960px){.pattern-grid-menu{margin:1.5rem auto}}.pattern-grid{max-width:960px;margin:1.5rem}@media screen and (min-width:600px){.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.pattern-grid>*{align-self:baseline}}@media screen and (min-width:960px){.pattern-grid{margin-left:auto;margin-right:auto}}.pattern-grid__pattern{position:relative;margin:0 0 1.5rem;border:1px solid #d7dade;border-radius:2px;transition:all 75ms ease-in-out}@media screen and (min-width:600px){.pattern-grid__pattern{display:inline-block;margin:0}}.pattern-grid__pattern .pattern-grid__preview{overflow:hidden}.pattern-grid__pattern .pattern-grid__actions{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;padding:.375rem;background:hsla(0,0%,100%,.8);backdrop-filter:blur(3px);opacity:0;transform:translateY(6px);transition:all 75ms ease-in-out}.pattern-grid__pattern .pattern-grid__actions .pattern-grid__title{flex-grow:1;margin:0;padding:0 .375rem 0 .75rem;font-size:.75rem;pointer-events:none}.pattern-grid__pattern .pattern-grid__actions .pattern__copy-button,.pattern-grid__pattern .pattern-grid__actions .pattern__favorite-button{flex-shrink:0}.pattern-grid__pattern .pattern-grid__actions .button+.button{margin-left:.375rem}.pattern-grid__pattern:focus-within .pattern-grid__actions,.pattern-grid__pattern:hover .pattern-grid__actions{opacity:1;transform:translateY(0)}.pagination{max-width:960px;margin:1.5rem}@media screen and (min-width:960px){.pagination{margin-left:auto;margin-right:auto}}.pagination__list{display:flex;margin:0;list-style:none;justify-content:center;align-items:center;gap:.75rem}@media (max-width:480px){.pagination__list{gap:.25rem}}.pagination__item,.pagination__link{display:inline-block}.pagination__link{padding:.75rem;background:#fff;border:1px solid #d7dade;border-radius:2px;line-height:1}.pagination__link,.pagination__link:active,.pagination__link:hover{text-decoration:none}.pagination__link[aria-current=page]{border:1px solid #191e23;background:#191e23;color:#fff}@media (max-width:480px){.pagination__link{padding:.5rem}}@media (max-width:600px){.pagination__item-next-page .pagination__link span[aria-hidden],.pagination__item-previous-page .pagination__link span[aria-hidden]{display:none}.pagination__item-previous-page .pagination__link:before{content:"<"}.pagination__item-next-page .pagination__link:before{content:">"}}.pattern-preview__container{padding:2rem 0 0;background:#f3f4f5}.pattern-preview__viewport{position:relative;margin:0 auto;padding:0 20px;max-width:100vw;min-width:320px}.pattern-preview__viewport .pattern-preview__viewport-iframe{background:#fff;border:1px solid #e8eaeb;vertical-align:middle;max-width:100vw}.pattern-preview__viewport:focus-within .pattern-preview__resize-help{clip:auto;clip-path:none;height:auto;margin:initial;overflow:initial;width:auto;bottom:-1rem;left:20px;right:20px;padding:8px 16px;background:#fff;border-radius:2px;border:1px solid #d7dade;text-align:center}.pattern-preview__drag-handle{position:absolute;top:0;bottom:0;width:20px}.pattern-preview__drag-handle.is-left{left:0}.pattern-preview__drag-handle.is-right{right:0}.pattern-preview__drag-handle-button{position:absolute;top:calc(50% - 50px);left:6px;padding:0;width:8px;height:100px;appearance:none;cursor:grab;outline:none;background:#7e8993;border-radius:99999px;border:none}.pattern-preview__drag-handle-button:hover{background:#6c7782}.pattern-preview__drag-handle-button:active{cursor:grabbing;background:#606a74}.pattern-preview__drag-handle-button:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}.pattern-report-button{color:#23282d!important}.pattern-report-button__copy{margin:0;display:flex;justify-content:center;align-items:center}.pattern-report-button__copy svg{margin-right:.375rem}.pattern-report-modal{max-width:400px;width:100%}@media screen and (min-width:600px){.pattern-report-modal{width:400px}}.pattern-report-modal form>:first-child{padding-bottom:1.5rem}.pattern-report-modal__has-fixed-height{min-height:400px}.pattern-report-modal__copy{text-align:center;line-height:1.5}.pattern-report-modal__actions{margin-top:1.5rem;display:grid;grid-template-columns:48% 48%;column-gap:4%}.pattern-report-modal__actions button{justify-content:center}.pattern-report-modal__radio .components-radio-control__option{margin-top:.75rem}body.single-wporg-pattern{box-sizing:border-box;font-size:14px;font-weight:400;line-height:1.2}body.single-wporg-pattern .site-content{margin:auto;max-width:none;padding:0}body.single-wporg-pattern .entry-header{max-width:960px;padding:1.5rem;margin-left:auto;margin-right:auto}@media only screen and (min-width:960px){body.single-wporg-pattern .entry-header{padding:1.5rem 0}}body.single-wporg-pattern .entry-header .entry-title{margin-top:0;line-height:1.2}body.single-wporg-pattern .pattern-actions{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:.5em 2em}body.single-wporg-pattern .pattern-actions button{margin:0}@media (max-width:480px){body.single-wporg-pattern .pattern-actions{justify-content:center}}body.single-wporg-pattern .pattern-actions__notice{margin:1.5rem 0 0;height:auto;flex-basis:100%}body.single-wporg-pattern .pattern-actions__notice>*{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;margin:0}body.single-wporg-pattern .pattern-actions__notice>* button{margin-top:.75rem}@media only screen and (min-width:600px){body.single-wporg-pattern .pattern-actions__notice>*{align-items:center;flex-direction:row}body.single-wporg-pattern .pattern-actions__notice>* button{margin-top:0}}body.single-wporg-pattern .pattern-actions__guide{max-width:384px;height:auto;max-height:none}body.single-wporg-pattern .pattern-actions__guide-content{padding:1.5rem;line-height:1.5}body.single-wporg-pattern .pattern-actions__guide-title{margin:0}body.single-wporg-pattern .pattern-actions__guide-shortcut{background:#edeff0;box-shadow:0 0 0 1px #ccd0d4;padding:1px;font-weight:600;min-width:20px;display:inline-block;text-align:center;border-radius:2px}body.single-wporg-pattern .entry-content{max-width:960px;margin-left:auto;margin-right:auto}body.single-wporg-pattern .pattern__meta{padding:2rem 0;background:#f3f4f5}body.single-wporg-pattern .pattern__meta>div{max-width:960px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between}body.single-wporg-pattern .pattern__meta .pattern-preview__report{text-align:right}.site-header:not(.home) .search-form{display:flex;align-items:center}.site-header:not(.home) .search-form>input{flex:1;border:0;border-radius:2px 0 0 2px;display:inline-block;font-size:12px;padding:5px 10px;position:relative;width:auto;height:100%}.site-header:not(.home) .search-form button{margin:0;border-radius:0 2px 2px 0;padding:3px 12px;height:unset}.search-form--is-inline .search-form{display:flex;justify-content:space-between;background:#fff}.search-form--is-inline .search-form>label{flex:1}.search-form--is-inline .search-form input{padding:.5rem;background:transparent;border:none;box-shadow:none;width:100%;font-size:14px}@media only screen and (min-width:768px){.search-form--is-inline .search-form input{font-size:16px}}.search-form--is-inline .search-form button{background:transparent;margin-bottom:0;border:0;box-shadow:none;height:inherit;text-shadow:none;color:#32373c}.search-form--is-inline .search-form button:focus{-webkit-box-shadow:0 0 2px 1px #0073aa;box-shadow:0 0 2px 1px #0073aa}.search-form--is-centered .search-form{margin:0 auto}.search-form--is-constrained .search-form{max-width:36rem}.search-form--is-muted .search-form{border-color:#d7dade!important}.search-form--is-muted .search-form button,.search-form--is-muted .search-form input{background:#f8f9f9;color:#7e8993}.search-form--has-medium-text .search-form input{font-size:14px}.search-form--has-border .search-form{border:1px solid #7e8993}.section-heading_link,.section-heading_title{margin-bottom:0}.section-heading_title{font-weight:300}.section-heading_title .archive-title-prefix{display:block;font-size:1rem}.section-heading_link{text-decoration:underline;font-weight:600;margin-top:1.5rem!important}@media only screen and (min-width:768px){.section-heading_link{margin-top:0!important}}.section-heading_description{margin:1rem 0 0}.section-heading_description :last-child{margin-bottom:0}.section-heading--with-space{padding-bottom:16px}.site-content{margin:0 auto;max-width:none;padding:0}body.home .site-header{padding:3.75rem 1rem;text-align:left}body.home .site-branding{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 22rem}body.home .site-branding>*{align-self:center}@media screen and (max-width:736px){body.home .site-branding{display:block}}body.home .site-title.site-title{grid-column-start:1;grid-row-start:1;margin-top:0;text-align:left;font-size:3rem;line-height:1.25}body.home .site-description{grid-column-start:1;grid-row-start:2;margin:0;font-size:1.25rem;line-height:1.6;text-align:left;color:#fff}body.home .site-callout{grid-column-start:2;grid-row-start:1;grid-row-end:span 2;margin-left:4rem;padding:1.125rem 1.5rem 1.5rem;font-size:.875rem;line-height:1.6;background:#fff;box-shadow:.75rem .75rem 0 rgba(0,0,0,.15)}body.home .site-callout h2{margin-top:0;font-size:1.125rem;line-height:1.25;font-weight:600}body.home .site-callout p:last-child{margin-bottom:0}@media screen and (max-width:736px){body.home .site-callout{margin:2rem auto 0;max-width:24rem}}body:not(.home) .site-branding{display:flex;align-items:center;justify-content:space-between;font-size:.8125rem;color:#fff}body:not(.home) .site-branding a{color:#fff}body:not(.home) .site-branding .sep{margin-left:.5rem;margin-right:.5rem}body:not(.home) .site-branding .is-current-page{font-weight:600}.site-title a{text-decoration:none}.site-title a:active,.site-title a:focus,.site-title a:hover{color:#fff}.has-wporg-blue-color{color:#1e8cbe}.has-wporg-blue-background-color{background-color:#1e8cbe}.has-wporg-purple-color{color:#826eb4}.has-wporg-purple-background-color{background-color:#826eb4}.has-wporg-white-color{color:#fff}.has-wporg-white-background-color{background-color:#fff}.home-page .shapes{position:relative;margin:0 auto}.home-page .shapes .parallelogram p:before{font-size:64px;height:64px;left:-16px;position:relative}.home-page .shapes .parallelogram{color:#fff;display:block;margin:0 auto;opacity:.9;padding:60px 40px;text-align:center;text-decoration:none}.home-page .shapes strong{display:block;font-size:28px;font-weight:300;padding-bottom:15px;padding-top:15px}.home-page .shapes p{color:#fff;font-size:16px;font-weight:300;margin:0}.home-page .shapes u{display:block;font-size:18px;padding-top:15px}@media only screen and (min-width:768px){.home-page .shapes{height:400px}.home-page .shapes .parallelogram{width:50%;position:absolute;padding:50px 90px}}@media only screen and (min-width:960px){.home-page .shapes .parallelogram{-webkit-transform:skew(-15deg);-ms-transform:skew(-15deg);transform:skew(-15deg)}.home-page .shapes .parallelogram:before,.home-page .shapes p{-webkit-transform:skew(15deg);-ms-transform:skew(15deg);transform:skew(15deg)}}@media only screen and (min-width:1200px){.home-page .shapes{margin:0 -60px}}.terms{font-style:italic;font-size:14px}
+@charset "UTF-8";[class*=col-]{margin:inherit}.row{display:flex;flex-direction:row;flex-wrap:wrap}@media (max-width:768px){.row{flex-direction:column;flex-wrap:nowrap}}.row.gutters>.row{margin-left:-2%}@media (max-width:768px){.row.gutters>.row{margin-left:0}}.row.gutters>.row>[class*=col-]{margin-left:2%}@media (max-width:768px){.row.gutters>.row>[class*=col-]{margin-left:0}}.row.around{justify-content:space-around}.row.between{justify-content:space-between}.row.auto .col{flex-grow:1}.col-1{width:8.3333333333%}.offset-1{margin-left:8.3333333333%}.col-2{width:16.6666666667%}.offset-2{margin-left:16.6666666667%}.col-3{width:25%}.offset-3{margin-left:25%}.col-4{width:33.3333333333%}.offset-4{margin-left:33.3333333333%}.col-5{width:41.6666666667%}.offset-5{margin-left:41.6666666667%}.col-6{width:50%}.offset-6{margin-left:50%}.col-7{width:58.3333333333%}.offset-7{margin-left:58.3333333333%}.col-8{width:66.6666666667%}.offset-8{margin-left:66.6666666667%}.col-9{width:75%}.offset-9{margin-left:75%}.col-10{width:83.3333333333%}.offset-10{margin-left:83.3333333333%}.col-11{width:91.6666666667%}.offset-11{margin-left:91.6666666667%}.col-12{width:100%}.offset-12{margin-left:100%}.gutters>.col-1{width:6.33333%}.gutters>.col-1:nth-child(n+13){margin-top:2%}.gutters>.offset-1{margin-left:10.33333%!important}.gutters>.col-2{width:14.66667%}.gutters>.col-2:nth-child(n+7){margin-top:2%}.gutters>.offset-2{margin-left:18.66667%!important}.gutters>.col-3{width:23%}.gutters>.col-3:nth-child(n+5){margin-top:2%}.gutters>.offset-3{margin-left:27%!important}.gutters>.col-4{width:31.33333%}.gutters>.col-4:nth-child(n+4){margin-top:2%}.gutters>.offset-4{margin-left:35.33333%!important}.gutters>.col-5{width:39.66667%}.gutters>.offset-5{margin-left:43.66667%!important}.gutters>.col-6{width:48%}.gutters>.col-6:nth-child(n+3){margin-top:2%}.gutters>.offset-6{margin-left:52%!important}.gutters>.col-7{width:56.33333%}.gutters>.offset-7{margin-left:60.33333%!important}.gutters>.col-8{width:64.66667%}.gutters>.offset-8{margin-left:68.66667%!important}.gutters>.col-9{width:73%}.gutters>.offset-9{margin-left:77%!important}.gutters>.col-10{width:81.33333%}.gutters>.offset-10{margin-left:85.33333%!important}.gutters>.col-11{width:89.66667%}.gutters>.offset-11{margin-left:93.66667%!important}.gutters>.col-12{width:98%}.gutters>.offset-12{margin-left:102%!important}@media (max-width:768px){[class*=" offset-"],[class^=offset-]{margin-left:0}}.first{order:-1}.last{order:1}@media (max-width:768px){.row [class*=col-]{margin-left:0;width:100%}.row.gutters [class*=col-]{margin-bottom:16px}.first-sm{order:-1}.last-sm{order:1}}.gutters .column.push-left,.push-left{margin-right:auto}.gutters .column.push-right,.push-right{margin-left:auto}.gutters .column.push-center,.push-center{margin-left:auto;margin-right:auto}.gutters .column.push-middle,.push-middle{margin-top:auto;margin-bottom:auto}.push-bottom{margin-top:auto}@media (max-width:768px){.gutters .column.push-left-sm,.push-left-sm{margin-left:0}.gutters .column.push-center-sm,.push-center-sm{margin-left:auto;margin-right:auto}.push-top-sm{margin-top:0}}.align-middle{align-items:center}.align-right{justify-content:flex-end}.align-center{justify-content:center}@media (max-width:768px){.align-left-sm{justify-content:flex-start}}.float-right{float:right}.float-left{float:left}@media (max-width:768px){.float-left,.float-right{float:none}}.fixed{position:fixed;top:0;left:0;z-index:100;width:100%}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}optgroup{font-weight:700}table{border-spacing:0}td,th{padding:0}p{margin:1rem 0}cite,dfn,em,i{font-style:italic}blockquote{margin:0 1.5rem}address{margin:0 0 1.5rem}pre{background:#eee;font-family:Courier\ 10 Pitch,Courier,monospace;font-size:.9375rem;line-height:1.6;margin-bottom:1.6rem;max-width:100%;overflow:auto;padding:1.6rem}code,kbd,tt,var{font-family:Monaco,Consolas,Andale Mono,DejaVu Sans Mono,monospace;font-size:.9375rem}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{background:#fff9c0;text-decoration:none}big{font-size:125%}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background:#fff}blockquote,q{quotes:"" ""}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote{border-left:2px solid #767676;color:#767676;margin:1rem 0;padding-left:.8rem}blockquote cite{font-size:.8rem}figure{margin:0}hr{background-color:#eee;border:0;height:2px;margin:5rem auto}img{height:auto;max-width:100%}h1,h2,h3,h4,h5,h6{font-family:Open Sans,sans-serif;clear:both;line-height:1.5;margin:2rem 0 1rem}.h1,h1{font-size:2.44140625rem}.h1,.h2,h1,h2{font-weight:300}.h2,h2{font-size:1.953125rem}.h3,h3{font-size:1.5625rem;font-weight:400}.h4,h4{font-size:1.25rem;color:#32373c;font-weight:600;padding:0}.h5,h5{font-size:1rem;letter-spacing:.01rem}.h5,.h6,h5,h6{font-weight:600;text-transform:uppercase}.h6,h6{font-size:.8rem;letter-spacing:.8px}a{color:#0073aa;text-decoration:none}a:active,a:focus,a:hover{text-decoration:underline}a:focus{outline:thin dotted}a:active,a:hover{outline:0}li>a,p a{text-decoration:underline}li>a:hover,p a:hover{color:#d54e21}ol,ul{margin:0 0 1.5em 1.5em;padding:0}ul{list-style:square}ol{list-style:decimal}ol.unmarked-list,ul.unmarked-list{list-style:none;padding-left:0}li>ol,li>ul{margin-bottom:0}dt{font-weight:700}dd{margin:0 1.5em 1.5em}table{border:1px solid #eee;border-collapse:collapse;font-size:.8rem;margin:0 0 1rem;padding:0;width:100%}table thead{background:#32373c;color:#fff}table td,table th{border:1px solid #eee;font-weight:400;margin:0;padding:.4rem;text-align:left;vertical-align:top}table tbody tr:nth-child(2n){background:#f7f7f7}html{font-size:100%}body,button,input,select,textarea{color:#32373c;font-family:Open Sans,sans-serif;font-size:100%;line-height:1.5}@media screen and (min-width:737px){html{font-size:1.125rem}}.custom-select{display:inline-block;box-sizing:border-box;padding:.5rem 2rem .5rem .8rem;width:auto;font-size:1em;line-height:1.3;border:1px solid #6c7782;box-shadow:none;border-radius:.5em;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:transparent;background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A');background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}.custom-select::-ms-expand{display:none}.custom-select:focus{box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}.custom-select option{font-weight:400}html{font-size:1rem}@media screen and (min-width:737px){html{font-size:1rem}}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}.site-content[tabindex="-1"]:focus{outline:0}.no-js .hide-if-no-js{display:none}.alignleft{display:inline;float:left;margin-right:1.5em}.alignright{display:inline;float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}@media screen and (max-width:480px){.alignleft,.alignright{display:block;float:none;margin-left:auto;margin-right:auto}}.button,.button-primary,.button-secondary,.plugin-upload-form .button-primary{border:1px solid;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:.8rem;height:1.5625rem;line-height:1;margin:0;padding:0 .8rem;text-decoration:none;white-space:nowrap;-webkit-appearance:none}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0;padding:0}.button-group.button-xl .button,.button.button-xl{font-size:1rem;height:2.44140625rem;line-height:1;padding:0 1.5rem}.button-group.button-large .button,.button.button-large{height:1.953125rem;line-height:1;padding:0 1rem}.button-group.button-small .button,.button.button-small{font-size:.64rem;height:1.25rem;line-height:1;padding:0 .5rem}a.button,a.button-primary,a.button-secondary{line-height:1.5625rem}.button-group.button-large a.button,a.button.button-large{line-height:1.953125rem}.button-group.button-xl a.button,a.button.button-xl{line-height:2.44140625rem}.button-group.button-small a.button,a.button.button-small{line-height:1.25rem}.button:active,.button:focus{outline:none}.button.hidden{display:none}input[type=reset],input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{background:none;border:none;box-shadow:none;padding:0 2px 1px;width:auto}.button,.button-secondary,.button:visited{background:#f7f7f7;border-color:#ccc;box-shadow:0 1px 0 #ccc;color:#555;vertical-align:top}p .button{vertical-align:baseline}.button-secondary:focus,.button-secondary:hover,.button.focus,.button.hover,.button:focus,.button:hover{background:#fafafa;border-color:#999;color:#23282d}.button-link:focus,.button-secondary:focus,.button.focus,.button:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.button-secondary:active,.button.active,.button.active:hover,.button:active{background:#eee;border-color:#999;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);transform:translateY(1px)}.button.active:focus{border-color:#5b9dd9;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(0,115,170,.8)}.button-disabled,.button-secondary.disabled,.button-secondary:disabled,.button-secondary[disabled],.button.disabled,.button:disabled,.button[disabled]{background:#f7f7f7!important;border-color:#ddd!important;box-shadow:none!important;color:#a0a5aa!important;cursor:default;text-shadow:0 1px 0 #fff!important;transform:none!important}.button-link,input[type=submit].button-link{background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;margin:0;outline:none;padding:0}.button-link:focus{outline:1px solid #5b9dd9}.button-primary,.download-button,.plugin-upload-form .button-primary{text-decoration:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.button-primary,.button-primary:visited,.download-button,.download-button:visited,.plugin-upload-form .button-primary,.plugin-upload-form .button-primary:visited{background:#0085ba;border-color:#0073aa #006799 #006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary.hover,.button-primary:focus,.button-primary:hover,.download-button.focus,.download-button.hover,.download-button:focus,.download-button:hover,.plugin-upload-form .button-primary.focus,.plugin-upload-form .button-primary.hover,.plugin-upload-form .button-primary:focus,.plugin-upload-form .button-primary:hover{background:#008ec2;border-color:#006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary:focus,.download-button.focus,.download-button:focus,.plugin-upload-form .button-primary.focus,.plugin-upload-form .button-primary:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}.button-primary.active,.button-primary.active:focus,.button-primary.active:hover,.button-primary:active,.download-button.active,.download-button.active:focus,.download-button.active:hover,.download-button:active,.plugin-upload-form .button-primary.active,.plugin-upload-form .button-primary.active:focus,.plugin-upload-form .button-primary.active:hover,.plugin-upload-form .button-primary:active{background:#0073aa;border-color:#006799;box-shadow:inset 0 2px 0 #006799;vertical-align:top}.button-primary.disabled,.button-primary:disabled,.button-primary[disabled],.download-button.disabled,.download-button:disabled,.download-button[disabled],.plugin-upload-form .button-primary.disabled,.plugin-upload-form .button-primary:disabled,.plugin-upload-form .button-primary[disabled]{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-primary.button.button-hero,.download-button.button.button-hero,.plugin-upload-form .button-primary.button.button-hero{box-shadow:0 2px 0 #006799}.button-primary.button.button-hero.active,.button-primary.button.button-hero.active:focus,.button-primary.button.button-hero.active:hover,.button-primary.button.button-hero:active,.download-button.button.button-hero.active,.download-button.button.button-hero.active:focus,.download-button.button.button-hero.active:hover,.download-button.button.button-hero:active,.plugin-upload-form .button-primary.button.button-hero.active,.plugin-upload-form .button-primary.button.button-hero.active:focus,.plugin-upload-form .button-primary.button.button-hero.active:hover,.plugin-upload-form .button-primary.button.button-hero:active{box-shadow:inset 0 3px 0 #006799}.button-primary-disabled{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-group{display:inline-block;font-size:0;position:relative;vertical-align:middle;white-space:nowrap}.button-group>.button{border-radius:0;display:inline-block;margin-right:-1px;z-index:10}.button-group>.button-primary{z-index:100}.button-group>.button:hover{z-index:20}.button-group>.button:first-child{border-radius:3px 0 0 3px}.button-group>.button:last-child{border-radius:0 3px 3px 0}.button-group>.button:focus{position:relative;z-index:1}@media screen and (max-width:737px){.button,.button.button-large,.button.button-small,.plugin-upload-form .button-primary{font-size:14px;height:auto;line-height:normal;margin-bottom:4px;padding:6px 14px;vertical-align:middle}}.clear:after,.clear:before,.comment-content:after,.comment-content:before,.entry-content:after,.entry-content:before,.home-below:after,.home-below:before,.site-content:after,.site-content:before,.site-footer:after,.site-footer:before,.site-header:after,.site-header:before{content:"";display:table;table-layout:fixed}.clear:after,.comment-content:after,.entry-content:after,.home-below:after,.site-content:after,.site-footer:after,.site-header:after{clear:both}p.subheading{color:#82878c;font-weight:300;margin:-.4rem auto 2rem;text-align:center}p.intro,p.subheading{font-size:1.25rem}p.aside{font-size:.8rem}p.note{font-size:.64rem;letter-spacing:.01rem;max-width:18.1898940355rem}input,textarea{box-sizing:border-box}input[type=checkbox],input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=radio],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background-color:#fff;border:1px solid #ddd;box-shadow:inset 0 1px 2px rgba(0,0,0,.07);color:#32373c;outline:none;transition:border-color .05s ease-in-out}input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#5b9dd9;box-shadow:0 0 2px rgba(30,140,190,.8)}input[type=email],input[type=url]{direction:ltr}input[type=number]{height:28px;line-height:inherit}input[type=checkbox],input[type=radio]{background:#fff;border:1px solid #b4b9be;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);clear:none;color:#555;cursor:pointer;display:inline-block;height:16px;line-height:0;margin:-4px 4px 0 0;min-width:16px;outline:0;padding:0!important;text-align:center;transition:border-color .05s ease-in-out;vertical-align:middle;width:16px;-webkit-appearance:none}input[type=checkbox]:checked:before,input[type=radio]:checked:before{display:inline-block;float:left;font:normal 21px/1 dashicons;vertical-align:middle;width:16px;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=checkbox].disabled,input[type=checkbox].disabled:checked:before,input[type=checkbox]:disabled,input[type=checkbox]:disabled:checked:before,input[type=radio].disabled,input[type=radio].disabled:checked:before,input[type=radio]:disabled,input[type=radio]:disabled:checked:before{opacity:.7}input[type=checkbox]:checked:before{color:#1e8cbe;content:"";margin:-3px 0 0 -4px}input[type=radio]{border-radius:50%;line-height:10px;margin-right:4px}input[type=radio]:checked+label:before{color:#82878c}input[type=radio]:checked:before{background-color:#1e8cbe;border-radius:50px;content:"•";font-size:24px;height:6px;line-height:16px;margin:4px;text-indent:-9999px;width:6px}input[type=reset]:active,input[type=reset]:hover{color:#00a0d2}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-decoration{display:none}button,input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}input,select,textarea{border-radius:0;font-size:14px;padding:3px 5px}textarea{line-height:1.4;overflow:auto;padding:2px 6px;resize:vertical}textarea.code{line-height:1.4;padding:4px 6px 1px}label{cursor:pointer;vertical-align:middle}input,select{margin:1px;padding:3px 5px}input.code{padding-top:6px}input.readonly,input[readonly],textarea.readonly,textarea[readonly]{background-color:#eee}.wp-core-ui :-moz-placeholder,:-moz-placeholder{color:#a9a9a9}input.disabled,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{background:hsla(0,0%,100%,.5);border-color:hsla(0,0%,87.1%,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);color:rgba(51,51,51,.5)}input[type=file].disabled,input[type=file]:disabled,input[type=range].disabled,input[type=range]:disabled{background:none;box-shadow:none}input.large-text,textarea.large-text{width:99%}input.regular-text{width:25em}input.small-text{padding:1px 6px;width:50px}input[type=number].small-text{width:65px}input.tiny-text{width:35px}input[type=number].tiny-text{width:45px}@media screen and (max-width:782px){textarea{-webkit-appearance:none}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;padding:6px 10px}input[type=number]{height:40px}input.code{padding-bottom:5px;padding-top:10px}input[type=checkbox]{-webkit-appearance:none;padding:10px}input[type=checkbox]:checked:before{font:normal 30px/1 dashicons;margin:-3px -5px}input[type=checkbox],input[type=radio]{height:25px;width:25px}input[type=radio]:checked:before{vertical-align:middle;width:9px;height:9px;margin:7px;line-height:16px}input,textarea{font-size:16px}input[type=number].small-text,input[type=password].small-text,input[type=search].small-text,input[type=text].small-text{width:auto;max-width:55px;display:inline;padding:3px 6px;margin:0 3px}input.regular-text{width:100%}label{font-size:14px}fieldset label{display:block}}a.button:active,a.button:focus,a.button:hover{text-decoration:none}.notice{background:#fff;border-left:4px solid #fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:1em 0;padding:1px 12px}.notice p{font-size:.8rem;margin:.5em 0;padding:2px}.notice.notice-alt{box-shadow:none}.notice.notice-large{padding:10px 20px}.notice.notice-success{border-left-color:#46b450}.notice.notice-success.notice-alt{background-color:#ecf7ed}.notice.notice-warning{border-left-color:#ffb900}.notice.notice-warning.notice-alt{background-color:#fff8e5}.notice.notice-error{border-left-color:#dc3232}.notice.notice-error.notice-alt{background-color:#fbeaea}.notice.notice-info{border-left-color:#00a0d2}.notice.notice-info.notice-alt{background-color:#e5f5fa}.error-404 .page-content,.error-404 .page-title{text-align:center}.error-404 .page-content .logo-swing{height:10rem;margin:6rem auto;position:relative;text-align:center;width:10rem}.error-404 .page-content .logo-swing .wp-logo{left:0;max-width:none;position:absolute;top:0;width:10rem}@keyframes hinge{10%{width:180px;height:180px;transform:rotate(0deg)}15%{width:185px;height:185px;transform:rotate(0deg)}20%{width:180px;height:180px;transform:rotate(5deg)}40%{transform-origin:top left;animation-timing-function:ease-in-out}60%{transform:rotate(40deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-duration:2s;animation-name:hinge}.comments-area{margin-top:5em}.comments-area>:last-child{margin-bottom:0}.comments-area .comment-list+.comment-respond{border-top:1px solid #eaeaea}.comments-area .comment-list+.comment-respond,.comments-area .comment-navigation+.comment-respond{padding-top:1.6em}.comments-area .comments-title{margin-bottom:1.3333em}.comments-area .comment-list{list-style:none;margin:0}.comments-area .comment-list .pingback,.comments-area .comment-list .trackback,.comments-area .comment-list article{border-top:1px solid #eaeaea;padding:1.6em 0}.comments-area .comment-list article:not(:only-child){padding-bottom:0}.comments-area .comment-list article+.comment-respond{padding-bottom:1.6em}.comments-area .comment-list .children{list-style:none;margin:0}.comments-area .comment-list .children>li{padding-left:.8em}.comments-area .comment-list .alt{background:none}.comments-area .comment-author{color:#999;margin-bottom:.4em}.comments-area .comment-author .avatar{float:left;height:24px;margin-right:.8em;width:24px}.comments-area .comment-metadata,.comments-area .pingback .edit-link{color:#999;line-height:1.5}.comments-area .comment-metadata a,.comments-area .pingback .edit-link a{color:#777}.comments-area .comment-metadata{font-size:.8rem;margin-bottom:1.6em}.comments-area .comment-metadata .edit-link,.comments-area .pingback .edit-link{margin-left:1em}.comments-area .pingback .edit-link:before{top:5px}.comments-area .comment-content ol,.comments-area .comment-content ul{margin:0 0 1.6em 1.3333em}.comments-area .comment-content>:last-child,.comments-area .comment-content li>ol,.comments-area .comment-content li>ul{margin-bottom:0}.comments-area .comment-content .reply{font-size:12px}.comments-area .comment-content .reply a{border:1px solid #eaeaea;color:#707070;display:inline-block;font-weight:700;line-height:1;margin-top:2em;padding:.4167em .8333em;text-transform:uppercase}.comments-area .comment-content .reply a:focus,.comments-area .comment-content .reply a:hover{border-color:#333;color:#333;outline:0}.comments-area .comment-reply-title a{font-weight:inherit}.comments-area .comment-form label{font-size:.8rem;font-weight:700;display:block;letter-spacing:.04em;line-height:1.5}.comments-area .comment-form input[type=email],.comments-area .comment-form input[type=text],.comments-area .comment-form input[type=url],.comments-area .comment-form textarea{width:100%}.comments-area .comment-awaiting-moderation,.comments-area .comment-notes,.comments-area .form-allowed-tags,.comments-area .logged-in-as{font-size:1rem;line-height:1.5;margin-bottom:2em}.comments-area .no-comments{border-top:1px solid #eaeaea;color:#999;font-weight:700;padding-top:1.6em}.comments-area .comment-navigation+.no-comments{border-top:0}.comments-area .form-allowed-tags code{font-family:Inconsolata,monospace}.comments-area .form-submit{margin-bottom:0}.comments-area .required{color:#c0392b}.entry-content{hyphens:auto;word-wrap:break-word}.entry-content>p:first-child{margin-top:0}.entry-content [class*=col-]~h1,.entry-content [class*=col-]~h2,.entry-content [class*=col-]~h3,.entry-content [class*=col-]~h4,.entry-content [class*=col-]~h5,.entry-content [class*=col-]~h6{clear:none}.entry-header{position:relative}.entry-header .sticky-post{color:#999;font-size:.8rem;font-style:italic;position:absolute;top:-.8rem}.entry-meta{color:#999;font-size:.8rem;margin-bottom:1rem}.entry-meta a{color:#777}.entry-meta>span{margin-right:1rem}.entry-meta>span :last-of-type{margin:0}.entry-meta .byline,.entry-meta .updated:not(.published),.sticky .entry-meta .posted-on{display:none}.group-blog .entry-meta .byline,.single .entry-meta .byline{display:inline}.entry-summary{hyphens:auto;word-wrap:break-word}body:not(.single):not(.search) .site-main .post{margin-bottom:3.0517578125rem;max-width:40em}.gallery{margin-bottom:1.5rem}.gallery .gallery-item{display:inline-block;margin:0;text-align:center;vertical-align:top;width:100%}.gallery.gallery-columns-2 .gallery-item{max-width:50%}.gallery.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery.gallery-columns-4 .gallery-item{max-width:25%}.gallery.gallery-columns-5 .gallery-item{max-width:20%}.gallery.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery .gallery-caption{display:block}.main-navigation{background:#0073aa;clear:both;left:0;position:absolute;top:60px;width:100%}.main-navigation ul{display:none;list-style:none;margin:0;padding-left:0}.main-navigation ul ul{box-shadow:0 3px 3px rgba(0,0,0,.2);float:left;left:-999em;position:absolute;top:1.5em;z-index:99999}.main-navigation ul ul ul{left:-999em;top:0}.main-navigation ul ul li.focus>ul,.main-navigation ul ul li:hover>ul{left:100%}.main-navigation ul ul a{width:200px}.main-navigation ul li.focus>ul,.main-navigation ul li:hover>ul{left:auto}.main-navigation li{border-top:1px solid hsla(0,0%,100%,.2);padding:1rem}.main-navigation a{color:hsla(0,0%,100%,.8);display:block;font-size:.8rem;text-decoration:none}.main-navigation a.active,.main-navigation a:hover{color:#fff}@media screen and (min-width:737px){.main-navigation a.active{border-bottom:1px solid}}.main-navigation.toggled{z-index:1}.main-navigation.toggled ul{display:block}.menu-toggle{background:transparent;border:none;color:#fff;height:3.5rem;position:absolute;right:1rem;top:-58px;width:3.5rem}.toggled .menu-toggle:before{content:""}@media screen and (min-width:737px){.menu-toggle{display:none}.main-navigation{float:right;position:static;width:auto}.main-navigation.toggled{padding:1px 0}.main-navigation ul{display:inline-block;font-size:0}.main-navigation ul li{border:0;display:inline-block;font-size:1rem;margin-right:1rem;padding:0}.main-navigation ul li:last-of-type{margin-right:0}}.comment-content .wp-smiley,.entry-content .wp-smiley,.page-content .wp-smiley{border:none;margin-bottom:0;margin-top:0;padding:0}embed,iframe,object{max-width:100%}body.page .gutters .col-12{width:100%}body.page .entry-header{background:#0073aa;padding:1rem 0}body.page .entry-header .entry-title{color:#fff;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 auto;padding:0 1.5625rem}body.page .entry-header.home{padding:1.5625rem 1.143rem;text-align:center}@media screen and (min-width:737px){body.page .site-header+.site-main .entry-title{padding:initial}}body.page .entry-content,body.page .entry-footer{margin:0 auto;max-width:960px;padding:3.0517578125rem 1.5625rem}.post-navigation{margin:5em auto;padding:0}.post-navigation a{border-bottom:1px solid #eaeaea;color:#444;display:block;font-weight:600;padding:11px 0 12px;text-transform:none;width:100%}.post-navigation a:hover{color:#21759b}.post-navigation .nav-links{border-top:1px solid #eaeaea;hyphens:auto;word-wrap:break-word}.post-navigation .meta-nav{color:#777;display:block;font-size:13px;line-height:2;text-transform:uppercase}.post-navigation .nav-next{text-align:right}.pagination .nav-links{text-align:center}.pagination .nav-links .page-numbers{background-color:#f9f9f9;cursor:hand;display:inline-block;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.dots,.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.prev{background:none;font-size:.9em;width:auto}.pagination .nav-links .page-numbers.dots{cursor:inherit}@media screen and (max-width:737px){.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.prev{font-size:0;min-width:0;padding:0}.pagination .nav-links .page-numbers.next:after,.pagination .nav-links .page-numbers.prev:before{background-color:#f9f9f9;display:inline-block;font-size:1rem;line-height:1.5;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.prev:before{content:"‹"}.pagination .nav-links .page-numbers.next:after{content:"›"}}.pagination .nav-links span.page-numbers{background-color:#f7f7f7;font-weight:700}.search-form .search-field{line-height:normal;margin:0;padding:4px 5px;vertical-align:text-bottom}body.search .gutters .col-12{width:100%}body.search .site-main{margin:0 auto;max-width:960px;padding:0 1.5625rem 3.0517578125rem}.site-content{max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-content{padding:0 10px 3.0517578125rem}}@media screen and (max-width:737px){.site-content .site-main{float:none;margin:0;width:auto}}.home .site-content,.page .site-content,.site-content.page{margin:auto;max-width:none;padding:0}.site-content .page-title{font-size:1.25rem;font-weight:400}.site-content .no-results{margin:0 auto 3.0517578125rem;max-width:40em;padding:0 2rem}.site-description{color:hsla(0,0%,100%,.8);font-size:1.25rem;font-weight:300;margin:-.4rem auto 2rem;text-align:center}.site-header{background:#0073aa;padding:1rem 0;position:relative}.site-header .site-branding{margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-header .site-branding{padding:0 10px}}.site-header.home{padding:1.5625rem 1.143rem;text-align:center}.site-title{display:inline-block;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 2rem 0 0;max-width:none}.site-title a{color:#fff;font-weight:300}.site-title a:active,.site-title a:focus,.site-title a:hover{text-decoration:none}.site-header.home .site-title{display:inherit;font-size:3.8146972656rem;margin:2rem 0 1rem}.widget-area{font-size:.8rem}@media screen and (min-width:480px) and (max-width:768px){.widget-area{display:flex}.widget-area .widget{width:48%}}#wporg-footer{background-color:#f7f7f7;border-top:1px solid #dfdfdf;padding:22px 14px 65px}#wporg-footer,#wporg-footer .wrapper{clear:both;margin:0 auto;overflow:auto}#wporg-footer .wrapper{max-width:930px}#wporg-footer ul{float:left;margin-bottom:20px;margin-left:24px;overflow:auto;padding-left:0;width:135px}@media screen and (min-width:960px){#wporg-footer ul:first-child{margin-left:0}}#wporg-footer ul li{color:#bbb;font-size:14px;list-style-type:none;margin-bottom:1px}#wporg-footer ul li a{text-decoration:none;text-decoration-skip-ink:none}#wporg-footer ul li a:hover{color:#0073aa;text-decoration:underline}#wporg-footer .cip{clear:both;color:#ccc;float:none;font-size:.8rem;letter-spacing:.3em;margin:35px auto 0;text-align:center;text-transform:uppercase}#wporg-footer .cip.cip-image{background:url(//s.w.org/style/images/codeispoetry.png?1=) 50% no-repeat;background-size:190px 15px;height:15px;text-indent:-9999px;width:190px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx),only screen and (min-resolution:144dpi){#wporg-footer .cip.cip-image{background-image:url(//s.w.org/style/images/codeispoetry-2x.png?1=)}}@media screen and (min-width:561px) and (max-width:959px){#wporg-footer .wrapper{max-width:600px}#wporg-footer ul{margin-left:2%;width:32%}#wporg-footer ul:nth-child(3n+1){margin-left:0}#wporg-footer ul:nth-child(4n){clear:both}}@media screen and (max-width:560px){#wporg-footer .wrapper{max-width:360px}#wporg-footer ul{margin-left:4%;width:48%}#wporg-footer ul:nth-child(odd){margin-left:0;clear:both}}#wporg-header{background:#23282d;height:140px;position:relative;text-align:center;width:100%}#wporg-header .wrapper{margin:0 auto;max-width:960px}#wporg-header h1{display:inline-block;margin:auto;width:303px}#wporg-header h1 a{background:url(//s.w.org/style/images/wporg-logo.svg?3=) 0 no-repeat;background-size:290px 46px;display:block;height:88px;text-indent:-9999px}#wporg-header h2.rosetta{clear:none;color:#dfdfdf;font-family:Georgia,Times New Roman,serif;font-size:30px;margin:0 0 0 60px}#wporg-header h2.rosetta a{border-bottom:none;color:#dfdfdf;display:block;height:52px;line-height:22px;padding:0}#wporg-header h2.rosetta a:hover{text-decoration:none}#wporg-header #wporg-header-menu{background:#23282d;left:-75%;list-style:none;margin:0;max-width:75%;min-width:200px;position:absolute;text-align:left;top:100%;transition:left .3s;z-index:100000}#wporg-header #wporg-header-menu.toggled{left:0}#wporg-header ul li{list-style-type:none;position:relative}#wporg-header ul li a{color:#eee;display:block;font-family:Open Sans,Helvetica,Arial,Liberation Sans,sans-serif;font-size:13px;font-weight:600;height:34px;line-height:34px;margin:0 4px;padding:10px 30px;text-decoration:none}#wporg-header ul li a.subcurrent{font-weight:700}@media (max-width:768px){#wporg-header ul li a{height:auto}}#wporg-header ul li.current-menu-item a,#wporg-header ul li.current_page_parent a,#wporg-header ul li a.current,#wporg-header ul li a:hover{color:#00a0d2}#wporg-header ul li#download,#wporg-header ul li.download{float:right;height:34px;margin-right:14px;overflow:hidden;padding:0 0 34px}@media screen and (max-width:767px){#wporg-header ul li#download,#wporg-header ul li.download{display:block;float:none;margin:10px 20px 20px;padding-bottom:0;height:auto}#wporg-header ul li#download a,#wporg-header ul li.download a{padding:4px 10px;text-align:center}}#wporg-header ul li#download a,#wporg-header ul li.download a{margin:0;padding:0 16px}#wporg-header ul li#download a:hover,#wporg-header ul li.download a:hover{color:#eee}#wporg-header ul li#download.current,#wporg-header ul li#download.current-menu-item,#wporg-header ul li#download .uparrow,#wporg-header ul li.download.current,#wporg-header ul li.download.current-menu-item,#wporg-header ul li.download .uparrow{display:none}#wporg-header ul li .nav-submenu{clip:rect(1px,1px,1px,1px);height:1px;left:-2px;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;z-index:99999}#wporg-header ul li .nav-submenu li a{display:inline-block;height:24px;line-height:24px;margin:0;white-space:nowrap}@media screen and (min-width:768px){#wporg-header #head-search{float:right;margin-right:14px;padding-top:30px}}#wporg-header #head-search form{border-bottom:1px solid #3f3f3f;display:inline-block;margin-left:60px;width:288px}#wporg-header #head-search form input.text{background:#191e23;border:0;border-radius:0;box-sizing:content-box;color:#b4b9be;float:left;font-family:Open Sans,sans-serif;font-size:12px;height:24px;margin:0;outline:none;padding:3px;vertical-align:top;width:256px}#wporg-header #head-search form input.text::-moz-placeholder{color:#eee}@media screen and (max-width:480px){#wporg-header #head-search form input.text{width:216px}}#wporg-header #head-search form .button{background:#191e23 url(//s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831) no-repeat 2px 5px;border:none;border-radius:0;box-shadow:none;float:left;height:30px;margin:0;padding:0;text-shadow:none!important;width:26px}@media screen and (max-width:480px){#wporg-header #head-search form{width:248px}}@media screen and (min-width:480px){#wporg-header #head-search form{margin-left:0}}@media screen and (min-width:768px){#wporg-header{height:120px;text-align:inherit}#wporg-header h1{float:left;padding-left:10px}#wporg-header h2.rosetta{float:left;margin-left:0;padding:36px 27px 0}#wporg-header #headline h2{text-rendering:optimizeLegibility}#wporg-header #wporg-header-menu{float:left;height:46px;list-style:none;margin:-15px 0 0;max-width:inherit;min-width:0;padding:0;position:static;width:100%}#wporg-header ul li{float:left;position:relative}#wporg-header ul li a{height:46px;padding:0 6px}#wporg-header ul li a.current~.uparrow{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-8px auto 0;width:0}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:50%;margin:-8px 0 0 -9px;position:absolute;width:0}#wporg-header ul li .nav-submenu:hover~.uparrow,#wporg-header ul li:hover .nav-submenu~.uparrow{border-bottom:9px solid #32373c;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-10px auto 0;width:0}#wporg-header ul li .nav-submenu{background:#32373c;border:1px solid #32373c;border-top:0;margin-top:-1px;min-width:0}#wporg-header ul li .nav-submenu li{float:none}#wporg-header ul li .nav-submenu li a{height:34px;line-height:34px}#wporg-header .nav-menu .focus>ul,#wporg-header .nav-menu ul li:hover>ul,#wporg-header ul.nav-menu .focus>ul,#wporg-header ul.nav-menu li:hover>ul{clip:inherit;height:inherit;overflow:inherit;width:inherit}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after,#wporg-header ul li a.current~.uparrow{border-bottom-color:#0073aa}}.page-download #wporg-header #download,.page-parent-download #wporg-header #download{display:none}#mobile-menu-button{background:none;border:none;box-shadow:none;display:block;float:left;font-family:dashicons;font-size:16px;font-style:normal;font-weight:400;left:10px;line-height:1;padding:1px;position:absolute;text-align:center;text-decoration:inherit;text-shadow:none;top:75px;transition:color .1s ease-in;vertical-align:top;-webkit-font-smoothing:antialiased}#mobile-menu-button:before{border:none;box-sizing:border-box;color:#888;content:"";display:inline-block;float:left;font:normal 50px/1 Dashicons;margin:0;outline:none;padding:3px;text-decoration:none;vertical-align:middle;-webkit-font-smoothing:antialiased}@media screen and (min-width:768px){#mobile-menu-button{display:none}}#download-mobile{background:#f7f7f7;border-bottom:1px solid #ddd}#download-mobile .wrapper{padding:20px 0;text-align:center}#download-mobile span.download-ready{font-size:1.6em;margin:0 .25em}#download-mobile a.download-button{font-size:1.6em;height:inherit;margin:10px .25em;padding:10px 15px}.category-context-bar{margin:0 1.5rem;background:#edeff0;border-radius:2px;font-size:.8125rem;overflow:auto;transition:all .3s ease-out}@media (prefers-reduced-motion){.category-context-bar{transition:none}}.category-context-bar>div{display:flex;align-items:center;justify-content:space-between}@media only screen and (min-width:782px){.category-context-bar{margin:0 1.5rem}}@media only screen and (min-width:960px){.category-context-bar{margin:0 auto;max-width:960px}}.category-context-bar ul{margin:0;padding:0;display:flex;justify-content:space-between}.category-context-bar ul li{list-style:none;font-size:.8125rem}.category-context-bar ul li a{display:block;padding:1.125rem .75rem;text-decoration:none}.category-context-bar ul li:last-child a{padding-right:1.5rem}.category-context-bar__copy{display:flex;align-items:center;margin:0;padding:1.125rem 1.5rem;font-size:.8125rem;font-weight:400}.category-context-bar__title{margin:0;padding-right:1.5rem;color:#555d66;font-size:.75rem;font-weight:400;text-transform:uppercase}.category-context-bar__links{display:flex;align-items:center}@media only screen and (max-width:782px){.category-context-bar__links{display:none}}.category-context-bar__spinner{display:flex;width:28px;margin:0;transition:transform .1s linear,width .15s ease-out,opacity 50ms linear 50ms;transform:scale(1)}@media (prefers-reduced-motion){.category-context-bar__spinner{transition:none}}.category-context-bar__spinner .components-spinner{margin:0}.category-context-bar__spinner--is-hidden{overflow:hidden;width:0;opacity:0;transform:scale(0)}.category-menu{margin:0;padding:0;position:relative}.category-menu li{display:inline-block;margin:0;list-style:none}.category-menu a{display:block;padding:.5rem .75rem;color:#40464d;font-size:.875rem;text-decoration:none}.category-menu a:active,.category-menu a:focus,.category-menu a:hover{color:#000}li .category-menu--is-active{color:#fff;background:#0073aa;border-radius:2px}li .category-menu--is-active:focus,li .category-menu--is-active:hover{color:#fff}.category-menu__mobile{padding:0!important;border-top:none!important}.category-menu__mobile ul{margin:0;padding:0;background:#23282d}.category-menu__mobile li{list-style:none;border-top:1px solid #32373c}.category-menu__mobile li a{display:block;padding:1rem 1.5rem;font-size:.875rem;text-decoration:none;color:#ccd0d4}.category-menu__mobile>.components-panel__body-title{margin:0!important}.category-menu__mobile>.components-panel__body-title>button{padding:1.5rem}.category-menu--is-loading{height:24px;position:relative}.category-menu--is-loading:after{content:"";position:absolute;background:#f3f4f5;border-radius:4px;width:80%;height:24px;left:0;top:calc(50% - 12px);transition:none}.category-search{display:flex;align-items:center;background:#fff;border:1px solid #6c7782;border-radius:2px}.category-search input[type=search]{flex-grow:1;margin:0;padding:.25rem .5rem;border:none;box-shadow:none;font-size:.8125rem}.category-search input[type=search]:focus{outline:1px auto #0073aa}.category-search__button{display:flex;background:transparent;border:none;color:#6c7782}.category-search__button:active{background:#d7dade}.category-search__button:focus{outline:1px auto #0073aa}.category-search--is-loading{display:block;height:24px;min-width:100%;background:#f3f4f5;border-radius:4px}@media only screen and (min-width:480px){.category-search--is-loading{width:224px!important;min-width:auto!important}}.pattern__copy-button.is-small-label{box-shadow:0 1px 2px rgba(0,0,0,.15)}.pattern__favorite-button{position:relative;font-size:.875rem;height:2.25rem;width:2.25rem;border-radius:2px;color:#555d66}.pattern__favorite-button svg{position:absolute;top:calc(50% - .75rem);left:calc(50% - .75rem);height:1.5rem;width:1.5rem;transition:all .15s ease-out}.pattern__favorite-button svg path{fill:#6c7782}.pattern__favorite-button .pattern__favorite-filled{opacity:0}.pattern__favorite-button:hover{color:#555d66;background:transparent}.pattern__favorite-button:hover svg path{fill:#555d66}.pattern__favorite-button:active{background:transparent;box-shadow:none;transform:none}.pattern__favorite-button.has-label{padding:12px 18px 12px 38px;height:auto;width:auto}.pattern__favorite-button.has-label svg{top:calc(50% - 12px);left:9px}.pattern__favorite-button.has-label svg path{fill:#000}.pattern__favorite-button.is-favorited svg path{fill:#d94f4f}.pattern__favorite-button.is-favorited .pattern__favorite-outline{opacity:0;transform:scale(2.8)}.pattern__favorite-button.is-favorited .pattern__favorite-filled{opacity:1}.pattern__favorite-button.is-favorited:hover .pattern__favorite-filled{animation:HeartBeat .9s infinite}@media (prefers-reduced-motion){.pattern__favorite-button.is-favorited:hover .pattern__favorite-filled{animation:none}}@keyframes HeartBeat{0%{transform:scale(1)}25%{transform:scale(1.2)}40%{transform:scale(1)}60%{transform:scale(1.2)}to{transform:scale(1)}}.main-navigation{float:none;position:static;width:auto}.main-navigation a{font-size:.8125rem}.main-navigation.toggled div.menu{position:absolute;top:57px;right:0;width:100%;background:#0073aa}.menu-toggle{position:static;height:auto;width:auto;font-size:1.5625rem;overflow:hidden;-webkit-appearance:none}body.page .entry-header{background:none;padding:0}body.page .entry-header .entry-title{color:inherit;margin:2rem auto 1rem;max-width:960px}@media screen and (min-width:737px){body.page .entry-header .entry-title{padding:0 10px}}.pattern-grid-menu{margin:0 auto;max-width:960px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.pattern-grid-menu>:first-child,.pattern-grid-menu>:last-child{width:100%}.pattern-grid-menu>:last-child{margin:1.5rem;width:calc(100% - 3rem)}@media only screen and (min-width:782px){.pattern-grid-menu{margin:1.5rem;flex-direction:row}.pattern-grid-menu>:last-child{margin:0;width:auto}}@media only screen and (min-width:960px){.pattern-grid-menu{margin:1.5rem auto}}.pattern-grid{max-width:960px;margin:1.5rem}@media screen and (min-width:600px){.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.pattern-grid>*{align-self:baseline}}@media screen and (min-width:960px){.pattern-grid{margin-left:auto;margin-right:auto}}.pattern-grid__pattern{position:relative;margin:0 0 1.5rem;border:1px solid #d7dade;border-radius:2px;transition:all 75ms ease-in-out}@media screen and (min-width:600px){.pattern-grid__pattern{display:inline-block;margin:0}}.pattern-grid__pattern .pattern-grid__preview{overflow:hidden}.pattern-grid__pattern .pattern-grid__actions{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;padding:.375rem;background:hsla(0,0%,100%,.8);backdrop-filter:blur(3px);opacity:0;transform:translateY(6px);transition:all 75ms ease-in-out}.pattern-grid__pattern .pattern-grid__actions .pattern-grid__title{flex-grow:1;margin:0;padding:0 .375rem 0 .75rem;font-size:.75rem;pointer-events:none}.pattern-grid__pattern .pattern-grid__actions .pattern__copy-button,.pattern-grid__pattern .pattern-grid__actions .pattern__favorite-button{flex-shrink:0}.pattern-grid__pattern .pattern-grid__actions .button+.components-button{margin-left:.375rem}.pattern-grid__pattern:focus-within .pattern-grid__actions,.pattern-grid__pattern:hover .pattern-grid__actions{opacity:1;transform:translateY(0)}.pagination{max-width:960px;margin:1.5rem}@media screen and (min-width:960px){.pagination{margin-left:auto;margin-right:auto}}.pagination__list{display:flex;margin:0;list-style:none;justify-content:center;align-items:center;gap:.75rem}@media (max-width:480px){.pagination__list{gap:.25rem}}.pagination__item,.pagination__link{display:inline-block}.pagination__link{padding:.75rem;background:#fff;border:1px solid #d7dade;border-radius:2px;line-height:1}.pagination__link,.pagination__link:active,.pagination__link:hover{text-decoration:none}.pagination__link[aria-current=page]{border:1px solid #191e23;background:#191e23;color:#fff}@media (max-width:480px){.pagination__link{padding:.5rem}}@media (max-width:600px){.pagination__item-next-page .pagination__link span[aria-hidden],.pagination__item-previous-page .pagination__link span[aria-hidden]{display:none}.pagination__item-previous-page .pagination__link:before{content:"<"}.pagination__item-next-page .pagination__link:before{content:">"}}.pattern-preview__container{padding:0;background:#f3f4f5}.pattern-preview__size-control{margin:0 auto;padding:1rem 0;max-width:12rem}.pattern-preview__size-control .components-base-control__field{margin-bottom:0}.pattern-preview__viewport{position:relative;margin:0 auto;padding:0 20px;max-width:100vw;min-width:320px}.pattern-preview__viewport .pattern-preview__viewport-iframe{background:#fff;border:1px solid #e8eaeb;vertical-align:middle;max-width:100vw}.pattern-preview__viewport:focus-within .pattern-preview__resize-help{clip:auto;clip-path:none;height:auto;margin:initial;overflow:initial;width:auto;bottom:-1rem;left:20px;right:20px;padding:8px 16px;background:#fff;border-radius:2px;border:1px solid #d7dade;text-align:center}.pattern-preview__drag-handle{position:absolute;top:0;bottom:0;width:20px}.pattern-preview__drag-handle.is-left{left:0}.pattern-preview__drag-handle.is-right{right:0}.pattern-preview__drag-handle-button{position:absolute;top:calc(50% - 50px);left:6px;padding:0;width:8px;height:100px;appearance:none;cursor:grab;outline:none;background:#7e8993;border-radius:99999px;border:none}.pattern-preview__drag-handle-button:hover{background:#6c7782}.pattern-preview__drag-handle-button:active{cursor:grabbing;background:#606a74}.pattern-preview__drag-handle-button:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}.pattern-report-button{color:#23282d!important}.pattern-report-button__copy{margin:0;display:flex;justify-content:center;align-items:center}.pattern-report-button__copy svg{margin-right:.375rem}.pattern-report-modal{max-width:400px;width:100%}@media screen and (min-width:600px){.pattern-report-modal{width:400px}}.pattern-report-modal form>:first-child{padding-bottom:1.5rem}.pattern-report-modal__has-fixed-height{min-height:400px}.pattern-report-modal__copy{text-align:center;line-height:1.5}.pattern-report-modal__actions{margin-top:1.5rem;display:grid;grid-template-columns:48% 48%;column-gap:4%}.pattern-report-modal__actions button{justify-content:center}.pattern-report-modal__radio .components-radio-control__option{margin-top:.75rem}body.single-wporg-pattern{box-sizing:border-box;font-size:14px;font-weight:400;line-height:1.2}body.single-wporg-pattern .site-content{margin:auto;max-width:none;padding:0}body.single-wporg-pattern .entry-header,body.single-wporg-pattern .pattern-actions__container,body.single-wporg-pattern .pattern__meta{max-width:960px;padding:1.5rem;margin-left:auto;margin-right:auto}@media only screen and (min-width:960px){body.single-wporg-pattern .entry-header,body.single-wporg-pattern .pattern-actions__container,body.single-wporg-pattern .pattern__meta{padding-left:0;padding-right:0}}body.single-wporg-pattern .entry-header{padding-top:2.625rem;padding-bottom:1.875rem}body.single-wporg-pattern .entry-header .entry-title{margin-top:0;line-height:1.2;font-weight:600}body.single-wporg-pattern .pattern__categories a{display:inline-block;margin-right:1rem}body.single-wporg-pattern .pattern__categories a:last-of-type{margin-right:0}body.single-wporg-pattern .pattern__categories-label{margin-right:1rem;font-weight:600;font-size:.75rem;line-height:1.3333;text-transform:uppercase}body.single-wporg-pattern .pattern-actions{padding:0 1.5rem 2rem;background:#fff}body.single-wporg-pattern .pattern-actions button{margin:0}@media only screen and (min-width:960px){body.single-wporg-pattern .pattern-actions{padding-left:0;padding-right:0}}body.single-wporg-pattern .pattern-actions__container{padding:0;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:.5em 2em}@media (max-width:480px){body.single-wporg-pattern .pattern-actions__container{justify-content:center}}body.single-wporg-pattern .pattern-actions__notice{margin:1.5rem 0 0;height:auto;flex-basis:100%}body.single-wporg-pattern .pattern-actions__notice>*{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;margin:0}body.single-wporg-pattern .pattern-actions__notice>* button{margin-top:.75rem}@media only screen and (min-width:600px){body.single-wporg-pattern .pattern-actions__notice>*{align-items:center;flex-direction:row}body.single-wporg-pattern .pattern-actions__notice>* button{margin-top:0}}body.single-wporg-pattern .pattern-actions__guide{max-width:384px;height:auto;max-height:none}body.single-wporg-pattern .pattern-actions__guide-content{padding:1.5rem;line-height:1.5}body.single-wporg-pattern .pattern-actions__guide-title{margin:0}body.single-wporg-pattern .pattern-actions__guide-shortcut{background:#edeff0;box-shadow:0 0 0 1px #ccd0d4;padding:1px;font-weight:600;min-width:20px;display:inline-block;text-align:center;border-radius:2px}body.single-wporg-pattern .entry-content{max-width:960px;margin-left:auto;margin-right:auto}body.single-wporg-pattern .pattern__meta{display:flex;justify-content:flex-end}.site-header:not(.home) .search-form{display:flex;align-items:center}.site-header:not(.home) .search-form>input{flex:1;border:0;border-radius:2px 0 0 2px;display:inline-block;font-size:12px;padding:5px 10px;position:relative;width:auto;height:100%}.site-header:not(.home) .search-form button{margin:0;border-radius:0 2px 2px 0;padding:3px 12px;height:unset}.search-form--is-inline .search-form{display:flex;justify-content:space-between;background:#fff}.search-form--is-inline .search-form>label{flex:1}.search-form--is-inline .search-form input{padding:.5rem;background:transparent;border:none;box-shadow:none;width:100%;font-size:14px}@media only screen and (min-width:768px){.search-form--is-inline .search-form input{font-size:16px}}.search-form--is-inline .search-form button{background:transparent;margin-bottom:0;border:0;box-shadow:none;height:inherit;text-shadow:none;color:#32373c}.search-form--is-inline .search-form button:focus{-webkit-box-shadow:0 0 2px 1px #0073aa;box-shadow:0 0 2px 1px #0073aa}.search-form--is-centered .search-form{margin:0 auto}.search-form--is-constrained .search-form{max-width:36rem}.search-form--is-muted .search-form{border-color:#d7dade!important}.search-form--is-muted .search-form button,.search-form--is-muted .search-form input{background:#f8f9f9;color:#7e8993}.search-form--has-medium-text .search-form input{font-size:14px}.search-form--has-border .search-form{border:1px solid #7e8993}.section-heading_link,.section-heading_title{margin-bottom:0}.section-heading_title{font-weight:300}.section-heading_title .archive-title-prefix{display:block;font-size:1rem}.section-heading_link{text-decoration:underline;font-weight:600;margin-top:1.5rem!important}@media only screen and (min-width:768px){.section-heading_link{margin-top:0!important}}.section-heading_description{margin:1rem 0 0}.section-heading_description :last-child{margin-bottom:0}.section-heading--with-space{padding-bottom:16px}.site-content{margin:0 auto;max-width:none;padding:0}body.home .site-header{padding:3.75rem 1rem;text-align:left}body.home .site-branding{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 22rem}body.home .site-branding>*{align-self:center}@media screen and (max-width:736px){body.home .site-branding{display:block}}body.home .site-title.site-title{grid-column-start:1;grid-row-start:1;margin-top:0;text-align:left;font-size:3rem;line-height:1.25}body.home .site-description{grid-column-start:1;grid-row-start:2;margin:0;font-size:1.25rem;line-height:1.6;text-align:left;color:#fff}body.home .site-callout{grid-column-start:2;grid-row-start:1;grid-row-end:span 2;margin-left:4rem;padding:1.125rem 1.5rem 1.5rem;font-size:.875rem;line-height:1.6;background:#fff;box-shadow:.75rem .75rem 0 rgba(0,0,0,.15)}body.home .site-callout h2{margin-top:0;font-size:1.125rem;line-height:1.25;font-weight:600}body.home .site-callout p:last-child{margin-bottom:0}@media screen and (max-width:736px){body.home .site-callout{margin:2rem auto 0;max-width:24rem}}body:not(.home) .site-branding{display:flex;align-items:center;justify-content:space-between;font-size:.8125rem;color:#fff}body:not(.home) .site-branding a{color:#fff}body:not(.home) .site-branding .sep{margin-left:.5rem;margin-right:.5rem}body:not(.home) .site-branding .is-current-page{font-weight:600}.site-title a{text-decoration:none}.site-title a:active,.site-title a:focus,.site-title a:hover{color:#fff}.has-wporg-blue-color{color:#1e8cbe}.has-wporg-blue-background-color{background-color:#1e8cbe}.has-wporg-purple-color{color:#826eb4}.has-wporg-purple-background-color{background-color:#826eb4}.has-wporg-white-color{color:#fff}.has-wporg-white-background-color{background-color:#fff}.home-page .shapes{position:relative;margin:0 auto}.home-page .shapes .parallelogram p:before{font-size:64px;height:64px;left:-16px;position:relative}.home-page .shapes .parallelogram{color:#fff;display:block;margin:0 auto;opacity:.9;padding:60px 40px;text-align:center;text-decoration:none}.home-page .shapes strong{display:block;font-size:28px;font-weight:300;padding-bottom:15px;padding-top:15px}.home-page .shapes p{color:#fff;font-size:16px;font-weight:300;margin:0}.home-page .shapes u{display:block;font-size:18px;padding-top:15px}@media only screen and (min-width:768px){.home-page .shapes{height:400px}.home-page .shapes .parallelogram{width:50%;position:absolute;padding:50px 90px}}@media only screen and (min-width:960px){.home-page .shapes .parallelogram{-webkit-transform:skew(-15deg);-ms-transform:skew(-15deg);transform:skew(-15deg)}.home-page .shapes .parallelogram:before,.home-page .shapes p{-webkit-transform:skew(15deg);-ms-transform:skew(15deg);transform:skew(15deg)}}@media only screen and (min-width:1200px){.home-page .shapes{margin:0 -60px}}.terms{font-style:italic;font-size:14px}

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php

@@ -65 +65 @@
         wp_add_inline_script(
             'wporg-pattern-script',
-            sprintf( 'var wporgAssetUrl = "%s";', esc_url( get_stylesheet_directory_uri() ) ),
+            sprintf(
+                'var wporgAssetUrl = "%s", wporgSiteUrl = "%s";',
+                esc_url( get_stylesheet_directory_uri() ),
+                esc_url( home_url() )
+            ),
             'before'
         );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json

@@ -52 +52 @@
         "grunt-sass-globbing": "1.5.1",
         "grunt-webpack": "4.0.2",
+        "lodash": "4.17.21",
         "react-use-gesture": "9.1.3",
         "sass": "1.32.8"
@@ -58 +59 @@
         "extends": "../../../../.eslintrc.js",
         "globals": {
-            "wporgAssetUrl": "readonly"
+            "wporgAssetUrl": "readonly",
+            "wporgSiteUrl": "readonly"
         }
     },

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php

@@ -26 +26 @@
                 <header class="entry-header">
                     <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
-                    <p>A large hero section with an example background image and a heading in the center.</p>
-                    <div id="pattern-actions" class="pattern-actions" data-id="<?php the_ID(); ?>">
-                        <button class="button button-primary">Copy Pattern</button>
-                        <button class="button">Add to favorites</button>
+                    <div class="pattern__categories">
+                        <?php
+                        $categories_list = get_the_term_list( get_the_ID(), 'wporg-pattern-category' );
+                        if ( $categories_list ) {
+                            echo $categories_list; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+                        }
+                        ?>
                     </div>
                 </header><!-- .entry-header -->
 
-                <div class="pattern-preview__container" hidden>
+                <div
+                    hidden
+                    class="pattern-preview__container"
+                    data-post-id="<?php echo intval( get_the_ID() ); ?>"
+                    data-logged-in="<?php echo json_encode( is_user_logged_in() ); ?>"
+                    data-user-has-reported="<?php echo json_encode( $user_has_reported ); ?>"
+                >
                     <?php echo rawurlencode( wp_json_encode( get_the_content() ) ); ?>
                 </div>
 
-                <div class="pattern__meta">
-                    <div>
-                        <div class="pattern__categories">
-                            <?php
-                            $categories_list = get_the_term_list( get_the_ID(), 'wporg-pattern-category', '', ', ' );
-                            if ( $categories_list ) {
-                                /* translators: 1: list of pattern categories. */
-                                printf( esc_html__( 'Categories: %1$s', 'wporg-patterns' ), $categories_list ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-                            }
-                            ?>
-                        </div>
-                        <div id="pattern-report"
-                            class="pattern__report"
-                            data-post-id="<?php echo intval( get_the_ID() ); ?>"
-                            data-logged-in="<?php echo json_encode( is_user_logged_in() ); ?>"
-                            data-user-has-reported="<?php echo json_encode( $user_has_reported ); ?>"
-                            ">
-                            <button class="button">Report this pattern</button>
-                        </div>
-                    </div>
-                </div>
-
                 <div class="entry-content">
-                    <h2>More from this designer</h2>
-                    <div class="pattern-grid">
-                        <ul>
-                            <li>Pattern A</li>
-                            <li>Pattern B</li>
-                            <li>Pattern C</li>
-                        </ul>
-                    </div>
+                    <h2><?php esc_html_e( 'More from this designer', 'wporg-patterns' ); ?></h2>
+                    <div class="pattern-grid"></div>
                 </div><!-- .entry-content -->
             </article><!-- #post-## -->

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/copy-pattern-button/index.js

@@ -2 +2 @@
  * External dependencies
  */
+import classnames from 'classnames';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
 import { __ } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
 import { Button } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
@@ -10 +18 @@
 import { copyToClipboard } from '../../utils';
 
-const CopyPatternButton = ( { onSuccess } ) => {
-    const handleClick = ( { target } ) => {
+const CopyPatternButton = ( { isSmall = false, onSuccess = noop, content } ) => {
+    const [ copied, setCopied ] = useState( false );
+
+    if ( ! content ) {
         // Grab the pattern markup from hidden input
         const blockData = document.getElementById( 'block-data' );
-        const blockPattern = JSON.parse( decodeURIComponent( blockData.value ) );
+        content = JSON.parse( decodeURIComponent( blockData.value ) );
+    }
 
-        const success = copyToClipboard( blockPattern );
+    const handleClick = ( { target } ) => {
+        const success = copyToClipboard( content );
+
+        setCopied( success );
 
         // Make sure we reset focus in case it was lost in the 'copy' command.
@@ -28 +42 @@
     };
 
+    useEffect( () => {
+        if ( ! copied ) {
+            return;
+        }
+
+        speak( __( 'Copied pattern to clipboard.', 'wporg-patterns' ) );
+
+        const timer = setTimeout( () => setCopied( false ), 20000 );
+        return () => {
+            clearTimeout( timer );
+        };
+    }, [ copied ] );
+
+    let label = __( 'Copy Pattern', 'wporg-patterns' );
+    if ( isSmall ) {
+        label = copied ? __( 'Copied', 'wporg-patterns' ) : __( 'Copy', 'wporg-patterns' );
+    }
+
+    const classes = classnames( {
+        'pattern__copy-button': true,
+        'is-small-label': isSmall,
+    } );
+
     return (
-        <Button isPrimary onClick={ handleClick }>
-            { __( 'Copy Pattern', 'wporg-patterns' ) }
+        <Button className={ classes } isPrimary onClick={ handleClick }>
+            { label }
         </Button>
     );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/copy-success-message.js

@@ -3 +3 @@
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Notice } from '@wordpress/components';
+import { Notice } from '@wordpress/components';
 
 const CopySuccessMessage = ( { onClick } ) => (
-    <Notice className="pattern-actions__notice" status="success" isDismissible={ false }>
+    <Notice
+        className="pattern-actions__notice"
+        status="success"
+        isDismissible={ false }
+        actions={ [
+            {
+                label: __( 'Learn More', 'wporg-patterns' ),
+                onClick: onClick,
+                variant: 'secondary',
+            },
+        ] }
+    >
         <div>
             <b>{ __( 'Pattern copied!', 'wporg-patterns' ) }</b>
             { __( ' Now you can paste it into any WordPress post or page.', 'wporg-patterns' ) }
         </div>
-        <Button onClick={ onClick } isSecondary>
-            { __( 'Learn More', 'wporg-patterns' ) }
-        </Button>
     </Notice>
 );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/index.js

@@ -12 +12 @@
 import CopyGuide from './copy-guide';
 
-const PatternPreviewActions = ( { patternId } ) => {
+const PatternPreviewActions = ( { postId } ) => {
     const [ showSuccess, setShowSuccess ] = useState( false );
     const [ showGuide, setShowGuide ] = useState( false );
 
     return (
-        <>
-            <CopyPatternButton onSuccess={ () => setShowSuccess( true ) } />
-            <FavoriteButton patternId={ patternId } />
-            { showSuccess && <CopySuccessMessage onClick={ () => setShowGuide( true ) } /> }
-            { showGuide && <CopyGuide onFinish={ () => setShowGuide( false ) } /> }
-        </>
+        <div className="pattern-actions">
+            <div className="pattern-actions__container">
+                <CopyPatternButton onSuccess={ () => setShowSuccess( true ) } />
+                <FavoriteButton patternId={ postId } />
+                { showSuccess && <CopySuccessMessage onClick={ () => setShowGuide( true ) } /> }
+                { showGuide && <CopyGuide onFinish={ () => setShowGuide( false ) } /> }
+            </div>
+        </div>
     );
 };

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/index.js

@@ -2 +2 @@
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useCallback, useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-import { VisuallyHidden } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
+import { SelectControl, VisuallyHidden } from '@wordpress/components';
 
 /**
@@ -15 +15 @@
 /* eslint-disable jsx-a11y/anchor-is-valid -- These are just placeholders. */
 
-const INITIAL_WIDTH = 1200;
+const INITIAL_WIDTH = 960;
 
 function PatternPreview( { blockContent } ) {
+    const showViewportControl = useViewportMatch( 'mobile', '>=' );
+    const showViewportControlDefault = useViewportMatch( 'large', '>=' );
+    const showViewportControlLarge = useViewportMatch( 'wide', '>=' );
+
     const instanceId = useInstanceId( PatternPreview );
     const [ width, setWidth ] = useState( window.innerWidth < INITIAL_WIDTH ? window.innerWidth : INITIAL_WIDTH );
-    const onDragChange = useCallback(
-        ( delta ) => {
-            setWidth( ( value ) => value + delta );
-        },
-        [ setWidth ]
-    );
+    const onDragChange = useCallback( ( delta ) => setWidth( ( value ) => value + delta ), [ setWidth ] );
+
+    const availableWidths = useMemo( () => {
+        // Less than 480 wide.
+        if ( ! showViewportControl ) {
+            return [];
+        }
+        if ( showViewportControlLarge ) {
+            // More than 1280 wide.
+            return [
+                { label: 'Full (1200px)', value: 1200 },
+                { label: 'Default (960px)', value: 960 },
+                { label: 'Medium (480px)', value: 480 },
+                { label: 'Narrow (320px)', value: 320 },
+            ];
+        } else if ( showViewportControlDefault ) {
+            // Less than 1280, more than 960.
+            return [
+                { label: 'Default (960px)', value: 960 },
+                { label: 'Medium (480px)', value: 480 },
+                { label: 'Narrow (320px)', value: 320 },
+            ];
+        }
+        // Less than 960, but larger than 480.
+        return [
+            { label: __( 'Medium (480px)', 'wporg-patterns' ), value: 480 },
+            { label: __( 'Narrow (320px)', 'wporg-patterns' ), value: 320 },
+        ];
+    }, [ showViewportControl, showViewportControlDefault, showViewportControlLarge ] );
+
+    let currentOpt = false;
+    if ( ! availableWidths.some( ( opt ) => opt.value === width ) ) {
+        currentOpt = {
+            /* translators: %s is the width in pixels, ex 600. */
+            label: sprintf( __( 'Current (%spx)', 'wporg-patterns' ), width ),
+            value: width,
+        };
+    }
 
     return (
         <>
-            <div className="pattern-preview__viewport" style={ { width } }>
+            <div className="pattern-preview__size-control">
+                { showViewportControl && (
+                    <SelectControl
+                        hideLabelFromVision
+                        label={ __( 'Preview Width', 'wporg-patterns' ) }
+                        value={ width }
+                        options={ currentOpt ? [ currentOpt, ...availableWidths ] : availableWidths }
+                        onChange={ ( value ) => setWidth( Number( value ) ) }
+                    />
+                ) }
+            </div>
+            <div className="pattern-preview__viewport" style={ { width: width + 40 } }>
                 <DragHandle
                     label={ __( 'Drag to resize', 'wporg-patterns' ) }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/index.js

@@ -2 +2 @@
  * WordPress dependencies
  */
-import { speak } from '@wordpress/a11y';
-import { __, sprintf } from '@wordpress/i18n';
-import { Button, Disabled } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { Disabled } from '@wordpress/components';
 
 /**
@@ -11 +8 @@
  */
 import FavoriteButton from '../favorite-button';
+import CopyPatternButton from '../copy-pattern-button';
 import Canvas from './canvas';
-import { copyToClipboard } from '../../utils';
 
 function PatternThumbnail( { pattern } ) {
-    const [ copied, setCopied ] = useState( false );
-
-    const handleCopy = () => {
-        const result = copyToClipboard( pattern.pattern_content );
-
-        setCopied( result );
-    };
-
-    useEffect( () => {
-        if ( ! copied ) {
-            return;
-        }
-
-        speak(
-            sprintf(
-                /* translators: %s: pattern title. */
-                __( 'Copied %s pattern to clipboard.', 'wporg-patterns' ),
-                pattern.title.rendered
-            )
-        );
-
-        const timer = setTimeout( () => setCopied( false ), 20000 );
-        return () => {
-            clearTimeout( timer );
-        };
-    }, [ copied ] );
-
     return (
         <div className="pattern-grid__pattern">
@@ -53 +23 @@
                 <h2 className="pattern-grid__title">{ pattern.title.rendered }</h2>
                 <FavoriteButton showLabel={ false } patternId={ pattern.id } />
-                <Button className="pattern__copy-button is-small" isPrimary onClick={ handleCopy }>
-                    { copied ? __( 'Copied!', 'wporg-patterns' ) : __( 'Copy', 'wporg-patterns' ) }
-                </Button>
+                <CopyPatternButton isSmall={ true } content={ pattern.pattern_content } />
             </div>
         </div>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/index.js

@@ -7 +7 @@
  * Internal dependencies
  */
-import PatternPreview from './components/pattern-preview';
-import PatternPreviewActions from './components/pattern-preview-actions';
-import ReportPatternButton from './components/report-pattern-button';
+import Pattern from './components/pattern';
 import Patterns from './components/patterns';
+
+// Load the grid into the awaiting preview container.
+const gridContainer = document.getElementById( 'patterns__container' );
+if ( gridContainer ) {
+    render( <Patterns />, gridContainer );
+}
 
 // Load the preview into any awaiting preview container.
@@ -17 +21 @@
     const container = previewContainers[ i ];
     const blockContent = JSON.parse( decodeURIComponent( container.innerText ) );
-    // Use `wp.blocks.parse` to convert HTML to block objects (for use in editor), if needed.
+    const props = container.dataset;
 
-    render( <PatternPreview blockContent={ blockContent } />, container, () => {
+    render( <Pattern { ...props } content={ blockContent } />, container, () => {
         // This callback is called after the render to unhide the container.
         container.hidden = false;
     } );
 }
-
-// Load the preview into any awaiting preview container.
-const gridContainer = document.getElementById( 'patterns__container' );
-if ( gridContainer ) {
-    render( <Patterns />, gridContainer );
-}
-
-// Load the pattern preview actions
-const patternActionsContainer = document.getElementById( 'pattern-actions' );
-if ( patternActionsContainer ) {
-    render(
-        <PatternPreviewActions patternId={ Number( patternActionsContainer.dataset.id ) } />,
-        patternActionsContainer
-    );
-}
-
-// Load report button
-const patternReportContainer = document.getElementById( 'pattern-report' );
-if ( patternReportContainer ) {
-    const { loggedIn, postId, userHasReported } = patternReportContainer.dataset;
-
-    render(
-        <ReportPatternButton
-            userHasReported={ userHasReported === 'true' }
-            loggedIn={ loggedIn === 'true' }
-            postId={ postId }
-        />,
-        patternReportContainer
-    );
-}

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/reducer.js

@@ -8 +8 @@
 import { categories, favorites, patternFlagReasons, patterns } from '../reducer';
 
+// Set up the global.
+global.wporgSiteUrl = 'http://localhost:8889/';
+
 describe( 'state', () => {
     describe( 'patterns', () => {

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/utils.js

@@ -54 +54 @@
         slug: '', // Slug matches url
         name: __( 'All', 'wporg-patterns' ),
-        link: '/',
+        link: wporgSiteUrl,
     };
 }