<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[11058] sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns: Pattern Directory: Sync with git WordPress/pattern-directory@07f8189a7c5bdbd0344edac212c63a7b956159f6</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/11058">11058</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/11058","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ryelle</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-06-24 17:19:19 +0000 (Thu, 24 Jun 2021)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Pattern Directory: Sync with git WordPress/pattern-directory@07f8189a7c5bdbd0344edac212c63a7b956159f6</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexassetphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_favoritebuttonscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patterngridscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-grid.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternpaginationscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-pagination.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscssstylecss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternspackagejson">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsfavoritebuttonindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsiconsheartfilledjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/icons/heart-filled.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsiconsheartoutlinejs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/icons/heart-outline.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsiframeindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/iframe/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsmypatternsindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/my-patterns/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatterngridindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternthumbnailcanvasjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/canvas.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternthumbnailindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternsindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/patterns/index.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsfavoritebuttonsmalljs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/small.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexassetphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1 +1 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<?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'), 'version' => 'de9758ee8eb7d4dfc3fe71138b8dcae3');
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?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-html-entities', 'wp-i18n', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '08d1749aa3926c695f43341ced129089');
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11130,9 +11130,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> className: buttonClasses,
</span><span class="cx" style="display: block; padding: 0 10px"> onClick: onClick
</span><span class="cx" style="display: block; padding: 0 10px"> }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_icons_heart_filled__WEBPACK_IMPORTED_MODULE_6__["default"], {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- className: "pattern__favorite-filled"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ className: "pattern-favorite-button__filled"
</ins><span class="cx" style="display: block; padding: 0 10px"> }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_icons_heart_outline__WEBPACK_IMPORTED_MODULE_5__["default"], {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- className: "pattern__favorite-outline"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ className: "pattern-favorite-button__outline"
</ins><span class="cx" style="display: block; padding: 0 10px"> }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
</span><span class="cx" style="display: block; padding: 0 10px"> className: labelClasses
</span><span class="cx" style="display: block; padding: 0 10px"> }, isFavorite ? Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Remove from favorites', 'wporg-patterns') : Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Add to favorites', 'wporg-patterns')));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11142,6 +11142,92 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/***/ "./src/components/favorite-button/small.js":
+/*!*************************************************!*\
+ !*** ./src/components/favorite-button/small.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 classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/core-data */ "@wordpress/core-data");
+/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _icons_heart_filled__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icons/heart-filled */ "./src/components/icons/heart-filled.js");
+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
+
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+const FavoriteButtonSmall = ({
+ className,
+ label,
+ patternId
+}) => {
+ const {
+ hasPermission,
+ isFavorite
+ } = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__["useSelect"])(select => {
+ // Fetch favorites so that the state is synced.
+ select(_store__WEBPACK_IMPORTED_MODULE_5__["store"]).getFavorites();
+ return {
+ // canUser defaults to adding `/wp/v2/` prefix, so we need to backtrack up the path.
+ hasPermission: !!select(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_2__["store"]).canUser('create', '../../wporg/v1/pattern-favorites'),
+ isFavorite: select(_store__WEBPACK_IMPORTED_MODULE_5__["store"]).isFavorite(patternId)
+ };
+ });
+ const {
+ addFavorite,
+ removeFavorite
+ } = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__["useDispatch"])(_store__WEBPACK_IMPORTED_MODULE_5__["store"]);
+ const onClick = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(() => {
+ if (isFavorite) {
+ removeFavorite(patternId);
+ } else {
+ addFavorite(patternId);
+ }
+ }, [isFavorite]);
+ const buttonClasses = classnames__WEBPACK_IMPORTED_MODULE_1___default()(className, 'button button-link pattern-favorite-button-small', {
+ 'is-favorited': isFavorite
+ });
+ return !hasPermission ? Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+ className: buttonClasses
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_icons_heart_filled__WEBPACK_IMPORTED_MODULE_4__["default"], {
+ className: "pattern-favorite-button__filled"
+ }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", null, label)) : Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("button", {
+ className: buttonClasses,
+ onClick: onClick
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_icons_heart_filled__WEBPACK_IMPORTED_MODULE_4__["default"], {
+ className: "pattern-favorite-button__filled"
+ }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", null, label));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (FavoriteButtonSmall);
+
+/***/ }),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ "./src/components/icons/heart-filled.js":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!**********************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px"> !*** ./src/components/icons/heart-filled.js ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11167,6 +11253,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony default export */ __webpack_exports__["default"] = (function (props) {
</span><span class="cx" style="display: block; padding: 0 10px"> return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_2__["SVG"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
</span><span class="cx" style="display: block; padding: 0 10px"> xmlns: "http://www.w3.org/2000/svg",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ viewBox: "0 0 24 24",
</ins><span class="cx" style="display: block; padding: 0 10px"> width: "24",
</span><span class="cx" style="display: block; padding: 0 10px"> height: "24"
</span><span class="cx" style="display: block; padding: 0 10px"> }, props), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_2__["Path"], {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11201,6 +11288,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony default export */ __webpack_exports__["default"] = (function (props) {
</span><span class="cx" style="display: block; padding: 0 10px"> return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_2__["SVG"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
</span><span class="cx" style="display: block; padding: 0 10px"> xmlns: "http://www.w3.org/2000/svg",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ viewBox: "0 0 24 24",
</ins><span class="cx" style="display: block; padding: 0 10px"> width: "24",
</span><span class="cx" style="display: block; padding: 0 10px"> height: "24"
</span><span class="cx" style="display: block; padding: 0 10px"> }, props), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_primitives__WEBPACK_IMPORTED_MODULE_2__["Path"], {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11330,7 +11418,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> children,
</span><span class="cx" style="display: block; padding: 0 10px"> head,
</span><span class="cx" style="display: block; padding: 0 10px"> headHTML,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- themeSlug,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ bodyStyle = '',
+ themeSlug = 'twentynineteen',
</ins><span class="cx" style="display: block; padding: 0 10px"> ...props
</span><span class="cx" style="display: block; padding: 0 10px"> }, ref) {
</span><span class="cx" style="display: block; padding: 0 10px"> const [iframeDocument, setIframeDocument] = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11343,6 +11432,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .${BODY_CLASS_NAME} {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ${bodyStyle}
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> body > div {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11350,13 +11440,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> pointer-events: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> </style>`;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- if (themeSlug) {
- headHTML += `<link rel="stylesheet" href="https://wp-themes.com/wp-content/themes/${themeSlug}/style.css" media="all" />`;
- } else {
- headHTML += '<link rel="stylesheet" href="https://wp-themes.com/wp-content/themes/twentytwentyone/style.css" media="all" />';
- }
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ headHTML += `<link rel="stylesheet" href="https://wp-themes.com/wp-content/themes/${themeSlug}/style.css" media="all" />`;
</ins><span class="cx" style="display: block; padding: 0 10px"> const setRef = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useCallback"])(node => {
</span><span class="cx" style="display: block; padding: 0 10px"> if (!node) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11582,8 +11666,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_5__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./menu */ "./src/components/my-patterns/menu.js");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _pattern_grid__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../pattern-grid */ "./src/components/pattern-grid/index.js");
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _query_monitor__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../query-monitor */ "./src/components/query-monitor/index.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _pattern_thumbnail__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../pattern-thumbnail */ "./src/components/pattern-thumbnail/index.js");
+/* harmony import */ var _query_monitor__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../query-monitor */ "./src/components/query-monitor/index.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11603,6 +11688,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> const MyPatterns = () => {
</span><span class="cx" style="display: block; padding: 0 10px"> const query = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_5__["useSelect"])(select => select(_store__WEBPACK_IMPORTED_MODULE_4__["store"]).getCurrentQuery());
</span><span class="cx" style="display: block; padding: 0 10px"> const author = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_5__["useSelect"])(select => {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11630,9 +11716,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ...query,
</span><span class="cx" style="display: block; padding: 0 10px"> author: author
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_hooks__WEBPACK_IMPORTED_MODULE_9__["RouteProvider"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_query_monitor__WEBPACK_IMPORTED_MODULE_8__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_menu__WEBPACK_IMPORTED_MODULE_6__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid__WEBPACK_IMPORTED_MODULE_7__["default"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_hooks__WEBPACK_IMPORTED_MODULE_10__["RouteProvider"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_query_monitor__WEBPACK_IMPORTED_MODULE_9__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_menu__WEBPACK_IMPORTED_MODULE_6__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid__WEBPACK_IMPORTED_MODULE_7__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px"> query: modifiedQuery
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, post => Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_thumbnail__WEBPACK_IMPORTED_MODULE_8__["default"], {
+ key: post.id,
+ pattern: post
+ })));
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony default export */ __webpack_exports__["default"] = (MyPatterns);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11838,8 +11927,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _pagination__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./pagination */ "./src/components/pattern-grid/pagination.js");
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _pattern_thumbnail__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../pattern-thumbnail */ "./src/components/pattern-thumbnail/index.js");
-/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11854,34 +11942,29 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-function PatternGrid(_ref) {
- var query = _ref.query;
-
- var _useSelect = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__["useSelect"])(function (select) {
- var _select = select(_store__WEBPACK_IMPORTED_MODULE_5__["store"]),
- getPatternTotalPagesByQuery = _select.getPatternTotalPagesByQuery,
- getPatternsByQuery = _select.getPatternsByQuery,
- isLoadingPatternsByQuery = _select.isLoadingPatternsByQuery;
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function PatternGrid({
+ query,
+ children
+}) {
+ const {
+ isLoading,
+ posts,
+ totalPages
+ } = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__["useSelect"])(select => {
+ const {
+ getPatternTotalPagesByQuery,
+ getPatternsByQuery,
+ isLoadingPatternsByQuery
+ } = select(_store__WEBPACK_IMPORTED_MODULE_4__["store"]);
</ins><span class="cx" style="display: block; padding: 0 10px"> return {
</span><span class="cx" style="display: block; padding: 0 10px"> isLoading: query && isLoadingPatternsByQuery(query),
</span><span class="cx" style="display: block; padding: 0 10px"> posts: query ? getPatternsByQuery(query) : [],
</span><span class="cx" style="display: block; padding: 0 10px"> totalPages: query ? getPatternTotalPagesByQuery(query) : 0
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }),
- isLoading = _useSelect.isLoading,
- posts = _useSelect.posts,
- totalPages = _useSelect.totalPages;
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> 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"])("div", {
</span><span class="cx" style="display: block; padding: 0 10px"> className: "pattern-grid"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }, isLoading ? Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__["Spinner"], null) : posts.map(function (post) {
- return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_thumbnail__WEBPACK_IMPORTED_MODULE_4__["default"], {
- key: post.id,
- pattern: post
- });
- })), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pagination__WEBPACK_IMPORTED_MODULE_3__["default"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, isLoading ? Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__["Spinner"], null) : posts.map(children)), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pagination__WEBPACK_IMPORTED_MODULE_3__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px"> totalPages: totalPages,
</span><span class="cx" style="display: block; padding: 0 10px"> currentPage: query === null || query === void 0 ? void 0 : query.page
</span><span class="cx" style="display: block; padding: 0 10px"> }));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12468,14 +12551,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* 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 _iframe__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../iframe */ "./src/components/iframe/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* 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 _iframe__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../iframe */ "./src/components/iframe/index.js");
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * WordPress dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12485,27 +12565,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-var VIEWPORT_WIDTH = 800;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const VIEWPORT_WIDTH = 800;
+const ASPECT_RATIO = 2 / 3;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function PatternThumbnail(_ref) {
- var className = _ref.className,
- html = _ref.html;
- var wrapperRef = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
-
- var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])('100%'),
- _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
- frameHeight = _useState2[0],
- setFrameHeight = _useState2[1];
-
- var _useState3 = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(0.3125),
- _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState3, 2),
- frameScale = _useState4[0],
- setFrameScale = _useState4[1];
-
- Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
- var handleOnResize = function handleOnResize() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function PatternThumbnail({
+ className,
+ html
+}) {
+ const wrapperRef = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["useRef"])();
+ const [frameHeight, setFrameHeight] = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["useState"])('100%');
+ const [frameScale, setFrameScale] = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["useState"])(0.3125);
+ Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(() => {
+ const handleOnResize = () => {
</ins><span class="cx" style="display: block; padding: 0 10px"> try {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- setFrameHeight(wrapperRef.current.clientWidth * 1);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ setFrameHeight(wrapperRef.current.clientWidth * ASPECT_RATIO);
</ins><span class="cx" style="display: block; padding: 0 10px"> setFrameScale(wrapperRef.current.clientWidth / VIEWPORT_WIDTH);
</span><span class="cx" style="display: block; padding: 0 10px"> } catch (err) {}
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12513,20 +12586,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> handleOnResize(); // eslint-disable-next-line @wordpress/no-global-event-listener -- This is a global event.
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> window.addEventListener('resize', handleOnResize);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return function () {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return () => {
</ins><span class="cx" style="display: block; padding: 0 10px"> window.addEventListener('resize', handleOnResize); // eslint-disable-line @wordpress/no-global-event-listener -- See above.
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px"> }, []);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var style = {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const style = {
</ins><span class="cx" style="display: block; padding: 0 10px"> border: 'none',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: "".concat(VIEWPORT_WIDTH, "px"),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ width: `${VIEWPORT_WIDTH}px`,
</ins><span class="cx" style="display: block; padding: 0 10px"> maxWidth: 'none',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- height: "".concat(VIEWPORT_WIDTH, "px"),
- transform: "scale(".concat(frameScale, ")"),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: `${VIEWPORT_WIDTH * ASPECT_RATIO}px`,
+ transform: `scale(${frameScale})`,
</ins><span class="cx" style="display: block; padding: 0 10px"> transformOrigin: 'top left',
</span><span class="cx" style="display: block; padding: 0 10px"> pointerEvents: 'none'
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
</ins><span class="cx" style="display: block; padding: 0 10px"> className: className,
</span><span class="cx" style="display: block; padding: 0 10px"> ref: wrapperRef,
</span><span class="cx" style="display: block; padding: 0 10px"> style: {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12533,11 +12606,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: frameHeight
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> tabIndex: "-1"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_iframe__WEBPACK_IMPORTED_MODULE_2__["default"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_iframe__WEBPACK_IMPORTED_MODULE_1__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px"> className: "pattern-grid__preview-iframe",
</span><span class="cx" style="display: block; padding: 0 10px"> style: style,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ bodyStyle: 'overflow: hidden;',
</ins><span class="cx" style="display: block; padding: 0 10px"> headHTML: window.__editorStyles.html
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
</ins><span class="cx" style="display: block; padding: 0 10px"> dangerouslySetInnerHTML: {
</span><span class="cx" style="display: block; padding: 0 10px"> __html: html
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12559,11 +12633,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* 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");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* 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 _wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/html-entities */ "@wordpress/html-entities");
+/* harmony import */ var _wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3__);
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _canvas__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./canvas */ "./src/components/pattern-thumbnail/canvas.js");
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _copy_pattern_button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../copy-pattern-button */ "./src/components/copy-pattern-button/index.js");
+/* harmony import */ var _favorite_button__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../favorite-button */ "./src/components/favorite-button/index.js");
+/* harmony import */ var _favorite_button_small__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../favorite-button/small */ "./src/components/favorite-button/small.js");
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12570,6 +12649,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * WordPress dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12578,29 +12659,72 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function PatternThumbnail(_ref) {
- var pattern = _ref.pattern;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+function getStatusLabel(pattern) {
+ switch (pattern.status) {
+ case 'pending':
+ return Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Pending', 'wporg-patterns');
+
+ case 'draft':
+ return Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Draft', 'wporg-patterns');
+
+ case 'declined':
+ return Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Declined', 'wporg-patterns');
+ }
+
+ return '';
+}
+
+function PatternThumbnail({
+ pattern,
+ showAvatar
+}) {
+ const statusLabel = getStatusLabel(pattern);
</ins><span class="cx" style="display: block; padding: 0 10px"> return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
</span><span class="cx" style="display: block; padding: 0 10px"> className: "pattern-grid__pattern"
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
+ className: "pattern-grid__pattern-frame"
</ins><span class="cx" style="display: block; padding: 0 10px"> }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("a", {
</span><span class="cx" style="display: block; padding: 0 10px"> href: pattern.link,
</span><span class="cx" style="display: block; padding: 0 10px"> rel: "bookmark"
</span><span class="cx" style="display: block; padding: 0 10px"> }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
</span><span class="cx" style="display: block; padding: 0 10px"> className: "screen-reader-text"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }, 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"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, Object(_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3__["decodeEntities"])(pattern.title.rendered)), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__["Disabled"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_canvas__WEBPACK_IMPORTED_MODULE_4__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px"> className: "pattern-grid__preview",
</span><span class="cx" style="display: block; padding: 0 10px"> html: pattern.content.rendered
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }))), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }))), statusLabel ? Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
+ className: `pattern-grid__status is-${pattern.status}`
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", null, statusLabel)) : null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
</ins><span class="cx" style="display: block; padding: 0 10px"> className: "pattern-grid__actions"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("h2", {
- className: "pattern-grid__title"
- }, pattern.title.rendered), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_favorite_button__WEBPACK_IMPORTED_MODULE_2__["default"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_favorite_button__WEBPACK_IMPORTED_MODULE_6__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px"> showLabel: false,
</span><span class="cx" style="display: block; padding: 0 10px"> patternId: pattern.id
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_copy_pattern_button__WEBPACK_IMPORTED_MODULE_3__["default"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_copy_pattern_button__WEBPACK_IMPORTED_MODULE_5__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px"> isSmall: true,
</span><span class="cx" style="display: block; padding: 0 10px"> content: pattern.pattern_content
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- })));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }))), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("h2", {
+ className: "pattern-grid__title"
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("a", {
+ href: pattern.link
+ }, Object(_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3__["decodeEntities"])(pattern.title.rendered))), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("p", {
+ className: "pattern-grid__meta"
+ }, showAvatar && pattern.author_meta ? Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("a", {
+ href: pattern.author_meta.url,
+ className: "pattern-grid__author-avatar"
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("img", {
+ alt: "",
+ src: pattern.author_meta.avatar
+ }), pattern.author_meta.name) : null, pattern.favorite_count > 0 ? Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_favorite_button_small__WEBPACK_IMPORTED_MODULE_7__["default"], {
+ className: "pattern-grid__favorite-count",
+ patternId: pattern.id,
+ label: Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+ className: "screen-reader-text"
+ }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["sprintf"])(
+ /* translators: %s is the favorite count for a pattern. */
+ Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["_n"])('Favorited %s times', 'Favorited %s times', pattern.favorite_count, 'wporg-patterns'), pattern.favorite_count)), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+ "aria-hidden": true
+ }, pattern.favorite_count))
+ }) : null));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony default export */ __webpack_exports__["default"] = (PatternThumbnail);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12669,9 +12793,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _pattern_grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../pattern-grid */ "./src/components/pattern-grid/index.js");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _pattern_grid_menu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../pattern-grid-menu */ "./src/components/pattern-grid-menu/index.js");
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _query_monitor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../query-monitor */ "./src/components/query-monitor/index.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
-/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _pattern_thumbnail__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../pattern-thumbnail */ "./src/components/pattern-thumbnail/index.js");
+/* harmony import */ var _query_monitor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../query-monitor */ "./src/components/query-monitor/index.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12688,13 +12813,16 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-var Patterns = function Patterns() {
- var query = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_1__["useSelect"])(function (select) {
- return select(_store__WEBPACK_IMPORTED_MODULE_6__["store"]).getCurrentQuery();
- });
- return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_hooks__WEBPACK_IMPORTED_MODULE_5__["RouteProvider"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_query_monitor__WEBPACK_IMPORTED_MODULE_4__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid_menu__WEBPACK_IMPORTED_MODULE_3__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid__WEBPACK_IMPORTED_MODULE_2__["default"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+const Patterns = () => {
+ const query = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_1__["useSelect"])(select => select(_store__WEBPACK_IMPORTED_MODULE_7__["store"]).getCurrentQuery());
+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_hooks__WEBPACK_IMPORTED_MODULE_6__["RouteProvider"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_query_monitor__WEBPACK_IMPORTED_MODULE_5__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid_menu__WEBPACK_IMPORTED_MODULE_3__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid__WEBPACK_IMPORTED_MODULE_2__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px"> query: query
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, post => Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_thumbnail__WEBPACK_IMPORTED_MODULE_4__["default"], {
+ key: post.id,
+ pattern: post,
+ showAvatar: true
+ })));
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony default export */ __webpack_exports__["default"] = (Patterns);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -14805,6 +14933,17 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/***/ "@wordpress/html-entities":
+/*!**************************************!*\
+ !*** external ["wp","htmlEntities"] ***!
+ \**************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["wp"]["htmlEntities"]; }());
+
+/***/ }),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ "@wordpress/i18n":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!******************************!*\
</span><span class="cx" style="display: block; padding: 0 10px"> !*** external ["wp","i18n"] ***!
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_favoritebuttonscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4,7 +4,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height: 2.25rem;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 2.25rem;
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: 2px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: $color__text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: color(gray-60);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> svg {
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -15,23 +15,29 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transition: all 0.15s ease-out;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> path {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- fill: $color-gray-300;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ fill: color(gray-60);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .pattern__favorite-filled {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .pattern-favorite-button__filled {
</ins><span class="cx" style="display: block; padding: 0 10px"> opacity: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> &:hover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- color: $color__text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: color(gray-60);
</ins><span class="cx" style="display: block; padding: 0 10px"> background: transparent;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> svg path {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- fill: $color__text;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ fill: color(gray-60);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &:focus {
+ box-shadow:
+ inset 0 0 0 1px #fff,
+ 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> &:active {
</span><span class="cx" style="display: block; padding: 0 10px"> background: transparent;
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -53,21 +59,36 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &:not(.has-label) {
+ background-color: $color-white;
+ box-shadow: 0 1px 2px rgba($color-black, 0.15);
+
+ &:hover {
+ background: color(gray-2);
+ }
+
+ &:focus {
+ box-shadow:
+ inset 0 0 0 1px #fff,
+ 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+ }
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> &.is-favorited {
</span><span class="cx" style="display: block; padding: 0 10px"> svg path {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- fill: $color-alert-red;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ fill: color(red-40);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .pattern__favorite-outline {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .pattern-favorite-button__outline {
</ins><span class="cx" style="display: block; padding: 0 10px"> opacity: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> transform: scale(2.8);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .pattern__favorite-filled {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .pattern-favorite-button__filled {
</ins><span class="cx" style="display: block; padding: 0 10px"> opacity: 1;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &:hover .pattern__favorite-filled {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &:hover .pattern-favorite-button__filled {
</ins><span class="cx" style="display: block; padding: 0 10px"> animation: 0.9s infinite HeartBeat;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media (prefers-reduced-motion) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -77,6 +98,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.pattern-favorite-button-small {
+ height: auto;
+
+ &:hover {
+ background: transparent;
+ }
+
+ &:focus {
+ background: transparent;
+ outline: 1px dotted currentColor;
+ box-shadow: none;
+ }
+
+ &.is-favorited svg path {
+ fill: color(red-40);
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @keyframes HeartBeat {
</span><span class="cx" style="display: block; padding: 0 10px"> 0% {
</span><span class="cx" style="display: block; padding: 0 10px"> transform: scale(1);
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patterngridscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-grid.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-grid.scss 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-grid.scss 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,15 +1,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .pattern-grid {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: grid;
+ margin: 1.5rem 1.5rem 4rem;
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: 960px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 1.5rem;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
+ gap: 1.5rem;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- @include breakpoint( $breakpoint-small ) {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
- gap: 1.5rem;
-
- > * {
- align-self: baseline;
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > * {
+ align-self: baseline;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @include breakpoint( $breakpoint-large ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,10 +15,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.pattern-grid__pattern {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.pattern-grid__pattern-frame {
</ins><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 0 0 1.5rem;
- border: 1px solid $color-gray-light-600;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 0;
+ width: 100%;
+ box-shadow: 0 0 0 1px color(gray-2);
</ins><span class="cx" style="display: block; padding: 0 10px"> border-radius: 2px;
</span><span class="cx" style="display: block; padding: 0 10px"> transition: all 0.075s ease-in-out;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -34,6 +32,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: hidden;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .pattern-grid__status {
+ position: absolute;
+ top: 0.375rem;
+ left: 0.375rem;
+ padding: 0.5rem 0.75rem;
+ border-radius: 2px;
+ background: color(gray-40);
+ color: $color-white;
+ font-size: 0.6875rem;
+ font-weight: 600;
+ line-height: 1;
+ text-transform: uppercase;
+ pointer-events: none;
+
+ &.is-pending {
+ background: color(yellow-20);
+ color: $color-black;
+ }
+
+ &.is-declined {
+ background: color(red-50);
+ }
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .pattern-grid__actions {
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> right: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -41,26 +63,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> display: flex;
</span><span class="cx" style="display: block; padding: 0 10px"> align-items: center;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ justify-content: flex-end;
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 0.375rem;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: rgba($color-white, 0.8);
- backdrop-filter: blur(3px);
</del><span class="cx" style="display: block; padding: 0 10px"> opacity: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> transform: translateY(6px);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- transition: all 0.075s ease-in-out;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ transition: transform 0.075s ease-in-out, opacity 0.075s ease-in-out;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .pattern-grid__title {
- flex-grow: 1;
- margin: 0;
- padding: 0 0.375rem 0 0.75rem;
- font-size: 0.75rem;
- pointer-events: none;
- }
-
- .pattern-favorite-button,
- .pattern-copy-button {
- flex-shrink: 0;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> .button + .components-button {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0.375rem;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -74,3 +82,46 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+.pattern-grid__title {
+ margin: 0.5rem 0;
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: color(gray-90);
+
+ a {
+ color: currentColor;
+ }
+}
+
+.pattern-grid__meta {
+ margin: 0.5rem 0;
+ display: flex;
+ gap: 1em;
+ align-items: center;
+}
+
+.pattern-grid__author-avatar,
+.pattern-grid__favorite-count {
+ display: flex;
+ font-size: 0.875rem;
+ line-height: 1;
+ color: color(gray-90);
+ text-decoration: none;
+}
+
+.pattern-grid__author-avatar img {
+ margin-right: 0.5rem;
+ height: 1rem;
+ width: 1rem;
+ border-radius: 6px;
+}
+
+.pattern-grid__favorite-count svg {
+ margin-top: -1px;
+ margin-bottom: 1px;
+ margin-right: 0.25rem;
+ height: 1rem;
+ width: 1rem;
+ fill: color(gray-40);
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternpaginationscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-pagination.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-pagination.scss 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-pagination.scss 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,6 +1,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .pagination {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 960px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 1.5rem;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin: 1.5rem 1.5rem 4rem;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @include breakpoint( $breakpoint-large ) {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: auto;
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscssstylecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1 +1 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@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-chil
d(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-bottom:auto;margin-top: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{left:0;position:fixed;top:0;width:100%;z-index:100}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:sans-serif}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;he
ight: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]::-webki
t-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:af
ter,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{clear:both;font-family:Open Sans,sans-serif;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{color:#32373c;font-size:1.25rem;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{-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=&quo
t;%23555D66"/%3E%3C/svg%3E%0A');background-position:right .7em top 50%;background-repeat:no-repeat;background-size:.65em auto;border:1px solid #6c7782;border-radius:.5em;box-shadow:none;box-sizing:border-box;display:inline-block;font-size:1em;line-height:1.3;padding:.5rem 2rem .5rem .8rem;width: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{clip:auto!important;background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);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-in
dex: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{-webkit-appearance:none;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}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-grou
p.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,.butt
on: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-fo
rm .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!impo
rtant;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:#66
c6e4!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]:foc
us,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]{-webkit-appearance:none;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}input[type=checkbox]:checked:before,input[type=radi
o]:checked:before{speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;float:left;font:normal 21px/1 dashicons;vertical-align:middle;width:16px}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:te
xtfield}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%,.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{height:9px;line-height:16px;margin:7px;vertical-align:middle;width:9px}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{display:inline;margin:0 3px;max-width:55px;padding:3px 6
px;width:auto}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}.button.button-outline{background:#fff;border:1px solid #c3c4c7;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#2271b1;font-weight:600;height:auto;paddin
g:.25rem 1rem}.button.button-outline:hover{border-color:#3582c4}.button.button-outline:focus{border-color:#3582c4;box-shadow:0 0 3px #72aee6}.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%{height:180px;transform:rotate(0deg);width:180px}15%{height:185px;transform:rotate(0deg);width:185px}20%{height:180px;transform:rotate(5deg);width:180px}40%{animation-timing-function:ease-in-out;transform-origin:top left}60%{animation-timing-function:ease-in-out;transform:rotate(40deg);transform-origin:top left}40%,80%{animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{opacity:0;transform:translate3d(0,700px,0)}}.hinge{animation-duration:2s;animation-name:hinge}.comments-area{margin-top:5em}.comm
ents-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 .comme
nt-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{display:block;font-size:.8rem;font-weight:700;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{word-wrap:break-word;hyphens:auto}.entry-content>p:first-child{margin-top:0}.entry-content [class*=col-]~h1,.e
ntry-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{word-wrap:break-word;hyphens:auto}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-to
p: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{word-wrap:break-word;border-top:1px solid #eaeaea;hyphens:auto}.post-navigation .meta-nav{color:#777;display:block;font-size:13px;line-height:2;text-transform:uppercase}.post-navig
ation .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:auto;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-wei
ght: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:737p
x){.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{c
olor:#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){clear:both;margin-left:0}}#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%;tr
ansition: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;height:auto;margin:10px 20px 20px;padding-bottom:0}#wporg-header ul li#download a,#wporg-header ul li.download a{paddi
ng: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.t
ext{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;pad
ding: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;box-shadow:none;display:block;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}#mobile-menu-button,#mobile-menu-button:before{-webkit-font-smoothing:antialiased;border:none;float:left}#mobile-menu-button:before{box-sizing:border-box;color:#888;content:"";display:inline-block;font:normal 50px/1 Dashicons;margin:0;outline:none;padding:3px;text-decoration:none;vertical-align:middle}@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{background:#edeff0;border-radius:2px;font-size:.8125rem;margin:0 1.5rem;overflow:auto;transition:all .3s ease-out}@media (prefers-reduced-motion){.category-context-bar{transition:none}}.category-context-bar>div{align-items:center;display:flex;justify-cont
ent: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{display:flex;justify-content:space-between;margin:0;padding:0}.category-context-bar ul li{font-size:.8125rem;list-style:none}.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{align-items:center;display:flex;font-size:.8125rem;font-weight:400;margin:0;padding:1.125rem 1.5rem}.category-context-bar__title{color:#50575e;font-size:.75rem;font-weight:400;margin:0;padding-right:1.5rem;text-transform:uppercase}.category-context-bar__links{align-items:center;display:flex}@media only screen and (max-width:782px){.category-context-bar__links{display:none}}.category-context-bar__spinner{display:flex;margin:0;transform:scale(1);transition:transform .1s lin
ear,width .15s ease-out,opacity 50ms linear 50ms;width:28px}@media (prefers-reduced-motion){.category-context-bar__spinner{transition:none}}.category-context-bar__spinner .components-spinner{margin:0}.category-context-bar__spinner--is-hidden{opacity:0;overflow:hidden;transform:scale(0);width:0}.pattern-copy-button.is-small-label{box-shadow:0 1px 2px rgba(0,0,0,.15)}.pattern-favorite-button{border-radius:2px;color:#50575e;font-size:.875rem;height:2.25rem;position:relative;width:2.25rem}.pattern-favorite-button svg{height:1.5rem;left:calc(50% - .75rem);position:absolute;top:calc(50% - .75rem);transition:all .15s ease-out;width:1.5rem}.pattern-favorite-button svg path{fill:#6c7782}.pattern-favorite-button .pattern__favorite-filled{opacity:0}.pattern-favorite-button:hover{background:transparent;color:#50575e}.pattern-favorite-button:hover svg path{fill:#50575e}.pattern-favorite-button:active{background:transparent;box-shadow:none;transform:none}.pattern-favorite-button.has-label{height:
auto;padding:12px 18px 12px 38px;width:auto}.pattern-favorite-button.has-label svg{left:9px;top:calc(50% - 12px)}.pattern-favorite-button.has-label svg path{fill:#000}.pattern-favorite-button.is-favorited svg path{fill:#e65054}.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{background:#0073aa;position:absolute;right:0;top:57px;width:100%}.menu-toggle{-webkit-appearance:none;font-size:1
.5625rem;height:auto;overflow:hidden;position:static;width:auto}body.page.my-patterns .entry-header{align-items:center;display:flex;margin:2rem auto 1rem;max-width:960px}body.page.my-patterns .entry-header .entry-title{display:inline-block;line-height:1.2;margin:0 2rem 0 0}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{align-items:center;display:flex;flex-direction:column;justify-content:space-between;margin:0 auto;max-width:960px}.pattern-grid-menu .pattern-menu{width:100%}.pattern-grid-menu>form{margin:1.5rem;width:calc(100% - 3rem)}@media only screen and (min-width:783px){.pattern-grid-menu{flex-direction:row;margin:1.5rem}.pattern-grid-menu>form{margin:0;width:auto}}@media only screen and (min-width:960px){.pattern-grid-menu{margin:1.5rem auto}}.pattern-grid{margin:1.5rem;max-
width:960px}@media screen and (min-width:600px){.pattern-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.pattern-grid>*{align-self:baseline}}@media screen and (min-width:960px){.pattern-grid{margin-left:auto;margin-right:auto}}.pattern-grid__pattern{border:1px solid #d7dade;border-radius:2px;margin:0 0 1.5rem;position:relative;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{align-items:center;backdrop-filter:blur(3px);background:hsla(0,0%,100%,.8);bottom:0;display:flex;left:0;opacity:0;padding:.375rem;position:absolute;right:0;transform:translateY(6px);transition:all 75ms ease-in-out}.pattern-grid__pattern .pattern-grid__actions .pattern-grid__title{flex-grow:1;font-size:.75rem;margin:0;padding:0 .375rem 0 .75rem;pointer-events:none}.pattern-grid__pattern .patte
rn-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)}.pattern-menu:not(.is-mobile){margin:0;padding:0;position:relative}.pattern-menu:not(.is-mobile) li{display:inline-block;list-style:none;margin:0}.pattern-menu:not(.is-mobile) a{color:#40464d;display:block;font-size:.875rem;padding:.5rem .75rem;text-decoration:none}.pattern-menu:not(.is-mobile) a:active,.pattern-menu:not(.is-mobile) a:focus,.pattern-menu:not(.is-mobile) a:hover{color:#000}.pattern-menu .pattern-menu__item.is-active{background:#0073aa;border-radius:2px;color:#fff}.pattern-menu .pattern-menu__item.is-active:focus,.pattern-menu .pattern-menu__item.is-active:hover{color:#fff}.pattern-menu.is-mobile{border-top:none!i
mportant;padding:0!important}.pattern-menu.is-mobile ul{background:#23282d;margin:0;padding:0}.pattern-menu.is-mobile li{border-top:1px solid #32373c;list-style:none}.pattern-menu.is-mobile li a{color:#ccd0d4;display:block;font-size:.875rem;padding:1rem 1.5rem;text-decoration:none}.pattern-menu.is-mobile>.components-panel__body-title{margin:0!important}.pattern-menu.is-mobile>.components-panel__body-title>button{padding:1.5rem}.pattern-menu.is-loading{height:24px;position:relative}.pattern-menu.is-loading:after{background:#f3f4f5;border-radius:4px;content:"";height:24px;left:0;position:absolute;top:calc(50% - 12px);transition:none;width:80%}.pagination{margin:1.5rem;max-width:960px}@media screen and (min-width:960px){.pagination{margin-left:auto;margin-right:auto}}.pagination__list{align-items:center;display:flex;gap:.75rem;justify-content:center;list-style:none;margin:0}@media (max-width:480px){.pagination__list{gap:.25rem}}.pagination__item,.pagination__link{dis
play:inline-block}.pagination__link{background:#fff;border:1px solid #d7dade;border-radius:2px;line-height:1;padding:.75rem}.pagination__link,.pagination__link:active,.pagination__link:hover{text-decoration:none}.pagination__link[aria-current=page]{background:#191e23;border:1px solid #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{background:#f3f4f5;padding:0}.pattern-preview__size-control{margin:0 auto;max-width:12rem;padding:1rem 0}.pattern-preview__size-control .components-base-control__field{margin-bottom:0}.pattern-preview__viewport{margin:0 auto;max-width:100vw;min-width:320px;padding:0 20px;posi
tion:relative}.pattern-preview__viewport .pattern-preview__viewport-iframe{background:#fff;border:1px solid #e8eaeb;max-width:100vw;vertical-align:middle}.pattern-preview__viewport:focus-within .pattern-preview__resize-help{clip:auto;background:#fff;border:1px solid #d7dade;border-radius:2px;bottom:-1rem;clip-path:none;height:auto;left:20px;margin:initial;overflow:initial;padding:8px 16px;right:20px;text-align:center;width:auto}.pattern-preview__drag-handle{bottom:0;position:absolute;top:0;width:20px}.pattern-preview__drag-handle.is-left{left:0}.pattern-preview__drag-handle.is-right{right:0}.pattern-preview__drag-handle-button{appearance:none;background:#7e8993;border:none;border-radius:99999px;cursor:grab;height:100px;left:6px;outline:none;padding:0;position:absolute;top:calc(50% - 50px);width:8px}.pattern-preview__drag-handle-button:hover{background:#6c7782}.pattern-preview__drag-handle-button:active{background:#606a74;cursor:grabbing}.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{align-items:center;display:flex;justify-content:center;margin:0}.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{line-height:1.5;text-align:center}.pattern-report-modal__actions{column-gap:4%;display:grid;grid-template-columns:48% 48%;margin-top:1.5rem}.pattern-report-modal__actions button{justify-content:center}.pattern-report-modal__radio .components-radio-control__option{margin-top:.75rem}.pattern-search{align-items:center;background:#fff;border:1px solid #6c7782;border-radius:2px;display:flex}.pattern-search input[type=search]{border:none;box-shadow:none;flex-grow:1;font-size:.8125rem;margin
:0;padding:.25rem .5rem}.pattern-search input[type=search]:focus{outline:1px auto #0073aa}.pattern-search.is-loading{background:#f3f4f5;border-radius:4px;display:block;height:24px;min-width:100%}@media only screen and (min-width:480px){.pattern-search.is-loading{min-width:auto!important;width:224px!important}}.pattern-search__button{background:transparent;border:none;color:#6c7782;display:flex}.pattern-search__button:active{background:#d7dade}.pattern-search__button:focus{outline:1px auto #0073aa}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{margin-left:auto;margin-right:auto;max-width:960px;padding:1.5rem}@media only screen and (min-width:960px){body.single-wporg-pattern .entry-header,body.single-wporg-pattern .pattern-action
s__container,body.single-wporg-pattern .pattern__meta{padding-left:0;padding-right:0}}body.single-wporg-pattern .entry-header{padding-bottom:1.875rem;padding-top:2.625rem}body.single-wporg-pattern .entry-header .entry-title{font-weight:600;line-height:1.2;margin-top:0}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{font-size:.75rem;font-weight:600;line-height:1.3333;margin-right:1rem;text-transform:uppercase}body.single-wporg-pattern .pattern-actions{background:#fff;padding:0 1.5rem 2rem}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{align-items:center;display:flex;flex-wrap:wrap;gap:.5em 2em;justify-content:flex-start;padding:0}@media (
max-width:480px){body.single-wporg-pattern .pattern-actions__container{justify-content:center}}body.single-wporg-pattern .pattern-actions__notice{flex-basis:100%;height:auto;margin:1.5rem 0 0}body.single-wporg-pattern .pattern-actions__notice>*{align-items:flex-start;display:flex;flex-direction:column;justify-content:space-between;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{height:auto;max-height:none;max-width:384px}body.single-wporg-pattern .pattern-actions__guide-content{line-height:1.5;padding:1.5rem}body.single-wporg-pattern .pattern-actions__guide-title{margin:0}body.single-wporg-pattern .pattern-actions__guide-shortcut{background:#edeff0;border-radius:2px;box-shadow:0 0
0 1px #ccd0d4;display:inline-block;font-weight:600;min-width:20px;padding:1px;text-align:center}body.single-wporg-pattern .entry-content{margin-left:auto;margin-right:auto;max-width:960px}body.single-wporg-pattern .pattern__meta{display:flex;justify-content:flex-end}.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-columns:1fr 22rem;grid-template-rows:auto 1fr}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{font-size:3rem;grid-column-start:1;grid-row-start:1;line-height:1.25;margin-top:0;text-align:left}body.home .site-description{color:#fff;font-size:1.25rem;grid-column-start:1;grid-row-start:2;line-height:1.6;margin:0;text-align:left}body:not(.home) .site-branding{align-items:center;color:#fff;display:flex;font-size:.8125rem;justify-content:space-between}body:n
ot(.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{margin:0 auto;position:relative}.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;fo
nt-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{padding:50px 90px;position:absolute;width:50%}}@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-size:14px;font-style:italic}
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@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-chil
d(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-bottom:auto;margin-top: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{left:0;position:fixed;top:0;width:100%;z-index:100}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:sans-serif}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;he
ight: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]::-webki
t-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:af
ter,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{clear:both;font-family:Open Sans,sans-serif;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{color:#32373c;font-size:1.25rem;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{-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=&quo
t;%23555D66"/%3E%3C/svg%3E%0A');background-position:right .7em top 50%;background-repeat:no-repeat;background-size:.65em auto;border:1px solid #6c7782;border-radius:.5em;box-shadow:none;box-sizing:border-box;display:inline-block;font-size:1em;line-height:1.3;padding:.5rem 2rem .5rem .8rem;width: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{clip:auto!important;background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);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-in
dex: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{-webkit-appearance:none;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}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-grou
p.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,.butt
on: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-fo
rm .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!impo
rtant;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:#66
c6e4!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]:foc
us,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]{-webkit-appearance:none;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}input[type=checkbox]:checked:before,input[type=radi
o]:checked:before{speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;float:left;font:normal 21px/1 dashicons;vertical-align:middle;width:16px}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:te
xtfield}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%,.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{height:9px;line-height:16px;margin:7px;vertical-align:middle;width:9px}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{display:inline;margin:0 3px;max-width:55px;padding:3px 6
px;width:auto}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}.button.button-outline{background:#fff;border:1px solid #c3c4c7;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#2271b1;font-weight:600;height:auto;paddin
g:.25rem 1rem}.button.button-outline:hover{border-color:#3582c4}.button.button-outline:focus{border-color:#3582c4;box-shadow:0 0 3px #72aee6}.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%{height:180px;transform:rotate(0deg);width:180px}15%{height:185px;transform:rotate(0deg);width:185px}20%{height:180px;transform:rotate(5deg);width:180px}40%{animation-timing-function:ease-in-out;transform-origin:top left}60%{animation-timing-function:ease-in-out;transform:rotate(40deg);transform-origin:top left}40%,80%{animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{opacity:0;transform:translate3d(0,700px,0)}}.hinge{animation-duration:2s;animation-name:hinge}.comments-area{margin-top:5em}.comm
ents-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 .comme
nt-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{display:block;font-size:.8rem;font-weight:700;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{word-wrap:break-word;hyphens:auto}.entry-content>p:first-child{margin-top:0}.entry-content [class*=col-]~h1,.e
ntry-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{word-wrap:break-word;hyphens:auto}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-to
p: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{word-wrap:break-word;border-top:1px solid #eaeaea;hyphens:auto}.post-navigation .meta-nav{color:#777;display:block;font-size:13px;line-height:2;text-transform:uppercase}.post-navig
ation .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:auto;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-wei
ght: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:737p
x){.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{c
olor:#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){clear:both;margin-left:0}}#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%;tr
ansition: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;height:auto;margin:10px 20px 20px;padding-bottom:0}#wporg-header ul li#download a,#wporg-header ul li.download a{paddi
ng: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.t
ext{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;pad
ding: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;box-shadow:none;display:block;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}#mobile-menu-button,#mobile-menu-button:before{-webkit-font-smoothing:antialiased;border:none;float:left}#mobile-menu-button:before{box-sizing:border-box;color:#888;content:"";display:inline-block;font:normal 50px/1 Dashicons;margin:0;outline:none;padding:3px;text-decoration:none;vertical-align:middle}@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{background:#edeff0;border-radius:2px;font-size:.8125rem;margin:0 1.5rem;overflow:auto;transition:all .3s ease-out}@media (prefers-reduced-motion){.category-context-bar{transition:none}}.category-context-bar>div{align-items:center;display:flex;justify-cont
ent: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{display:flex;justify-content:space-between;margin:0;padding:0}.category-context-bar ul li{font-size:.8125rem;list-style:none}.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{align-items:center;display:flex;font-size:.8125rem;font-weight:400;margin:0;padding:1.125rem 1.5rem}.category-context-bar__title{color:#50575e;font-size:.75rem;font-weight:400;margin:0;padding-right:1.5rem;text-transform:uppercase}.category-context-bar__links{align-items:center;display:flex}@media only screen and (max-width:782px){.category-context-bar__links{display:none}}.category-context-bar__spinner{display:flex;margin:0;transform:scale(1);transition:transform .1s lin
ear,width .15s ease-out,opacity 50ms linear 50ms;width:28px}@media (prefers-reduced-motion){.category-context-bar__spinner{transition:none}}.category-context-bar__spinner .components-spinner{margin:0}.category-context-bar__spinner--is-hidden{opacity:0;overflow:hidden;transform:scale(0);width:0}.pattern-copy-button.is-small-label{box-shadow:0 1px 2px rgba(0,0,0,.15)}.pattern-favorite-button{border-radius:2px;color:#50575e;font-size:.875rem;height:2.25rem;position:relative;width:2.25rem}.pattern-favorite-button svg{height:1.5rem;left:calc(50% - .75rem);position:absolute;top:calc(50% - .75rem);transition:all .15s ease-out;width:1.5rem}.pattern-favorite-button svg path{fill:#50575e}.pattern-favorite-button .pattern-favorite-button__filled{opacity:0}.pattern-favorite-button:hover{background:transparent;color:#50575e}.pattern-favorite-button:hover svg path{fill:#50575e}.pattern-favorite-button:focus{box-shadow:inset 0 0 0 1px #fff,0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-th
eme-color)}.pattern-favorite-button:active{background:transparent;box-shadow:none;transform:none}.pattern-favorite-button.has-label{height:auto;padding:12px 18px 12px 38px;width:auto}.pattern-favorite-button.has-label svg{left:9px;top:calc(50% - 12px)}.pattern-favorite-button.has-label svg path{fill:#000}.pattern-favorite-button:not(.has-label){background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}.pattern-favorite-button:not(.has-label):hover{background:#f0f0f1}.pattern-favorite-button:not(.has-label):focus{box-shadow:inset 0 0 0 1px #fff,0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color)}.pattern-favorite-button.is-favorited svg path{fill:#e65054}.pattern-favorite-button.is-favorited .pattern-favorite-button__outline{opacity:0;transform:scale(2.8)}.pattern-favorite-button.is-favorited .pattern-favorite-button__filled{opacity:1}.pattern-favorite-button.is-favorited:hover .pattern-favorite-button__filled{animation:HeartBeat .9s infinite}@media (prefers-reduced
-motion){.pattern-favorite-button.is-favorited:hover .pattern-favorite-button__filled{animation:none}}.pattern-favorite-button-small{height:auto}.pattern-favorite-button-small:hover{background:transparent}.pattern-favorite-button-small:focus{background:transparent;box-shadow:none;outline:1px dotted currentColor}.pattern-favorite-button-small.is-favorited svg path{fill:#e65054}@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{background:#0073aa;position:absolute;right:0;top:57px;width:100%}.menu-toggle{-webkit-appearance:none;font-size:1.5625rem;height:auto;overflow:hidden;position:static;width:auto}body.page.my-patterns .entry-header{align-items:center;display:flex;margin:2rem auto 1rem;max-width:960px}body.page.my-patterns .entry-header .entry-title{display:inline-block
;line-height:1.2;margin:0 2rem 0 0}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{align-items:center;display:flex;flex-direction:column;justify-content:space-between;margin:0 auto;max-width:960px}.pattern-grid-menu .pattern-menu{width:100%}.pattern-grid-menu>form{margin:1.5rem;width:calc(100% - 3rem)}@media only screen and (min-width:783px){.pattern-grid-menu{flex-direction:row;margin:1.5rem}.pattern-grid-menu>form{margin:0;width:auto}}@media only screen and (min-width:960px){.pattern-grid-menu{margin:1.5rem auto}}.pattern-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));margin:1.5rem 1.5rem 4rem;max-width:960px}.pattern-grid>*{align-self:baseline}@media screen and (min-width:960px){.pattern-grid{margin-left:auto;margin-right:auto}}.pattern
-grid__pattern-frame{border-radius:2px;box-shadow:0 0 0 1px #f0f0f1;margin:0;position:relative;transition:all 75ms ease-in-out;width:100%}@media screen and (min-width:600px){.pattern-grid__pattern-frame{display:inline-block;margin:0}}.pattern-grid__pattern-frame .pattern-grid__preview{overflow:hidden}.pattern-grid__pattern-frame .pattern-grid__status{background:#787c82;border-radius:2px;color:#fff;font-size:.6875rem;font-weight:600;left:.375rem;line-height:1;padding:.5rem .75rem;pointer-events:none;position:absolute;text-transform:uppercase;top:.375rem}.pattern-grid__pattern-frame .pattern-grid__status.is-pending{background:#f0c33c;color:#000}.pattern-grid__pattern-frame .pattern-grid__status.is-declined{background:#d63638}.pattern-grid__pattern-frame .pattern-grid__actions{align-items:center;bottom:0;display:flex;justify-content:flex-end;left:0;opacity:0;padding:.375rem;position:absolute;right:0;transform:translateY(6px);transition:transform 75ms ease-in-out,opacity 75ms ease-in-ou
t}.pattern-grid__pattern-frame .pattern-grid__actions .button+.components-button{margin-left:.375rem}.pattern-grid__pattern-frame:focus-within .pattern-grid__actions,.pattern-grid__pattern-frame:hover .pattern-grid__actions{opacity:1;transform:translateY(0)}.pattern-grid__title{color:#1d2327;font-size:.875rem;font-weight:600;margin:.5rem 0}.pattern-grid__title a{color:currentColor}.pattern-grid__meta{align-items:center;display:flex;gap:1em;margin:.5rem 0}.pattern-grid__author-avatar,.pattern-grid__favorite-count{color:#1d2327;display:flex;font-size:.875rem;line-height:1;text-decoration:none}.pattern-grid__author-avatar img{border-radius:6px;height:1rem;margin-right:.5rem;width:1rem}.pattern-grid__favorite-count svg{fill:#787c82;height:1rem;margin-bottom:1px;margin-right:.25rem;margin-top:-1px;width:1rem}.pattern-menu:not(.is-mobile){margin:0;padding:0;position:relative}.pattern-menu:not(.is-mobile) li{display:inline-block;list-style:none;margin:0}.pattern-menu:not(.is-mobile) a{colo
r:#40464d;display:block;font-size:.875rem;padding:.5rem .75rem;text-decoration:none}.pattern-menu:not(.is-mobile) a:active,.pattern-menu:not(.is-mobile) a:focus,.pattern-menu:not(.is-mobile) a:hover{color:#000}.pattern-menu .pattern-menu__item.is-active{background:#0073aa;border-radius:2px;color:#fff}.pattern-menu .pattern-menu__item.is-active:focus,.pattern-menu .pattern-menu__item.is-active:hover{color:#fff}.pattern-menu.is-mobile{border-top:none!important;padding:0!important}.pattern-menu.is-mobile ul{background:#23282d;margin:0;padding:0}.pattern-menu.is-mobile li{border-top:1px solid #32373c;list-style:none}.pattern-menu.is-mobile li a{color:#ccd0d4;display:block;font-size:.875rem;padding:1rem 1.5rem;text-decoration:none}.pattern-menu.is-mobile>.components-panel__body-title{margin:0!important}.pattern-menu.is-mobile>.components-panel__body-title>button{padding:1.5rem}.pattern-menu.is-loading{height:24px;position:relative}.pattern-menu.is-loading:after{background:#f3f4f
5;border-radius:4px;content:"";height:24px;left:0;position:absolute;top:calc(50% - 12px);transition:none;width:80%}.pagination{margin:1.5rem 1.5rem 4rem;max-width:960px}@media screen and (min-width:960px){.pagination{margin-left:auto;margin-right:auto}}.pagination__list{align-items:center;display:flex;gap:.75rem;justify-content:center;list-style:none;margin:0}@media (max-width:480px){.pagination__list{gap:.25rem}}.pagination__item,.pagination__link{display:inline-block}.pagination__link{background:#fff;border:1px solid #d7dade;border-radius:2px;line-height:1;padding:.75rem}.pagination__link,.pagination__link:active,.pagination__link:hover{text-decoration:none}.pagination__link[aria-current=page]{background:#191e23;border:1px solid #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{background:#f3f4f5;padding:0}.pattern-preview__size-control{margin:0 auto;max-width:12rem;padding:1rem 0}.pattern-preview__size-control .components-base-control__field{margin-bottom:0}.pattern-preview__viewport{margin:0 auto;max-width:100vw;min-width:320px;padding:0 20px;position:relative}.pattern-preview__viewport .pattern-preview__viewport-iframe{background:#fff;border:1px solid #e8eaeb;max-width:100vw;vertical-align:middle}.pattern-preview__viewport:focus-within .pattern-preview__resize-help{clip:auto;background:#fff;border:1px solid #d7dade;border-radius:2px;bottom:-1rem;clip-path:none;height:auto;left:20px;margin:initial;overflow:initial;padding:8px 16px;right:20px;text-align:center;width:auto}.pattern-preview__drag-handle{bottom:0;position:absolute;top:0;width:20px}.pattern-preview__drag-ha
ndle.is-left{left:0}.pattern-preview__drag-handle.is-right{right:0}.pattern-preview__drag-handle-button{appearance:none;background:#7e8993;border:none;border-radius:99999px;cursor:grab;height:100px;left:6px;outline:none;padding:0;position:absolute;top:calc(50% - 50px);width:8px}.pattern-preview__drag-handle-button:hover{background:#6c7782}.pattern-preview__drag-handle-button:active{background:#606a74;cursor:grabbing}.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{align-items:center;display:flex;justify-content:center;margin:0}.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{line-height:1.5;text-al
ign:center}.pattern-report-modal__actions{column-gap:4%;display:grid;grid-template-columns:48% 48%;margin-top:1.5rem}.pattern-report-modal__actions button{justify-content:center}.pattern-report-modal__radio .components-radio-control__option{margin-top:.75rem}.pattern-search{align-items:center;background:#fff;border:1px solid #6c7782;border-radius:2px;display:flex}.pattern-search input[type=search]{border:none;box-shadow:none;flex-grow:1;font-size:.8125rem;margin:0;padding:.25rem .5rem}.pattern-search input[type=search]:focus{outline:1px auto #0073aa}.pattern-search.is-loading{background:#f3f4f5;border-radius:4px;display:block;height:24px;min-width:100%}@media only screen and (min-width:480px){.pattern-search.is-loading{min-width:auto!important;width:224px!important}}.pattern-search__button{background:transparent;border:none;color:#6c7782;display:flex}.pattern-search__button:active{background:#d7dade}.pattern-search__button:focus{outline:1px auto #0073aa}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{margin-left:auto;margin-right:auto;max-width:960px;padding:1.5rem}@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-bottom:1.875rem;padding-top:2.625rem}body.single-wporg-pattern .entry-header .entry-title{font-weight:600;line-height:1.2;margin-top:0}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{font-size:.75rem;font-weight:600;line-height
:1.3333;margin-right:1rem;text-transform:uppercase}body.single-wporg-pattern .pattern-actions{background:#fff;padding:0 1.5rem 2rem}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{align-items:center;display:flex;flex-wrap:wrap;gap:.5em 2em;justify-content:flex-start;padding:0}@media (max-width:480px){body.single-wporg-pattern .pattern-actions__container{justify-content:center}}body.single-wporg-pattern .pattern-actions__notice{flex-basis:100%;height:auto;margin:1.5rem 0 0}body.single-wporg-pattern .pattern-actions__notice>*{align-items:flex-start;display:flex;flex-direction:column;justify-content:space-between;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-it
ems:center;flex-direction:row}body.single-wporg-pattern .pattern-actions__notice>* button{margin-top:0}}body.single-wporg-pattern .pattern-actions__guide{height:auto;max-height:none;max-width:384px}body.single-wporg-pattern .pattern-actions__guide-content{line-height:1.5;padding:1.5rem}body.single-wporg-pattern .pattern-actions__guide-title{margin:0}body.single-wporg-pattern .pattern-actions__guide-shortcut{background:#edeff0;border-radius:2px;box-shadow:0 0 0 1px #ccd0d4;display:inline-block;font-weight:600;min-width:20px;padding:1px;text-align:center}body.single-wporg-pattern .entry-content{margin-left:auto;margin-right:auto;max-width:960px}body.single-wporg-pattern .pattern__meta{display:flex;justify-content:flex-end}.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-columns:1fr 22rem;grid-template-rows:auto 1fr}body.home .site-branding>*{align-self:center}@medi
a screen and (max-width:736px){body.home .site-branding{display:block}}body.home .site-title.site-title{font-size:3rem;grid-column-start:1;grid-row-start:1;line-height:1.25;margin-top:0;text-align:left}body.home .site-description{color:#fff;font-size:1.25rem;grid-column-start:1;grid-row-start:2;line-height:1.6;margin:0;text-align:left}body:not(.home) .site-branding{align-items:center;color:#fff;display:flex;font-size:.8125rem;justify-content:space-between}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-backgr
ound-color{background-color:#fff}.home-page .shapes{margin:0 auto;position:relative}.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{padding:50px 90px;position:absolute;width:50%}}@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-size:14px;font-style:italic}
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternspackagejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -36,6 +36,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "@wordpress/data": "5.1.1",
</span><span class="cx" style="display: block; padding: 0 10px"> "@wordpress/data-controls": "2.1.1",
</span><span class="cx" style="display: block; padding: 0 10px"> "@wordpress/element": "3.1.1",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "@wordpress/html-entities": "3.1.1",
</ins><span class="cx" style="display: block; padding: 0 10px"> "@wordpress/i18n": "4.1.1",
</span><span class="cx" style="display: block; padding: 0 10px"> "@wordpress/icons": "4.0.1",
</span><span class="cx" style="display: block; padding: 0 10px"> "@wordpress/keycodes": "3.1.1",
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsfavoritebuttonindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/index.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/index.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -51,8 +51,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return (
</span><span class="cx" style="display: block; padding: 0 10px"> <button className={ buttonClasses } onClick={ onClick }>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <IconHeartFilled className="pattern__favorite-filled" />
- <IconHeartOutline className="pattern__favorite-outline" />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <IconHeartFilled className="pattern-favorite-button__filled" />
+ <IconHeartOutline className="pattern-favorite-button__outline" />
</ins><span class="cx" style="display: block; padding: 0 10px"> <span className={ labelClasses }>
</span><span class="cx" style="display: block; padding: 0 10px"> { isFavorite
</span><span class="cx" style="display: block; padding: 0 10px"> ? __( 'Remove from favorites', 'wporg-patterns' )
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsfavoritebuttonsmalljs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/small.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/small.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/small.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,55 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import IconHeartFilled from '../icons/heart-filled';
+import { store as patternStore } from '../../store';
+
+const FavoriteButtonSmall = ( { className, label, patternId } ) => {
+ const { hasPermission, isFavorite } = useSelect( ( select ) => {
+ // Fetch favorites so that the state is synced.
+ select( patternStore ).getFavorites();
+ return {
+ // canUser defaults to adding `/wp/v2/` prefix, so we need to backtrack up the path.
+ hasPermission: !! select( coreStore ).canUser( 'create', '../../wporg/v1/pattern-favorites' ),
+ isFavorite: select( patternStore ).isFavorite( patternId ),
+ };
+ } );
+ const { addFavorite, removeFavorite } = useDispatch( patternStore );
+ const onClick = useCallback( () => {
+ if ( isFavorite ) {
+ removeFavorite( patternId );
+ } else {
+ addFavorite( patternId );
+ }
+ }, [ isFavorite ] );
+
+ const buttonClasses = classnames( className, 'button button-link pattern-favorite-button-small', {
+ 'is-favorited': isFavorite,
+ } );
+
+ return ! hasPermission ? (
+ <span className={ buttonClasses }>
+ <IconHeartFilled className="pattern-favorite-button__filled" />
+ <span>{ label }</span>
+ </span>
+ ) : (
+ <button className={ buttonClasses } onClick={ onClick }>
+ <IconHeartFilled className="pattern-favorite-button__filled" />
+ <span>{ label }</span>
+ </button>
+ );
+};
+
+export default FavoriteButtonSmall;
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsiconsheartfilledjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/icons/heart-filled.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/icons/heart-filled.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/icons/heart-filled.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5,7 +5,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> export default function ( props ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return (
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" { ...props }>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" { ...props }>
</ins><span class="cx" style="display: block; padding: 0 10px"> <Path d="M11.941 21.175l-1.443-1.32c-5.124-4.67-8.508-7.75-8.508-11.53 0-3.08 2.408-5.5 5.473-5.5 1.732 0 3.394.81 4.478 2.09 1.085-1.28 2.747-2.09 4.478-2.09 3.065 0 5.473 2.42 5.473 5.5 0 3.78-3.383 6.86-8.508 11.54l-1.443 1.31z" />
</span><span class="cx" style="display: block; padding: 0 10px"> </SVG>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsiconsheartoutlinejs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/icons/heart-outline.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/icons/heart-outline.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/icons/heart-outline.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5,7 +5,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> export default function ( props ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return (
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" { ...props }>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" { ...props }>
</ins><span class="cx" style="display: block; padding: 0 10px"> <Path d="M12 4.915c1.09-1.28 2.76-2.09 4.5-2.09 3.08 0 5.5 2.42 5.5 5.5 0 3.777-3.394 6.855-8.537 11.518l-.013.012-1.45 1.32-1.45-1.31-.04-.036C5.384 15.17 2 12.095 2 8.325c0-3.08 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09zm0 13.56l.1-.1c4.76-4.31 7.9-7.16 7.9-10.05 0-2-1.5-3.5-3.5-3.5-1.54 0-3.04.99-3.56 2.36h-1.87c-.53-1.37-2.03-2.36-3.57-2.36-2 0-3.5 1.5-3.5 3.5 0 2.89 3.14 5.74 7.9 10.05l.1.1z" />
</span><span class="cx" style="display: block; padding: 0 10px"> </SVG>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsiframeindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/iframe/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/iframe/index.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/iframe/index.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -90,7 +90,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> '<style>body{margin:0}</style>' + head;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function Iframe( { contentRef, children, head, headHTML, themeSlug, ...props }, ref ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function Iframe(
+ { contentRef, children, head, headHTML, bodyStyle = '', themeSlug = 'twentynineteen', ...props },
+ ref
+) {
</ins><span class="cx" style="display: block; padding: 0 10px"> const [ iframeDocument, setIframeDocument ] = useState();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> headHTML += `<style>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -102,6 +105,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .${ BODY_CLASS_NAME } {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ${ bodyStyle }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> body > div {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -110,12 +114,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> </style>`;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( themeSlug ) {
- headHTML += `<link rel="stylesheet" href="https://wp-themes.com/wp-content/themes/${ themeSlug }/style.css" media="all" />`;
- } else {
- headHTML +=
- '<link rel="stylesheet" href="https://wp-themes.com/wp-content/themes/twentytwentyone/style.css" media="all" />';
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ headHTML += `<link rel="stylesheet" href="https://wp-themes.com/wp-content/themes/${ themeSlug }/style.css" media="all" />`;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const setRef = useCallback( ( node ) => {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! node ) {
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsmypatternsindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/my-patterns/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/my-patterns/index.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/my-patterns/index.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12,6 +12,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> import Menu from './menu';
</span><span class="cx" style="display: block; padding: 0 10px"> import PatternGrid from '../pattern-grid';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import PatternThumbnail from '../pattern-thumbnail';
</ins><span class="cx" style="display: block; padding: 0 10px"> import QueryMonitor from '../query-monitor';
</span><span class="cx" style="display: block; padding: 0 10px"> import { RouteProvider } from '../../hooks';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -38,7 +39,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <RouteProvider>
</span><span class="cx" style="display: block; padding: 0 10px"> <QueryMonitor />
</span><span class="cx" style="display: block; padding: 0 10px"> <Menu />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <PatternGrid query={ modifiedQuery } />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <PatternGrid query={ modifiedQuery }>
+ { ( post ) => <PatternThumbnail key={ post.id } pattern={ post } /> }
+ </PatternGrid>
</ins><span class="cx" style="display: block; padding: 0 10px"> </RouteProvider>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatterngridindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid/index.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid/index.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -8,10 +8,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> import Pagination from './pagination';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import PatternThumbnail from '../pattern-thumbnail';
</del><span class="cx" style="display: block; padding: 0 10px"> import { store as patternStore } from '../../store';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function PatternGrid( { query } ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function PatternGrid( { query, children } ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> const { isLoading, posts, totalPages } = useSelect( ( select ) => {
</span><span class="cx" style="display: block; padding: 0 10px"> const { getPatternTotalPagesByQuery, getPatternsByQuery, isLoadingPatternsByQuery } = select(
</span><span class="cx" style="display: block; padding: 0 10px"> patternStore
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -26,13 +25,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return (
</span><span class="cx" style="display: block; padding: 0 10px"> <>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div className="pattern-grid">
- { isLoading ? (
- <Spinner />
- ) : (
- posts.map( ( post ) => <PatternThumbnail key={ post.id } pattern={ post } /> )
- ) }
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div className="pattern-grid">{ isLoading ? <Spinner /> : posts.map( children ) }</div>
</ins><span class="cx" style="display: block; padding: 0 10px"> <Pagination totalPages={ totalPages } currentPage={ query?.page } />
</span><span class="cx" style="display: block; padding: 0 10px"> </>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternthumbnailcanvasjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/canvas.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/canvas.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/canvas.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -9,6 +9,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> import Iframe from '../iframe';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const VIEWPORT_WIDTH = 800;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const ASPECT_RATIO = 2 / 3;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> function PatternThumbnail( { className, html } ) {
</span><span class="cx" style="display: block; padding: 0 10px"> const wrapperRef = useRef();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,7 +19,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> useEffect( () => {
</span><span class="cx" style="display: block; padding: 0 10px"> const handleOnResize = () => {
</span><span class="cx" style="display: block; padding: 0 10px"> try {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- setFrameHeight( wrapperRef.current.clientWidth * 1 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ setFrameHeight( wrapperRef.current.clientWidth * ASPECT_RATIO );
</ins><span class="cx" style="display: block; padding: 0 10px"> setFrameScale( wrapperRef.current.clientWidth / VIEWPORT_WIDTH );
</span><span class="cx" style="display: block; padding: 0 10px"> } catch ( err ) {}
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -37,7 +38,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border: 'none',
</span><span class="cx" style="display: block; padding: 0 10px"> width: `${ VIEWPORT_WIDTH }px`,
</span><span class="cx" style="display: block; padding: 0 10px"> maxWidth: 'none',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- height: `${ VIEWPORT_WIDTH }px`,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: `${ VIEWPORT_WIDTH * ASPECT_RATIO }px`,
</ins><span class="cx" style="display: block; padding: 0 10px"> transform: `scale(${ frameScale })`,
</span><span class="cx" style="display: block; padding: 0 10px"> transformOrigin: 'top left',
</span><span class="cx" style="display: block; padding: 0 10px"> pointerEvents: 'none',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -55,6 +56,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <Iframe
</span><span class="cx" style="display: block; padding: 0 10px"> className="pattern-grid__preview-iframe"
</span><span class="cx" style="display: block; padding: 0 10px"> style={ style }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ bodyStyle={ 'overflow: hidden;' }
</ins><span class="cx" style="display: block; padding: 0 10px"> headHTML={ window.__editorStyles.html }
</span><span class="cx" style="display: block; padding: 0 10px"> >
</span><span class="cx" style="display: block; padding: 0 10px"> <div
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternthumbnailindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/index.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/index.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,29 +1,86 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * WordPress dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { __, _n, sprintf } from '@wordpress/i18n';
</ins><span class="cx" style="display: block; padding: 0 10px"> import { Disabled } from '@wordpress/components';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { decodeEntities } from '@wordpress/html-entities';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import Canvas from './canvas';
+import CopyPatternButton from '../copy-pattern-button';
</ins><span class="cx" style="display: block; padding: 0 10px"> import FavoriteButton from '../favorite-button';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import CopyPatternButton from '../copy-pattern-button';
-import Canvas from './canvas';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import FavoriteButtonSmall from '../favorite-button/small';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function PatternThumbnail( { pattern } ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function getStatusLabel( pattern ) {
+ switch ( pattern.status ) {
+ case 'pending':
+ return __( 'Pending', 'wporg-patterns' );
+ case 'draft':
+ return __( 'Draft', 'wporg-patterns' );
+ case 'declined':
+ return __( 'Declined', 'wporg-patterns' );
+ }
+ return '';
+}
+
+function PatternThumbnail( { pattern, showAvatar } ) {
+ const statusLabel = getStatusLabel( pattern );
</ins><span class="cx" style="display: block; padding: 0 10px"> return (
</span><span class="cx" style="display: block; padding: 0 10px"> <div className="pattern-grid__pattern">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <a href={ pattern.link } rel="bookmark">
- <span className="screen-reader-text">{ pattern.title.rendered }</span>
- <Disabled>
- <Canvas className="pattern-grid__preview" html={ pattern.content.rendered } />
- </Disabled>
- </a>
- <div className="pattern-grid__actions">
- <h2 className="pattern-grid__title">{ pattern.title.rendered }</h2>
- <FavoriteButton showLabel={ false } patternId={ pattern.id } />
- <CopyPatternButton isSmall={ true } content={ pattern.pattern_content } />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <div className="pattern-grid__pattern-frame">
+ <a href={ pattern.link } rel="bookmark">
+ <span className="screen-reader-text">{ decodeEntities( pattern.title.rendered ) }</span>
+ <Disabled>
+ <Canvas className="pattern-grid__preview" html={ pattern.content.rendered } />
+ </Disabled>
+ </a>
+ { statusLabel ? (
+ <div className={ `pattern-grid__status is-${ pattern.status }` }>
+ <span>{ statusLabel }</span>
+ </div>
+ ) : null }
+ <div className="pattern-grid__actions">
+ <FavoriteButton showLabel={ false } patternId={ pattern.id } />
+ <CopyPatternButton isSmall={ true } content={ pattern.pattern_content } />
+ </div>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ <h2 className="pattern-grid__title">
+ <a href={ pattern.link }>{ decodeEntities( pattern.title.rendered ) }</a>
+ </h2>
+ <p className="pattern-grid__meta">
+ { showAvatar && pattern.author_meta ? (
+ <a href={ pattern.author_meta.url } className="pattern-grid__author-avatar">
+ <img alt="" src={ pattern.author_meta.avatar } />
+ { pattern.author_meta.name }
+ </a>
+ ) : null }
+ { pattern.favorite_count > 0 ? (
+ <FavoriteButtonSmall
+ className="pattern-grid__favorite-count"
+ patternId={ pattern.id }
+ label={
+ <>
+ <span className="screen-reader-text">
+ { sprintf(
+ /* translators: %s is the favorite count for a pattern. */
+ _n(
+ 'Favorited %s times',
+ 'Favorited %s times',
+ pattern.favorite_count,
+ 'wporg-patterns'
+ ),
+ pattern.favorite_count
+ ) }
+ </span>
+ <span aria-hidden>{ pattern.favorite_count }</span>
+ </>
+ }
+ />
+ ) : null }
+ </p>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternsindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/patterns/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/patterns/index.js 2021-06-23 22:12:42 UTC (rev 11057)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/patterns/index.js 2021-06-24 17:19:19 UTC (rev 11058)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -8,6 +8,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> import PatternGrid from '../pattern-grid';
</span><span class="cx" style="display: block; padding: 0 10px"> import PatternGridMenu from '../pattern-grid-menu';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import PatternThumbnail from '../pattern-thumbnail';
</ins><span class="cx" style="display: block; padding: 0 10px"> import QueryMonitor from '../query-monitor';
</span><span class="cx" style="display: block; padding: 0 10px"> import { RouteProvider } from '../../hooks';
</span><span class="cx" style="display: block; padding: 0 10px"> import { store as patternStore } from '../../store';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -19,7 +20,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <RouteProvider>
</span><span class="cx" style="display: block; padding: 0 10px"> <QueryMonitor />
</span><span class="cx" style="display: block; padding: 0 10px"> <PatternGridMenu />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <PatternGrid query={ query } />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <PatternGrid query={ query }>
+ { ( post ) => <PatternThumbnail key={ post.id } pattern={ post } showAvatar /> }
+ </PatternGrid>
</ins><span class="cx" style="display: block; padding: 0 10px"> </RouteProvider>
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span></span></pre>
</div>
</div>
</body>
</html>