dvadf
File manager - Edit - /home/centroca/public_html/twentytwentyone.tar
Back
style-rtl.css 0000644 00000447564 15252513625 0007247 0 ustar 00 @charset "UTF-8"; /* Theme Name: Twenty Twenty-One Theme URI: https://wordpress.org/themes/twentytwentyone/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog. Requires at least: 5.3 Tested up to: 5.6 Requires PHP: 5.6 Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentyone Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org Twenty Twenty-One is distributed under the terms of the GNU GPL. */ /** * SETTINGS * File-header..........The file header for the themes style.css file. * Fonts................Any font files, if the project needs specific fonts. * Global...............Project-specific, globally available variables. * * TOOLS * Functions............Global functions. * Mixins...............Global mixins. * * GENERIC * Normalize.css........Normalise browser defaults. * Breakpoints..........Mixins and variables for responsive styles * Vertical-margins.....Vertical spacing for the main components. * Reset................Reset specific elements to make them easier to style in other contexts. * Clearings............Clearnings for the main components. * * ELEMENTS * Blockquote...........Default blockquote. * Forms................Element-level form styling. * Headings.............H1–H6 * Links................Default links. * Lists................Default lists. * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video. * * BLOCKS * Audio................Specific styles for the audio block. * Button...............Specific styles for the button block. * Code.................Specific styles for the code block. * Collumns.............Specific styles for the collumns block. * Cover................Specific styles for the cover block. * File.................Specific styles for the file block. * Gallery..............Specific styles for the gallery block. * Group................Specific styles for the group block. * Heading..............Specific styles for the heading block. * Image................Specific styles for the image block. * Latest comments......Specific styles for the latest comments block. * Latest posts.........Specific styles for the latest posts block. * Legacy...............Specific styles for the legacy gallery. * List.................Specific styles for the list block. * Meda text............Specific styles for the media and text block. * Navigation...........Specific styles for the navigation block. * Paragraph............Specific styles for the paragraph block. * Pullquote............Specific styles for the pullquote block. * Quote................Specific styles for the quote block. * Search...............Specific styles for the search block. * Separator............Specific styles for the separator block. * Spacer...............Specific styles for the spacer block. * Table................Specific styles for the table block. * Verse................Specific styles for the verse block. * Video................Specific styles for the video block. * Utilities............Block alignments. * * COMPONENTS * Header...............Header styles. * Footer...............Footer styles. * Comments.............Comment styles. * Archives.............Archive styles. * 404..................404 styles. * Search...............Search styles. * Navigation...........Navigation styles. * Footer Navigation....Footer Navigation styles. * Pagination...........Pagination styles. * Single...............Single page and post styles. * Posts and pages......Misc, sticky post styles. * Entry................Entry, author biography. * Widget...............Widget styles. * Editor...............Editor styles. * * UTILITIES * A11y.................Screen reader text, prefers reduced motion etc. * Color Palette........Classes for the color palette colors. * Editor Font Sizes....Editor Font Sizes. * Measure..............The width of a line of text, in characters. */ /* Categories 01 to 03 are the basics. */ /* Variables */ :root { /* Font Family */ --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); /* Font Size */ --global--font-size-base: 1.25rem; --global--font-size-xs: 1rem; --global--font-size-sm: 1.125rem; --global--font-size-md: 1.25rem; --global--font-size-lg: 1.5rem; --global--font-size-xl: 2.25rem; --global--font-size-xxl: 4rem; --global--font-size-xxxl: 5rem; --global--font-size-page-title: var(--global--font-size-xxl); --global--letter-spacing: normal; /* Line Height */ --global--line-height-body: 1.7; --global--line-height-heading: 1.3; --global--line-height-page-title: 1.1; /* Headings */ --heading--font-family: var(--global--font-primary); --heading--font-size-h6: var(--global--font-size-xs); --heading--font-size-h5: var(--global--font-size-sm); --heading--font-size-h4: var(--global--font-size-lg); --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg)); --heading--font-size-h2: var(--global--font-size-xl); --heading--font-size-h1: var(--global--font-size-page-title); --heading--letter-spacing-h6: 0.05em; --heading--letter-spacing-h5: 0.05em; --heading--letter-spacing-h4: var(--global--letter-spacing); --heading--letter-spacing-h3: var(--global--letter-spacing); --heading--letter-spacing-h2: var(--global--letter-spacing); --heading--letter-spacing-h1: var(--global--letter-spacing); --heading--line-height-h6: var(--global--line-height-heading); --heading--line-height-h5: var(--global--line-height-heading); --heading--line-height-h4: var(--global--line-height-heading); --heading--line-height-h3: var(--global--line-height-heading); --heading--line-height-h2: var(--global--line-height-heading); --heading--line-height-h1: var(--global--line-height-page-title); --heading--font-weight: normal; --heading--font-weight-page-title: 300; --heading--font-weight-strong: 600; /* Block: Latest posts */ --latest-posts--title-font-family: var(--heading--font-family); --latest-posts--title-font-size: var(--heading--font-size-h3); --latest-posts--description-font-family: var(--global--font-secondary); --latest-posts--description-font-size: var(--global--font-size-sm); --list--font-family: var(--global--font-secondary); --definition-term--font-family: var(--global--font-primary); /* Colors */ --global--color-black: #000; --global--color-dark-gray: #28303d; --global--color-gray: #39414d; --global--color-light-gray: #f0f0f0; --global--color-green: #d1e4dd; --global--color-blue: #d1dfe4; --global--color-purple: #d1d1e4; --global--color-red: #e4d1d1; --global--color-orange: #e4dad1; --global--color-yellow: #eeeadd; --global--color-white: #fff; --global--color-white-50: rgba(255, 255, 255, 0.5); --global--color-white-90: rgba(255, 255, 255, 0.9); --global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */ --global--color-secondary: var(--global--color-gray); /* Headings */ --global--color-primary-hover: var(--global--color-primary); --global--color-background: var(--global--color-green); /* Mint, default body background */ --global--color-border: var(--global--color-primary); /* Used for borders (separators) */ /* Spacing */ --global--spacing-unit: 20px; --global--spacing-measure: unset; --global--spacing-horizontal: 25px; --global--spacing-vertical: 30px; /* Elevation */ --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); /* Forms */ --form--font-family: var(--global--font-secondary); --form--font-size: var(--global--font-size-sm); --form--line-height: var(--global--line-height-body); --form--color-text: var(--global--color-dark-gray); --form--color-ranged: var(--global--color-secondary); --form--label-weight: 500; --form--border-color: var(--global--color-secondary); --form--border-width: 3px; --form--border-radius: 0; --form--spacing-unit: calc(0.5 * var(--global--spacing-unit)); /* Cover block */ --cover--height: calc(15 * var(--global--spacing-vertical)); --cover--color-foreground: var(--global--color-white); --cover--color-background: var(--global--color-black); /* Buttons */ --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --button--font-family: var(--global--font-primary); --button--font-size: var(--global--font-size-base); --button--font-weight: 500; --button--line-height: 1.5; --button--border-width: 3px; --button--border-radius: 0; --button--padding-vertical: 15px; --button--padding-horizontal: calc(2 * var(--button--padding-vertical)); /* entry */ --entry-header--color: var(--global--color-primary); --entry-header--color-link: currentColor; --entry-header--color-hover: var(--global--color-primary-hover); --entry-header--color-focus: var(--global--color-secondary); --entry-header--font-size: var(--heading--font-size-h2); --entry-content--font-family: var(--global--font-secondary); --entry-author-bio--font-family: var(--heading--font-family); --entry-author-bio--font-size: var(--heading--font-size-h4); /* Header */ --branding--color-text: var(--global--color-primary); --branding--color-link: var(--global--color-primary); --branding--color-link-hover: var(--global--color-secondary); --branding--title--font-family: var(--global--font-primary); --branding--title--font-size: var(--global--font-size-lg); --branding--title--font-size-mobile: var(--heading--font-size-h4); --branding--title--font-weight: normal; --branding--title--text-transform: uppercase; --branding--description--font-family: var(--global--font-secondary); --branding--description--font-size: var(--global--font-size-sm); --branding--description--font-family: var(--global--font-secondary); --branding--logo--max-width: 300px; --branding--logo--max-height: 100px; --branding--logo--max-width-mobile: 96px; --branding--logo--max-height-mobile: 96px; /* Main navigation */ --primary-nav--font-family: var(--global--font-secondary); --primary-nav--font-family-mobile: var(--global--font-primary); --primary-nav--font-size: var(--global--font-size-md); --primary-nav--font-size-sub-menu: var(--global--font-size-xs); --primary-nav--font-size-mobile: var(--global--font-size-sm); --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm); --primary-nav--font-size-button: var(--global--font-size-xs); --primary-nav--font-style: normal; --primary-nav--font-style-sub-menu-mobile: normal; --primary-nav--font-weight: normal; --primary-nav--font-weight-button: 500; --primary-nav--color-link: var(--global--color-primary); --primary-nav--color-link-hover: var(--global--color-primary-hover); --primary-nav--color-text: var(--global--color-primary); --primary-nav--padding: calc(0.66 * var(--global--spacing-unit)); --primary-nav--border-color: var(--global--color-primary); /* Pagination */ --pagination--color-text: var(--global--color-primary); --pagination--color-link-hover: var(--global--color-primary-hover); --pagination--font-family: var(--global--font-secondary); --pagination--font-size: var(--global--font-size-lg); --pagination--font-weight: normal; --pagination--font-weight-strong: 600; /* Footer */ --footer--color-text: var(--global--color-primary); --footer--color-link: var(--global--color-primary); --footer--color-link-hover: var(--global--color-primary-hover); --footer--font-family: var(--global--font-primary); --footer--font-size: var(--global--font-size-sm); /* Block: Pull quote */ --pullquote--font-family: var(--global--font-primary); --pullquote--font-size: var(--heading--font-size-h3); --pullquote--font-style: normal; --pullquote--letter-spacing: var(--heading--letter-spacing-h4); --pullquote--line-height: var(--global--line-height-heading); --pullquote--border-width: 3px; --pullquote--border-color: var(--global--color-primary); --pullquote--color-foreground: var(--global--color-primary); --pullquote--color-background: var(--global--color-background); --quote--font-family: var(--global--font-secondary); --quote--font-size: var(--global--font-size-md); --quote--font-size-large: var(--global--font-size-xl); --quote--font-style: normal; --quote--font-weight: 700; --quote--font-weight-strong: bolder; --quote--font-style-large: normal; --quote--font-style-cite: normal; --quote--line-height: var(--global--line-height-body); --quote--line-height-large: 1.35; --separator--border-color: var(--global--color-border); --separator--height: 1px; /* Block: Table */ --table--stripes-border-color: var(--global--color-light-gray); --table--stripes-background-color: var(--global--color-light-gray); --table--has-background-text-color: var(--global--color-dark-gray); /* Widgets */ --widget--line-height-list: 1.9; --widget--line-height-title: 1.4; --widget--font-weight-title: 700; --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); /* Admin-bar height */ --global--admin-bar--height: 0; } .admin-bar { --global--admin-bar--height: 32px; } @media only screen and (max-width: 782px) { .admin-bar { --global--admin-bar--height: 46px; } } @media only screen and (min-width: 652px) { :root { --global--font-size-xl: 2.5rem; --global--font-size-xxl: 6rem; --global--font-size-xxxl: 9rem; --heading--font-size-h3: 2rem; --heading--font-size-h2: 3rem; } } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; text-decoration-thickness: 1px; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration-style: dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /** * Repsonsive Styles */ /** * Required Variables */ /** * Root Media Query Variables */ :root { --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6); --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal)); --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal)); --responsive--alignfull-width: 100%; --responsive--alignright-margin: var(--global--spacing-horizontal); --responsive--alignleft-margin: var(--global--spacing-horizontal); } @media only screen and (min-width: 482px) { :root { --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px); --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal)); --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); } } @media only screen and (min-width: 822px) { :root { --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px); --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px); } } /** * Extends */ .post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width { max-width: var(--responsive--aligndefault-width); margin-right: auto; margin-left: auto; } .widget-area, .pagination, .comments-pagination, .post-navigation, .site-footer, .site-header, .alignwide, .wide-max-width { max-width: var(--responsive--alignwide-width); margin-right: auto; margin-left: auto; } .alignfull, .wp-block-group .wp-block-group__inner-container > *.alignfull, .full-max-width { max-width: var(--responsive--alignfull-width); width: var(--responsive--alignfull-width); margin-right: auto; margin-left: auto; } @media only screen and (min-width: 482px) { .alignfull, .full-max-width { max-width: var(--responsive--alignfull-width); width: auto; margin-right: auto; margin-left: auto; } } .entry-header .post-thumbnail, .singular .post-thumbnail, .alignfull [class*=inner-container] > .alignwide, .alignwide [class*=inner-container] > .alignwide { margin-right: auto; margin-left: auto; width: var(--responsive--alignwide-width); max-width: var(--responsive--alignfull-width); } @media only screen and (min-width: 482px) { .entry-content > .alignleft { margin-left: var(--responsive--alignleft-margin); margin-right: var(--global--spacing-horizontal); } } @media only screen and (min-width: 482px) { .entry-content > .alignright { margin-left: var(--global--spacing-horizontal); margin-right: var(--responsive--alignright-margin); } } /** * Site Structure * * - Set vertical margins and responsive widths on * top-level wrappers and content wrappers * - `--global--width-content` is a responsive veriable * - See: globals/_global-width-responsive.scss */ /** * Top Level Wrappers (header, main, footer) * - Set vertical padding and horizontal margins */ .site-header, .site-main, .widget-area, .site-footer { padding-top: var(--global--spacing-vertical); padding-bottom: var(--global--spacing-vertical); margin-right: auto; margin-left: auto; } .site-header { padding-top: calc(0.75 * var(--global--spacing-vertical)); padding-bottom: calc(2 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .site-header { padding-bottom: calc(3 * var(--global--spacing-vertical)); } } /** * Site-main children wrappers * - Add double vertical margins here for clearer heirarchy */ .site-main > * { margin-top: calc(3 * var(--global--spacing-vertical)); margin-bottom: calc(3 * var(--global--spacing-vertical)); } .site-main > *:first-child { margin-top: 0; } .site-main > *:last-child { margin-bottom: 0; } /** * Set the default maximum responsive content-width */ /** * Set the wide maximum responsive content-width */ /** * Set the full maximum responsive content-width */ /* * Block & non-gutenberg content wrappers * - Set margins */ .entry-header, .post-thumbnail, .entry-content, .entry-footer, .author-bio { margin-top: var(--global--spacing-vertical); margin-left: auto; margin-bottom: var(--global--spacing-vertical); margin-right: auto; } /* * Block & non-gutenberg content wrapper children * - Sets spacing-vertical margin logic */ .site-main > article > *, .site-main > .not-found > *, .entry-content > *, [class*=inner-container] > *, .wp-block-template-part > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .site-main > article > *, .site-main > .not-found > *, .entry-content > *, [class*=inner-container] > *, .wp-block-template-part > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } .site-main > article > *:first-child, .site-main > .not-found > *:first-child, .entry-content > *:first-child, [class*=inner-container] > *:first-child, .wp-block-template-part > *:first-child { margin-top: 0; } .site-main > article > *:last-child, .site-main > .not-found > *:last-child, .entry-content > *:last-child, [class*=inner-container] > *:last-child, .wp-block-template-part > *:last-child { margin-bottom: 0; } .site-footer > *, .widget-area > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .site-footer > *, .widget-area > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } /* * Block & non-gutenberg content wrapper children * - Sets spacing-unit margins */ .entry-header > *, .post-thumbnail > *, .page-content > *, .comment-content > *, .widget > * { margin-top: var(--global--spacing-unit); margin-bottom: var(--global--spacing-unit); } .entry-header > *:first-child, .post-thumbnail > *:first-child, .page-content > *:first-child, .comment-content > *:first-child, .widget > *:first-child { margin-top: 0; } .entry-header > *:last-child, .post-thumbnail > *:last-child, .page-content > *:last-child, .comment-content > *:last-child, .widget > *:last-child { margin-bottom: 0; } /* * .entry-content children specific controls * - Adds special margin overrides for alignment utility classes */ .entry-content > * { /* Reset alignleft and alignright margins after alignfull */ } .entry-content > *.alignleft, .entry-content > *.alignright, .entry-content > *.alignleft:first-child + *, .entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background { margin-top: 0; } .entry-content > *:last-child, .entry-content > *.alignfull.has-background { margin-bottom: 0; } .entry-content > *.alignfull + .alignleft, .entry-content > *.alignfull + .alignright { margin-top: var(--global--spacing-vertical); } /** * Reset specific elements to make them easier to style in other contexts. */ html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, form, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /** * Apply generic border-box to all elements. * See: * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { /* Apply border-box across the entire page. */ box-sizing: border-box; font-family: var(--global--font-secondary); line-height: var(--global--line-height-body); } /** * Relax the definition a bit, to allow components to override it manually. */ *, *::before, *::after { box-sizing: inherit; } body { font-size: var(--global--font-size-base); font-weight: normal; color: var(--global--color-primary); text-align: right; background-color: var(--global--color-background); } button { cursor: pointer; } .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */ blockquote { padding: 0; position: relative; margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) 0; } blockquote > * { margin-top: var(--global--spacing-unit); margin-bottom: var(--global--spacing-unit); } blockquote > *:first-child { margin-top: 0; } blockquote > *:last-child { margin-bottom: 0; } blockquote p { letter-spacing: var(--heading--letter-spacing-h4); font-family: var(--quote--font-family); font-size: var(--quote--font-size); font-style: var(--quote--font-style); font-weight: var(--quote--font-weight); line-height: var(--quote--line-height); } blockquote cite, blockquote footer { font-weight: normal; color: var(--global--color-primary); font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } blockquote.alignleft, blockquote.alignright { padding-right: inherit; } blockquote.alignleft p, blockquote.alignright p { font-size: var(--heading--font-size-h5); max-width: inherit; width: inherit; } blockquote.alignleft cite, blockquote.alignleft footer, blockquote.alignright cite, blockquote.alignright footer { font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } blockquote strong { font-weight: var(--quote--font-weight-strong); } blockquote:before { content: "“"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); position: absolute; right: calc(-0.5 * var(--global--spacing-horizontal)); } blockquote .wp-block-quote__citation, blockquote cite, blockquote footer { color: var(--global--color-primary); font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); } @media only screen and (max-width: 481px) { blockquote { padding-right: calc(0.5 * var(--global--spacing-horizontal)); } blockquote:before { right: 0; } } input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], .site textarea { border: var(--form--border-width) solid var(--form--border-color); border-radius: var(--form--border-radius); color: var(--form--color-text); line-height: var(--global--line-height-body); padding: var(--form--spacing-unit); margin: 0 2px; } input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, .site textarea:focus { color: var(--form--color-text); outline-offset: 2px; outline: 2px dotted var(--form--border-color); } input[type=text]:disabled, input[type=email]:disabled, input[type=url]:disabled, input[type=password]:disabled, input[type=search]:disabled, input[type=number]:disabled, input[type=tel]:disabled, input[type=date]:disabled, input[type=month]:disabled, input[type=week]:disabled, input[type=time]:disabled, input[type=datetime]:disabled, input[type=datetime-local]:disabled, input[type=color]:disabled, .site textarea:disabled { opacity: 0.7; } .is-dark-theme input[type=text], .is-dark-theme input[type=email], .is-dark-theme input[type=url], .is-dark-theme input[type=password], .is-dark-theme input[type=search], .is-dark-theme input[type=number], .is-dark-theme input[type=tel], .is-dark-theme input[type=date], .is-dark-theme input[type=month], .is-dark-theme input[type=week], .is-dark-theme input[type=time], .is-dark-theme input[type=datetime], .is-dark-theme input[type=datetime-local], .is-dark-theme input[type=color], .is-dark-theme .site textarea { background: var(--global--color-white-90); } input[type=search]:focus { outline-offset: -7px; } .is-dark-theme input[type=search]:focus { outline-color: var(--global--color-background); } input[type=color] { padding: calc(var(--form--spacing-unit) / 2); height: calc(4 * var(--form--spacing-unit)); } input[type=email], input[type=url] { direction: ltr; } select { border: var(--form--border-width) solid var(--form--border-color); color: var(--form--color-text); -moz-appearance: none; -webkit-appearance: none; appearance: none; line-height: var(--global--line-height-body); padding: var(--form--spacing-unit) var(--form--spacing-unit) var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)); background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; background-position: left var(--form--spacing-unit) top 60%; } select:focus { outline-offset: 2px; outline: 2px dotted var(--form--border-color); } .is-dark-theme select { background: var(--global--color-white-90) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; background-position: left var(--form--spacing-unit) top 60%; } textarea { width: 100%; } label { font-size: var(--form--font-size); font-weight: var(--form--label-weight); margin-bottom: calc(var(--global--spacing-vertical) / 3); } /** https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker. License: MIT. */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { input[type=checkbox], input[type=radio] { -webkit-appearance: none; -moz-appearance: none; position: relative; width: 25px; height: 25px; border: var(--form--border-width) solid var(--form--border-color); background: var(--global--color-white); } input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: 0.7; } .is-dark-theme input[type=checkbox], .is-dark-theme input[type=radio] { background: var(--global--color-white-90); } input[type=checkbox]:focus { outline-offset: 2px; outline: 2px dotted var(--form--border-color); } input[type=checkbox]:after { content: ""; opacity: 0; display: block; right: 5px; top: 2px; position: absolute; width: 7px; height: 13px; border: 3px solid var(--form--color-text); border-top: 0; border-right: 0; transform: rotate(-30deg); } input[type=checkbox]:checked { color: var(--form--color-text); } input[type=checkbox]:checked:after { opacity: 1; } input[type=radio] { border-radius: 50%; } input[type=radio]:focus { outline-offset: 2px; outline: 2px dotted var(--form--border-color); } input[type=radio]:after { content: ""; opacity: 0; display: block; right: 3px; top: 3px; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--form--color-text); } input[type=radio]:checked { border: 4px solid var(--form--border-color); } input[type=radio]:checked:after { opacity: 1; } input[type=radio]:checked:focus { outline-offset: 4px; outline: 2px dotted var(--form--border-color); } } input[type=checkbox] + label, input[type=radio] + label { display: inline-block; padding-right: 10px; font-size: var(--global--font-size-xs); vertical-align: top; } /** * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ height: 6px; background: var(--form--color-ranged); border-radius: 6px; outline-offset: 10px; } input[type=range]:disabled { opacity: 0.7; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 3px solid var(--form--color-ranged); height: 44px; width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; } input[type=range]::-moz-range-thumb { border: 3px solid var(--form--color-ranged); height: 44px; width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; box-sizing: border-box; } } input[type=range]::-ms-track { width: 100%; height: 6px; border-radius: 6px; border-width: 19px 0; border-color: var(--global--color-background); background: transparent; color: transparent; cursor: pointer; } input[type=range]::-ms-fill-upper { background: var(--form--color-ranged); border-radius: 6px; } input[type=range]::-ms-fill-lower { background: var(--form--color-ranged); border-radius: 6px; } input[type=range]::-ms-thumb { border: 3px solid var(--form--color-ranged); height: 44px; width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; } fieldset { display: grid; border-color: var(--global--color-secondary); padding: var(--global--spacing-horizontal); } fieldset legend { font-size: var(--global--font-size-lg); } fieldset input[type=submit] { max-width: max-content; } fieldset input:not([type=submit]) { margin-bottom: var(--global--spacing-unit); } fieldset input[type=radio], fieldset input[type=checkbox] { margin-bottom: 0; } fieldset input[type=radio] + label, fieldset input[type=checkbox] + label { font-size: var(--form--font-size); padding-right: 0; margin-bottom: var(--global--spacing-unit); } ::-moz-placeholder { opacity: 1; } .post-password-message { font-size: var(--global--font-size-lg); } .post-password-form { display: flex; flex-wrap: wrap; } .post-password-form__label { width: 100%; margin-bottom: 0; } .post-password-form input[type=password] { flex-grow: 1; margin-top: calc(var(--global--spacing-vertical) / 3); margin-left: calc(0.66 * var(--global--spacing-horizontal)); } .post-password-form__submit { margin-top: calc(var(--global--spacing-vertical) / 3); } @media only screen and (min-width: 592px) { .post-password-form__submit { margin-right: calc(0.4 * var(--global--spacing-horizontal)); } } img { display: block; height: auto; max-width: 100%; } /* Classic editor images */ .entry-content img { max-width: 100%; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object, video { max-width: 100%; } /* Media captions */ figcaption, .wp-caption, .wp-caption-text, .wp-block-embed figcaption { color: currentColor; font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); margin-top: calc(0.5 * var(--global--spacing-unit)); margin-bottom: var(--global--spacing-unit); text-align: center; } .alignleft figcaption, .alignright figcaption, .alignleft .wp-caption, .alignright .wp-caption, .alignleft .wp-caption-text, .alignright .wp-caption-text, .alignleft .wp-block-embed figcaption, .alignright .wp-block-embed figcaption { margin-bottom: 0; } /* WP Smiley */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Over here, place any elements that do not need to have their own file. */ b, strong { font-weight: 700; } dfn, cite, em, i { font-style: italic; } pre { white-space: pre; overflow-x: auto; } /* * text-underline-offset doesn't work in Chrome at all 👎 * But looks nice in Safari/Firefox, so let's keep it and * maybe Chrome will support it soon. */ a { cursor: pointer; color: var(--wp--style--color--link, var(--global--color-primary)); text-underline-offset: 3px; text-decoration-skip-ink: all; } a:hover { text-decoration-style: dotted; text-decoration-skip-ink: none; } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; text-decoration: underline 1px dotted currentColor; text-decoration-skip-ink: none; background: rgba(255, 255, 255, 0.9); } .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-background)); } .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: rgba(0, 0, 0, 0.9); color: var(--wp--style--color--link, var(--global--color-white)); } .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-white)); } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { color: #21759b; background-color: #f1f1f1; } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } .has-background .has-link-color a, .has-background.has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } /* Category 05 is all about adjusting the default block styles to the given layout. I only added three blocks as examples. */ .wp-block-audio audio:focus { outline-offset: 5px; outline: 2px solid var(--global--color-primary); } /** * Button */ .site .button, input[type=submit], input[type=reset], .wp-block-search__button, .wp-block-button .wp-block-button__link { line-height: var(--button--line-height); color: var(--button--color-text); cursor: pointer; font-weight: var(--button--font-weight); font-family: var(--button--font-family); font-size: var(--button--font-size); background-color: var(--button--color-background); border-radius: var(--button--border-radius); border: var(--button--border-width) solid var(--button--color-background); text-decoration: none; padding: var(--button--padding-vertical) var(--button--padding-horizontal); } .site .button:focus, input[type=submit]:focus, input[type=reset]:focus, .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus { background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } .is-dark-theme .site .button:focus, .is-dark-theme input[type=submit]:focus, .is-dark-theme input[type=reset]:focus, .is-dark-theme .wp-block-search__button:focus, .is-dark-theme .wp-block-button .wp-block-button__link:focus { color: var(--button--color-background); } .site .button:focus:not(.has-background), input[type=submit]:focus:not(.has-background), input[type=reset]:focus:not(.has-background), .wp-block-search__button:focus:not(.has-background), .wp-block-button .wp-block-button__link:focus:not(.has-background) { color: var(--button--color-text-hover); } .site .button:disabled, input[type=submit]:disabled, input[type=reset]:disabled, .wp-block-search__button:disabled, .wp-block-button .wp-block-button__link:disabled { background-color: var(--global--color-white-50); border-color: var(--global--color-white-50); color: var(--button--color-text-active); } .site .button:active, input[type=submit]:active, input[type=reset]:active, .wp-block-search .wp-block-search__button:active, .wp-block-file .wp-block-file__button:active { color: var(--button--color-text-active); background-color: var(--button--color-background-active); } .site .button:hover, input[type=submit]:hover, input[type=reset]:hover, .wp-block-search .wp-block-search__button:hover, .wp-block-file .wp-block-file__button:hover { color: var(--button--color-text-hover); background: transparent; } /** * Block Options */ .wp-block-button:not(.is-style-outline) .wp-block-button__link:active { color: var(--button--color-text-active) !important; background: transparent !important; border-color: var(--button--color-background); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { color: var(--button--color-text-hover) !important; background: transparent !important; border-color: var(--button--color-background); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus { color: var(--button--color-text) !important; background: var(--button--color-background) !important; } .wp-block-button.is-style-outline .wp-block-button__link { padding: var(--button--padding-vertical) var(--button--padding-horizontal); } .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) { background: transparent; } .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) { background: transparent; color: var(--button--color-background); border-color: var(--button--color-background); } .wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) { color: currentColor; } .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color), .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color), .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) { color: var(--global--color-white); } .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background { color: var(--global--color-dark-gray); } .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color, .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color, .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color { color: var(--global--color-white); } .wp-block-button.is-style-outline .wp-block-button__link.has-text-color, .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color { border-color: currentColor; } .wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--button--color-text) !important; background: var(--button--color-background) !important; border-color: var(--button--color-background); } .wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color, .wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color { border-color: var(--button--color-background); } .wp-block-button.is-style-outline .wp-block-button__link:focus { color: var(--button--color-background) !important; background: transparent !important; } .wp-block-button .is-style-squared .wp-block-button__link { border-radius: 0; } .is-style-outline .wp-block-button__link[style*=radius]:focus, .wp-block-button a.wp-block-button__link[style*=radius]:focus { outline-offset: 2px; outline: 2px dotted var(--button--color-background); } .wp-block-code { border-color: var(--global--color-border); border-radius: 0; border-style: solid; border-width: 0.1rem; padding: var(--global--spacing-unit); } .wp-block-code code { font-size: var(--global--font-size-xs); white-space: pre; overflow-x: auto; display: block; } .wp-block-columns:not(.alignwide):not(.alignfull) { clear: both; } .wp-block-columns .wp-block-column > * { margin-top: calc(0.66 * var(--global--spacing-vertical)); margin-bottom: calc(0.66 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-columns .wp-block-column > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } .wp-block-columns .wp-block-column > *:first-child { margin-top: 0; } .wp-block-columns .wp-block-column > *:last-child { margin-bottom: 0; } .wp-block-columns .wp-block-column:last-child { margin-bottom: 0; } .wp-block-columns .wp-block-column:not(:last-child) { margin-bottom: calc(0.66 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-columns .wp-block-column:not(:last-child) { margin-bottom: var(--global--spacing-vertical); } } @media only screen and (min-width: 822px) { .wp-block-columns .wp-block-column:not(:last-child) { margin-bottom: 0; } } .wp-block-columns.is-style-twentytwentyone-columns-overlap { justify-content: space-around; } @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { margin-right: calc(-2 * var(--global--spacing-horizontal)); margin-top: calc(2.5 * var(--global--spacing-horizontal)); z-index: 2; } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) { background-color: var(--global--color-background); padding: var(--global--spacing-unit); } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) { padding-right: calc(2 * var(--global--spacing-horizontal)); } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n).is-vertically-aligned-center { margin-top: 0; } } .wp-block-columns.alignfull .wp-block-column p:not(.has-background), .wp-block-columns.alignfull .wp-block-column h1:not(.has-background), .wp-block-columns.alignfull .wp-block-column h2:not(.has-background), .wp-block-columns.alignfull .wp-block-column h3:not(.has-background), .wp-block-columns.alignfull .wp-block-column h4:not(.has-background), .wp-block-columns.alignfull .wp-block-column h5:not(.has-background), .wp-block-columns.alignfull .wp-block-column h6:not(.has-background) { padding-right: var(--global--spacing-unit); padding-left: var(--global--spacing-unit); } .wp-block-cover, .wp-block-cover-image { background-color: var(--cover--color-background); min-height: var(--cover--height); margin-top: inherit; margin-bottom: inherit; /* default & custom background-color */ /* Treating H2 separately to account for legacy /core styles */ /* Block Styles */ } .wp-block-cover:not(.alignwide):not(.alignfull), .wp-block-cover-image:not(.alignwide):not(.alignfull) { clear: both; } .wp-block-cover.alignfull, .wp-block-cover-image.alignfull { margin-top: 0; margin-bottom: 0; } .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, .wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover-image .wp-block-cover-text { color: currentColor; margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), .wp-block-cover .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), .wp-block-cover .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button), .wp-block-cover-image .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), .wp-block-cover-image .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), .wp-block-cover-image .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button) { color: currentColor; } .wp-block-cover .wp-block-cover__inner-container .has-link-color a, .wp-block-cover .wp-block-cover-image-text .has-link-color a, .wp-block-cover .wp-block-cover-text .has-link-color a, .wp-block-cover-image .wp-block-cover__inner-container .has-link-color a, .wp-block-cover-image .wp-block-cover-image-text .has-link-color a, .wp-block-cover-image .wp-block-cover-text .has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } .wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container, .wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text, .wp-block-cover:not([class*=background-color]) .wp-block-cover-text, .wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container, .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text, .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text { color: var(--cover--color-foreground); } .wp-block-cover h2, .wp-block-cover-image h2 { font-size: var(--heading--font-size-h2); letter-spacing: var(--heading--letter-spacing-h2); line-height: var(--heading--line-height-h2); max-width: inherit; text-align: inherit; padding: 0; } .wp-block-cover h2.has-text-align-left, .wp-block-cover-image h2.has-text-align-left { text-align: right; } .wp-block-cover h2.has-text-align-center, .wp-block-cover-image h2.has-text-align-center { text-align: center; } .wp-block-cover h2.has-text-align-right, .wp-block-cover-image h2.has-text-align-right { text-align: left; } .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover__inner-container { width: calc(100% - calc(2 * var(--global--spacing-vertical))); } .wp-block-cover .wp-block-cover__inner-container > *, .wp-block-cover-image .wp-block-cover__inner-container > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-cover .wp-block-cover__inner-container > *, .wp-block-cover-image .wp-block-cover__inner-container > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } .wp-block-cover .wp-block-cover__inner-container > *:first-child, .wp-block-cover-image .wp-block-cover__inner-container > *:first-child { margin-top: 0; } .wp-block-cover .wp-block-cover__inner-container > *:last-child, .wp-block-cover-image .wp-block-cover__inner-container > *:last-child { margin-bottom: 0; } .wp-block-cover.alignleft, .wp-block-cover.alignright, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright { margin-top: 0; } .wp-block-cover.alignleft > *, .wp-block-cover.alignright > *, .wp-block-cover-image.alignleft > *, .wp-block-cover-image.alignright > * { margin-top: calc(2 * var(--global--spacing-vertical)); margin-bottom: calc(2 * var(--global--spacing-vertical)); padding-right: var(--global--spacing-horizontal); padding-left: var(--global--spacing-horizontal); width: 100%; } .wp-block-cover.has-left-content, .wp-block-cover.has-right-content, .wp-block-cover-image.has-left-content, .wp-block-cover-image.has-right-content { justify-content: center; } .wp-block-cover.is-style-twentytwentyone-border, .wp-block-cover-image.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-file a.wp-block-file__button:active, .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:hover { color: var(--button--color-text-hover); opacity: inherit; } .wp-block-file a.wp-block-file__button:visited { color: var(--button--color-text); } .wp-block-file a.wp-block-file__button:visited:hover { color: var(--button--color-text-hover); } .wp-block-file .wp-block-file__button { line-height: var(--button--line-height); color: var(--button--color-text); cursor: pointer; font-weight: var(--button--font-weight); font-family: var(--button--font-family); font-size: var(--button--font-size); background-color: var(--button--color-background); border-radius: var(--button--border-radius); border: var(--button--border-width) solid var(--button--color-background); text-decoration: none; padding: var(--button--padding-vertical) var(--button--padding-horizontal); display: inline-block; } .wp-block-file .wp-block-file__button:focus { background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } .is-dark-theme .wp-block-file .wp-block-file__button:focus { color: var(--button--color-background); } .wp-block-file .wp-block-file__button:focus:not(.has-background) { color: var(--button--color-text-hover); } .wp-block-file .wp-block-file__button:disabled { background-color: var(--global--color-white-50); border-color: var(--global--color-white-50); color: var(--button--color-text-active); } .wp-block-gallery { margin: 0 auto; } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { width: calc((100% - var(--global--spacing-unit)) / 2); } .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { margin: 0; color: var(--global--color-white); font-size: var(--global--font-size-xs); } .wp-block-gallery .blocks-gallery-image figcaption a, .wp-block-gallery .blocks-gallery-item figcaption a { color: var(--global--color-white); } .wp-block-gallery .blocks-gallery-image figcaption a:focus, .wp-block-gallery .blocks-gallery-item figcaption a:focus { background-color: transparent; outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); text-decoration: none; } .wp-block-gallery .blocks-gallery-image a:focus img, .wp-block-gallery .blocks-gallery-item a:focus img { outline-offset: 2px; } .wp-block-group { display: block; clear: both; display: flow-root; } .wp-block-group:before, .wp-block-group:after { content: ""; display: block; clear: both; } .wp-block-group .wp-block-group__inner-container { margin-right: auto; margin-left: auto; } .wp-block-group .wp-block-group__inner-container > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-group .wp-block-group__inner-container > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } .wp-block-group .wp-block-group__inner-container > *:first-child { margin-top: 0; } .wp-block-group .wp-block-group__inner-container > *:last-child { margin-bottom: 0; } .wp-block-group.has-background { padding: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-group.has-background { padding: var(--global--spacing-vertical); } } .wp-block-group.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); padding: var(--global--spacing-vertical); } .wp-block-group.has-background .wp-block-group__inner-container > .alignfull, .wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull, .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull, .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); margin-right: calc(-1 * var(--global--spacing-vertical)); } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { clear: both; font-family: var(--heading--font-family); font-weight: var(--heading--font-weight); } h1 strong, .h1 strong, h2 strong, .h2 strong, h3 strong, .h3 strong, h4 strong, .h4 strong, h5 strong, .h5 strong, h6 strong, .h6 strong { font-weight: var(--heading--font-weight-strong); } h1, .h1 { font-size: var(--heading--font-size-h1); letter-spacing: var(--heading--letter-spacing-h1); line-height: var(--heading--line-height-h1); } h2, .h2 { font-size: var(--heading--font-size-h2); letter-spacing: var(--heading--letter-spacing-h2); line-height: var(--heading--line-height-h2); } h3, .h3 { font-size: var(--heading--font-size-h3); letter-spacing: var(--heading--letter-spacing-h3); line-height: var(--heading--line-height-h3); } h4, .h4 { font-size: var(--heading--font-size-h4); font-weight: var(--heading--font-weight-strong); letter-spacing: var(--heading--letter-spacing-h4); line-height: var(--heading--line-height-h4); } h5, .h5 { font-size: var(--heading--font-size-h5); font-weight: var(--heading--font-weight-strong); letter-spacing: var(--heading--letter-spacing-h5); line-height: var(--heading--line-height-h5); } h6, .h6 { font-size: var(--heading--font-size-h6); font-weight: var(--heading--font-weight-strong); letter-spacing: var(--heading--letter-spacing-h6); line-height: var(--heading--line-height-h6); } .wp-block-image { text-align: center; } .wp-block-image figcaption { color: var(--global--color-primary); font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); margin-top: calc(0.5 * var(--global--spacing-unit)); margin-bottom: var(--global--spacing-unit); text-align: center; } .wp-block-image .alignright { margin-right: var(--global--spacing-horizontal); } .wp-block-image .alignleft { margin-left: var(--global--spacing-horizontal); } .wp-block-image a:focus img { outline-offset: 2px; } .entry-content > *[class=wp-block-image], .entry-content [class*=inner-container] > *[class=wp-block-image] { margin-top: 0; margin-bottom: 0; } .entry-content > *[class=wp-block-image] + *, .entry-content [class*=inner-container] > *[class=wp-block-image] + * { margin-top: 0; } img { height: auto; max-width: 100%; vertical-align: middle; } .wp-block-image.is-style-twentytwentyone-border img, .wp-block-image.is-style-twentytwentyone-image-frame img { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-image.is-style-twentytwentyone-image-frame img { padding: var(--global--spacing-unit); } @media only screen and (min-width: 482px) { .entry-content > .wp-block-image > .alignleft, .entry-content > .wp-block-image > .alignright { max-width: 50%; } } @media only screen and (max-width: 481px) { .entry-content > .wp-block-image > .alignleft, .entry-content > .wp-block-image > .alignright { margin-right: 0; margin-left: 0; } } .wp-block-latest-comments { padding-right: 0; } .wp-block-latest-comments .wp-block-latest-comments__comment { font-size: var(--global--font-size-sm); line-height: var(--global--line-height-body); /* Vertical margins logic */ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .wp-block-latest-comments .wp-block-latest-comments__comment:first-child { margin-top: 0; } .wp-block-latest-comments .wp-block-latest-comments__comment:last-child { margin-bottom: 0; } .wp-block-latest-comments .wp-block-latest-comments__comment-meta { font-family: var(--heading--font-family); } .wp-block-latest-comments .wp-block-latest-comments__comment-date { color: var(--global--color-primary); font-size: var(--global--font-size-sm); } .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { font-size: var(--global--font-size-sm); line-height: var(--global--line-height-body); margin: 0; } .wp-block-latest-posts { padding-right: 0; } .wp-block-latest-posts:not(.is-grid) > li { margin-top: calc(1.666 * var(--global--spacing-vertical)); margin-bottom: calc(1.666 * var(--global--spacing-vertical)); } .wp-block-latest-posts:not(.is-grid) > li:first-child { margin-top: 0; } .wp-block-latest-posts:not(.is-grid) > li:last-child { margin-bottom: 0; } .wp-block-latest-posts.is-grid { word-wrap: break-word; word-break: break-word; } .wp-block-latest-posts.is-grid > li { margin-bottom: var(--global--spacing-vertical); } .wp-block-latest-posts.is-grid > li:last-child { margin-bottom: 0; } .wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), .wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, .wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), .wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, .wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), .wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, .wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), .wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, .wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), .wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { margin-bottom: 0; } .wp-block-latest-posts > li > * { margin-top: calc(0.333 * var(--global--spacing-vertical)); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-latest-posts > li > *:first-child { margin-top: 0; } .wp-block-latest-posts > li > *:last-child { margin-bottom: 0; } .wp-block-latest-posts > li > a { display: inline-block; font-family: var(--latest-posts--title-font-family); font-size: var(--latest-posts--title-font-size); font-weight: var(--heading--font-weight); line-height: var(--global--line-height-heading); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-latest-posts .wp-block-latest-posts__post-author { color: var(--global--color-primary); font-size: var(--global--font-size-md); line-height: var(--global--line-height-body); } .wp-block-latest-posts .wp-block-latest-posts__post-date { color: var(--global--color-primary); font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); } [class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date, .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { color: currentColor; } .wp-block-latest-posts .wp-block-latest-posts__post-excerpt, .wp-block-latest-posts .wp-block-latest-posts__post-full-content { font-family: var(--latest-posts--description-font-family); font-size: var(--latest-posts--description-font-size); line-height: var(--global--line-height-body); margin-top: calc(0.666 * var(--global--spacing-vertical)); } .wp-block-latest-posts.alignfull { padding-right: var(--global--spacing-unit); padding-left: var(--global--spacing-unit); } .entry-content [class*=inner-container] .wp-block-latest-posts.alignfull, .entry-content .has-background .wp-block-latest-posts.alignfull { padding-right: 0; padding-left: 0; } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers { border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li, .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li { padding-bottom: var(--global--spacing-vertical); border-bottom: var(--separator--height) solid var(--global--color-border); margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child, .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child { padding-bottom: 0; border-bottom: none; } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid { box-shadow: inset 0 -1px 0 0 var(--global--color-border); border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li { margin: 0; padding-top: var(--global--spacing-vertical); padding-left: var(--global--spacing-horizontal); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child { padding-bottom: var(--global--spacing-vertical); } @media screen and (min-width: 600px) { .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li { width: calc((100% / 2)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li { width: calc((100% / 3)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li { width: calc((100% / 4)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li { width: calc((100% / 5)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li { width: calc((100% / 6)); } } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li { border: calc(3 * var(--separator--height)) solid var(--global--color-border); padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child { padding-bottom: var(--global--spacing-vertical); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li { margin-top: var(--global--spacing-horizontal); margin-bottom: var(--global--spacing-horizontal); } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-item a { display: block; } .gallery-item a:focus img { outline-offset: -2px; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } figure.wp-caption a:focus img { outline-offset: 2px; } ul, ol { font-family: var(--list--font-family); margin: 0; padding-right: calc(2 * var(--global--spacing-horizontal)); } ul.aligncenter, ol.aligncenter { list-style-position: inside; padding: 0; } ul.alignright, ol.alignright { list-style-position: inside; text-align: left; padding: 0; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dt { font-family: var(--definition-term--font-family); font-weight: bold; } dd { margin: 0; padding-right: calc(2 * var(--global--spacing-horizontal)); } .wp-block-media-text { /** * Block Options */ } .wp-block-media-text.alignfull { margin-top: 0; margin-bottom: 0; } .wp-block-media-text a:focus img { outline-offset: -1px; } .wp-block-media-text .wp-block-media-text__content { padding: var(--global--spacing-horizontal); } @media only screen and (min-width: 592px) { .wp-block-media-text .wp-block-media-text__content { padding: var(--global--spacing-vertical); } } .wp-block-media-text .wp-block-media-text__content > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-media-text .wp-block-media-text__content > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } .wp-block-media-text .wp-block-media-text__content > *:first-child { margin-top: 0; } .wp-block-media-text .wp-block-media-text__content > *:last-child { margin-bottom: 0; } @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { padding-top: var(--global--spacing-vertical); padding-bottom: var(--global--spacing-vertical); } } .wp-block-media-text.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-navigation .wp-block-navigation-link { padding: 0; } .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content { padding: var(--primary-nav--padding); } .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { font-family: var(--primary-nav--font-family); font-size: var(--primary-nav--font-size); font-weight: var(--primary-nav--font-weight); } .wp-block-navigation .wp-block-navigation-link__submenu-icon { padding: 0; } .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation-link { display: inherit; } .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container { border: none; right: 0; margin-right: var(--primary-nav--padding); min-width: max-content; opacity: 0; padding: 0; position: inherit; top: inherit; } .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content { display: inline-block; padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding); } .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon { display: none; } .wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container, .wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container { display: block; opacity: 1; visibility: visible; } .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container { background: var(--global--color-background); margin: 0; padding: 0; position: absolute; top: 100%; border: 1px solid var(--primary-nav--border-color); } .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before, .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after { content: ""; display: block; position: absolute; width: 0; top: -10px; right: var(--global--spacing-horizontal); border-style: solid; border-color: var(--primary-nav--border-color) transparent; border-width: 0 7px 10px 7px; } .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after { top: -9px; border-color: var(--global--color-background) transparent; } .wp-block-navigation:not(.has-background) .wp-block-navigation__container { background: var(--global--color-background); } .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation__container { background: var(--global--color-background); } .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus { color: var(--primary-nav--color-link-hover); } .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover { text-decoration: underline; text-decoration-style: dotted; } .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content { color: currentColor; } p { line-height: var(--wp--typography--line-height, --global--line-height-body); } p.has-background { padding: var(--global--spacing-unit); } p.has-text-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } pre.wp-block-preformatted { overflow-x: auto; white-space: pre; } .wp-block-pullquote { padding: calc(2 * var(--global--spacing-unit)) 0; text-align: center; border-width: var(--pullquote--border-width); border-bottom-style: solid; border-top-style: solid; color: currentColor; border-color: currentColor; position: relative; /** * Block Options */ } .wp-block-pullquote blockquote::before { color: currentColor; content: "“"; display: block; position: relative; right: 0; font-size: 3rem; font-weight: 500; line-height: 1; } .wp-block-pullquote p { font-family: var(--pullquote--font-family); font-size: var(--pullquote--font-size); font-style: var(--pullquote--font-style); font-weight: 700; letter-spacing: var(--pullquote--letter-spacing); line-height: var(--pullquote--line-height); margin: 0; } .wp-block-pullquote a { color: currentColor; } .wp-block-pullquote .wp-block-pullquote__citation, .wp-block-pullquote cite, .wp-block-pullquote footer { color: currentColor; display: block; font-size: var(--global--font-size-xs); font-style: var(--pullquote--font-style); text-transform: none; } .wp-block-pullquote:not(.is-style-solid-color) { background: none; } .wp-block-pullquote.alignleft:not(.is-style-solid-color) blockquote:before, .wp-block-pullquote.alignleft:not(.is-style-solid-color) cite { text-align: center; } .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignwide blockquote { max-width: var(--responsive--alignwide-width); } .wp-block-pullquote.alignfull:not(.is-style-solid-color) > p, .wp-block-pullquote.alignfull:not(.is-style-solid-color) blockquote { padding: 0 calc(2 * var(--global--spacing-unit)); } .wp-block-pullquote.is-style-solid-color { color: var(--pullquote--color-foreground); padding: calc(2.5 * var(--global--spacing-unit)); border-width: var(--pullquote--border-width); border-style: solid; border-color: var(--pullquote--border-color); } @media (min-width: 600px) { .wp-block-pullquote.is-style-solid-color { padding: calc(5 * var(--global--spacing-unit)); } } .wp-block-pullquote.is-style-solid-color blockquote::before { text-align: right; } .wp-block-pullquote.is-style-solid-color blockquote { margin: 0; max-width: inherit; } .wp-block-pullquote.is-style-solid-color blockquote p { font-size: var(--pullquote--font-size); } .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation, .wp-block-pullquote.is-style-solid-color cite, .wp-block-pullquote.is-style-solid-color footer { color: currentColor; } .wp-block-pullquote.is-style-solid-color.alignleft, .wp-block-pullquote.is-style-solid-color.alignright { padding: var(--global--spacing-unit); } .wp-block-pullquote.is-style-solid-color.alignleft blockquote, .wp-block-pullquote.is-style-solid-color.alignright blockquote { max-width: initial; } .wp-block-quote { border-right: none; /** * Block Options */ } .wp-block-quote:before { content: "“"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); right: 8px; } .has-background .wp-block-quote .wp-block-quote__citation, [class*=background-color] .wp-block-quote .wp-block-quote__citation, [style*=background-color] .wp-block-quote .wp-block-quote__citation, .wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation, .has-background .wp-block-quote cite, [class*=background-color] .wp-block-quote cite, [style*=background-color] .wp-block-quote cite, .wp-block-cover[style*=background-image] .wp-block-quote cite, .has-background .wp-block-quote footer, [class*=background-color] .wp-block-quote footer, [style*=background-color] .wp-block-quote footer, .wp-block-cover[style*=background-image] .wp-block-quote footer { color: currentColor; } .wp-block-quote.has-text-align-right { margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal); padding-left: 0; border-left: none; } .wp-block-quote.has-text-align-right:before { display: none; } .wp-block-quote.has-text-align-right p:before { content: "”"; font-size: var(--quote--font-size); font-weight: normal; line-height: var(--quote--line-height); margin-left: 5px; } .wp-block-quote.has-text-align-center { margin: var(--global--spacing-vertical) auto; } .wp-block-quote.has-text-align-center:before { display: none; } .wp-block-quote.is-large, .wp-block-quote.is-style-large { padding-right: 0; padding-left: 0; /* Resetting margins to match _block-container.scss */ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-size: var(--quote--font-size-large); font-style: var(--quote--font-style-large); line-height: var(--quote--line-height-large); } .wp-block-quote.is-large:before, .wp-block-quote.is-style-large:before { font-size: var(--quote--font-size-large); line-height: var(--quote--line-height-large); right: calc(-1 * var(--global--spacing-horizontal)); } .wp-block-quote.is-large.has-text-align-right:before, .wp-block-quote.is-style-large.has-text-align-right:before { display: none; } .wp-block-quote.is-large.has-text-align-right p:before, .wp-block-quote.is-style-large.has-text-align-right p:before { content: "”"; font-size: var(--quote--font-size-large); font-weight: normal; line-height: var(--quote--line-height-large); margin-left: 10px; } .wp-block-quote.is-large .wp-block-quote__citation, .wp-block-quote.is-large cite, .wp-block-quote.is-large footer, .wp-block-quote.is-style-large .wp-block-quote__citation, .wp-block-quote.is-style-large cite, .wp-block-quote.is-style-large footer { color: var(--global--color-primary); font-size: var(--global--font-size-sm); } @media only screen and (max-width: 481px) { .wp-block-quote.is-large, .wp-block-quote.is-style-large { padding-right: var(--global--spacing-horizontal); } .wp-block-quote.is-large:before, .wp-block-quote.is-style-large:before { right: 0; } .wp-block-quote.is-large.has-text-align-right, .wp-block-quote.is-style-large.has-text-align-right { padding-right: 0; padding-left: var(--global--spacing-horizontal); } .wp-block-quote.is-large.has-text-align-right:before, .wp-block-quote.is-style-large.has-text-align-right:before { left: 0; } .wp-block-quote.is-large.has-text-align-center, .wp-block-quote.is-style-large.has-text-align-center { padding-right: 0; padding-left: 0; } } @media only screen and (max-width: 481px) { .wp-block-quote.has-text-align-right { padding-right: 0; padding-left: calc(0.5 * var(--global--spacing-horizontal)); } .wp-block-quote.has-text-align-right:before { left: 0; } .wp-block-quote.has-text-align-center { padding-right: 0; padding-left: 0; } } .wp-block-rss { padding-right: 0; } .wp-block-rss > li { list-style: none; } .wp-block-rss:not(.is-grid) > li { margin-top: calc(1.666 * var(--global--spacing-vertical)); margin-bottom: calc(1.666 * var(--global--spacing-vertical)); } .wp-block-rss:not(.is-grid) > li:first-child { margin-top: 0; } .wp-block-rss:not(.is-grid) > li:last-child { margin-bottom: 0; } .wp-block-rss.is-grid > li { margin-bottom: var(--global--spacing-vertical); } .wp-block-rss.is-grid > li:last-child { margin-bottom: 0; } .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { margin-bottom: 0; } .wp-block-rss > li > * { margin-top: calc(0.333 * var(--global--spacing-vertical)); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-rss > li > *:first-child { margin-top: 0; } .wp-block-rss > li > *:last-child { margin-bottom: 0; } .wp-block-rss .wp-block-rss__item-title > a { display: inline-block; font-family: var(--latest-posts--title-font-family); font-size: var(--latest-posts--title-font-size); font-weight: var(--heading--font-weight); line-height: var(--global--line-height-heading); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-rss .wp-block-rss__item-author { color: var(--global--color-primary); font-size: var(--global--font-size-md); line-height: var(--global--line-height-body); } .wp-block-rss .wp-block-rss__item-publish-date { color: var(--global--color-primary); font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); } [class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date, .has-background .wp-block-rss .wp-block-rss__item-publish-date { color: currentColor; } .wp-block-rss .wp-block-rss__item-excerpt, .wp-block-rss .wp-block-rss__item-full-content { font-family: var(--latest-posts--description-font-family); font-size: var(--latest-posts--description-font-size); line-height: var(--global--line-height-body); margin-top: calc(0.666 * var(--global--spacing-vertical)); } .wp-block-rss.alignfull { padding-right: var(--global--spacing-unit); padding-left: var(--global--spacing-unit); } .entry-content [class*=inner-container] .wp-block-rss.alignfull, .entry-content .has-background .wp-block-rss.alignfull { padding-right: 0; padding-left: 0; } .wp-block-search { max-width: var(--responsive--aligndefault-width); } .wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper { justify-content: center; } .wp-block-search .wp-block-search__label { font-size: var(--form--font-size); font-weight: var(--form--label-weight); margin-bottom: calc(var(--global--spacing-vertical) / 3); } .wp-block-search .wp-block-search__input { border: var(--form--border-width) solid var(--form--border-color); border-radius: var(--form--border-radius); color: var(--form--color-text); line-height: var(--form--line-height); max-width: inherit; margin-left: calc(-1 * var(--button--border-width)); padding: var(--form--spacing-unit); } .wp-block-search .wp-block-search__input:focus { color: var(--form--color-text); border-color: var(--form--border-color); } .has-background .wp-block-search .wp-block-search__input, [class*=background-color] .wp-block-search .wp-block-search__input, [style*=background-color] .wp-block-search .wp-block-search__input, .wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input { border-color: currentColor; } .has-background.has-gray-background-color .wp-block-search .wp-block-search__input, .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input, .has-background.has-black-background-color .wp-block-search .wp-block-search__input { border-color: var(--global--color-white); } .wp-block-search button.wp-block-search__button { margin-right: 0; background-color: transparent; color: var(--button--color-text-hover); line-height: 1; } .wp-block-search button.wp-block-search__button:hover { background-color: var(--button--color-background); color: var(--button--color-text); } .wp-block-search button.wp-block-search__button.has-icon { padding: 6px calc(0.5 * var(--button--padding-horizontal)); } .wp-block-search button.wp-block-search__button.has-icon svg { width: 40px; height: 40px; fill: currentColor; } .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button, .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button, .has-background.has-black-background-color .wp-block-search button.wp-block-search__button { color: var(--global--color-white); border-color: currentColor; } .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover { background-color: var(--button--color-background); border-color: var(--global--color-white); color: var(--global--color-white); } .is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover { color: var(--button--color-text); } .has-background.has-white-background-color .wp-block-search button.wp-block-search__button, .has-background.has-green-background-color .wp-block-search button.wp-block-search__button, .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button, .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button, .has-background.has-red-background-color .wp-block-search button.wp-block-search__button, .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button, .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button { border-color: currentColor; color: currentColor; } .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover { background-color: var(--form--border-color); border-color: var(--form--border-color); color: var(--global--color-white); } .is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover { border-color: var(--button--color-text); background-color: var(--button--color-text); color: var(--button--color-background); } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { background-color: var(--global--color-white); border: var(--form--border-width) solid var(--form--border-color); border-radius: var(--form--border-radius); } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { margin-left: 0; } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { outline: 2px dotted var(--form--border-color); outline-offset: -5px; } .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { outline-color: currentColor; } .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button { padding: var(--button--padding-vertical) var(--button--padding-horizontal); } .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { border-color: var(--button--color-background); color: var(--button--color-background); } .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { color: var(--global--color-white); } .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { border-color: var(--button--color-text); color: var(--button--color-text); } .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { color: var(--global--color-white); } .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { border-color: var(--button--color-text); color: var(--button--color-text); } .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { border-color: var(--button--color-text); background-color: var(--button--color-text); color: var(--button--color-background); } .wp-block-search__button { box-shadow: none; } hr { border-style: none; border-bottom: var(--separator--height) solid var(--separator--border-color); clear: both; margin-right: auto; margin-left: auto; } hr.wp-block-separator { border-bottom: var(--separator--height) solid var(--separator--border-color); opacity: 1; /** * Block Options */ } hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: var(--responsive--aligndefault-width); } hr.wp-block-separator:not(.is-style-dots).alignwide { max-width: var(--responsive--alignwide-width); } hr.wp-block-separator:not(.is-style-dots).alignfull { max-width: var(--responsive--alignfull-width); } hr.wp-block-separator.is-style-twentytwentyone-separator-thick { border-bottom-width: calc(3 * var(--separator--height)); } hr.wp-block-separator.is-style-dots.has-background, hr.wp-block-separator.is-style-dots.has-text-color { background-color: transparent !important; } hr.wp-block-separator.is-style-dots.has-background:before, hr.wp-block-separator.is-style-dots.has-text-color:before { color: currentColor !important; } hr.wp-block-separator.is-style-dots:before { color: var(--separator--border-color); font-size: var(--global--font-size-xl); letter-spacing: var(--global--font-size-sm); padding-right: var(--global--font-size-sm); } .has-background hr.wp-block-separator, [class*=background-color] hr.wp-block-separator, [style*=background-color] hr.wp-block-separator, .wp-block-cover[style*=background-image] hr.wp-block-separator { border-color: currentColor; } .wp-block-social-links a:focus { color: var(--global--color-primary); } .wp-block-social-links.is-style-twentytwentyone-social-icons-color a { color: var(--global--color-primary); } .wp-block-social-links.is-style-twentytwentyone-social-icons-color .wp-social-link { background: none; } .wp-block-spacer { display: block; margin-bottom: 0 !important; margin-top: 0 !important; } @media only screen and (max-width: 481px) { .wp-block-spacer[style] { height: var(--global--spacing-unit) !important; } } table, .wp-block-table { width: 100%; min-width: 240px; border-collapse: collapse; } table th, .wp-block-table th { font-family: var(--heading--font-family); } table td, table th, .wp-block-table td, .wp-block-table th { padding: calc(0.5 * var(--global--spacing-unit)); border: 1px solid; } table.is-style-regular .has-background, table.is-style-stripes .has-background thead tr, table.is-style-stripes .has-background tfoot tr, table.is-style-stripes .has-background tbody tr:nth-child(even), .wp-block-table.is-style-regular .has-background, .wp-block-table.is-style-stripes .has-background thead tr, .wp-block-table.is-style-stripes .has-background tfoot tr, .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) { color: var(--table--has-background-text-color); } table.is-style-stripes, .wp-block-table.is-style-stripes { border-color: var(--table--stripes-border-color); } table.is-style-stripes th, table.is-style-stripes td, .wp-block-table.is-style-stripes th, .wp-block-table.is-style-stripes td { border-width: 0; } table.is-style-stripes tbody tr:nth-child(odd), .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--table--stripes-background-color); } table.wp-calendar-table td, table.wp-calendar-table th { background: transparent; border: 0; text-align: center; line-height: 2; vertical-align: middle; word-break: normal; } table.wp-calendar-table th { font-weight: bold; } table.wp-calendar-table thead, table.wp-calendar-table tbody { color: currentColor; border: 1px solid; } table.wp-calendar-table caption { font-weight: bold; text-align: right; margin-bottom: var(--global--spacing-unit); color: currentColor; } .wp-calendar-nav { text-align: right; margin-top: calc(var(--global--spacing-unit) / 2); } .wp-calendar-nav svg { height: 1em; vertical-align: middle; } .wp-calendar-nav svg path { fill: currentColor; } .wp-calendar-nav .wp-calendar-nav-next { float: left; } .wp-block-tag-cloud.alignfull { padding-right: var(--global--spacing-unit); padding-left: var(--global--spacing-unit); } .wp-block-verse { font-family: var(--entry-content--font-family); } .wp-block-video figcaption { color: var(--global--color-primary); font-size: var(--global--font-size-xs); margin-top: calc(0.5 * var(--global--spacing-unit)); margin-bottom: var(--global--spacing-unit); text-align: center; } * > figure > video { max-width: unset; width: 100%; vertical-align: middle; } :root .is-extra-small-text, :root .has-extra-small-font-size { font-size: var(--global--font-size-xs); } :root .is-small-text, :root .has-small-font-size { font-size: var(--global--font-size-sm); } :root .is-regular-text, :root .has-regular-font-size, :root .is-normal-font-size, :root .has-normal-font-size, :root .has-medium-font-size { font-size: var(--global--font-size-base); } :root .is-large-text, :root .has-large-font-size { font-size: var(--global--font-size-lg); line-height: var(--global--line-height-heading); } :root .is-larger-text, :root .has-larger-font-size, :root .is-extra-large-text, :root .has-extra-large-font-size { font-size: var(--global--font-size-xl); line-height: var(--global--line-height-heading); } :root .is-huge-text, :root .has-huge-font-size { font-size: var(--global--font-size-xxl); line-height: var(--global--line-height-heading); font-weight: var(--heading--font-weight-page-title); } :root .is-gigantic-text, :root .has-gigantic-font-size { font-size: var(--global--font-size-xxxl); line-height: var(--global--line-height-heading); font-weight: var(--heading--font-weight-page-title); } /* Block Alignments */ /** * These selectors set the default max width for content appearing inside a post or page. */ /** * .alignleft */ .alignleft { text-align: left; margin-top: 0; } .entry-content > .alignleft { max-width: var(--responsive--aligndefault-width); } @media only screen and (min-width: 482px) { .alignleft { float: left; margin-right: var(--global--spacing-horizontal); margin-bottom: var(--global--spacing-vertical); } .entry-content > .alignleft { max-width: calc(50% - var(--responsive--alignleft-margin)); } } /** * .aligncenter */ .aligncenter { clear: both; display: block; float: none; margin-left: auto; margin-right: auto; text-align: center; } /** * .alignright */ .alignright { margin-top: 0; margin-bottom: var(--global--spacing-vertical); } .entry-content > .alignright { max-width: var(--responsive--aligndefault-width); } @media only screen and (min-width: 482px) { .alignright { float: right; margin-left: var(--global--spacing-horizontal); } .entry-content > .alignright { max-width: calc(50% - var(--responsive--alignright-margin)); } } [class*=inner-container] > .alignleft + *, [class*=inner-container] > .alignright + * { margin-top: 0; } /** * .alignwide */ .alignwide { clear: both; } /** * .alignfull */ .alignfull { clear: both; } .has-left-content { justify-content: flex-start; } .has-right-content { justify-content: flex-end; } .has-parallax { background-attachment: fixed; } .has-drop-cap:not(:focus)::first-letter { font-family: var(--heading--font-family); font-weight: var(--heading--font-weight); line-height: 0.66; text-transform: uppercase; font-style: normal; float: right; margin: 0.1em 0 0 0.1em; font-size: calc(1.2 * var(--heading--font-size-h1)); } .has-drop-cap:not(:focus)::after { content: ""; display: table; clear: both; padding-top: 14px; } .desktop-only { display: none; } @media only screen and (min-width: 482px) { .desktop-only { display: block; } } /* Category 06 contains all "bigger" components which contain elements of the previous two categories like header, footer, page template, single template, comments section, archives, ... */ .site-header { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: var(--global--spacing-vertical); } .wp-custom-logo .site-header { align-items: center; } @media only screen and (min-width: 482px) { .site-header { padding-top: calc(var(--global--spacing-vertical) / 0.75); } } @media only screen and (min-width: 822px) { .site-header { padding-top: calc(2.4 * var(--global--spacing-vertical)); } } .site-branding { color: var(--branding--color-text); margin-left: 140px; } .site-branding:last-child { margin-left: 0; width: 100%; text-align: center; } @media only screen and (min-width: 482px) { .site-branding { margin-left: initial; margin-top: 4px; } } .site-title { color: var(--branding--color-link); font-family: var(--branding--title--font-family); font-size: var(--branding--title--font-size-mobile); letter-spacing: normal; text-transform: var(--branding--title--text-transform); line-height: var(--global--line-height-heading); margin-bottom: calc(var(--global--spacing-vertical) / 6); } .site-title a { color: currentColor; font-weight: var(--branding--title--font-weight); } .site-title a:link, .site-title a:visited, .site-title a:active { color: currentColor; } .site-title a:hover, .site-title a:focus { color: var(--branding--color-link-hover); } @media only screen and (min-width: 482px) { .site-title { font-size: var(--branding--title--font-size); } } .site-description { color: currentColor; font-family: var(--branding--description--font-family); font-size: var(--branding--description--font-size); line-height: 1.4; } a.custom-logo-link { text-decoration: none; } .has-background-white a.custom-logo-link:focus, .is-dark-theme a.custom-logo-link:focus { background: none; } .site-title > a { text-decoration-color: var(--global--color-secondary); } .site-logo { margin: calc(var(--global--spacing-vertical) / 2) 0; } .site-header > .site-logo { width: 100%; padding-bottom: calc(var(--global--spacing-vertical) * 1.5); border-bottom: 1px solid; text-align: center; } .site-logo .custom-logo { margin-right: auto; margin-left: auto; max-width: var(--branding--logo--max-width-mobile); max-height: var(--branding--logo--max-height-mobile); height: auto; display: inline-block; width: auto; } @media only screen and (min-width: 482px) { .site-logo .custom-logo { max-width: var(--branding--logo--max-width); max-height: var(--branding--logo--max-height); height: auto; width: auto; } } @media only screen and (max-width: 481px) { .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { position: absolute; padding-top: calc(0.5 * var(--global--spacing-vertical)); margin-top: 0; top: var(--global--admin-bar--height); } .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { display: none; } .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo img { max-height: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit)) + 1.7em); } .site-header.has-logo.has-title-and-tagline { align-items: flex-start; } .site-header.has-logo.has-title-and-tagline.has-menu { justify-content: space-between; } .site-header.has-logo.has-title-and-tagline.has-menu .site-branding { max-width: calc(100% - 160px); } .site-header.has-logo.has-title-and-tagline .site-branding { margin-left: 0; } body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline:after { display: none; } body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .primary-navigation { position: relative; top: 0; } body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container { position: relative; padding-top: 0; margin-top: calc(0px - var(--button--padding-vertical) + (0.25 * var(--global--spacing-unit))); } body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu { padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); margin-left: calc(0px - var(--global--spacing-horizontal) * 0.6); } .site-header:not(.has-logo).has-title-and-tagline .site-branding { margin-left: 0; max-width: calc(100% - 160px); } .site-header:not(.has-menu) { justify-content: center; } } .site-footer { padding-top: 0; padding-bottom: calc(1.7 * var(--global--spacing-vertical)); } .no-widgets .site-footer { margin-top: calc(6 * var(--global--spacing-vertical)); } @media only screen and (max-width: 481px) { .no-widgets .site-footer { margin-top: calc(3 * var(--global--spacing-vertical)); } } .site-footer > .site-info { padding-top: var(--global--spacing-vertical); color: var(--footer--color-text); font-family: var(--footer--font-family); font-size: var(--footer--font-size); line-height: var(--global--line-height-body); border-top: 3px solid var(--global--color-border); } .site-footer > .site-info .site-name { text-transform: var(--branding--title--text-transform); font-size: var(--branding--title--font-size); } .site-footer > .site-info .powered-by { margin-top: calc(0.5 * var(--global--spacing-vertical)); } @media only screen and (min-width: 822px) { .site-footer > .site-info { display: flex; align-items: center; } .site-footer > .site-info .powered-by { margin-top: initial; margin-right: auto; } } .site-footer > .site-info a { color: var(--footer--color-link); } .site-footer > .site-info a:link, .site-footer > .site-info a:visited, .site-footer > .site-info a:active { color: var(--footer--color-link); } .site-footer > .site-info a:hover { color: var(--footer--color-link-hover); } .site-footer > .site-info a:focus { color: var(--footer--color-link-hover); } .is-dark-theme .site-footer > .site-info a:focus { color: var(--wp--style--color--link, var(--global--color-background)); } .has-background-white .site-footer > .site-info a:focus { color: var(--wp--style--color--link, var(--global--color-white)); } .singular .entry-header { border-bottom: 3px solid var(--global--color-border); padding-bottom: calc(2 * var(--global--spacing-vertical)); margin-bottom: calc(3 * var(--global--spacing-vertical)); } .home .entry-header { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .singular .has-post-thumbnail .entry-header { border-bottom: none; padding-bottom: calc(1.3 * var(--global--spacing-vertical)); margin-bottom: 0; } .no-results.not-found > *:first-child { margin-bottom: calc(3 * var(--global--spacing-vertical)); } .page-links { clear: both; } .page-links .post-page-numbers { display: inline-block; margin-right: calc(0.66 * var(--global--spacing-unit)); margin-left: calc(0.66 * var(--global--spacing-unit)); min-width: 44px; min-height: 44px; } .page-links .post-page-numbers:first-child { margin-right: 0; } .entry-title { color: var(--entry-header--color); font-size: var(--entry-header--font-size); letter-spacing: var(--heading--letter-spacing-h2); line-height: var(--heading--line-height-h2); overflow-wrap: break-word; } .entry-title a { color: var(--entry-header--color-link); text-underline-offset: 0.15em; } .entry-title a:hover { color: var(--entry-header--color-hover); } .entry-title a:focus { color: var(--entry-header--color-focus); } .entry-title a:active { color: var(--entry-header--color-link); } .singular .entry-title { font-size: var(--global--font-size-page-title); } h1.entry-title { line-height: var(--heading--line-height-h1); font-weight: var(--heading--font-weight-page-title); } /** * Entry Content */ .entry-content, .entry-summary { font-family: var(--entry-content--font-family); } .entry-content p { word-wrap: break-word; } .entry-content > iframe[style] { margin: var(--global--spacing-vertical) 0 !important; max-width: 100% !important; } @media only screen and (min-width: 482px) { .entry-content > iframe[style] { max-width: var(--global--spacing-vertical) !important; } } .entry-footer { color: var(--global--color-primary); clear: both; float: none; font-size: var(--global--font-size-xs); display: block; } .entry-footer > span { display: inline-block; } .entry-footer a { color: currentColor; } .entry-footer a:hover, .entry-footer a:focus { color: var(--global--color-primary-hover); } .entry-footer a:active { color: currentColor; } .site-main > article > .entry-footer { margin-top: var(--global--spacing-vertical); padding-top: var(--global--spacing-unit); padding-bottom: calc(3 * var(--global--spacing-vertical)); border-bottom: var(--separator--height) solid var(--separator--border-color); } body:not(.single) .site-main > article:last-of-type .entry-footer { border-bottom: var(--separator--height) solid transparent; } .single .site-main > article > .entry-footer { margin-top: calc(3.4 * var(--global--spacing-vertical)); margin-bottom: calc(3.4 * var(--global--spacing-vertical)); padding-bottom: 0; padding-top: calc(0.8 * var(--global--spacing-vertical)); border-top: 3px solid var(--separator--border-color); border-bottom: var(--separator--height) solid transparent; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: calc(2 * var(--global--spacing-horizontal)); } .single .site-main > article > .entry-footer .post-taxonomies, .single .site-main > article > .entry-footer .full-size-link { justify-content: flex-end; text-align: left; } .single .site-main > article > .entry-footer .full-size-link:first-child:last-child { grid-column: span 2; } .single .site-main > article > .entry-footer .posted-on, .single .site-main > article > .entry-footer .byline, .single .site-main > article > .entry-footer .cat-links, .single .site-main > article > .entry-footer .tags-links { display: block; } @media only screen and (max-width: 481px) { .single .site-main > article > .entry-footer { display: block; } .single .site-main > article > .entry-footer .full-size-link { display: block; } .single .site-main > article > .entry-footer .post-taxonomies, .single .site-main > article > .entry-footer .full-size-link { text-align: right; } } /** * Post Thumbnails */ .post-thumbnail { text-align: center; } .post-thumbnail .wp-post-image { display: block; width: auto; max-width: 100%; margin-right: auto; margin-left: auto; margin-top: calc(2 * var(--global--spacing-vertical)); } /** * Author */ .author-bio { position: relative; font-size: var(--global--font-size-xs); max-width: var(--responsive--aligndefault-width); } .site-main > article > .author-bio { margin-top: calc(2 * var(--global--spacing-vertical)); } .author-bio.show-avatars .avatar { display: inline-block; vertical-align: top; border-radius: 50%; } .author-bio.show-avatars .author-bio-content { display: inline-block; padding-right: var(--global--spacing-horizontal); max-width: calc(var(--responsive--aligndefault-width) - 90px); } .author-bio .author-bio-content .author-title { font-family: var(--entry-author-bio--font-family); font-size: var(--entry-author-bio--font-size); display: inline; } .author-bio .author-bio-content .author-description { font-size: var(--global--font-size-xs); margin-top: calc(0.5 * var(--global--spacing-vertical)); margin-bottom: calc(0.5 * var(--global--spacing-vertical)); } .page-title { font-size: var(--global--font-size-page-title); } h1.page-title, h2.page-title { font-weight: var(--heading--font-weight-page-title); } h1.page-title { line-height: var(--heading--line-height-h1); } .page-header { border-bottom: 3px solid var(--global--color-border); padding-bottom: calc(2 * var(--global--spacing-vertical)); } .archive .content-area .format-aside .entry-content, .archive .content-area .format-status .entry-content, .archive .content-area .format-link .entry-content, .search .content-area .format-aside .entry-content, .search .content-area .format-status .entry-content, .search .content-area .format-link .entry-content, .blog .content-area .format-aside .entry-content, .blog .content-area .format-status .entry-content, .blog .content-area .format-link .entry-content { font-size: var(--global--font-size-lg); } .archive .format-image .entry-content, .archive .format-gallery .entry-content, .archive .format-video .entry-content, .search .format-image .entry-content, .search .format-gallery .entry-content, .search .format-video .entry-content, .blog .format-image .entry-content, .blog .format-gallery .entry-content, .blog .format-video .entry-content { margin-top: calc(2 * var(--global--spacing-vertical)); } .archive .entry-footer .cat-links, .archive .entry-footer .tags-links, .search .entry-footer .cat-links, .search .entry-footer .tags-links, .blog .entry-footer .cat-links, .blog .entry-footer .tags-links { display: block; } .archive.logged-in .entry-footer .posted-on, .search.logged-in .entry-footer .posted-on, .blog.logged-in .entry-footer .posted-on { margin-left: calc(0.5 * var(--global--spacing-unit)); } .archive-description { margin-top: var(--global--spacing-vertical); font-size: var(--global--font-size-xl); line-height: var(--global--line-height-heading); } .error404 main p { font-size: var(--global--font-size-lg); margin-bottom: calc(var(--global--spacing-vertical) * 1.6666666667); } .search-no-results .page-content { margin-top: calc(3 * var(--global--spacing-vertical)); } /** * Comments Wrapper */ .comments-area > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .comments-area > *:first-child { margin-top: 0; } .comments-area > *:last-child { margin-bottom: 0; } .comments-area.show-avatars .avatar { border-radius: 50%; position: absolute; top: 10px; } .comments-area.show-avatars .fn { display: inline-block; padding-right: 85px; } .comments-area.show-avatars .comment-metadata { padding: 8px 85px 9px 0; } /** * Comment Title */ .comments-title, .comment-reply-title { font-size: var(--heading--font-size-h2); letter-spacing: var(--heading--letter-spacing-h2); } .comment-reply-title { display: flex; justify-content: space-between; } .comment-reply-title small a { font-family: var(--global--font-secondary); font-size: var(--global--font-size-xs); font-style: normal; font-weight: normal; letter-spacing: normal; } /* Nested comment reply title*/ .comment .comment-respond .comment-reply-title { font-size: var(--global--font-size-lg); } /** * Comment Lists */ .comment-list { padding-right: 0; list-style: none; } .comment-list > li { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .comment-list .children { list-style: none; padding-right: 0; } .comment-list .children > li { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } @media only screen and (min-width: 482px) { .comment-list .depth-2, .comment-list .depth-3 { padding-right: calc(4 * var(--global--spacing-horizontal)); } } /** * Comment Meta */ .comment-meta .comment-author { line-height: var(--global--line-height-heading); margin-bottom: calc(0.25 * var(--global--spacing-unit)); } @media only screen and (min-width: 482px) { .comment-meta .comment-author { margin-bottom: 0; padding-left: 0; } } .comment-meta .comment-author .fn { font-family: var(--global--font-secondary); font-weight: normal; font-size: var(--global--font-size-lg); hyphens: auto; word-wrap: break-word; word-break: break-word; } .comment-meta .comment-metadata { color: var(--global--color-primary); font-size: var(--global--font-size-xs); padding: 8px 0 9px 0; } .comment-meta .comment-metadata .edit-link { margin-right: var(--global--spacing-horizontal); } @media only screen and (min-width: 482px) { .comment-meta { margin-left: inherit; } .comment-meta .comment-author { max-width: inherit; } } .reply { font-size: var(--global--font-size-sm); line-height: var(--global--line-height-heading); } .bypostauthor { display: block; } .says { display: none; } .pingback .url, .trackback .url { font-family: var(--global--font-primary); } .comment-body { position: relative; margin-bottom: calc(1.7 * var(--global--spacing-vertical)); } .comment-body > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .comment-body .reply { margin: 0; } .comment-content a { word-wrap: break-word; } .pingback .comment-body, .trackback .comment-body { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .comment-respond { margin-top: var(--global--spacing-vertical); } .comment-respond > * { margin-top: var(--global--spacing-unit); margin-bottom: var(--global--spacing-unit); } .comment-respond > *:first-child { margin-top: 0; } .comment-respond > *:last-child { margin-bottom: 0; } .comment-respond > *:last-child.comment-form { margin-bottom: var(--global--spacing-vertical); } .comment-author { padding-top: 3px; } .comment-author .url { color: currentColor; } .comment-form { display: flex; flex-wrap: wrap; } .comment-form > * { flex-basis: 100%; } .comment-form .comment-notes { font-size: var(--global--font-size-sm); } .comment-form .comment-form-url, .comment-form .comment-form-comment { width: 100%; } .comment-form .comment-form-author, .comment-form .comment-form-email { flex-basis: 0; flex-grow: 1; } @media only screen and (max-width: 481px) { .comment-form .comment-form-author, .comment-form .comment-form-email { flex-basis: 100%; } } .comment-form .comment-form-cookies-consent > label, .comment-form .comment-notes { font-size: var(--global--font-size-xs); font-weight: normal; } .comment-form > p { margin-bottom: var(--global--spacing-unit); } .comment-form > p:first-of-type { margin-top: 0; } .comment-form > p:last-of-type { margin-bottom: 0; } .comment-form > p label, .comment-form > p input[type=email], .comment-form > p input[type=text], .comment-form > p input[type=url], .comment-form > p textarea { display: block; font-size: var(--global--font-size-sm); margin-bottom: calc(.5 * var(--global--spacing-unit)); width: 100%; font-weight: var(--form--label-weight); } .comment-form > p.comment-form-cookies-consent { display: flex; } @media only screen and (min-width: 482px) { .comment-form > p.comment-form-author { margin-left: calc(1.5 * var(--global--spacing-horizontal)); } .comment-form > p.comment-notes, .comment-form > p.logged-in-as { display: block; } } .menu-button-container { display: none; justify-content: space-between; position: absolute; left: 0; padding-top: calc(0.5 * var(--global--spacing-vertical)); padding-bottom: calc(0.25 * var(--global--spacing-vertical)); } .menu-button-container #primary-mobile-menu { margin-right: auto; padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); } @media only screen and (max-width: 481px) { .menu-button-container { display: flex; } } .menu-button-container .button.button { display: flex; font-size: var(--primary-nav--font-size-button); font-weight: var(--primary-nav--font-weight-button); background-color: transparent; border: none; color: var(--primary-nav--color-link); } .menu-button-container .button.button .dropdown-icon { display: flex; align-items: center; } .menu-button-container .button.button .dropdown-icon .svg-icon { margin-right: calc(0.25 * var(--global--spacing-unit)); } .menu-button-container .button.button .dropdown-icon.open .svg-icon { position: relative; top: -1px; } .menu-button-container .button.button .dropdown-icon.close { display: none; } .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open { display: none; } .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { display: flex; } .has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { animation-name: twentytwentyone-close-button-transition; animation-duration: 0.3s; } .primary-navigation-open .menu-button-container { width: 100%; z-index: 500; background-color: var(--global--color-background); } .primary-navigation-open .menu-button-container #primary-mobile-menu { position: static; } .primary-navigation { position: absolute; top: var(--global--admin-bar--height); left: 0; color: var(--primary-nav--color-text); font-size: var(--primary-nav--font-size); line-height: 1.15; margin-top: 0; margin-bottom: 0; } .primary-navigation > .primary-menu-container { position: fixed; visibility: hidden; opacity: 0; top: 0; left: 0; bottom: 0; right: 0; padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px); padding-right: var(--global--spacing-unit); padding-left: var(--global--spacing-unit); padding-bottom: var(--global--spacing-horizontal); background-color: var(--global--color-background); transition: all 0.15s ease-in-out; transform: translateY(var(--global--spacing-vertical)); } @media only screen and (max-width: 481px) { .primary-navigation > .primary-menu-container { height: 100vh; z-index: 499; overflow-x: hidden; overflow-y: auto; border: 2px solid transparent; } .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { position: fixed; transform: translateY(0) translateX(-100%); } .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { top: var(--global--admin-bar--height); } .admin-bar .primary-navigation > .primary-menu-container { height: calc(100vh - var(--global--admin-bar--height)); } .primary-navigation > .primary-menu-container:focus { border: 2px solid var(--global--color-primary); } } @media only screen and (max-width: 481px) { .primary-navigation-open .primary-navigation { width: 100%; position: fixed; z-index: 2; } } .primary-navigation-open .primary-navigation > .primary-menu-container { position: absolute; visibility: visible; opacity: 1; transform: translateY(0); } @media only screen and (max-width: 481px) { .primary-navigation-open .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { transform: translateX(0) translateY(0); } } @media only screen and (min-width: 482px) { .primary-navigation { position: relative; margin-right: auto; } .primary-navigation > .primary-menu-container { visibility: visible; opacity: 1; position: relative; padding: 0; background-color: transparent; overflow: initial; transform: none; } .primary-navigation #toggle-menu { display: none; } .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul { display: none; } .admin-bar .primary-navigation { top: initial; } .admin-bar .primary-navigation > .primary-menu-container { top: initial; } } .primary-navigation > div > .menu-wrapper { display: flex; justify-content: flex-start; flex-wrap: wrap; list-style: none; margin: 0; max-width: none; padding-right: 0; position: relative; } @media only screen and (max-width: 481px) { .primary-navigation > div > .menu-wrapper { padding-bottom: 100px; } .primary-navigation > div > .menu-wrapper ul { padding-right: 0; } } .primary-navigation > div > .menu-wrapper li { display: block; position: relative; width: 100%; } @media only screen and (min-width: 482px) { .primary-navigation > div > .menu-wrapper li { margin: 0; width: inherit; } .primary-navigation > div > .menu-wrapper li:last-child() { margin-left: 0; } } .primary-navigation > div > .menu-wrapper .sub-menu-toggle { display: flex; height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px); width: 44px; padding: 0; justify-content: center; align-items: center; background: transparent; color: currentColor; border: none; } .primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus { outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); } @media only screen and (max-width: 481px) { .primary-navigation > div > .menu-wrapper .sub-menu-toggle { display: none; } } .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus, .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus { height: 100%; display: flex; align-items: center; } .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus svg, .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus svg { margin-top: -1px; } .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus { display: none; } .primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-minus { display: flex; } .primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-plus { display: none; } .primary-navigation > div > .menu-wrapper > li > .sub-menu { position: relative; } @media only screen and (min-width: 482px) { .primary-navigation > div > .menu-wrapper > li > .sub-menu { right: 0; margin: 0; min-width: max-content; position: absolute; top: 100%; padding-top: 3px; transition: all 0.5s ease; z-index: 88888; } .primary-navigation > div > .menu-wrapper > li > .sub-menu:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu:after { content: ""; display: block; position: absolute; width: 0; top: -10px; right: var(--global--spacing-horizontal); border-style: solid; border-color: var(--primary-nav--border-color) transparent; border-width: 0 7px 10px 7px; } .primary-navigation > div > .menu-wrapper > li > .sub-menu:after { top: -9px; border-color: var(--global--color-background) transparent; } .primary-navigation > div > .menu-wrapper > li > .sub-menu li { background: var(--global--color-background); } .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left { left: 0; right: auto; } .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after { left: var(--global--spacing-horizontal); right: auto; } .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right { right: 0; left: auto; } .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after { left: auto; right: var(--global--spacing-horizontal); } } .primary-navigation .primary-menu > .menu-item:hover > a { color: var(--primary-nav--color-link-hover); } @media only screen and (min-width: 482px) { .primary-navigation .primary-menu-container { margin-left: calc(0px - var(--primary-nav--padding)); margin-right: calc(0px - var(--primary-nav--padding)); } .primary-navigation .primary-menu-container > ul > .menu-item { display: flex; } .primary-navigation .primary-menu-container > ul > .menu-item > a { padding-right: var(--primary-nav--padding); padding-left: var(--primary-nav--padding); } .primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle { margin-right: calc(5px - var(--primary-nav--padding)); } } .primary-navigation a { display: block; font-family: var(--primary-nav--font-family-mobile); font-size: var(--primary-nav--font-size-mobile); font-weight: var(--primary-nav--font-weight); padding: var(--primary-nav--padding) 0; text-decoration: none; } @media only screen and (min-width: 482px) { .primary-navigation a { display: block; font-family: var(--primary-nav--font-family); font-size: var(--primary-nav--font-size); font-weight: var(--primary-nav--font-weight); } } .primary-navigation a + svg { fill: var(--primary-nav--color-text); } .primary-navigation a:hover, .primary-navigation a:link, .primary-navigation a:visited { color: var(--primary-nav--color-link-hover); } .primary-navigation a:hover { text-decoration: underline; text-decoration-style: dotted; } .primary-navigation a:focus { position: relative; z-index: 99999; outline-offset: 0; text-decoration-thickness: 2px; } .primary-navigation .current-menu-item > a:first-child, .primary-navigation .current_page_item > a:first-child { text-decoration: underline; text-decoration-style: solid; } .primary-navigation .current-menu-item > a:first-child:hover, .primary-navigation .current_page_item > a:first-child:hover { text-decoration: underline; text-decoration-style: dotted; } .primary-navigation .sub-menu { margin: 0; padding: 0; list-style: none; margin-right: var(--primary-nav--padding); border: 1px solid var(--primary-nav--border-color); } .primary-navigation .sub-menu .sub-menu { border: none; } @media only screen and (min-width: 482px) { .primary-navigation .sub-menu > .menu-item > .sub-menu { padding: 0; } } @media only screen and (max-width: 481px) { .primary-navigation .sub-menu .menu-item:last-child() { margin-bottom: 0; } } .primary-navigation .sub-menu .menu-item > a { padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); display: block; font-size: var(--primary-nav--font-size-sub-menu-mobile); font-style: var(--primary-nav--font-style-sub-menu-mobile); } @media only screen and (min-width: 482px) { .primary-navigation .sub-menu .menu-item > a { font-size: var(--primary-nav--font-size-sub-menu); font-style: var(--primary-nav--font-style); } } .primary-navigation .menu-item-has-children > .svg-icon { display: none; } @media only screen and (min-width: 482px) { .primary-navigation .menu-item-has-children > .svg-icon { display: inline-block; height: 100%; } .primary-navigation .menu-item-has-children .sub-menu .svg-icon { display: none; } } .primary-navigation .menu-item-description { display: block; clear: both; font-size: var(--global--font-size-xs); text-transform: none; line-height: 1.7; } .primary-navigation .menu-item-description > span { display: inline-block; } @media only screen and (max-width: 481px) { .lock-scrolling .site { position: fixed; max-width: 100%; width: 100%; } } @keyframes twentytwentyone-close-button-transition { from { opacity: 0; } to { opacity: 1; } } .footer-navigation { margin-top: calc(2 * var(--global--spacing-vertical)); margin-bottom: var(--global--spacing-vertical); color: var(--footer--color-text); font-size: var(--global--font-size-xs); font-family: var(--footer--font-family); } .footer-navigation-wrapper { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; padding-right: 0; } .footer-navigation-wrapper li { display: inline; line-height: 3; } .footer-navigation-wrapper li a { padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); transition: transform 0.1s ease; color: var(--footer--color-link); } .footer-navigation-wrapper li a:link, .footer-navigation-wrapper li a:visited, .footer-navigation-wrapper li a:active { color: var(--footer--color-link); } .footer-navigation-wrapper li a:hover { text-decoration: underline; text-decoration-style: dotted; text-decoration-skip-ink: none; color: var(--footer--color-link-hover); } .is-dark-theme .footer-navigation-wrapper li a:focus .svg-icon { fill: var(--wp--style--color--link, var(--global--color-background)); } .has-background-white .footer-navigation-wrapper li a:focus .svg-icon { fill: var(--wp--style--color--link, var(--global--color-white)); } .footer-navigation-wrapper li .svg-icon { vertical-align: middle; fill: var(--footer--color-link); } .footer-navigation-wrapper li .svg-icon:hover { transform: scale(1.1); } .footer-navigation-wrapper .sub-menu-toggle, .footer-navigation-wrapper .menu-item-description { display: none; } /* Next/Previous navigation */ .navigation { color: var(--global--color-primary); } .navigation a { color: var(--global--color-primary); text-decoration: none; } .navigation a:hover { color: var(--global--color-primary-hover); text-decoration: underline; text-decoration-style: dotted; } .navigation a:focus { color: var(--global--color-secondary); } .navigation a:active { color: var(--global--color-primary); } .navigation .nav-links > * { min-width: 44px; min-height: 44px; } .navigation .nav-links .nav-next a, .navigation .nav-links .nav-previous a { display: flex; flex-direction: column; } .navigation .nav-links .dots { text-align: center; } @media only screen and (min-width: 592px) { .navigation .nav-links { display: flex; justify-content: center; flex-wrap: wrap; } .navigation .nav-links .nav-next, .navigation .nav-links .nav-previous { flex: 0 1 auto; margin-bottom: inherit; margin-top: inherit; max-width: calc(50% - (0.5 * var(--global--spacing-unit))); } .navigation .nav-links .nav-next { text-align: left; } } .navigation .svg-icon { display: inline-block; fill: currentColor; vertical-align: middle; position: relative; } .navigation .nav-previous .svg-icon, .navigation .prev .svg-icon { top: -2px; margin-left: calc(0.25 * var(--global--spacing-unit)); } .navigation .nav-next .svg-icon, .navigation .next .svg-icon { top: -1px; margin-right: calc(0.25 * var(--global--spacing-unit)); } .post-navigation { margin: var(--global--spacing-vertical) auto; } @media only screen and (min-width: 822px) { .post-navigation { margin: var(--global--spacing-vertical) auto; } } .post-navigation .meta-nav { line-height: var(--global--line-height-body); color: var(--global--color-primary); } .post-navigation .post-title { display: inline-block; font-family: var(--global--font-primary); font-size: var(--global--font-size-lg); font-weight: var(--pagination--font-weight-strong); line-height: var(--global--line-height-heading); } @media only screen and (min-width: 822px) { .post-navigation .post-title { margin: 5px calc(24px + (0.25 * var(--global--spacing-unit))) 0; } } @media only screen and (min-width: 482px) { .post-navigation .nav-links { justify-content: space-between; } } .post-navigation .nav-next, .post-navigation .nav-previous { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .post-navigation .nav-next:first-child, .post-navigation .nav-previous:first-child { margin-top: 0; } .post-navigation .nav-next:last-child, .post-navigation .nav-previous:last-child { margin-bottom: 0; } .pagination, .comments-pagination { border-top: 3px solid var(--global--color-border); padding-top: var(--global--spacing-vertical); margin: var(--global--spacing-vertical) auto; } @media only screen and (min-width: 822px) { .pagination, .comments-pagination { margin: var(--global--spacing-vertical) auto; } } .pagination .nav-links, .comments-pagination .nav-links { margin-top: calc(-1 * var(--global--spacing-vertical)); } .pagination .nav-links a:hover, .comments-pagination .nav-links a:hover { color: var(--pagination--color-link-hover); } .is-dark-theme .pagination .nav-links a:active, .is-dark-theme .pagination .nav-links a:hover:active, .is-dark-theme .pagination .nav-links a:hover:focus, .is-dark-theme .comments-pagination .nav-links a:active, .is-dark-theme .comments-pagination .nav-links a:hover:active, .is-dark-theme .comments-pagination .nav-links a:hover:focus { color: var(--global--color-background); } .has-background-white .pagination .nav-links a:active, .has-background-white .pagination .nav-links a:hover:active, .has-background-white .pagination .nav-links a:hover:focus, .has-background-white .comments-pagination .nav-links a:active, .has-background-white .comments-pagination .nav-links a:hover:active, .has-background-white .comments-pagination .nav-links a:hover:focus { color: var(--global--color-white); } .pagination .nav-links > *, .comments-pagination .nav-links > * { color: var(--pagination--color-text); font-family: var(--pagination--font-family); font-size: var(--pagination--font-size); font-weight: var(--pagination--font-weight); margin-top: var(--global--spacing-vertical); margin-right: calc(0.66 * var(--global--spacing-unit)); margin-left: calc(0.66 * var(--global--spacing-unit)); } .pagination .nav-links > *.current, .comments-pagination .nav-links > *.current { text-decoration: underline; } .pagination .nav-links > *:not(.dots):not(.current):hover, .comments-pagination .nav-links > *:not(.dots):not(.current):hover { text-decoration-style: dotted; } .pagination .nav-links > *:first-child, .comments-pagination .nav-links > *:first-child { margin-right: 0; } .pagination .nav-links > *:last-child, .comments-pagination .nav-links > *:last-child { margin-left: 0; } .pagination .nav-links > *.next, .comments-pagination .nav-links > *.next { margin-right: auto; } .pagination .nav-links > *.prev, .comments-pagination .nav-links > *.prev { margin-left: auto; } @media only screen and (max-width: 821px) { .pagination .nav-links, .comments-pagination .nav-links { display: flex; flex-wrap: wrap; } .pagination .page-numbers, .comments-pagination .page-numbers { display: none; } .pagination .page-numbers.prev, .pagination .page-numbers.next, .comments-pagination .page-numbers.prev, .comments-pagination .page-numbers.next { display: inline-block; flex: 0 1 auto; } } @media only screen and (max-width: 481px) { .pagination .nav-short, .comments-pagination .nav-short { display: none; } } .comments-pagination { padding-top: calc(0.66 * var(--global--spacing-vertical)); margin: calc(3 * var(--global--spacing-vertical)) auto; } @media only screen and (min-width: 822px) { .comments-pagination { margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto; } } .comments-pagination .nav-links > * { font-size: var(--global--font-size-md); } .widget-area { margin-top: calc(6 * var(--global--spacing-vertical)); padding-bottom: calc(var(--global--spacing-vertical) / 3); color: var(--footer--color-text); font-size: var(--footer--font-size); font-family: var(--footer--font-family); } @media only screen and (min-width: 652px) { .widget-area { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: calc(2 * var(--global--spacing-horizontal)); } } @media only screen and (min-width: 1024px) { .widget-area { grid-template-columns: repeat(3, 1fr); } } @media only screen and (max-width: 481px) { .widget-area { margin-top: calc(3 * var(--global--spacing-vertical)); } } .widget-area ul { list-style-type: none; padding: 0; } .widget-area ul li { line-height: var(--widget--line-height-list); } .widget-area ul.sub-menu, .widget-area ul.children { margin-right: var(--widget--spacing-menu); } .widget-area ul .sub-menu-toggle { display: none; } .widget-area a { color: var(--footer--color-link); text-decoration: underline; text-decoration-style: solid; text-decoration-color: currentColor; } .widget-area a:link, .widget-area a:visited, .widget-area a:active { color: var(--footer--color-link); } .widget-area a:hover { color: var(--footer--color-link-hover); text-decoration-style: dotted; } .widget-area .wp-block-social-links.alignright { margin-top: var(--global--spacing-vertical); justify-content: flex-end; } .widget-area .wp-block-social-links.alignleft { margin-top: var(--global--spacing-vertical); } .widget-area:after { content: ""; display: table; clear: both; } .widget-title { font-size: var(--global--font-size-sm); font-weight: var(--widget--font-weight-title); line-height: var(--widget--line-height-title); } .search-form { display: flex; flex-wrap: wrap; margin: auto; max-width: var(--responsive--aligndefault-width); } .search-form > label { width: 100%; margin-bottom: 0; font-weight: var(--form--label-weight); } .search-form .search-field { flex-grow: 1; max-width: inherit; margin-top: calc(var(--global--spacing-vertical) / 3); margin-left: calc(0.66 * var(--global--spacing-horizontal)); } .search-form .search-submit { margin-top: calc(var(--global--spacing-vertical) / 3); margin-right: 10px; } .widget_search > .search-form .search-field { margin-left: calc(-1 * var(--button--border-width)); -webkit-appearance: none; margin-bottom: calc(0.5 * var(--global--spacing-vertical)); } .widget_search > .search-form .search-submit { margin-right: 0; background-color: transparent; color: var(--button--color-text-hover); margin-bottom: calc(0.5 * var(--global--spacing-vertical)); } .widget_search > .search-form .search-submit:hover { background-color: var(--button--color-background); color: var(--button--color-text); } .widget_rss a.rsswidget .rss-widget-icon { display: none; } /* Category 07 is for any utility classes that are not assigned to a specific component. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; word-break: normal; } .skip-link:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } @media (prefers-reduced-motion) { * { transition-delay: 0s !important; transition-duration: 0s !important; } } .has-black-color[class] { color: var(--global--color-black); } .has-gray-color[class] { color: var(--global--color-gray); } .has-dark-gray-color[class] { color: var(--global--color-dark-gray); } .has-green-color[class] { color: var(--global--color-green); } .has-blue-color[class] { color: var(--global--color-blue); } .has-purple-color[class] { color: var(--global--color-purple); } .has-red-color[class] { color: var(--global--color-red); } .has-orange-color[class] { color: var(--global--color-orange); } .has-yellow-color[class] { color: var(--global--color-yellow); } .has-white-color[class] { color: var(--global--color-white); } .has-background a, .has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 { color: currentColor; } .has-black-background-color[class] { background-color: var(--global--color-black); } .has-gray-background-color[class] { background-color: var(--global--color-gray); } .has-dark-gray-background-color[class] { background-color: var(--global--color-dark-gray); } .has-green-background-color[class] { background-color: var(--global--color-green); } .has-blue-background-color[class] { background-color: var(--global--color-blue); } .has-purple-background-color[class] { background-color: var(--global--color-purple); } .has-red-background-color[class] { background-color: var(--global--color-red); } .has-orange-background-color[class] { background-color: var(--global--color-orange); } .has-yellow-background-color[class] { background-color: var(--global--color-yellow); } .has-white-background-color[class] { background-color: var(--global--color-white); } :not(.has-text-color).has-black-background-color[class], :not(.has-text-color).has-gray-background-color[class], :not(.has-text-color).has-dark-gray-background-color[class] { color: var(--global--color-white); } :not(.has-text-color).has-green-background-color[class], :not(.has-text-color).has-blue-background-color[class], :not(.has-text-color).has-purple-background-color[class], :not(.has-text-color).has-red-background-color[class], :not(.has-text-color).has-orange-background-color[class], :not(.has-text-color).has-yellow-background-color[class], :not(.has-text-color).has-white-background-color[class] { color: var(--global--color-dark-gray); } .has-purple-to-yellow-gradient-background { background: linear-gradient(-160deg, var(--global--color-purple), var(--global--color-yellow)); } .has-yellow-to-purple-gradient-background { background: linear-gradient(-160deg, var(--global--color-yellow), var(--global--color-purple)); } .has-green-to-yellow-gradient-background { background: linear-gradient(-160deg, var(--global--color-green), var(--global--color-yellow)); } .has-yellow-to-green-gradient-background { background: linear-gradient(-160deg, var(--global--color-yellow), var(--global--color-green)); } .has-red-to-yellow-gradient-background { background: linear-gradient(-160deg, var(--global--color-red), var(--global--color-yellow)); } .has-yellow-to-red-gradient-background { background: linear-gradient(-160deg, var(--global--color-yellow), var(--global--color-red)); } .has-purple-to-red-gradient-background { background: linear-gradient(-160deg, var(--global--color-purple), var(--global--color-red)); } .has-red-to-purple-gradient-background { background: linear-gradient(-160deg, var(--global--color-red), var(--global--color-purple)); } header *, main *, footer * { max-width: var(--global--spacing-measure); } html, body, div, header, nav, article, figure, hr, main, section, footer { max-width: none; } .is-IE.is-dark-theme { color: #fff; } .is-IE.is-dark-theme *, .is-IE.is-dark-theme a, .is-IE.is-dark-theme .site-description, .is-IE.is-dark-theme .entry-title, .is-IE.is-dark-theme .entry-footer, .is-IE.is-dark-theme .widget-area, .is-IE.is-dark-theme .post-navigation .meta-nav, .is-IE.is-dark-theme .footer-navigation-wrapper li a:link, .is-IE.is-dark-theme .site-footer > .site-info, .is-IE.is-dark-theme .site-footer > .site-info a, .is-IE.is-dark-theme .site-footer > .site-info a:visited { color: #fff; } .is-IE.is-dark-theme .sub-menu-toggle svg, .is-IE.is-dark-theme .sub-menu-toggle path, .is-IE.is-dark-theme .post-navigation .meta-nav svg, .is-IE.is-dark-theme .post-navigation .meta-nav path { fill: #fff; } .is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li { background: #000; } @media only screen and (max-width: 481px) { .is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container, .is-IE.is-dark-theme.primary-navigation-open .menu-button-container { background-color: #000; } } .is-IE.is-dark-theme .skip-link:focus { color: #21759b; } .is-IE .navigation .nav-links { display: block; } .is-IE .post-thumbnail .wp-post-image { min-width: auto; } .stylelintignore 0000644 00000000131 15252513625 0010001 0 ustar 00 vendor/ node_modules/ assets/images *.php *.map *.png *.json LICENSE composer.lock *.txt template-parts/content/content-none.php 0000644 00000003311 15252513625 0014304 0 ustar 00 <?php /** * Template part for displaying a message that posts cannot be found * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ ?> <section class="no-results not-found"> <header class="page-header alignwide"> <?php if ( is_search() ) : ?> <h1 class="page-title"> <?php printf( /* translators: %s: search term. */ esc_html__( 'Results for "%s"', 'twentytwentyone' ), '<span class="page-description search-term">' . esc_html( get_search_query() ) . '</span>' ); ?> </h1> <?php else : ?> <h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1> <?php endif; ?> </header><!-- .page-header --> <div class="page-content default-max-width"> <?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?> <?php printf( '<p>' . wp_kses( /* translators: 1: link to WP admin new post page. */ __( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'twentytwentyone' ), array( 'a' => array( 'href' => array(), ), ) ) . '</p>', esc_url( admin_url( 'post-new.php' ) ) ); ?> <?php elseif ( is_search() ) : ?> <p><?php esc_html_e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'twentytwentyone' ); ?></p> <?php get_search_form(); ?> <?php else : ?> <p><?php esc_html_e( 'It seems we can’t find what you’re looking for. Perhaps searching can help.', 'twentytwentyone' ); ?></p> <?php get_search_form(); ?> <?php endif; ?> </div><!-- .page-content --> </section><!-- .no-results --> template-parts/content/content.php 0000644 00000002336 15252513625 0013355 0 ustar 00 <?php /** * Template part for displaying posts * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php if ( is_singular() ) : ?> <?php the_title( '<h1 class="entry-title default-max-width">', '</h1>' ); ?> <?php else : ?> <?php the_title( sprintf( '<h2 class="entry-title default-max-width"><a href="%s">', esc_url( get_permalink() ) ), '</a></h2>' ); ?> <?php endif; ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content( twenty_twenty_one_continue_reading_text() ); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> </article><!-- #post-${ID} --> template-parts/content/content-excerpt.php 0000644 00000001273 15252513625 0015024 0 ustar 00 <?php /** * Template part for displaying post archives and search results * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php get_template_part( 'template-parts/header/excerpt-header', get_post_format() ); ?> <div class="entry-content"> <?php get_template_part( 'template-parts/excerpt/excerpt', get_post_format() ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> </article><!-- #post-${ID} --> template-parts/content/content-page.php 0000644 00000002762 15252513625 0014272 0 ustar 00 <?php /** * Template part for displaying page content in page.php * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php if ( ! is_front_page() ) : ?> <header class="entry-header alignwide"> <?php get_template_part( 'template-parts/header/entry-header' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header> <?php elseif ( has_post_thumbnail() ) : ?> <header class="entry-header alignwide"> <?php twenty_twenty_one_post_thumbnail(); ?> </header> <?php endif; ?> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <?php if ( get_edit_post_link() ) : ?> <footer class="entry-footer default-max-width"> <?php edit_post_link( sprintf( /* translators: %s: Name of current post. Only visible to screen readers. */ esc_html__( 'Edit %s', 'twentytwentyone' ), '<span class="screen-reader-text">' . get_the_title() . '</span>' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-footer --> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> --> template-parts/content/content-single.php 0000644 00000002106 15252513625 0014627 0 ustar 00 <?php /** * Template part for displaying posts * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-${ID} --> template-parts/excerpt/excerpt-audio.php 0000644 00000001166 15252513625 0014454 0 ustar 00 <?php /** * Show the appropriate content for the Audio post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ $content = get_the_content(); if ( has_block( 'core/audio', $content ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/audio', $content ); } elseif ( has_block( 'core/embed', $content ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/embed', $content ); } else { twenty_twenty_one_print_first_instance_of_block( 'core-embed/*', $content ); } // Add the excerpt. the_excerpt(); template-parts/excerpt/excerpt-status.php 0000644 00000000415 15252513625 0014672 0 ustar 00 <?php /** * Show the appropriate content for the Status post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ // Print the full content. the_content(); template-parts/excerpt/excerpt-quote.php 0000644 00000001124 15252513625 0014502 0 ustar 00 <?php /** * Show the appropriate content for the Quote post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ $content = get_the_content(); // If there is no quote or pullquote print the content. if ( has_block( 'core/quote', $content ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/quote', $content ); } elseif ( has_block( 'core/pullquote', $content ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/pullquote', $content ); } else { the_excerpt(); } template-parts/excerpt/excerpt-link.php 0000644 00000000746 15252513625 0014313 0 ustar 00 <?php /** * Show the appropriate content for the Link post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ // Print the 1st instance of a paragraph block. If none is found, print the content. if ( has_block( 'core/paragraph', get_the_content() ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/paragraph', get_the_content() ); } else { the_content(); } template-parts/excerpt/excerpt-image.php 0000644 00000000770 15252513625 0014435 0 ustar 00 <?php /** * Show the appropriate content for the Image post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ // If there is no featured-image, print the first image block found. if ( ! twenty_twenty_one_can_show_post_thumbnail() && has_block( 'core/image', get_the_content() ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() ); } the_excerpt(); template-parts/excerpt/excerpt-chat.php 0000644 00000001002 15252513625 0014257 0 ustar 00 <?php /** * Show the appropriate content for the Chat post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ // If there are paragraph blocks, print up to two. // Otherwise this is legacy content, so print the excerpt. if ( has_block( 'core/paragraph', get_the_content() ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/paragraph', get_the_content(), 2 ); } else { the_excerpt(); } template-parts/excerpt/excerpt-gallery.php 0000644 00000000646 15252513625 0015014 0 ustar 00 <?php /** * Show the appropriate content for the Gallery post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ // Print the 1st gallery found. if ( has_block( 'core/gallery', get_the_content() ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/gallery', get_the_content() ); } the_excerpt(); template-parts/excerpt/excerpt.php 0000644 00000000313 15252513625 0013346 0 ustar 00 <?php /** * Show the excerpt. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ the_excerpt(); template-parts/excerpt/excerpt-aside.php 0000644 00000000414 15252513625 0014433 0 ustar 00 <?php /** * Show the appropriate content for the Aside post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ // Print the full content. the_content(); template-parts/excerpt/excerpt-video.php 0000644 00000001166 15252513625 0014461 0 ustar 00 <?php /** * Show the appropriate content for the Video post format. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ $content = get_the_content(); if ( has_block( 'core/video', $content ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/video', $content ); } elseif ( has_block( 'core/embed', $content ) ) { twenty_twenty_one_print_first_instance_of_block( 'core/embed', $content ); } else { twenty_twenty_one_print_first_instance_of_block( 'core-embed/*', $content ); } // Add the excerpt. the_excerpt(); template-parts/post/author-bio.php 0000644 00000002121 15252513625 0013257 0 ustar 00 <?php /** * The template for displaying author info below posts. * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ ?> <?php if ( (bool) get_the_author_meta( 'description' ) && post_type_supports( get_post_type(), 'author' ) ) : ?> <div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>"> <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?> <div class="author-bio-content"> <h2 class="author-title"><?php printf( /* translators: 1: Author name. */ esc_html__( 'By %s', 'twentytwentyone' ), get_the_author() ); ?></h2> <p class="author-description"> <?php the_author_meta( 'description' ); ?></p><!-- .author-description --> <?php printf( /* translators: 1: Link to authors posts. 2: Author name. */ '<a class="author-link" href="%1$s" rel="author">' . esc_html__( 'View all of %2$s\'s posts.', 'twentytwentyone' ) . '</a>', esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), get_the_author() ); ?> </div><!-- .author-bio-content --> </div><!-- .author-bio --> <?php endif; ?> template-parts/footer/footer-widgets.php 0000644 00000000443 15252513625 0014466 0 ustar 00 <?php /** * Displays the footer widget area. * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <aside class="widget-area"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </aside><!-- .widget-area --> <?php endif; ?> template-parts/header/site-branding.php 0000644 00000002752 15252513625 0014211 0 ustar 00 <?php /** * Displays header site branding * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ $blog_info = get_bloginfo( 'name' ); $description = get_bloginfo( 'description', 'display' ); $show_title = ( true === get_theme_mod( 'display_title_and_tagline', true ) ); $header_class = $show_title ? 'site-title' : 'screen-reader-text'; ?> <?php if ( has_custom_logo() && $show_title ) : ?> <div class="site-logo"><?php the_custom_logo(); ?></div> <?php endif; ?> <div class="site-branding"> <?php if ( has_custom_logo() && ! $show_title ) : ?> <div class="site-logo"><?php the_custom_logo(); ?></div> <?php endif; ?> <?php if ( $blog_info ) : ?> <?php if ( is_front_page() && ! is_paged() ) : ?> <h1 class="<?php echo esc_attr( $header_class ); ?>"><?php echo esc_html( $blog_info ); ?></h1> <?php elseif ( is_front_page() || is_home() ) : ?> <h1 class="<?php echo esc_attr( $header_class ); ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( $blog_info ); ?></a></h1> <?php else : ?> <p class="<?php echo esc_attr( $header_class ); ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( $blog_info ); ?></a></p> <?php endif; ?> <?php endif; ?> <?php if ( $description && get_theme_mod( 'display_title_and_tagline', true ) === true ) : ?> <p class="site-description"> <?php echo $description; // phpcs:ignore WordPress.Security.EscapeOutput ?> </p> <?php endif; ?> </div><!-- .site-branding --> template-parts/header/entry-header.php 0000644 00000000247 15252513625 0014047 0 ustar 00 <?php /** * Displays the post header * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ the_title( '<h1 class="entry-title">', '</h1>' ); template-parts/header/site-header.php 0000644 00000001210 15252513625 0013641 0 ustar 00 <?php /** * Displays the site header. * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ $wrapper_classes = 'site-header'; $wrapper_classes .= has_custom_logo() ? ' has-logo' : ''; $wrapper_classes .= true === get_theme_mod( 'display_title_and_tagline', true ) ? ' has-title-and-tagline' : ''; $wrapper_classes .= has_nav_menu( 'primary' ) ? ' has-menu' : ''; ?> <header id="masthead" class="<?php echo esc_attr( $wrapper_classes ); ?>" role="banner"> <?php get_template_part( 'template-parts/header/site-branding' ); ?> <?php get_template_part( 'template-parts/header/site-nav' ); ?> </header><!-- #masthead --> template-parts/header/excerpt-header.php 0000644 00000001023 15252513625 0014351 0 ustar 00 <?php /** * Displays the post header * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ // Don't show the title if the post-format is `aside` or `status`. $post_format = get_post_format(); if ( 'aside' === $post_format || 'status' === $post_format ) { return; } ?> <header class="entry-header"> <?php the_title( sprintf( '<h2 class="entry-title default-max-width"><a href="%s">', esc_url( get_permalink() ) ), '</a></h2>' ); twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> template-parts/header/site-nav.php 0000644 00000002434 15252513625 0013206 0 ustar 00 <?php /** * Displays the site navigation. * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ ?> <?php if ( has_nav_menu( 'primary' ) ) : ?> <nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>"> <div class="menu-button-container"> <button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false"> <span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?> <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?> </span> <span class="dropdown-icon close"><?php esc_html_e( 'Close', 'twentytwentyone' ); ?> <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput ?> </span> </button><!-- #primary-mobile-menu --> </div><!-- .menu-button-container --> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu-wrapper', 'container_class' => 'primary-menu-container', 'items_wrap' => '<ul id="primary-menu-list" class="%2$s">%3$s</ul>', 'fallback_cb' => false, ) ); ?> </nav><!-- #site-navigation --> <?php endif; ?> functions.php 0000644 00000043020 15252513625 0007272 0 ustar 00 <?php /** * Functions and definitions * * @link https://developer.wordpress.org/themes/basics/theme-functions/ * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ // This theme requires WordPress 5.3 or later. if ( version_compare( $GLOBALS['wp_version'], '5.3', '<' ) ) { require get_template_directory() . '/inc/back-compat.php'; } if ( ! function_exists( 'twenty_twenty_one_setup' ) ) { /** * Sets up theme defaults and registers support for various WordPress features. * * Note that this function is hooked into the after_setup_theme hook, which * runs before the init hook. The init hook is too late for some features, such * as indicating support for post thumbnails. * * @since 1.0.0 * * @return void */ function twenty_twenty_one_setup() { /* * Make theme available for translation. * Translations can be filed in the /languages/ directory. * If you're building a theme based on Twenty Twenty-One, use a find and replace * to change 'twentytwentyone' to the name of your theme in all the template files. */ load_theme_textdomain( 'twentytwentyone', get_template_directory() . '/languages' ); // Add default posts and comments RSS feed links to head. add_theme_support( 'automatic-feed-links' ); /* * Let WordPress manage the document title. * This theme does not use a hard-coded <title> tag in the document head, * WordPress will provide it for us. */ add_theme_support( 'title-tag' ); /** * Add post-formats support. */ add_theme_support( 'post-formats', array( 'link', 'aside', 'gallery', 'image', 'quote', 'status', 'video', 'audio', 'chat', ) ); /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 1568, 9999 ); register_nav_menus( array( 'primary' => esc_html__( 'Primary menu', 'twentytwentyone' ), 'footer' => __( 'Secondary menu', 'twentytwentyone' ), ) ); /* * Switch default core markup for search form, comment form, and comments * to output valid HTML5. */ add_theme_support( 'html5', array( 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script', 'navigation-widgets', ) ); /** * Add support for core custom logo. * * @link https://codex.wordpress.org/Theme_Logo */ $logo_width = 300; $logo_height = 100; add_theme_support( 'custom-logo', array( 'height' => $logo_height, 'width' => $logo_width, 'flex-width' => true, 'flex-height' => true, 'unlink-homepage-logo' => true, ) ); // Add theme support for selective refresh for widgets. add_theme_support( 'customize-selective-refresh-widgets' ); // Add support for Block Styles. add_theme_support( 'wp-block-styles' ); // Add support for full and wide align images. add_theme_support( 'align-wide' ); // Add support for editor styles. add_theme_support( 'editor-styles' ); $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); if ( 127 > Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) { add_theme_support( 'dark-editor-style' ); } $editor_stylesheet_path = './assets/css/style-editor.css'; // Note, the is_IE global variable is defined by WordPress and is used // to detect if the current browser is internet explorer. global $is_IE; if ( $is_IE ) { $editor_stylesheet_path = './assets/css/ie-editor.css'; } // Enqueue editor styles. add_editor_style( $editor_stylesheet_path ); // Add custom editor font sizes. add_theme_support( 'editor-font-sizes', array( array( 'name' => esc_html__( 'Extra small', 'twentytwentyone' ), 'shortName' => esc_html_x( 'XS', 'Font size', 'twentytwentyone' ), 'size' => 16, 'slug' => 'extra-small', ), array( 'name' => esc_html__( 'Small', 'twentytwentyone' ), 'shortName' => esc_html_x( 'S', 'Font size', 'twentytwentyone' ), 'size' => 18, 'slug' => 'small', ), array( 'name' => esc_html__( 'Normal', 'twentytwentyone' ), 'shortName' => esc_html_x( 'M', 'Font size', 'twentytwentyone' ), 'size' => 20, 'slug' => 'normal', ), array( 'name' => esc_html__( 'Large', 'twentytwentyone' ), 'shortName' => esc_html_x( 'L', 'Font size', 'twentytwentyone' ), 'size' => 24, 'slug' => 'large', ), array( 'name' => esc_html__( 'Extra large', 'twentytwentyone' ), 'shortName' => esc_html_x( 'XL', 'Font size', 'twentytwentyone' ), 'size' => 40, 'slug' => 'extra-large', ), array( 'name' => esc_html__( 'Huge', 'twentytwentyone' ), 'shortName' => esc_html_x( 'XXL', 'Font size', 'twentytwentyone' ), 'size' => 96, 'slug' => 'huge', ), array( 'name' => esc_html__( 'Gigantic', 'twentytwentyone' ), 'shortName' => esc_html_x( 'XXXL', 'Font size', 'twentytwentyone' ), 'size' => 144, 'slug' => 'gigantic', ), ) ); // Custom background color. add_theme_support( 'custom-background', array( 'default-color' => 'd1e4dd', ) ); // Editor color palette. $black = '#000000'; $dark_gray = '#28303D'; $gray = '#39414D'; $green = '#D1E4DD'; $blue = '#D1DFE4'; $purple = '#D1D1E4'; $red = '#E4D1D1'; $orange = '#E4DAD1'; $yellow = '#EEEADD'; $white = '#FFFFFF'; add_theme_support( 'editor-color-palette', array( array( 'name' => esc_html__( 'Black', 'twentytwentyone' ), 'slug' => 'black', 'color' => $black, ), array( 'name' => esc_html__( 'Dark gray', 'twentytwentyone' ), 'slug' => 'dark-gray', 'color' => $dark_gray, ), array( 'name' => esc_html__( 'Gray', 'twentytwentyone' ), 'slug' => 'gray', 'color' => $gray, ), array( 'name' => esc_html__( 'Green', 'twentytwentyone' ), 'slug' => 'green', 'color' => $green, ), array( 'name' => esc_html__( 'Blue', 'twentytwentyone' ), 'slug' => 'blue', 'color' => $blue, ), array( 'name' => esc_html__( 'Purple', 'twentytwentyone' ), 'slug' => 'purple', 'color' => $purple, ), array( 'name' => esc_html__( 'Red', 'twentytwentyone' ), 'slug' => 'red', 'color' => $red, ), array( 'name' => esc_html__( 'Orange', 'twentytwentyone' ), 'slug' => 'orange', 'color' => $orange, ), array( 'name' => esc_html__( 'Yellow', 'twentytwentyone' ), 'slug' => 'yellow', 'color' => $yellow, ), array( 'name' => esc_html__( 'White', 'twentytwentyone' ), 'slug' => 'white', 'color' => $white, ), ) ); add_theme_support( 'editor-gradient-presets', array( array( 'name' => esc_html__( 'Purple to yellow', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $yellow . ' 100%)', 'slug' => 'purple-to-yellow', ), array( 'name' => esc_html__( 'Yellow to purple', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $purple . ' 100%)', 'slug' => 'yellow-to-purple', ), array( 'name' => esc_html__( 'Green to yellow', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $green . ' 0%, ' . $yellow . ' 100%)', 'slug' => 'green-to-yellow', ), array( 'name' => esc_html__( 'Yellow to green', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $green . ' 100%)', 'slug' => 'yellow-to-green', ), array( 'name' => esc_html__( 'Red to yellow', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $yellow . ' 100%)', 'slug' => 'red-to-yellow', ), array( 'name' => esc_html__( 'Yellow to red', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $red . ' 100%)', 'slug' => 'yellow-to-red', ), array( 'name' => esc_html__( 'Purple to red', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $red . ' 100%)', 'slug' => 'purple-to-red', ), array( 'name' => esc_html__( 'Red to purple', 'twentytwentyone' ), 'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $purple . ' 100%)', 'slug' => 'red-to-purple', ), ) ); /* * Adds starter content to highlight the theme on fresh sites. * This is done conditionally to avoid loading the starter content on every * page load, as it is a one-off operation only needed once in the customizer. */ if ( is_customize_preview() ) { require get_template_directory() . '/inc/starter-content.php'; add_theme_support( 'starter-content', twenty_twenty_one_get_starter_content() ); } // Add support for responsive embedded content. add_theme_support( 'responsive-embeds' ); // Add support for custom line height controls. add_theme_support( 'custom-line-height' ); // Add support for experimental link color control. add_theme_support( 'experimental-link-color' ); // Add support for experimental cover block spacing. add_theme_support( 'custom-spacing' ); // Add support for custom units. // This was removed in WordPress 5.6 but is still required to properly support WP 5.5. add_theme_support( 'custom-units' ); } } add_action( 'after_setup_theme', 'twenty_twenty_one_setup' ); /** * Register widget area. * * @since 1.0.0 * * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar * * @return void */ function twenty_twenty_one_widgets_init() { register_sidebar( array( 'name' => esc_html__( 'Footer', 'twentytwentyone' ), 'id' => 'sidebar-1', 'description' => esc_html__( 'Add widgets here to appear in your footer.', 'twentytwentyone' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget' => '</section>', 'before_title' => '<h2 class="widget-title">', 'after_title' => '</h2>', ) ); } add_action( 'widgets_init', 'twenty_twenty_one_widgets_init' ); /** * Set the content width in pixels, based on the theme's design and stylesheet. * * Priority 0 to make it available to lower priority callbacks. * * @since 1.0.0 * * @global int $content_width Content width. * * @return void */ function twenty_twenty_one_content_width() { // This variable is intended to be overruled from themes. // Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}. // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound $GLOBALS['content_width'] = apply_filters( 'twenty_twenty_one_content_width', 750 ); } add_action( 'after_setup_theme', 'twenty_twenty_one_content_width', 0 ); /** * Enqueue scripts and styles. * * @since 1.0.0 * * @return void */ function twenty_twenty_one_scripts() { // Note, the is_IE global variable is defined by WordPress and is used // to detect if the current browser is internet explorer. global $is_IE; if ( $is_IE ) { // If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables. wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) ); } else { // If not IE, use the standard stylesheet. wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) ); } // RTL styles. wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' ); // Print styles. wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' ); // Threaded comment reply styles. if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } wp_register_script( 'twenty-twenty-one-ie11-polyfills', get_template_directory_uri() . '/assets/js/polyfills.js', array(), wp_get_theme()->get( 'Version' ), true ); // Main navigation scripts. if ( has_nav_menu( 'primary' ) ) { wp_enqueue_script( 'twenty-twenty-one-primary-navigation-script', get_template_directory_uri() . '/assets/js/primary-navigation.js', array( 'twenty-twenty-one-ie11-polyfills' ), wp_get_theme()->get( 'Version' ), true ); } // Responsive embeds script. wp_enqueue_script( 'twenty-twenty-one-responsive-embeds-script', get_template_directory_uri() . '/assets/js/responsive-embeds.js', array( 'twenty-twenty-one-ie11-polyfills' ), wp_get_theme()->get( 'Version' ), true ); } add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' ); /** * Enqueue block editor script. * * @since 1.0.0 * * @return void */ function twentytwentyone_block_editor_script() { wp_enqueue_script( 'twentytwentyone-editor', get_theme_file_uri( '/assets/js/editor.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true ); } add_action( 'enqueue_block_editor_assets', 'twentytwentyone_block_editor_script' ); /** * Fix skip link focus in IE11. * * This does not enqueue the script because it is tiny and because it is only for IE11, * thus it does not warrant having an entire dedicated blocking script being loaded. * * @link https://git.io/vWdr2 */ function twenty_twenty_one_skip_link_focus_fix() { // If SCRIPT_DEBUG is defined and true, print the unminified file. if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) { echo '<script>'; include get_template_directory() . '/assets/js/skip-link-focus-fix.js'; echo '</script>'; } // The following is minified via `npx terser --compress --mangle -- assets/js/skip-link-focus-fix.js`. ?> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",(function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())}),!1); </script> <?php } add_action( 'wp_print_footer_scripts', 'twenty_twenty_one_skip_link_focus_fix' ); /** Enqueue non-latin language styles * * @since 1.0.0 * * @return void */ function twenty_twenty_one_non_latin_languages() { $custom_css = twenty_twenty_one_get_non_latin_css( 'front-end' ); if ( $custom_css ) { wp_add_inline_style( 'twenty-twenty-one-style', $custom_css ); } } add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_non_latin_languages' ); // SVG Icons class. require get_template_directory() . '/classes/class-twenty-twenty-one-svg-icons.php'; // Custom color classes. require get_template_directory() . '/classes/class-twenty-twenty-one-custom-colors.php'; new Twenty_Twenty_One_Custom_Colors(); // Enhance the theme by hooking into WordPress. require get_template_directory() . '/inc/template-functions.php'; // Menu functions and filters. require get_template_directory() . '/inc/menu-functions.php'; // Custom template tags for the theme. require get_template_directory() . '/inc/template-tags.php'; // Customizer additions. require get_template_directory() . '/classes/class-twenty-twenty-one-customize.php'; new Twenty_Twenty_One_Customize(); // Block Patterns. require get_template_directory() . '/inc/block-patterns.php'; // Block Styles. require get_template_directory() . '/inc/block-styles.php'; // Dark Mode. require_once get_template_directory() . '/classes/class-twenty-twenty-one-dark-mode.php'; new Twenty_Twenty_One_Dark_Mode(); /** * Enqueue scripts for the customizer preview. * * @since 1.0.0 * * @return void */ function twentytwentyone_customize_preview_init() { wp_enqueue_script( 'twentytwentyone-customize-helpers', get_theme_file_uri( '/assets/js/customize-helpers.js' ), array(), wp_get_theme()->get( 'Version' ), true ); wp_enqueue_script( 'twentytwentyone-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview', 'customize-selective-refresh', 'jquery', 'twentytwentyone-customize-helpers' ), wp_get_theme()->get( 'Version' ), true ); } add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' ); /** * Enqueue scripts for the customizer. * * @since 1.0.0 * * @return void */ function twentytwentyone_customize_controls_enqueue_scripts() { wp_enqueue_script( 'twentytwentyone-customize-helpers', get_theme_file_uri( '/assets/js/customize-helpers.js' ), array(), wp_get_theme()->get( 'Version' ), true ); } add_action( 'customize_controls_enqueue_scripts', 'twentytwentyone_customize_controls_enqueue_scripts' ); /** * Calculate classes for the main <html> element. * * @since 1.0.0 * * @return void */ function twentytwentyone_the_html_classes() { $classes = apply_filters( 'twentytwentyone_html_classes', '' ); if ( ! $classes ) { return; } echo 'class="' . esc_attr( $classes ) . '"'; } /** * Add "is-IE" class to body if the user is on Internet Explorer. * * @since 1.0.0 * * @return void */ function twentytwentyone_add_ie_class() { ?> <script> if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) { document.body.classList.add( 'is-IE' ); } </script> <?php } add_action( 'wp_footer', 'twentytwentyone_add_ie_class' ); search.php 0000644 00000003137 15252513625 0006534 0 ustar 00 <?php /** * The template for displaying search results pages * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ get_header(); if ( have_posts() ) { ?> <header class="page-header alignwide"> <h1 class="page-title"> <?php printf( /* translators: %s: search term. */ esc_html__( 'Results for "%s"', 'twentytwentyone' ), '<span class="page-description search-term">' . esc_html( get_search_query() ) . '</span>' ); ?> </h1> </header><!-- .page-header --> <div class="search-result-count default-max-width"> <?php printf( esc_html( /* translators: %d: the number of search results. */ _n( 'We found %d result for your search.', 'We found %d results for your search.', (int) $wp_query->found_posts, 'twentytwentyone' ) ), (int) $wp_query->found_posts ); ?> </div><!-- .search-result-count --> <?php // Start the Loop. while ( have_posts() ) { the_post(); /* * Include the Post-Format-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ get_template_part( 'template-parts/content/content-excerpt', get_post_format() ); } // End the loop. // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); // If no content, include the "No posts found" template. } else { get_template_part( 'template-parts/content/content-none' ); } get_footer(); classes/class-twenty-twenty-one-customize.php 0000644 00000011541 15252513625 0015506 0 ustar 00 <?php /** * Customizer settings for this theme. * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) { /** * Customizer Settings. * * @since 1.0.0 */ class Twenty_Twenty_One_Customize { /** * Constructor. Instantiate the object. * * @access public * * @since 1.0.0 */ public function __construct() { add_action( 'customize_register', array( $this, 'register' ) ); } /** * Register customizer options. * * @access public * * @since 1.0.0 * * @param WP_Customize_Manager $wp_customize Theme Customizer object. * * @return void */ public function register( $wp_customize ) { // Change site-title & description to postMessage. $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; // @phpstan-ignore-line. Assume that this setting exists. $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; // @phpstan-ignore-line. Assume that this setting exists. // Add partial for blogname. $wp_customize->selective_refresh->add_partial( 'blogname', array( 'selector' => '.site-title', 'render_callback' => array( $this, 'partial_blogname' ), ) ); // Add partial for blogdescription. $wp_customize->selective_refresh->add_partial( 'blogdescription', array( 'selector' => '.site-description', 'render_callback' => array( $this, 'partial_blogdescription' ), ) ); // Add "display_title_and_tagline" setting for displaying the site-title & tagline. $wp_customize->add_setting( 'display_title_and_tagline', array( 'capability' => 'edit_theme_options', 'default' => true, 'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ), ) ); // Add control for the "display_title_and_tagline" setting. $wp_customize->add_control( 'display_title_and_tagline', array( 'type' => 'checkbox', 'section' => 'title_tagline', 'label' => esc_html__( 'Display Site Title & Tagline', 'twentytwentyone' ), ) ); /** * Add excerpt or full text selector to customizer */ $wp_customize->add_section( 'excerpt_settings', array( 'title' => esc_html__( 'Excerpt Settings', 'twentytwentyone' ), 'priority' => 120, ) ); $wp_customize->add_setting( 'display_excerpt_or_full_post', array( 'capability' => 'edit_theme_options', 'default' => 'excerpt', 'sanitize_callback' => function( $value ) { return 'excerpt' === $value || 'full' === $value ? $value : 'excerpt'; }, ) ); $wp_customize->add_control( 'display_excerpt_or_full_post', array( 'type' => 'radio', 'section' => 'excerpt_settings', 'label' => esc_html__( 'On Archive Pages, posts show:', 'twentytwentyone' ), 'choices' => array( 'excerpt' => esc_html__( 'Summary', 'twentytwentyone' ), 'full' => esc_html__( 'Full text', 'twentytwentyone' ), ), ) ); // Background color. // Include the custom control class. include_once get_theme_file_path( 'classes/class-twenty-twenty-one-customize-color-control.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound // Register the custom control. $wp_customize->register_control_type( 'Twenty_Twenty_One_Customize_Color_Control' ); // Get the palette from theme-supports. $palette = get_theme_support( 'editor-color-palette' ); // Build the colors array from theme-support. $colors = array(); if ( isset( $palette[0] ) && is_array( $palette[0] ) ) { foreach ( $palette[0] as $palette_color ) { $colors[] = $palette_color['color']; } } // Add the control. Overrides the default background-color control. $wp_customize->add_control( new Twenty_Twenty_One_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => esc_html_x( 'Background color', 'Customizer control', 'twentytwentyone' ), 'section' => 'colors', 'palette' => $colors, ) ) ); } /** * Sanitize boolean for checkbox. * * @access public * * @since 1.0.0 * * @param bool $checked Whether or not a box is checked. * * @return bool */ public static function sanitize_checkbox( $checked = null ) { return (bool) isset( $checked ) && true === $checked; } /** * Render the site title for the selective refresh partial. * * @access public * * @since 1.0.0 * * @return void */ public function partial_blogname() { bloginfo( 'name' ); } /** * Render the site tagline for the selective refresh partial. * * @access public * * @since 1.0.0 * * @return void */ public function partial_blogdescription() { bloginfo( 'description' ); } } } classes/class-twenty-twenty-one-svg-icons.php 0000644 00000147242 15252513625 0015404 0 ustar 00 <?php /** * SVG Icons class * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ /** * This class is in charge of displaying SVG icons across the site. * * Place each <svg> source on its own array key, without adding either * the `width` or `height` attributes, since these are added dynamically, * before rendering the SVG code. * * All icons are assumed to have equal width and height, hence the option * to only specify a `$size` parameter in the svg methods. * * @since 1.0.0 */ class Twenty_Twenty_One_SVG_Icons { /** * User Interface icons – svg sources. * * @access protected * * @since 1.0.0 * * @var array */ protected static $icons = array( 'arrow_right' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m4 13v-2h12l-4-4 1-2 7 7-7 7-1-2 4-4z" fill="currentColor"/></svg>', 'arrow_left' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 13v-2H8l4-4-1-2-7 7 7 7 1-2-4-4z" fill="currentColor"/></svg>', 'close' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.9394L5.53033 4.46973L4.46967 5.53039L10.9393 12.0001L4.46967 18.4697L5.53033 19.5304L12 13.0607L18.4697 19.5304L19.5303 18.4697L13.0607 12.0001L19.5303 5.53039L18.4697 4.46973L12 10.9394Z" fill="currentColor"/></svg>', 'menu' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 6H19.5V7.5H4.5V6ZM4.5 12H19.5V13.5H4.5V12ZM19.5 18H4.5V19.5H19.5V18Z" fill="currentColor"/></svg>', 'plus' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"/></svg>', 'minus' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"/></svg>', ); /** * Social Icons – svg sources. * * @access protected * * @since 1.0.0 * * @var array */ protected static $social_icons = array( '500px' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M6.94026,15.1412c.00437.01213.108.29862.168.44064a6.55008,6.55008,0,1,0,6.03191-9.09557,6.68654,6.68654,0,0,0-2.58357.51467A8.53914,8.53914,0,0,0,8.21268,8.61344L8.209,8.61725V3.22948l9.0504-.00008c.32934-.0036.32934-.46353.32934-.61466s0-.61091-.33035-.61467L7.47248,2a.43.43,0,0,0-.43131.42692v7.58355c0,.24466.30476.42131.58793.4819.553.11812.68074-.05864.81617-.2457l.018-.02481A10.52673,10.52673,0,0,1,9.32258,9.258a5.35268,5.35268,0,1,1,7.58985,7.54976,5.417,5.417,0,0,1-3.80867,1.56365,5.17483,5.17483,0,0,1-2.69822-.74478l.00342-4.61111a2.79372,2.79372,0,0,1,.71372-1.78792,2.61611,2.61611,0,0,1,1.98282-.89477,2.75683,2.75683,0,0,1,1.95525.79477,2.66867,2.66867,0,0,1,.79656,1.909,2.724,2.724,0,0,1-2.75849,2.748,4.94651,4.94651,0,0,1-.86254-.13719c-.31234-.093-.44519.34058-.48892.48349-.16811.54966.08453.65862.13687.67489a3.75751,3.75751,0,0,0,1.25234.18375,3.94634,3.94634,0,1,0-2.82444-6.742,3.67478,3.67478,0,0,0-1.13028,2.584l-.00041.02323c-.0035.11667-.00579,2.881-.00644,3.78811l-.00407-.00451a6.18521,6.18521,0,0,1-1.0851-1.86092c-.10544-.27856-.34358-.22925-.66857-.12917-.14192.04372-.57386.17677-.47833.489Zm4.65165-1.08338a.51346.51346,0,0,0,.19513.31818l.02276.022a.52945.52945,0,0,0,.3517.18416.24242.24242,0,0,0,.16577-.0611c.05473-.05082.67382-.67812.73287-.738l.69041.68819a.28978.28978,0,0,0,.21437.11032.53239.53239,0,0,0,.35708-.19486c.29792-.30419.14885-.46821.07676-.54751l-.69954-.69975.72952-.73469c.16-.17311.01874-.35708-.12218-.498-.20461-.20461-.402-.25742-.52855-.14083l-.7254.72665-.73354-.73375a.20128.20128,0,0,0-.14179-.05695.54135.54135,0,0,0-.34379.19648c-.22561.22555-.274.38149-.15656.5059l.73374.7315-.72942.73072A.26589.26589,0,0,0,11.59191,14.05782Zm1.59866-9.915A8.86081,8.86081,0,0,0,9.854,4.776a.26169.26169,0,0,0-.16938.22759.92978.92978,0,0,0,.08619.42094c.05682.14524.20779.531.50006.41955a8.40969,8.40969,0,0,1,2.91968-.55484,7.87875,7.87875,0,0,1,3.086.62286,8.61817,8.61817,0,0,1,2.30562,1.49315.2781.2781,0,0,0,.18318.07586c.15529,0,.30425-.15253.43167-.29551.21268-.23861.35873-.4369.1492-.63538a8.50425,8.50425,0,0,0-2.62312-1.694A9.0177,9.0177,0,0,0,13.19058,4.14283ZM19.50945,18.6236h0a.93171.93171,0,0,0-.36642-.25406.26589.26589,0,0,0-.27613.06613l-.06943.06929A7.90606,7.90606,0,0,1,7.60639,18.505a7.57284,7.57284,0,0,1-1.696-2.51537,8.58715,8.58715,0,0,1-.5147-1.77754l-.00871-.04864c-.04939-.25873-.28755-.27684-.62981-.22448-.14234.02178-.5755.088-.53426.39969l.001.00712a9.08807,9.08807,0,0,0,15.406,4.99094c.00193-.00192.04753-.04718.0725-.07436C19.79425,19.16234,19.87422,18.98728,19.50945,18.6236Z"></path></svg>', 'amazon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M13.582,8.182C11.934,8.367,9.78,8.49,8.238,9.166c-1.781,0.769-3.03,2.337-3.03,4.644 c0,2.953,1.86,4.429,4.253,4.429c2.02,0,3.125-0.477,4.685-2.065c0.516,0.747,0.685,1.109,1.629,1.894 c0.212,0.114,0.483,0.103,0.672-0.066l0.006,0.006c0.567-0.505,1.599-1.401,2.18-1.888c0.231-0.188,0.19-0.496,0.009-0.754 c-0.52-0.718-1.072-1.303-1.072-2.634V8.305c0-1.876,0.133-3.599-1.249-4.891C15.23,2.369,13.422,2,12.04,2 C9.336,2,6.318,3.01,5.686,6.351C5.618,6.706,5.877,6.893,6.109,6.945l2.754,0.298C9.121,7.23,9.308,6.977,9.357,6.72 c0.236-1.151,1.2-1.706,2.284-1.706c0.584,0,1.249,0.215,1.595,0.738c0.398,0.584,0.346,1.384,0.346,2.061V8.182z M13.049,14.088 c-0.451,0.8-1.169,1.291-1.967,1.291c-1.09,0-1.728-0.83-1.728-2.061c0-2.42,2.171-2.86,4.227-2.86v0.615 C13.582,12.181,13.608,13.104,13.049,14.088z M20.683,19.339C18.329,21.076,14.917,22,11.979,22c-4.118,0-7.826-1.522-10.632-4.057 c-0.22-0.199-0.024-0.471,0.241-0.317c3.027,1.762,6.771,2.823,10.639,2.823c2.608,0,5.476-0.541,8.115-1.66 C20.739,18.62,21.072,19.051,20.683,19.339z M21.336,21.043c-0.194,0.163-0.379,0.076-0.293-0.139 c0.284-0.71,0.92-2.298,0.619-2.684c-0.301-0.386-1.99-0.183-2.749-0.092c-0.23,0.027-0.266-0.173-0.059-0.319 c1.348-0.946,3.555-0.673,3.811-0.356C22.925,17.773,22.599,19.986,21.336,21.043z"></path></svg>', 'bandcamp' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M15.27 17.289 3 17.289 8.73 6.711 21 6.711 15.27 17.289"></path></svg>', 'behance' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7.799,5.698c0.589,0,1.12,0.051,1.606,0.156c0.482,0.102,0.894,0.273,1.241,0.507c0.344,0.235,0.612,0.546,0.804,0.938 c0.188,0.387,0.281,0.871,0.281,1.443c0,0.619-0.141,1.137-0.421,1.551c-0.284,0.413-0.7,0.751-1.255,1.014 c0.756,0.218,1.317,0.601,1.689,1.146c0.374,0.549,0.557,1.205,0.557,1.975c0,0.623-0.12,1.161-0.359,1.612 c-0.241,0.457-0.569,0.828-0.973,1.114c-0.408,0.288-0.876,0.5-1.399,0.637C9.052,17.931,8.514,18,7.963,18H2V5.698H7.799 M7.449,10.668c0.481,0,0.878-0.114,1.192-0.345c0.311-0.228,0.463-0.603,0.463-1.119c0-0.286-0.051-0.523-0.152-0.707 C8.848,8.315,8.711,8.171,8.536,8.07C8.362,7.966,8.166,7.894,7.94,7.854c-0.224-0.044-0.457-0.06-0.697-0.06H4.709v2.874H7.449z M7.6,15.905c0.267,0,0.521-0.024,0.759-0.077c0.243-0.053,0.457-0.137,0.637-0.261c0.182-0.12,0.332-0.283,0.441-0.491 C9.547,14.87,9.6,14.602,9.6,14.278c0-0.633-0.18-1.084-0.533-1.357c-0.356-0.27-0.83-0.404-1.413-0.404H4.709v3.388L7.6,15.905z M16.162,15.864c0.367,0.358,0.897,0.538,1.583,0.538c0.493,0,0.92-0.125,1.277-0.374c0.354-0.248,0.571-0.514,0.654-0.79h2.155 c-0.347,1.072-0.872,1.838-1.589,2.299C19.534,18,18.67,18.23,17.662,18.23c-0.701,0-1.332-0.113-1.899-0.337 c-0.567-0.227-1.041-0.544-1.439-0.958c-0.389-0.415-0.689-0.907-0.904-1.484c-0.213-0.574-0.32-1.21-0.32-1.899 c0-0.666,0.11-1.288,0.329-1.863c0.222-0.577,0.529-1.075,0.933-1.492c0.406-0.42,0.885-0.751,1.444-0.994 c0.558-0.241,1.175-0.363,1.857-0.363c0.754,0,1.414,0.145,1.98,0.44c0.563,0.291,1.026,0.686,1.389,1.181 c0.363,0.493,0.622,1.057,0.783,1.69c0.16,0.632,0.217,1.292,0.171,1.983h-6.428C15.557,14.84,15.795,15.506,16.162,15.864 M18.973,11.184c-0.291-0.321-0.783-0.496-1.384-0.496c-0.39,0-0.714,0.066-0.973,0.2c-0.254,0.132-0.461,0.297-0.621,0.491 c-0.157,0.197-0.265,0.405-0.328,0.628c-0.063,0.217-0.101,0.413-0.111,0.587h3.98C19.478,11.969,19.265,11.509,18.973,11.184z M15.057,7.738h4.985V6.524h-4.985L15.057,7.738z"></path></svg>', 'codepen' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22.016,8.84c-0.002-0.013-0.005-0.025-0.007-0.037c-0.005-0.025-0.008-0.048-0.015-0.072 c-0.003-0.015-0.01-0.028-0.013-0.042c-0.008-0.02-0.015-0.04-0.023-0.062c-0.007-0.015-0.013-0.028-0.02-0.042 c-0.008-0.02-0.018-0.037-0.03-0.057c-0.007-0.013-0.017-0.027-0.025-0.038c-0.012-0.018-0.023-0.035-0.035-0.052 c-0.01-0.013-0.02-0.025-0.03-0.037c-0.015-0.017-0.028-0.032-0.043-0.045c-0.01-0.012-0.022-0.023-0.035-0.035 c-0.015-0.015-0.032-0.028-0.048-0.04c-0.012-0.01-0.025-0.02-0.037-0.03c-0.005-0.003-0.01-0.008-0.015-0.012l-9.161-6.096 c-0.289-0.192-0.666-0.192-0.955,0L2.359,8.237C2.354,8.24,2.349,8.245,2.344,8.249L2.306,8.277 c-0.017,0.013-0.033,0.027-0.048,0.04C2.246,8.331,2.234,8.342,2.222,8.352c-0.015,0.015-0.028,0.03-0.042,0.047 c-0.012,0.013-0.022,0.023-0.03,0.037C2.139,8.453,2.125,8.471,2.115,8.488C2.107,8.501,2.099,8.514,2.09,8.526 C2.079,8.548,2.069,8.565,2.06,8.585C2.054,8.6,2.047,8.613,2.04,8.626C2.032,8.648,2.025,8.67,2.019,8.69 c-0.005,0.013-0.01,0.027-0.013,0.042C1.999,8.755,1.995,8.778,1.99,8.803C1.989,8.817,1.985,8.828,1.984,8.84 C1.978,8.879,1.975,8.915,1.975,8.954v6.093c0,0.037,0.003,0.075,0.008,0.112c0.002,0.012,0.005,0.025,0.007,0.038 c0.005,0.023,0.008,0.047,0.015,0.072c0.003,0.015,0.008,0.028,0.013,0.04c0.007,0.022,0.013,0.042,0.022,0.063 c0.007,0.015,0.013,0.028,0.02,0.04c0.008,0.02,0.018,0.038,0.03,0.058c0.007,0.013,0.015,0.027,0.025,0.038 c0.012,0.018,0.023,0.035,0.035,0.052c0.01,0.013,0.02,0.025,0.03,0.037c0.013,0.015,0.028,0.032,0.042,0.045 c0.012,0.012,0.023,0.023,0.035,0.035c0.015,0.013,0.032,0.028,0.048,0.04l0.038,0.03c0.005,0.003,0.01,0.007,0.013,0.01 l9.163,6.095C11.668,21.953,11.833,22,12,22c0.167,0,0.332-0.047,0.478-0.144l9.163-6.095l0.015-0.01 c0.013-0.01,0.027-0.02,0.037-0.03c0.018-0.013,0.035-0.028,0.048-0.04c0.013-0.012,0.025-0.023,0.035-0.035 c0.017-0.015,0.03-0.032,0.043-0.045c0.01-0.013,0.02-0.025,0.03-0.037c0.013-0.018,0.025-0.035,0.035-0.052 c0.008-0.013,0.018-0.027,0.025-0.038c0.012-0.02,0.022-0.038,0.03-0.058c0.007-0.013,0.013-0.027,0.02-0.04 c0.008-0.022,0.015-0.042,0.023-0.063c0.003-0.013,0.01-0.027,0.013-0.04c0.007-0.025,0.01-0.048,0.015-0.072 c0.002-0.013,0.005-0.027,0.007-0.037c0.003-0.042,0.007-0.079,0.007-0.117V8.954C22.025,8.915,22.022,8.879,22.016,8.84z M12.862,4.464l6.751,4.49l-3.016,2.013l-3.735-2.492V4.464z M11.138,4.464v4.009l-3.735,2.494L4.389,8.954L11.138,4.464z M3.699,10.562L5.853,12l-2.155,1.438V10.562z M11.138,19.536l-6.749-4.491l3.015-2.011l3.735,2.492V19.536z M12,14.035L8.953,12 L12,9.966L15.047,12L12,14.035z M12.862,19.536v-4.009l3.735-2.492l3.016,2.011L12.862,19.536z M20.303,13.438L18.147,12 l2.156-1.438L20.303,13.438z"></path></svg>', 'deviantart' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 18.19 5.636 18.19 2 18.188 2 14.553 2 14.19 2.366 12.474 5.636 11.935 6 5.81 6 5.81 10.994 9.177 10.994 9.477 11.357 5.81 18.363 5.81 22 5.811 22 9.447 22 9.81 21.634 11.526 18.364 12.065 18 18.19 18 18.19 13.006 14.823 13.006 14.523 12.641 18.19 5.636z"></path></svg>', 'dribbble' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,22C6.486,22,2,17.514,2,12S6.486,2,12,2c5.514,0,10,4.486,10,10S17.514,22,12,22z M20.434,13.369 c-0.292-0.092-2.644-0.794-5.32-0.365c1.117,3.07,1.572,5.57,1.659,6.09C18.689,17.798,20.053,15.745,20.434,13.369z M15.336,19.876c-0.127-0.749-0.623-3.361-1.822-6.477c-0.019,0.006-0.038,0.013-0.056,0.019c-4.818,1.679-6.547,5.02-6.701,5.334 c1.448,1.129,3.268,1.803,5.243,1.803C13.183,20.555,14.311,20.313,15.336,19.876z M5.654,17.724 c0.193-0.331,2.538-4.213,6.943-5.637c0.111-0.036,0.224-0.07,0.337-0.102c-0.214-0.485-0.448-0.971-0.692-1.45 c-4.266,1.277-8.405,1.223-8.778,1.216c-0.003,0.087-0.004,0.174-0.004,0.261C3.458,14.207,4.29,16.21,5.654,17.724z M3.639,10.264 c0.382,0.005,3.901,0.02,7.897-1.041c-1.415-2.516-2.942-4.631-3.167-4.94C5.979,5.41,4.193,7.613,3.639,10.264z M9.998,3.709 c0.236,0.316,1.787,2.429,3.187,5c3.037-1.138,4.323-2.867,4.477-3.085C16.154,4.286,14.17,3.471,12,3.471 C11.311,3.471,10.641,3.554,9.998,3.709z M18.612,6.612C18.432,6.855,17,8.69,13.842,9.979c0.199,0.407,0.389,0.821,0.567,1.237 c0.063,0.148,0.124,0.295,0.184,0.441c2.842-0.357,5.666,0.215,5.948,0.275C20.522,9.916,19.801,8.065,18.612,6.612z"></path></svg>', 'dropbox' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,6.134L6.069,9.797L2,6.54l5.883-3.843L12,6.134z M2,13.054l5.883,3.843L12,13.459L6.069,9.797L2,13.054z M12,13.459 l4.116,3.439L22,13.054l-4.069-3.257L12,13.459z M22,6.54l-5.884-3.843L12,6.134l5.931,3.663L22,6.54z M12.011,14.2l-4.129,3.426 l-1.767-1.153v1.291l5.896,3.539l5.897-3.539v-1.291l-1.769,1.153L12.011,14.2z"></path></svg>', 'etsy' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M9.16033,4.038c0-.27174.02717-.43478.48913-.43478h6.22283c1.087,0,1.68478.92391,2.11957,2.663l.35326,1.38587h1.05978C19.59511,3.712,19.75815,2,19.75815,2s-2.663.29891-4.23913.29891h-7.962L3.29076,2.163v1.1413L4.731,3.57609c1.00543.19022,1.25.40761,1.33152,1.33152,0,0,.08152,2.71739.08152,7.20109s-.08152,7.17391-.08152,7.17391c0,.81522-.32609,1.11413-1.33152,1.30435l-1.44022.27174V22l4.2663-.13587h7.11957c1.60326,0,5.32609.13587,5.32609.13587.08152-.97826.625-5.40761.70652-5.89674H19.7038L18.644,18.52174c-.84239,1.90217-2.06522,2.038-3.42391,2.038H11.1712c-1.3587,0-2.01087-.54348-2.01087-1.712V12.65217s3.0163,0,3.99457.08152c.76087.05435,1.22283.27174,1.46739,1.33152l.32609,1.413h1.16848l-.08152-3.55978.163-3.587H15.02989l-.38043,1.57609c-.24457,1.03261-.40761,1.22283-1.46739,1.33152-1.38587.13587-4.02174.1087-4.02174.1087Z"></path></svg>', 'facebook' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg>', 'feed' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2,8.667V12c5.515,0,10,4.485,10,10h3.333C15.333,14.637,9.363,8.667,2,8.667z M2,2v3.333 c9.19,0,16.667,7.477,16.667,16.667H22C22,10.955,13.045,2,2,2z M4.5,17C3.118,17,2,18.12,2,19.5S3.118,22,4.5,22S7,20.88,7,19.5 S5.882,17,4.5,17z"></path></svg>', 'flickr' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M6.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5S9.25,7,6.5,7z M17.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5 S20.25,7,17.5,7z"></path></svg>', 'foursquare' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M17.573,2c0,0-9.197,0-10.668,0S5,3.107,5,3.805s0,16.948,0,16.948c0,0.785,0.422,1.077,0.66,1.172 c0.238,0.097,0.892,0.177,1.285-0.275c0,0,5.035-5.843,5.122-5.93c0.132-0.132,0.132-0.132,0.262-0.132h3.26 c1.368,0,1.588-0.977,1.732-1.552c0.078-0.318,0.692-3.428,1.225-6.122l0.675-3.368C19.56,2.893,19.14,2,17.573,2z M16.495,7.22 c-0.053,0.252-0.372,0.518-0.665,0.518c-0.293,0-4.157,0-4.157,0c-0.467,0-0.802,0.318-0.802,0.787v0.508 c0,0.467,0.337,0.798,0.805,0.798c0,0,3.197,0,3.528,0s0.655,0.362,0.583,0.715c-0.072,0.353-0.407,2.102-0.448,2.295 c-0.04,0.193-0.262,0.523-0.655,0.523c-0.33,0-2.88,0-2.88,0c-0.523,0-0.683,0.068-1.033,0.503 c-0.35,0.437-3.505,4.223-3.505,4.223c-0.032,0.035-0.063,0.027-0.063-0.015V4.852c0-0.298,0.26-0.648,0.648-0.648 c0,0,8.228,0,8.562,0c0.315,0,0.61,0.297,0.528,0.683L16.495,7.22z"></path></svg>', 'goodreads' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M17.3,17.5c-0.2,0.8-0.5,1.4-1,1.9c-0.4,0.5-1,0.9-1.7,1.2C13.9,20.9,13.1,21,12,21c-0.6,0-1.3-0.1-1.9-0.2 c-0.6-0.1-1.1-0.4-1.6-0.7c-0.5-0.3-0.9-0.7-1.2-1.2c-0.3-0.5-0.5-1.1-0.5-1.7h1.5c0.1,0.5,0.2,0.9,0.5,1.2 c0.2,0.3,0.5,0.6,0.9,0.8c0.3,0.2,0.7,0.3,1.1,0.4c0.4,0.1,0.8,0.1,1.2,0.1c1.4,0,2.5-0.4,3.1-1.2c0.6-0.8,1-2,1-3.5v-1.7h0 c-0.4,0.8-0.9,1.4-1.6,1.9c-0.7,0.5-1.5,0.7-2.4,0.7c-1,0-1.9-0.2-2.6-0.5C8.7,15,8.1,14.5,7.7,14c-0.5-0.6-0.8-1.3-1-2.1 c-0.2-0.8-0.3-1.6-0.3-2.5c0-0.9,0.1-1.7,0.4-2.5c0.3-0.8,0.6-1.5,1.1-2c0.5-0.6,1.1-1,1.8-1.4C10.3,3.2,11.1,3,12,3 c0.5,0,0.9,0.1,1.3,0.2c0.4,0.1,0.8,0.3,1.1,0.5c0.3,0.2,0.6,0.5,0.9,0.8c0.3,0.3,0.5,0.6,0.6,1h0V3.4h1.5V15 C17.6,15.9,17.5,16.7,17.3,17.5z M13.8,14.1c0.5-0.3,0.9-0.7,1.3-1.1c0.3-0.5,0.6-1,0.8-1.6c0.2-0.6,0.3-1.2,0.3-1.9 c0-0.6-0.1-1.2-0.2-1.9c-0.1-0.6-0.4-1.2-0.7-1.7c-0.3-0.5-0.7-0.9-1.3-1.2c-0.5-0.3-1.1-0.5-1.9-0.5s-1.4,0.2-1.9,0.5 c-0.5,0.3-1,0.7-1.3,1.2C8.5,6.4,8.3,7,8.1,7.6C8,8.2,7.9,8.9,7.9,9.5c0,0.6,0.1,1.3,0.2,1.9C8.3,12,8.6,12.5,8.9,13 c0.3,0.5,0.8,0.8,1.3,1.1c0.5,0.3,1.1,0.4,1.9,0.4C12.7,14.5,13.3,14.4,13.8,14.1z"></path></svg>', 'google' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.02,10.18v3.72v0.01h5.51c-0.26,1.57-1.67,4.22-5.5,4.22c-3.31,0-6.01-2.75-6.01-6.12s2.7-6.12,6.01-6.12 c1.87,0,3.13,0.8,3.85,1.48l2.84-2.76C16.99,2.99,14.73,2,12.03,2c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.77,0,9.6-4.06,9.6-9.77 c0-0.83-0.11-1.42-0.25-2.05H12.02z"></path></svg>', 'github' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"></path></svg>', 'instagram' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg>', 'lastfm' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M10.5002,0 C4.7006,0 0,4.70109753 0,10.4998496 C0,16.2989526 4.7006,21 10.5002,21 C16.299,21 21,16.2989526 21,10.4998496 C21,4.70109753 16.299,0 10.5002,0 Z M14.69735,14.7204413 C13.3164,14.7151781 12.4346,14.0870017 11.83445,12.6859357 L11.6816001,12.3451305 L10.35405,9.31011397 C9.92709997,8.26875064 8.85260001,7.57120012 7.68010001,7.57120012 C6.06945001,7.57120012 4.75925001,8.88509738 4.75925001,10.5009524 C4.75925001,12.1164565 6.06945001,13.4303036 7.68010001,13.4303036 C8.77200001,13.4303036 9.76514999,12.827541 10.2719501,11.8567047 C10.2893,11.8235214 10.3239,11.8019673 10.36305,11.8038219 C10.4007,11.8053759 10.43535,11.8287847 10.4504,11.8631709 L10.98655,13.1045863 C11.0016,13.1389726 10.9956,13.17782 10.97225,13.2068931 C10.1605001,14.1995341 8.96020001,14.7683115 7.68010001,14.7683115 C5.33305,14.7683115 3.42340001,12.8535563 3.42340001,10.5009524 C3.42340001,8.14679459 5.33300001,6.23203946 7.68010001,6.23203946 C9.45720002,6.23203946 10.8909,7.19074535 11.6138,8.86359341 C11.6205501,8.88018505 12.3412,10.5707777 12.97445,12.0190621 C13.34865,12.8739575 13.64615,13.3959676 14.6288,13.4291508 C15.5663001,13.4612814 16.25375,12.9121534 16.25375,12.1484869 C16.25375,11.4691321 15.8320501,11.3003585 14.8803,10.98216 C13.2365,10.4397989 12.34495,9.88605929 12.34495,8.51817658 C12.34495,7.1809207 13.26665,6.31615054 14.692,6.31615054 C15.62875,6.31615054 16.3155,6.7286858 16.79215,7.5768142 C16.80495,7.60062396 16.8079001,7.62814302 16.8004001,7.65420843 C16.7929,7.68027384 16.7748,7.70212868 16.7507001,7.713808 L15.86145,8.16900031 C15.8178001,8.19200805 15.7643,8.17807308 15.73565,8.13847371 C15.43295,7.71345711 15.0956,7.52513451 14.6423,7.52513451 C14.05125,7.52513451 13.6220001,7.92899802 13.6220001,8.48649708 C13.6220001,9.17382194 14.1529001,9.34144259 15.0339,9.61923972 C15.14915,9.65578139 15.26955,9.69397731 15.39385,9.73432853 C16.7763,10.1865133 17.57675,10.7311301 17.57675,12.1836251 C17.57685,13.629654 16.3389,14.7204413 14.69735,14.7204413 Z"></path></svg>', 'linkedin' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg>', 'mail' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20,4H4C2.895,4,2,4.895,2,6v12c0,1.105,0.895,2,2,2h16c1.105,0,2-0.895,2-2V6C22,4.895,21.105,4,20,4z M20,8.236l-8,4.882 L4,8.236V6h16V8.236z"></path></svg>', 'mastodon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z"/></svg>', 'medium' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20.962,7.257l-5.457,8.867l-3.923-6.375l3.126-5.08c0.112-0.182,0.319-0.286,0.527-0.286c0.05,0,0.1,0.008,0.149,0.02 c0.039,0.01,0.078,0.023,0.114,0.041l5.43,2.715l0.006,0.003c0.004,0.002,0.007,0.006,0.011,0.008 C20.971,7.191,20.98,7.227,20.962,7.257z M9.86,8.592v5.783l5.14,2.57L9.86,8.592z M15.772,17.331l4.231,2.115 C20.554,19.721,21,19.529,21,19.016V8.835L15.772,17.331z M8.968,7.178L3.665,4.527C3.569,4.479,3.478,4.456,3.395,4.456 C3.163,4.456,3,4.636,3,4.938v11.45c0,0.306,0.224,0.669,0.498,0.806l4.671,2.335c0.12,0.06,0.234,0.088,0.337,0.088 c0.29,0,0.494-0.225,0.494-0.602V7.231C9,7.208,8.988,7.188,8.968,7.178z"></path></svg>', 'meetup' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M19.24775,14.722a3.57032,3.57032,0,0,1-2.94457,3.52073,3.61886,3.61886,0,0,1-.64652.05634c-.07314-.0008-.10187.02846-.12507.09547A2.38881,2.38881,0,0,1,13.49453,20.094a2.33092,2.33092,0,0,1-1.827-.50716.13635.13635,0,0,0-.19878-.00408,3.191,3.191,0,0,1-2.104.60248,3.26309,3.26309,0,0,1-3.00324-2.71993,2.19076,2.19076,0,0,1-.03512-.30865c-.00156-.08579-.03413-.1189-.11608-.13493a2.86421,2.86421,0,0,1-1.23189-.56111,2.945,2.945,0,0,1-1.166-2.05749,2.97484,2.97484,0,0,1,.87524-2.50774.112.112,0,0,0,.02091-.16107,2.7213,2.7213,0,0,1-.36648-1.48A2.81256,2.81256,0,0,1,6.57673,7.58838a.35764.35764,0,0,0,.28869-.22819,4.2208,4.2208,0,0,1,6.02892-1.90111.25161.25161,0,0,0,.22023.0243,3.65608,3.65608,0,0,1,3.76031.90678A3.57244,3.57244,0,0,1,17.95918,8.626a2.97339,2.97339,0,0,1,.01829.57356.10637.10637,0,0,0,.0853.12792,1.97669,1.97669,0,0,1,1.27939,1.33733,2.00266,2.00266,0,0,1-.57112,2.12652c-.05284.05166-.04168.08328-.01173.13489A3.51189,3.51189,0,0,1,19.24775,14.722Zm-6.35959-.27836a1.6984,1.6984,0,0,0,1.14556,1.61113,3.82039,3.82039,0,0,0,1.036.17935,1.46888,1.46888,0,0,0,.73509-.12255.44082.44082,0,0,0,.26057-.44274.45312.45312,0,0,0-.29211-.43375.97191.97191,0,0,0-.20678-.063c-.21326-.03806-.42754-.0701-.63973-.11215a.54787.54787,0,0,1-.50172-.60926,2.75864,2.75864,0,0,1,.1773-.901c.1763-.535.414-1.045.64183-1.55913A12.686,12.686,0,0,0,15.85,10.47863a1.58461,1.58461,0,0,0,.04861-.87208,1.04531,1.04531,0,0,0-.85432-.83981,1.60658,1.60658,0,0,0-1.23654.16594.27593.27593,0,0,1-.36286-.03413c-.085-.0747-.16594-.15379-.24918-.23055a.98682.98682,0,0,0-1.33577-.04933,6.1468,6.1468,0,0,1-.4989.41615.47762.47762,0,0,1-.51535.03566c-.17448-.09307-.35512-.175-.53531-.25665a1.74949,1.74949,0,0,0-.56476-.2016,1.69943,1.69943,0,0,0-1.61654.91787,8.05815,8.05815,0,0,0-.32952.80126c-.45471,1.2557-.82507,2.53825-1.20838,3.81639a1.24151,1.24151,0,0,0,.51532,1.44389,1.42659,1.42659,0,0,0,1.22008.17166,1.09728,1.09728,0,0,0,.66994-.69764c.44145-1.04111.839-2.09989,1.25981-3.14926.11581-.28876.22792-.57874.35078-.86438a.44548.44548,0,0,1,.69189-.19539.50521.50521,0,0,1,.15044.43836,1.75625,1.75625,0,0,1-.14731.50453c-.27379.69219-.55265,1.38236-.82766,2.074a2.0836,2.0836,0,0,0-.14038.42876.50719.50719,0,0,0,.27082.57722.87236.87236,0,0,0,.66145.02739.99137.99137,0,0,0,.53406-.532q.61571-1.20914,1.228-2.42031.28423-.55863.57585-1.1133a.87189.87189,0,0,1,.29055-.35253.34987.34987,0,0,1,.37634-.01265.30291.30291,0,0,1,.12434.31459.56716.56716,0,0,1-.04655.1915c-.05318.12739-.10286.25669-.16183.38156-.34118.71775-.68754,1.43273-1.02568,2.152A2.00213,2.00213,0,0,0,12.88816,14.44366Zm4.78568,5.28972a.88573.88573,0,0,0-1.77139.00465.8857.8857,0,0,0,1.77139-.00465Zm-14.83838-7.296a.84329.84329,0,1,0,.00827-1.68655.8433.8433,0,0,0-.00827,1.68655Zm10.366-9.43673a.83506.83506,0,1,0-.0091,1.67.83505.83505,0,0,0,.0091-1.67Zm6.85014,5.22a.71651.71651,0,0,0-1.433.0093.71656.71656,0,0,0,1.433-.0093ZM5.37528,6.17908A.63823.63823,0,1,0,6.015,5.54483.62292.62292,0,0,0,5.37528,6.17908Zm6.68214,14.80843a.54949.54949,0,1,0-.55052.541A.54556.54556,0,0,0,12.05742,20.98752Zm8.53235-8.49689a.54777.54777,0,0,0-.54027.54023.53327.53327,0,0,0,.532.52293.51548.51548,0,0,0,.53272-.5237A.53187.53187,0,0,0,20.58977,12.49063ZM7.82846,2.4715a.44927.44927,0,1,0,.44484.44766A.43821.43821,0,0,0,7.82846,2.4715Zm13.775,7.60492a.41186.41186,0,0,0-.40065.39623.40178.40178,0,0,0,.40168.40168A.38994.38994,0,0,0,22,10.48172.39946.39946,0,0,0,21.60349,10.07642ZM5.79193,17.96207a.40469.40469,0,0,0-.397-.39646.399.399,0,0,0-.396.405.39234.39234,0,0,0,.39939.389A.39857.39857,0,0,0,5.79193,17.96207Z"></path></svg>', 'pinterest' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.289,2C6.617,2,3.606,5.648,3.606,9.622c0,1.846,1.025,4.146,2.666,4.878c0.25,0.111,0.381,0.063,0.439-0.169 c0.044-0.175,0.267-1.029,0.365-1.428c0.032-0.128,0.017-0.237-0.091-0.362C6.445,11.911,6.01,10.75,6.01,9.668 c0-2.777,2.194-5.464,5.933-5.464c3.23,0,5.49,2.108,5.49,5.122c0,3.407-1.794,5.768-4.13,5.768c-1.291,0-2.257-1.021-1.948-2.277 c0.372-1.495,1.089-3.112,1.089-4.191c0-0.967-0.542-1.775-1.663-1.775c-1.319,0-2.379,1.309-2.379,3.059 c0,1.115,0.394,1.869,0.394,1.869s-1.302,5.279-1.54,6.261c-0.405,1.666,0.053,4.368,0.094,4.604 c0.021,0.126,0.167,0.169,0.25,0.063c0.129-0.165,1.699-2.419,2.142-4.051c0.158-0.59,0.817-2.995,0.817-2.995 c0.43,0.784,1.681,1.446,3.013,1.446c3.963,0,6.822-3.494,6.822-7.833C20.394,5.112,16.849,2,12.289,2"></path></svg>', 'pocket' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M21.927,4.194C21.667,3.48,20.982,3,20.222,3h-0.01h-1.721H3.839C3.092,3,2.411,3.47,2.145,4.17 C2.066,4.378,2.026,4.594,2.026,4.814v6.035l0.069,1.2c0.29,2.73,1.707,5.115,3.899,6.778c0.039,0.03,0.079,0.059,0.119,0.089 l0.025,0.018c1.175,0.859,2.491,1.441,3.91,1.727c0.655,0.132,1.325,0.2,1.991,0.2c0.615,0,1.232-0.057,1.839-0.17 c0.073-0.014,0.145-0.028,0.219-0.044c0.02-0.004,0.042-0.012,0.064-0.023c1.359-0.297,2.621-0.864,3.753-1.691l0.025-0.018 c0.04-0.029,0.08-0.058,0.119-0.089c2.192-1.664,3.609-4.049,3.898-6.778l0.069-1.2V4.814C22.026,4.605,22,4.398,21.927,4.194z M17.692,10.481l-4.704,4.512c-0.266,0.254-0.608,0.382-0.949,0.382c-0.342,0-0.684-0.128-0.949-0.382l-4.705-4.512 C5.838,9.957,5.82,9.089,6.344,8.542c0.524-0.547,1.392-0.565,1.939-0.04l3.756,3.601l3.755-3.601 c0.547-0.524,1.415-0.506,1.939,0.04C18.256,9.089,18.238,9.956,17.692,10.481z"></path></svg>', 'reddit' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22,11.816c0-1.256-1.021-2.277-2.277-2.277c-0.593,0-1.122,0.24-1.526,0.614c-1.481-0.965-3.455-1.594-5.647-1.69 l1.171-3.702l3.18,0.748c0.008,1.028,0.846,1.862,1.876,1.862c1.035,0,1.877-0.842,1.877-1.878c0-1.035-0.842-1.877-1.877-1.877 c-0.769,0-1.431,0.466-1.72,1.13l-3.508-0.826c-0.203-0.047-0.399,0.067-0.46,0.261l-1.35,4.268 c-2.316,0.038-4.411,0.67-5.97,1.671C5.368,9.765,4.853,9.539,4.277,9.539C3.021,9.539,2,10.56,2,11.816 c0,0.814,0.433,1.523,1.078,1.925c-0.037,0.221-0.061,0.444-0.061,0.672c0,3.292,4.011,5.97,8.941,5.97s8.941-2.678,8.941-5.97 c0-0.214-0.02-0.424-0.053-0.632C21.533,13.39,22,12.661,22,11.816z M18.776,4.394c0.606,0,1.1,0.493,1.1,1.1s-0.493,1.1-1.1,1.1 s-1.1-0.494-1.1-1.1S18.169,4.394,18.776,4.394z M2.777,11.816c0-0.827,0.672-1.5,1.499-1.5c0.313,0,0.598,0.103,0.838,0.269 c-0.851,0.676-1.477,1.479-1.812,2.36C2.983,12.672,2.777,12.27,2.777,11.816z M11.959,19.606c-4.501,0-8.164-2.329-8.164-5.193 S7.457,9.22,11.959,9.22s8.164,2.329,8.164,5.193S16.46,19.606,11.959,19.606z M20.636,13.001c-0.326-0.89-0.948-1.701-1.797-2.384 c0.248-0.186,0.55-0.301,0.883-0.301c0.827,0,1.5,0.673,1.5,1.5C21.223,12.299,20.992,12.727,20.636,13.001z M8.996,14.704 c-0.76,0-1.397-0.616-1.397-1.376c0-0.76,0.637-1.397,1.397-1.397c0.76,0,1.376,0.637,1.376,1.397 C10.372,14.088,9.756,14.704,8.996,14.704z M16.401,13.328c0,0.76-0.616,1.376-1.376,1.376c-0.76,0-1.399-0.616-1.399-1.376 c0-0.76,0.639-1.397,1.399-1.397C15.785,11.931,16.401,12.568,16.401,13.328z M15.229,16.708c0.152,0.152,0.152,0.398,0,0.55 c-0.674,0.674-1.727,1.002-3.219,1.002c-0.004,0-0.007-0.002-0.011-0.002c-0.004,0-0.007,0.002-0.011,0.002 c-1.492,0-2.544-0.328-3.218-1.002c-0.152-0.152-0.152-0.398,0-0.55c0.152-0.152,0.399-0.151,0.55,0 c0.521,0.521,1.394,0.775,2.669,0.775c0.004,0,0.007,0.002,0.011,0.002c0.004,0,0.007-0.002,0.011-0.002 c1.275,0,2.148-0.253,2.669-0.775C14.831,16.556,15.078,16.556,15.229,16.708z"></path></svg>', 'skype' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M10.113,2.699c0.033-0.006,0.067-0.013,0.1-0.02c0.033,0.017,0.066,0.033,0.098,0.051L10.113,2.699z M2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223z M21.275,13.771 c0.007-0.035,0.011-0.071,0.018-0.106c-0.018-0.031-0.033-0.064-0.052-0.095L21.275,13.771z M13.563,21.199 c0.032,0.019,0.065,0.035,0.096,0.053c0.036-0.006,0.071-0.011,0.105-0.017L13.563,21.199z M22,16.386 c0,1.494-0.581,2.898-1.637,3.953c-1.056,1.057-2.459,1.637-3.953,1.637c-0.967,0-1.914-0.251-2.75-0.725 c0.036-0.006,0.071-0.011,0.105-0.017l-0.202-0.035c0.032,0.019,0.065,0.035,0.096,0.053c-0.543,0.096-1.099,0.147-1.654,0.147 c-1.275,0-2.512-0.25-3.676-0.743c-1.125-0.474-2.135-1.156-3.002-2.023c-0.867-0.867-1.548-1.877-2.023-3.002 c-0.493-1.164-0.743-2.401-0.743-3.676c0-0.546,0.049-1.093,0.142-1.628c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103C2.244,9.5,2,8.566,2,7.615c0-1.493,0.582-2.898,1.637-3.953 c1.056-1.056,2.46-1.638,3.953-1.638c0.915,0,1.818,0.228,2.622,0.655c-0.033,0.007-0.067,0.013-0.1,0.02l0.199,0.031 c-0.032-0.018-0.066-0.034-0.098-0.051c0.002,0,0.003-0.001,0.004-0.001c0.586-0.112,1.187-0.169,1.788-0.169 c1.275,0,2.512,0.249,3.676,0.742c1.124,0.476,2.135,1.156,3.002,2.024c0.868,0.867,1.548,1.877,2.024,3.002 c0.493,1.164,0.743,2.401,0.743,3.676c0,0.575-0.054,1.15-0.157,1.712c-0.018-0.031-0.033-0.064-0.052-0.095l0.034,0.201 c0.007-0.035,0.011-0.071,0.018-0.106C21.754,14.494,22,15.432,22,16.386z M16.817,14.138c0-1.331-0.613-2.743-3.033-3.282 l-2.209-0.49c-0.84-0.192-1.807-0.444-1.807-1.237c0-0.794,0.679-1.348,1.903-1.348c2.468,0,2.243,1.696,3.468,1.696 c0.645,0,1.209-0.379,1.209-1.031c0-1.521-2.435-2.663-4.5-2.663c-2.242,0-4.63,0.952-4.63,3.488c0,1.221,0.436,2.521,2.839,3.123 l2.984,0.745c0.903,0.223,1.129,0.731,1.129,1.189c0,0.762-0.758,1.507-2.129,1.507c-2.679,0-2.307-2.062-3.743-2.062 c-0.645,0-1.113,0.444-1.113,1.078c0,1.236,1.501,2.886,4.856,2.886C15.236,17.737,16.817,16.199,16.817,14.138z"></path></svg>', 'snapchat' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.065,2a5.526,5.526,0,0,1,3.132.892A5.854,5.854,0,0,1,17.326,5.4a5.821,5.821,0,0,1,.351,2.33q0,.612-.117,2.487a.809.809,0,0,0,.365.091,1.93,1.93,0,0,0,.664-.176,1.93,1.93,0,0,1,.664-.176,1.3,1.3,0,0,1,.729.234.7.7,0,0,1,.351.6.839.839,0,0,1-.41.7,2.732,2.732,0,0,1-.9.41,3.192,3.192,0,0,0-.9.378.728.728,0,0,0-.41.618,1.575,1.575,0,0,0,.156.56,6.9,6.9,0,0,0,1.334,1.953,5.6,5.6,0,0,0,1.881,1.315,5.875,5.875,0,0,0,1.042.3.42.42,0,0,1,.365.456q0,.911-2.852,1.341a1.379,1.379,0,0,0-.143.507,1.8,1.8,0,0,1-.182.605.451.451,0,0,1-.429.241,5.878,5.878,0,0,1-.807-.085,5.917,5.917,0,0,0-.833-.085,4.217,4.217,0,0,0-.807.065,2.42,2.42,0,0,0-.82.293,6.682,6.682,0,0,0-.755.5q-.351.267-.755.527a3.886,3.886,0,0,1-.989.436A4.471,4.471,0,0,1,11.831,22a4.307,4.307,0,0,1-1.256-.176,3.784,3.784,0,0,1-.976-.436q-.4-.26-.749-.527a6.682,6.682,0,0,0-.755-.5,2.422,2.422,0,0,0-.807-.293,4.432,4.432,0,0,0-.82-.065,5.089,5.089,0,0,0-.853.1,5,5,0,0,1-.762.1.474.474,0,0,1-.456-.241,1.819,1.819,0,0,1-.182-.618,1.411,1.411,0,0,0-.143-.521q-2.852-.429-2.852-1.341a.42.42,0,0,1,.365-.456,5.793,5.793,0,0,0,1.042-.3,5.524,5.524,0,0,0,1.881-1.315,6.789,6.789,0,0,0,1.334-1.953A1.575,1.575,0,0,0,6,12.9a.728.728,0,0,0-.41-.618,3.323,3.323,0,0,0-.9-.384,2.912,2.912,0,0,1-.9-.41.814.814,0,0,1-.41-.684.71.71,0,0,1,.338-.593,1.208,1.208,0,0,1,.716-.241,1.976,1.976,0,0,1,.625.169,2.008,2.008,0,0,0,.69.169.919.919,0,0,0,.416-.091q-.117-1.849-.117-2.474A5.861,5.861,0,0,1,6.385,5.4,5.516,5.516,0,0,1,8.625,2.819,7.075,7.075,0,0,1,12.062,2Z"></path></svg>', 'soundcloud' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M8.9,16.1L9,14L8.9,9.5c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1L8.3,14l0.1,2.1 c0,0.1,0,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1C8.8,16.3,8.9,16.3,8.9,16.1z M11.4,15.9l0.1-1.8L11.4,9c0-0.1,0-0.2-0.1-0.2 c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.1,0-0.1,0.1-0.1,0.2l0,0.1l-0.1,5c0,0,0,0.7,0.1,2v0c0,0.1,0,0.1,0.1,0.1c0.1,0.1,0.1,0.1,0.2,0.1 c0.1,0,0.1,0,0.2-0.1c0.1,0,0.1-0.1,0.1-0.2L11.4,15.9z M2.4,12.9L2.5,14l-0.2,1.1c0,0.1,0,0.1-0.1,0.1c0,0-0.1,0-0.1-0.1L2.1,14 l0.1-1.1C2.2,12.9,2.3,12.9,2.4,12.9C2.3,12.9,2.4,12.9,2.4,12.9z M3.1,12.2L3.3,14l-0.2,1.8c0,0.1,0,0.1-0.1,0.1 c-0.1,0-0.1,0-0.1-0.1L2.8,14L3,12.2C3,12.2,3,12.2,3.1,12.2C3.1,12.2,3.1,12.2,3.1,12.2z M3.9,11.9L4.1,14l-0.2,2.1 c0,0.1,0,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L3.5,14l0.2-2.1c0-0.1,0-0.1,0.1-0.1C3.9,11.8,3.9,11.8,3.9,11.9z M4.7,11.9L4.9,14 l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L4.3,14l0.2-2.2c0-0.1,0-0.1,0.1-0.1C4.7,11.7,4.7,11.8,4.7,11.9z M5.6,12 l0.2,2l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1L5.1,14l0.2-2c0,0,0-0.1,0-0.1s0.1,0,0.1,0 C5.5,11.9,5.5,11.9,5.6,12L5.6,12z M6.4,10.7L6.6,14l-0.2,2.1c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.2-0.2L5.9,14 l0.2-3.3c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0C6.4,10.7,6.4,10.7,6.4,10.7z M7.2,10l0.2,4.1l-0.2,2.1c0,0,0,0.1,0,0.1 c0,0-0.1,0-0.1,0c-0.1,0-0.2-0.1-0.2-0.2l-0.1-2.1L6.8,10c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0S7.2,9.9,7.2,10z M8,9.6L8.2,14 L8,16.1c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2L7.5,14l0.1-4.4c0-0.1,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.1,0.1 C8,9.6,8,9.6,8,9.6z M11.4,16.1L11.4,16.1L11.4,16.1z M9.7,9.6L9.8,14l-0.1,2.1c0,0.1,0,0.1-0.1,0.2s-0.1,0.1-0.2,0.1 c-0.1,0-0.1,0-0.1-0.1s-0.1-0.1-0.1-0.2L9.2,14l0.1-4.4c0-0.1,0-0.1,0.1-0.2s0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S9.7,9.5,9.7,9.6 L9.7,9.6z M10.6,9.8l0.1,4.3l-0.1,2c0,0.1,0,0.1-0.1,0.2c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.1-0.2L10,14 l0.1-4.3c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S10.6,9.7,10.6,9.8z M12.4,14l-0.1,2c0,0.1,0,0.1-0.1,0.2 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2l-0.1-1l-0.1-1l0.1-5.5v0c0-0.1,0-0.2,0.1-0.2 c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.2L12.4,14z M22.1,13.9c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.7,0.7 h-6.8c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2V8.2c0-0.1,0.1-0.2,0.2-0.3c0.5-0.2,1-0.3,1.6-0.3c1.1,0,2.1,0.4,2.9,1.1 c0.8,0.8,1.3,1.7,1.4,2.8c0.3-0.1,0.6-0.2,1-0.2c0.7,0,1.3,0.2,1.7,0.7C21.8,12.6,22.1,13.2,22.1,13.9L22.1,13.9z"></path></svg>', 'spotify' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10c5.523,0,10-4.477,10-10C22,6.477,17.523,2,12,2 M16.586,16.424 c-0.18,0.295-0.563,0.387-0.857,0.207c-2.348-1.435-5.304-1.76-8.785-0.964c-0.335,0.077-0.67-0.133-0.746-0.469 c-0.077-0.335,0.132-0.67,0.469-0.746c3.809-0.871,7.077-0.496,9.713,1.115C16.673,15.746,16.766,16.13,16.586,16.424 M17.81,13.7 c-0.226,0.367-0.706,0.482-1.072,0.257c-2.687-1.652-6.785-2.131-9.965-1.166C6.36,12.917,5.925,12.684,5.8,12.273 C5.675,11.86,5.908,11.425,6.32,11.3c3.632-1.102,8.147-0.568,11.234,1.328C17.92,12.854,18.035,13.335,17.81,13.7 M17.915,10.865 c-3.223-1.914-8.54-2.09-11.618-1.156C5.804,9.859,5.281,9.58,5.131,9.086C4.982,8.591,5.26,8.069,5.755,7.919 c3.532-1.072,9.404-0.865,13.115,1.338c0.445,0.264,0.59,0.838,0.327,1.282C18.933,10.983,18.359,11.129,17.915,10.865"></path></svg>', 'tumblr' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M16.749,17.396c-0.357,0.17-1.041,0.319-1.551,0.332c-1.539,0.041-1.837-1.081-1.85-1.896V9.847h3.861V6.937h-3.847V2.039 c0,0-2.77,0-2.817,0c-0.046,0-0.127,0.041-0.138,0.144c-0.165,1.499-0.867,4.13-3.783,5.181v2.484h1.945v6.282 c0,2.151,1.587,5.206,5.775,5.135c1.413-0.024,2.982-0.616,3.329-1.126L16.749,17.396z"></path></svg>', 'twitch' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M16.499,8.089h-1.636v4.91h1.636V8.089z M12,8.089h-1.637v4.91H12V8.089z M4.228,3.178L3,6.451v13.092h4.499V22h2.456 l2.454-2.456h3.681L21,14.636V3.178H4.228z M19.364,13.816l-2.864,2.865H12l-2.453,2.453V16.68H5.863V4.814h13.501V13.816z"></path></svg>', 'twitter' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z"></path></svg>', 'vimeo' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22.396,7.164c-0.093,2.026-1.507,4.799-4.245,8.32C15.322,19.161,12.928,21,10.97,21c-1.214,0-2.24-1.119-3.079-3.359 c-0.56-2.053-1.119-4.106-1.68-6.159C5.588,9.243,4.921,8.122,4.206,8.122c-0.156,0-0.701,0.328-1.634,0.98L1.594,7.841 c1.027-0.902,2.04-1.805,3.037-2.708C6.001,3.95,7.03,3.327,7.715,3.264c1.619-0.156,2.616,0.951,2.99,3.321 c0.404,2.557,0.685,4.147,0.841,4.769c0.467,2.121,0.981,3.181,1.542,3.181c0.435,0,1.09-0.688,1.963-2.065 c0.871-1.376,1.338-2.422,1.401-3.142c0.125-1.187-0.343-1.782-1.401-1.782c-0.498,0-1.012,0.115-1.541,0.341 c1.023-3.35,2.977-4.977,5.862-4.884C21.511,3.066,22.52,4.453,22.396,7.164z"></path></svg>', 'vk' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22,7.1c0.2,0.4-0.4,1.5-1.6,3.1c-0.2,0.2-0.4,0.5-0.7,0.9c-0.5,0.7-0.9,1.1-0.9,1.4c-0.1,0.3-0.1,0.6,0.1,0.8 c0.1,0.1,0.4,0.4,0.8,0.9h0l0,0c1,0.9,1.6,1.7,2,2.3c0,0,0,0.1,0.1,0.1c0,0.1,0,0.1,0.1,0.3c0,0.1,0,0.2,0,0.4 c0,0.1-0.1,0.2-0.3,0.3c-0.1,0.1-0.4,0.1-0.6,0.1l-2.7,0c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.1-0.5-0.2l-0.2-0.1 c-0.2-0.1-0.5-0.4-0.7-0.7s-0.5-0.6-0.7-0.8c-0.2-0.2-0.4-0.4-0.6-0.6C14.8,15,14.6,15,14.4,15c0,0,0,0-0.1,0c0,0-0.1,0.1-0.2,0.2 c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.1-0.1,0.3-0.2,0.5c-0.1,0.2-0.1,0.5-0.1,0.8c0,0.1,0,0.2,0,0.3c0,0.1-0.1,0.2-0.1,0.2l0,0.1 c-0.1,0.1-0.3,0.2-0.6,0.2h-1.2c-0.5,0-1,0-1.5-0.2c-0.5-0.1-1-0.3-1.4-0.6s-0.7-0.5-1.1-0.7s-0.6-0.4-0.7-0.6l-0.3-0.3 c-0.1-0.1-0.2-0.2-0.3-0.3s-0.4-0.5-0.7-0.9s-0.7-1-1.1-1.6c-0.4-0.6-0.8-1.3-1.3-2.2C2.9,9.4,2.5,8.5,2.1,7.5C2,7.4,2,7.3,2,7.2 c0-0.1,0-0.1,0-0.2l0-0.1c0.1-0.1,0.3-0.2,0.6-0.2l2.9,0c0.1,0,0.2,0,0.2,0.1S5.9,6.9,5.9,7L6,7c0.1,0.1,0.2,0.2,0.3,0.3 C6.4,7.7,6.5,8,6.7,8.4C6.9,8.8,7,9,7.1,9.2l0.2,0.3c0.2,0.4,0.4,0.8,0.6,1.1c0.2,0.3,0.4,0.5,0.5,0.7s0.3,0.3,0.4,0.4 c0.1,0.1,0.3,0.1,0.4,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0.1-0.1c0,0,0.1-0.1,0.1-0.2c0.1-0.1,0.1-0.3,0.1-0.5c0-0.2,0.1-0.5,0.1-0.8 c0-0.4,0-0.8,0-1.3c0-0.3,0-0.5-0.1-0.8c0-0.2-0.1-0.4-0.1-0.5L9.6,7.6C9.4,7.3,9.1,7.2,8.7,7.1C8.6,7.1,8.6,7,8.7,6.9 C8.9,6.7,9,6.6,9.1,6.5c0.4-0.2,1.2-0.3,2.5-0.3c0.6,0,1,0.1,1.4,0.1c0.1,0,0.3,0.1,0.3,0.1c0.1,0.1,0.2,0.1,0.2,0.3 c0,0.1,0.1,0.2,0.1,0.3s0,0.3,0,0.5c0,0.2,0,0.4,0,0.6c0,0.2,0,0.4,0,0.7c0,0.3,0,0.6,0,0.9c0,0.1,0,0.2,0,0.4c0,0.2,0,0.4,0,0.5 c0,0.1,0,0.3,0,0.4s0.1,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.2-0.2,0.4-0.4 s0.3-0.4,0.5-0.7c0.2-0.3,0.5-0.7,0.7-1.1c0.4-0.7,0.8-1.5,1.1-2.3c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.1-0.1,0.1-0.1l0,0l0.1,0 c0,0,0,0,0.1,0s0.2,0,0.2,0l3,0c0.3,0,0.5,0,0.7,0S21.9,7,21.9,7L22,7.1z"></path></svg>', 'wordpress' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path></svg>', 'yelp' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.271,16.718v1.417q-.011,3.257-.067,3.4a.707.707,0,0,1-.569.446,4.637,4.637,0,0,1-2.024-.424A4.609,4.609,0,0,1,7.8,20.565a.844.844,0,0,1-.19-.4.692.692,0,0,1,.044-.29,3.181,3.181,0,0,1,.379-.524q.335-.412,2.019-2.409.011,0,.669-.781a.757.757,0,0,1,.44-.274.965.965,0,0,1,.552.039.945.945,0,0,1,.418.324.732.732,0,0,1,.139.468Zm-1.662-2.8a.783.783,0,0,1-.58.781l-1.339.435q-3.067.981-3.257.981a.711.711,0,0,1-.6-.4,2.636,2.636,0,0,1-.19-.836,9.134,9.134,0,0,1,.011-1.857,3.559,3.559,0,0,1,.335-1.389.659.659,0,0,1,.625-.357,22.629,22.629,0,0,1,2.253.859q.781.324,1.283.524l.937.379a.771.771,0,0,1,.4.34A.982.982,0,0,1,10.609,13.917Zm9.213,3.313a4.467,4.467,0,0,1-1.021,1.8,4.559,4.559,0,0,1-1.512,1.417.671.671,0,0,1-.7-.078q-.156-.112-2.052-3.2l-.524-.859a.761.761,0,0,1-.128-.513.957.957,0,0,1,.217-.513.774.774,0,0,1,.926-.29q.011.011,1.327.446,2.264.736,2.7.887a2.082,2.082,0,0,1,.524.229.673.673,0,0,1,.245.68Zm-7.5-7.049q.056,1.137-.6,1.361-.647.19-1.272-.792L6.237,4.08a.7.7,0,0,1,.212-.691,5.788,5.788,0,0,1,2.314-1,5.928,5.928,0,0,1,2.5-.352.681.681,0,0,1,.547.5q.034.2.245,3.407T12.327,10.181Zm7.384,1.2a.679.679,0,0,1-.29.658q-.167.112-3.67.959-.747.167-1.015.257l.011-.022a.769.769,0,0,1-.513-.044.914.914,0,0,1-.413-.357.786.786,0,0,1,0-.971q.011-.011.836-1.137,1.394-1.908,1.673-2.275a2.423,2.423,0,0,1,.379-.435A.7.7,0,0,1,17.435,8a4.482,4.482,0,0,1,1.372,1.489,4.81,4.81,0,0,1,.9,1.868v.034Z"></path></svg>', 'youtube' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg>', ); /** * Social Icons – domain mappings. * * By default, each Icon ID is matched against a .com TLD. To override this behavior, * specify all the domains it covers (including the .com TLD too, if applicable). * * @since 1.0.0 * * @var array */ protected static $social_icons_map = array( 'amazon' => array( 'amazon.com', 'amazon.cn', 'amazon.in', 'amazon.fr', 'amazon.de', 'amazon.it', 'amazon.nl', 'amazon.es', 'amazon.co', 'amazon.ca', ), 'behance' => array( 'behance.net', ), 'codepen' => array( 'codepen.io', ), 'facebook' => array( 'facebook.com', 'fb.me', ), 'feed' => array( 'feed', ), 'lastfm' => array( 'last.fm', ), 'mail' => array( 'mailto:', ), 'pocket' => array( 'getpocket.com', ), 'twitch' => array( 'twitch.tv', ), 'wordpress' => array( 'wordpress.com', 'wordpress.org', ), ); /** * Gets the SVG code for a given icon. * * @static * * @access public * * @since 1.0.0 * * @param string $group the icon group. * @param string $icon The icon. * @param int $size The icon-size in pixels. * * @return string */ public static function get_svg( $group, $icon, $size ) { if ( 'ui' === $group ) { $arr = self::$icons; } elseif ( 'social' === $group ) { $arr = self::$social_icons; } else { $arr = array(); } /** * Filters Twenty Twenty-Ones's array of icons. * * The dynamic portion of the hook name, `$group`, refers to * the name of the group of icons, either "ui" or "social". * * @since 1.0.0 * * @param array $arr Array of icons. */ $arr = apply_filters( "twenty_twenty_one_svg_icons_{$group}", $arr ); $svg = ''; if ( array_key_exists( $icon, $arr ) ) { $repl = sprintf( '<svg class="svg-icon" width="%d" height="%d" aria-hidden="true" role="img" focusable="false" ', $size, $size ); $svg = preg_replace( '/^<svg /', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code. } // @phpstan-ignore-next-line. return $svg; } /** * Detects the social network from a URL and returns the SVG code for its icon. * * @static * * @access public * * @since 1.0.0 * * @param string $uri Social link. * @param int $size The icon-size in pixels. * * @return string|null */ public static function get_social_link_svg( $uri, $size ) { static $regex_map; // Only compute regex map once, for performance. if ( ! isset( $regex_map ) ) { $regex_map = array(); /** * Filters Twenty Twenty-Ones's array of domain mappings for social icons. * * By default, each Icon ID is matched against a .com TLD. To override this behavior, * specify all the domains it covers (including the .com TLD too, if applicable). * * @since 1.0.0 * * @param array $social_icons_map Array of default social icons. */ $map = apply_filters( 'twenty_twenty_one_social_icons_map', self::$social_icons_map ); /** * Filters Twenty Twenty-One's array of social icons. * * @since 1.0.0 * * @param array $social_icons Array of default social icons. */ $social_icons = apply_filters( 'twenty_twenty_one_svg_icons_social', self::$social_icons ); foreach ( array_keys( $social_icons ) as $icon ) { $domains = array_key_exists( $icon, $map ) ? $map[ $icon ] : array( sprintf( '%s.com', $icon ) ); $domains = array_map( 'trim', $domains ); // Remove leading/trailing spaces, to prevent regex from failing to match. $domains = array_map( 'preg_quote', $domains ); $regex_map[ $icon ] = sprintf( '/(%s)/i', implode( '|', $domains ) ); } } foreach ( $regex_map as $icon => $regex ) { if ( preg_match( $regex, $uri ) ) { return self::get_svg( 'social', $icon, $size ) . '<span class="screen-reader-text">'; } } return null; } } classes/class-twenty-twenty-one-custom-colors.php 0000644 00000012043 15252513625 0016273 0 ustar 00 <?php /** * Custom Colors Class * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ /** * This class is in charge of color customization via the Customizer. */ class Twenty_Twenty_One_Custom_Colors { /** * Instantiate the object. * * @access public * * @since 1.0.0 */ public function __construct() { // Enqueue color variables for customizer & frontend. add_action( 'wp_enqueue_scripts', array( $this, 'custom_color_variables' ) ); // Enqueue color variables for editor. add_action( 'enqueue_block_editor_assets', array( $this, 'editor_custom_color_variables' ) ); // Add body-class if needed. add_filter( 'body_class', array( $this, 'body_class' ) ); } /** * Determine the luminance of the given color and then return #fff or #000 so that the text is always readable. * * @access public * * @param string $background_color The background color. * * @since 1.0.0 * * @return string (hex color) */ public function custom_get_readable_color( $background_color ) { return ( 127 < self::get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff'; } /** * Generate color variables. * * Adjust the color value of the CSS variables depending on the background color theme mod. * Both text and link colors needs to be updated. * The code below needs to be updated, because the colors are no longer theme mods. * * @access public * * @since 1.0.0 * * @param string|null $context Can be "editor" or null. * * @return string */ public function generate_custom_color_variables( $context = null ) { $theme_css = 'editor' === $context ? ':root .editor-styles-wrapper{' : ':root{'; $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); if ( 'd1e4dd' !== strtolower( $background_color ) ) { $theme_css .= '--global--color-background: #' . $background_color . ';'; $theme_css .= '--global--color-primary: ' . $this->custom_get_readable_color( $background_color ) . ';'; $theme_css .= '--global--color-secondary: ' . $this->custom_get_readable_color( $background_color ) . ';'; $theme_css .= '--button--color-background: ' . $this->custom_get_readable_color( $background_color ) . ';'; $theme_css .= '--button--color-text-hover: ' . $this->custom_get_readable_color( $background_color ) . ';'; if ( '#fff' === $this->custom_get_readable_color( $background_color ) ) { $theme_css .= '--table--stripes-border-color: var(--global--color-dark-gray);'; $theme_css .= '--table--stripes-background-color: var(--global--color-dark-gray);'; } } $theme_css .= '}'; return $theme_css; } /** * Customizer & frontend custom color variables. * * @access public * * @since 1.0.0 * * @return void */ public function custom_color_variables() { if ( 'd1e4dd' !== strtolower( get_theme_mod( 'background_color', 'D1E4DD' ) ) ) { wp_add_inline_style( 'twenty-twenty-one-style', $this->generate_custom_color_variables() ); } } /** * Editor custom color variables. * * @access public * * @since 1.0.0 * * @return void */ public function editor_custom_color_variables() { wp_enqueue_style( 'twenty-twenty-one-custom-color-overrides', get_theme_file_uri( 'assets/css/custom-color-overrides.css' ), array(), (string) filemtime( get_theme_file_path( 'assets/css/custom-color-overrides.css' ) ) ); $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); if ( 'd1e4dd' !== strtolower( $background_color ) ) { wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) ); } } /** * Get luminance from a HEX color. * * @static * * @access public * * @since 1.0.0 * * @param string $hex The HEX color. * * @return int Returns a number (0-255). */ public static function get_relative_luminance_from_hex( $hex ) { // Remove the "#" symbol from the beginning of the color. $hex = ltrim( $hex, '#' ); // Make sure there are 6 digits for the below calculations. if ( 3 === strlen( $hex ) ) { $hex = substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 2, 1 ) . substr( $hex, 2, 1 ); } // Get red, green, blue. $red = hexdec( substr( $hex, 0, 2 ) ); $green = hexdec( substr( $hex, 2, 2 ) ); $blue = hexdec( substr( $hex, 4, 2 ) ); // Calculate the luminance. $lum = ( 0.2126 * $red ) + ( 0.7152 * $green ) + ( 0.0722 * $blue ); return (int) round( $lum ); } /** * Adds a class to <body> if the background-color is dark. * * @access public * * @since 1.0.0 * * @param array $classes The existing body classes. * * @return array */ public function body_class( $classes ) { $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); $luminance = self::get_relative_luminance_from_hex( $background_color ); if ( 127 > $luminance ) { $classes[] = 'is-dark-theme'; } else { $classes[] = 'is-light-theme'; } if ( 225 <= $luminance ) { $classes[] = 'has-background-white'; } return $classes; } } classes/class-twenty-twenty-one-dark-mode.php 0000644 00000027522 15252513625 0015335 0 ustar 00 <?php /** * Dark Mode Class * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ /** * This class is in charge of Dark Mode. */ class Twenty_Twenty_One_Dark_Mode { /** * Instantiate the object. * * @access public * * @since 1.0.0 */ public function __construct() { // Enqueue assets for the block-editor. add_action( 'enqueue_block_editor_assets', array( $this, 'editor_custom_color_variables' ) ); // Add styles for dark-mode. add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); // Add scripts for customizer controls. add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_controls_enqueue_scripts' ) ); // Add customizer controls. add_action( 'customize_register', array( $this, 'customizer_controls' ) ); // Add HTML classes. add_filter( 'twentytwentyone_html_classes', array( $this, 'html_classes' ) ); // Add classes to <body> in the dashboard. add_filter( 'admin_body_class', array( $this, 'admin_body_classes' ) ); // Add the switch on the frontend & customizer. add_action( 'wp_footer', array( $this, 'the_switch' ) ); // Add the privacy policy content. add_action( 'admin_init', array( $this, 'add_privacy_policy_content' ) ); } /** * Editor custom color variables & scripts. * * @access public * * @since 1.0.0 * * @return void */ public function editor_custom_color_variables() { if ( ! $this->switch_should_render() ) { return; } $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false ); if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) { // Add Dark Mode variable overrides. wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; }' ); } wp_enqueue_script( 'twentytwentyone-dark-mode-support-toggle', get_template_directory_uri() . '/assets/js/dark-mode-toggler.js', array(), '1.0.0', true ); wp_enqueue_script( 'twentytwentyone-editor-dark-mode-support', get_template_directory_uri() . '/assets/js/editor-dark-mode-support.js', array( 'twentytwentyone-dark-mode-support-toggle' ), '1.0.0', true ); } /** * Enqueue scripts and styles. * * @access public * * @since 1.0.0 * * @return void */ public function enqueue_scripts() { if ( ! $this->switch_should_render() ) { return; } $url = get_template_directory_uri() . '/assets/css/style-dark-mode.css'; if ( is_rtl() ) { $url = get_template_directory_uri() . '/assets/css/style-dark-mode-rtl.css'; } wp_enqueue_style( 'tt1-dark-mode', $url, array( 'twenty-twenty-one-style' ), wp_get_theme()->get( 'Version' ) ); // @phpstan-ignore-line. Version is always a string. } /** * Enqueue scripts for the customizer. * * @access public * * @since 1.0.0 * * @return void */ public function customize_controls_enqueue_scripts() { if ( ! $this->switch_should_render() ) { return; } wp_enqueue_script( 'twentytwentyone-customize-controls', get_template_directory_uri() . '/assets/js/customize.js', array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ), '1.0.0', true ); } /** * Register customizer options. * * @access public * * @since 1.0.0 * * @param WP_Customize_Manager $wp_customize Theme Customizer object. * * @return void */ public function customizer_controls( $wp_customize ) { $colors_section = $wp_customize->get_section( 'colors' ); if ( is_object( $colors_section ) ) { $colors_section->title = __( 'Colors & Dark Mode', 'twentytwentyone' ); } // Custom notice control. include_once get_theme_file_path( 'classes/class-twenty-twenty-one-customize-notice-control.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound $wp_customize->add_setting( 'respect_user_color_preference_notice', array( 'capability' => 'edit_theme_options', 'default' => '', 'sanitize_callback' => '__return_empty_string', ) ); $wp_customize->add_control( new Twenty_Twenty_One_Customize_Notice_Control( $wp_customize, 'respect_user_color_preference_notice', array( 'section' => 'colors', 'priority' => 100, 'active_callback' => function() { return 127 >= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) ); }, ) ) ); $wp_customize->add_setting( 'respect_user_color_preference', array( 'capability' => 'edit_theme_options', 'default' => false, 'sanitize_callback' => function( $value ) { return (bool) $value; }, ) ); $description = '<p>'; $description .= sprintf( // translators: %s is the wordpress.org Twenty Twenty-One support article URL. __( 'Dark Mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text. <a href="%s">Learn more about Dark Mode.</a>', 'twentytwentyone' ), __( 'https://wordpress.org/support/article/twenty-twenty-one/', 'twentytwentyone' ) ); $description .= '</p>'; $description .= '<p>' . __( 'Dark Mode can also be turned on and off with a button that you can find in the bottom right corner of the page.', 'twentytwentyone' ) . '</p>'; $wp_customize->add_control( 'respect_user_color_preference', array( 'type' => 'checkbox', 'section' => 'colors', 'label' => esc_html__( 'Dark Mode support', 'twentytwentyone' ), 'priority' => 110, 'description' => $description, 'active_callback' => function( $value ) { return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) ); }, ) ); // Add partial for background_color. $wp_customize->selective_refresh->add_partial( 'background_color', array( 'selector' => '#dark-mode-toggler', 'container_inclusive' => true, 'render_callback' => function() { $attrs = ( $this->switch_should_render() ) ? array() : array( 'style' => 'display:none;' ); $this->the_html( $attrs ); }, ) ); } /** * Calculate classes for the main <html> element. * * @access public * * @since 1.0.0 * * @param string $classes The classes for <html> element. * * @return string */ public function html_classes( $classes ) { if ( ! $this->switch_should_render() ) { return $classes; } $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false ); if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) { return ( $classes ) ? ' respect-color-scheme-preference' : 'respect-color-scheme-preference'; } return $classes; } /** * Adds a class to the <body> element in the editor to accommodate dark-mode. * * @access public * * @since 1.0.0 * * @param string $classes The admin body-classes. * * @return string */ public function admin_body_classes( $classes ) { if ( ! $this->switch_should_render() ) { return $classes; } global $current_screen; if ( empty( $current_screen ) ) { set_current_screen(); } if ( $current_screen->is_block_editor() ) { $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false ); $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) { $classes .= ' twentytwentyone-supports-dark-theme'; } } return $classes; } /** * Determine if we want to print the dark-mode switch or not. * * @access public * * @since 1.0.0 * * @return bool */ public function switch_should_render() { global $is_IE; return ( get_theme_mod( 'respect_user_color_preference', false ) && ! $is_IE && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) ) ); } /** * Add night/day switch. * * @access public * * @since 1.0.0 * * @return void */ public function the_switch() { if ( ! $this->switch_should_render() ) { return; } $this->the_html(); $this->the_script(); } /** * Print the dark-mode switch HTML. * * Inspired from https://codepen.io/aaroniker/pen/KGpXZo (MIT-licensed) * * @access public * * @since 1.0.0 * * @param array $attrs The attributes to add to our <button> element. * * @return void */ public function the_html( $attrs = array() ) { $attrs = wp_parse_args( $attrs, array( 'id' => 'dark-mode-toggler', 'class' => 'fixed-bottom', 'aria-pressed' => 'false', 'onClick' => 'toggleDarkMode()', ) ); echo '<button'; foreach ( $attrs as $key => $val ) { echo ' ' . esc_attr( $key ) . '="' . esc_attr( $val ) . '"'; } echo '>'; printf( /* translators: %s: On/Off */ esc_html__( 'Dark Mode: %s', 'twentytwentyone' ), '<span aria-hidden="true"></span>' ); echo '</button>'; ?> <style> #dark-mode-toggler > span { margin-<?php echo is_rtl() ? 'right' : 'left'; ?>: 5px; } #dark-mode-toggler > span::before { content: '<?php esc_attr_e( 'Off', 'twentytwentyone' ); ?>'; } #dark-mode-toggler[aria-pressed="true"] > span::before { content: '<?php esc_attr_e( 'On', 'twentytwentyone' ); ?>'; } <?php if ( is_admin() || wp_is_json_request() ) : ?> .components-editor-notices__pinned ~ .edit-post-visual-editor #dark-mode-toggler { z-index: 20; } .is-dark-theme.is-dark-theme #dark-mode-toggler:not(:hover):not(:focus) { color: var(--global--color-primary); } @media only screen and (max-width: 782px) { #dark-mode-toggler { margin-top: 32px; } } <?php endif; ?> </style> <?php } /** * Print the dark-mode switch script. * * @access public * * @since 1.0.0 * * @return void */ public function the_script() { echo '<script>'; include get_template_directory() . '/assets/js/dark-mode-toggler.js'; // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude echo '</script>'; } /** * Adds information to the privacy policy. * * @access public * * @since 1.0.0 * * @return void */ public function add_privacy_policy_content() { if ( ! function_exists( 'wp_add_privacy_policy_content' ) ) { return; } $content = '<p class="privacy-policy-tutorial">' . __( 'Twenty Twenty-One uses LocalStorage when Dark Mode support is enabled.', 'twentytwentyone' ) . '</p>' . '<strong class="privacy-policy-tutorial">' . __( 'Suggested text:', 'twentytwentyone' ) . '</strong> ' . __( 'This website uses LocalStorage to save the setting when Dark Mode support is turned on or off.<br> LocalStorage is necessary for the setting to work and is only used when a user clicks on the Dark Mode button.<br> No data is saved in the database or transferred.', 'twentytwentyone' ); wp_add_privacy_policy_content( 'Twenty Twenty-One', wp_kses_post( wpautop( $content, false ) ) ); } } classes/class-twenty-twenty-one-customize-color-control.php 0000644 00000002460 15252513625 0020300 0 ustar 00 <?php /** * Customize API: WP_Customize_Color_Control class * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ /** * Customize Color Control class. * * @since 1.0.0 * * @see WP_Customize_Control */ class Twenty_Twenty_One_Customize_Color_Control extends WP_Customize_Color_Control { /** * The control type. * * @since 1.0.0 * * @var string */ public $type = 'twenty-twenty-one-color'; /** * Colorpicker palette * * @access public * * @since 1.0.0 * * @var array */ public $palette; /** * Enqueue control related scripts/styles. * * @access public * * @since 1.0.0 * * @return void */ public function enqueue() { parent::enqueue(); // Enqueue the script. wp_enqueue_script( 'twentytwentyone-control-color', get_theme_file_uri( 'assets/js/palette-colorpicker.js' ), array( 'customize-controls', 'jquery', 'customize-base', 'wp-color-picker' ), (string) filemtime( get_theme_file_path( 'assets/js/palette-colorpicker.js' ) ), false ); } /** * Refresh the parameters passed to the JavaScript via JSON. * * @access public * * @since 1.0.0 * * @uses WP_Customize_Control::to_json() * * @return void */ public function to_json() { parent::to_json(); $this->json['palette'] = $this->palette; } } classes/class-twenty-twenty-one-customize-notice-control.php 0000644 00000001735 15252513625 0020447 0 ustar 00 <?php /** * Customize API: Twenty_Twenty_One_Customize_Notice_Control class * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ /** * Customize Notice Control class. * * @since 1.0.0 * * @see WP_Customize_Control */ class Twenty_Twenty_One_Customize_Notice_Control extends WP_Customize_Control { /** * The control type. * * @since 1.0.0 * * @var string */ public $type = 'twenty-twenty-one-notice'; /** * Renders the control content. * * This simply prints the notice we need. * * @access public * * @since 1.0.0 * * @return void */ public function render_content() { ?> <div class="notice notice-warning"> <p><?php esc_html_e( 'To access the Dark Mode settings, select a light background color.', 'twentytwentyone' ); ?></p> <p><a href="https://wordpress.org/support/article/twenty-twenty-one/"> <?php esc_html_e( 'Learn more about Dark Mode.', 'twentytwentyone' ); ?> </a></p> </div> <?php } } .stylelintrc.json 0000644 00000000544 15252513625 0010102 0 ustar 00 { "extends": [ "stylelint-config-wordpress/scss" ], "rules": { "selector-class-pattern": null, "font-weight-notation": null, "selector-type-no-unknown": null, "max-line-length": null, "at-rule-empty-line-before": null, "selector-pseudo-element-colon-notation": null, "number-leading-zero": null, "no-descending-specificity": null } } single.php 0000644 00000004501 15252513625 0006544 0 ustar 00 <?php /** * The template for displaying all single posts * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); if ( is_attachment() ) { // Parent post navigation. the_post_navigation( array( /* translators: %s: parent post link. */ 'prev_text' => sprintf( __( '<span class="meta-nav">Published in</span><span class="post-title">%s</span>', 'twentytwentyone' ), '%title' ), ) ); } // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } // Previous/next post navigation. $twentytwentyone_next = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ); $twentytwentyone_prev = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ); $twentytwentyone_post_type = get_post_type_object( get_post_type() ); $twentytwentyone_post_type_name = ''; if ( is_object( $twentytwentyone_post_type ) && property_exists( $twentytwentyone_post_type, 'labels' ) && is_object( $twentytwentyone_post_type->labels ) && property_exists( $twentytwentyone_post_type->labels, 'singular_name' ) ) { $twentytwentyone_post_type_name = $twentytwentyone_post_type->labels->singular_name; } /* translators: %s: The post-type singlular name (example: Post, Page etc) */ $twentytwentyone_next_label = sprintf( esc_html__( 'Next %s', 'twentytwentyone' ), $twentytwentyone_post_type_name ); /* translators: %s: The post-type singlular name (example: Post, Page etc) */ $twentytwentyone_previous_label = sprintf( esc_html__( 'Previous %s', 'twentytwentyone' ), $twentytwentyone_post_type_name ); the_post_navigation( array( 'next_text' => '<p class="meta-nav">' . $twentytwentyone_next_label . $twentytwentyone_next . '</p><p class="post-title">%title</p>', 'prev_text' => '<p class="meta-nav">' . $twentytwentyone_prev . $twentytwentyone_previous_label . '</p><p class="post-title">%title</p>', ) ); endwhile; // End of the loop. get_footer(); image.php 0000644 00000006423 15252513625 0006352 0 ustar 00 <?php /** * The template for displaying image attachments * * @package WordPress * @subpackage Twenty_Twenty_One * @since 1.0.0 */ get_header(); // Start the loop. while ( have_posts() ) { the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><!-- .entry-header --> <div class="entry-content"> <figure class="wp-block-image"> <?php /** * Filter the default image attachment size. * * @param string $image_size Image size. Default 'large'. */ $image_size = apply_filters( 'twenty_twenty_one_attachment_size', 'full' ); echo wp_get_attachment_image( get_the_ID(), $image_size ); ?> <?php if ( wp_get_attachment_caption() ) : ?> <figcaption class="wp-caption-text"><?php echo wp_kses_post( wp_get_attachment_caption() ); ?></figcaption> <?php endif; ?> </figure><!-- .wp-block-image --> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php // Check if there is a parent, then add the published in link. if ( wp_get_post_parent_id( $post ) ) { echo '<span class="posted-on">'; printf( /* translators: %s: parent post. */ esc_html__( 'Published in %s', 'twentytwentyone' ), '<a href="' . esc_url( get_the_permalink( wp_get_post_parent_id( $post ) ) ) . '">' . esc_html( get_the_title( wp_get_post_parent_id( $post ) ) ) . '</a>' ); echo '</span>'; } else { // Edit post link. edit_post_link( sprintf( /* translators: %s: Name of current post. Only visible to screen readers. */ esc_html__( 'Edit %s', 'twentytwentyone' ), '<span class="screen-reader-text">' . get_the_title() . '</span>' ), '<span class="edit-link">', '</span>' ); } // Retrieve attachment metadata. $metadata = wp_get_attachment_metadata(); if ( $metadata ) { printf( '<span class="full-size-link"><span class="screen-reader-text">%1$s</span><a href="%2$s">%3$s × %4$s</a></span>', esc_html_x( 'Full size', 'Used before full size attachment link.', 'twentytwentyone' ), // phpcs:ignore WordPress.Security.EscapeOutput esc_url( wp_get_attachment_url() ), absint( $metadata['width'] ), absint( $metadata['height'] ) ); } if ( wp_get_post_parent_id( $post ) ) { // Edit post link. edit_post_link( sprintf( /* translators: %s: Name of current post. Only visible to screen readers. */ esc_html__( 'Edit %s', 'twentytwentyone' ), '<span class="screen-reader-text">' . get_the_title() . '</span>' ), '<span class="edit-link">', '</span><br>' ); } ?> </footer><!-- .entry-footer --> </article><!-- #post-## --> <?php // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } } // End the loop. get_footer(); assets/sass/03-generic/reset.scss 0000644 00000002020 15252513625 0012672 0 ustar 00 /** * Reset specific elements to make them easier to style in other contexts. */ html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, form, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /** * Apply generic border-box to all elements. * See: * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { /* Apply border-box across the entire page. */ box-sizing: border-box; // HTML resets font-family: var(--global--font-secondary); line-height: var(--global--line-height-body); } /** * Relax the definition a bit, to allow components to override it manually. */ * { &, &::before, &::after { box-sizing: inherit; } } // body resets body { font-size: var(--global--font-size-base); font-weight: normal; color: var(--global--color-primary); text-align: left; background-color: var(--global--color-background); } button { cursor: pointer; } assets/sass/03-generic/breakpoints.scss 0000644 00000011072 15252513625 0014100 0 ustar 00 /** * Repsonsive Styles */ /** * Required Variables */ $default_width: 610px; $max_content_width: 1240px; $breakpoint_sm: 482px; $breakpoint_md: 592px; $breakpoint_lg: 652px; $breakpoint_xl: 822px; $breakpoint_xxl: 1024px; // Responsive breakpoints mixin @mixin media( $res ) { @if mobile-only == $res { @media only screen and (max-width: #{$breakpoint_sm - 1}) { @content; } } @if mobile == $res { @media only screen and (min-width: #{$breakpoint_sm}) { @content; } } @if tablet-only == $res { @media only screen and (max-width: #{$breakpoint_md - 1}) { @content; } } @if tablet == $res { @media only screen and (min-width: #{$breakpoint_md}) { @content; } } @if laptop-only == $res { @media only screen and (max-width: #{$breakpoint_lg - 1}) { @content; } } @if laptop == $res { @media only screen and (min-width: #{$breakpoint_lg}) { @content; } } @if desktop-only == $res { @media only screen and (max-width: #{$breakpoint_xl - 1}) { @content; } } @if desktop == $res { @media only screen and (min-width: #{$breakpoint_xl}) { @content; } } @if wide-only == $res { @media only screen and (max-width: #{$breakpoint_xxl - 1}) { @content; } } @if wide == $res { @media only screen and (min-width: #{$breakpoint_xxl}) { @content; } } } /** * Root Media Query Variables */ :root { --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6); --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal)); --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal)); --responsive--alignfull-width: 100%; --responsive--alignright-margin: var(--global--spacing-horizontal); --responsive--alignleft-margin: var(--global--spacing-horizontal); } @include media(mobile) { :root { --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), #{$default_width}); --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal)); --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); } } @include media(desktop) { :root { --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), #{$default_width}); --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), #{$max_content_width}); } } /** * Extends */ %responsive-aligndefault-width { max-width: var(--responsive--aligndefault-width); margin-left: auto; margin-right: auto; } %responsive-alignwide-width { max-width: var(--responsive--alignwide-width); margin-left: auto; margin-right: auto; } %responsive-alignfull-width-mobile { max-width: var(--responsive--alignfull-width); width: var(--responsive--alignfull-width); margin-left: auto; margin-right: auto; } @include media(mobile) { %responsive-alignfull-width { max-width: var(--responsive--alignfull-width); width: auto; margin-left: auto; margin-right: auto; } } %responsive-alignwide-width-nested { margin-left: auto; margin-right: auto; width: var(--responsive--alignwide-width); max-width: var(--responsive--alignfull-width); } %responsive-alignfull-width-nested { margin-left: auto; margin-right: auto; width: calc(var(--responsive--alignfull-width) - calc(2 * var(--responsive--spacing-horizontal))); max-width: var(--responsive--alignfull-width); } @include media(desktop) { %responsive-alignfull-width-nested { margin-left: auto; margin-right: auto; width: calc(var(--responsive--alignfull-width) - calc(4 * var(--responsive--spacing-horizontal))); max-width: var(--responsive--alignfull-width); } } %responsive-alignleft-mobile { /*rtl:ignore*/ margin-left: 0; /*rtl:ignore*/ margin-right: var(--responsive--spacing-horizontal); } @include media(mobile) { %responsive-alignleft { /*rtl:ignore*/ margin-left: var(--responsive--alignleft-margin); /*rtl:ignore*/ margin-right: var(--global--spacing-horizontal); } } %responsive-alignright-mobile { /*rtl:ignore*/ margin-left: var(--responsive--spacing-horizontal); /*rtl:ignore*/ margin-right: 0; } @include media(mobile) { %responsive-alignright { /*rtl:ignore*/ margin-left: var(--global--spacing-horizontal); /*rtl:ignore*/ margin-right: var(--responsive--alignright-margin); } } // Output .default-max-width { @extend %responsive-aligndefault-width; } .wide-max-width { @extend %responsive-alignwide-width; } .full-max-width { @extend %responsive-alignfull-width; } assets/sass/03-generic/clearings.scss 0000644 00000000673 15252513625 0013533 0 ustar 00 .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } assets/sass/03-generic/vertical-margins.scss 0000644 00000007054 15252513625 0015033 0 ustar 00 /** * Site Structure * * - Set vertical margins and responsive widths on * top-level wrappers and content wrappers * - `--global--width-content` is a responsive veriable * - See: globals/_global-width-responsive.scss */ /** * Top Level Wrappers (header, main, footer) * - Set vertical padding and horizontal margins */ .site-header, .site-main, .widget-area, .site-footer { padding-top: var(--global--spacing-vertical); padding-bottom: var(--global--spacing-vertical); margin-left: auto; margin-right: auto; } .site-header { padding-top: calc(0.75 * var(--global--spacing-vertical)); padding-bottom: calc(2 * var(--global--spacing-vertical)); @include media(mobile) { padding-bottom: calc(3 * var(--global--spacing-vertical)); } } /** * Site-main children wrappers * - Add double vertical margins here for clearer heirarchy */ .site-main > * { margin-top: calc(3 * var(--global--spacing-vertical)); margin-bottom: calc(3 * var(--global--spacing-vertical)); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } /** * Set the default maximum responsive content-width */ .default-max-width { @extend %responsive-aligndefault-width; } /** * Set the wide maximum responsive content-width */ .wide-max-width { @extend %responsive-alignwide-width; } /** * Set the full maximum responsive content-width */ .full-max-width { @extend %responsive-alignfull-width-mobile; @extend %responsive-alignfull-width; } /* * Block & non-gutenberg content wrappers * - Set margins */ .entry-header, .post-thumbnail, .entry-content, .entry-footer, .author-bio { margin-top: var(--global--spacing-vertical); margin-right: auto; margin-bottom: var(--global--spacing-vertical); margin-left: auto; } /* * Block & non-gutenberg content wrapper children * - Sets spacing-vertical margin logic */ .site-main > article > *, // apply vertical margins to article level .site-main > .not-found > *, // apply vertical margins to article level .entry-content > *, [class*="inner-container"] > *, .wp-block-template-part > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); @include media(mobile) { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } .site-footer > *, .widget-area > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); @include media(mobile) { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } /* * Block & non-gutenberg content wrapper children * - Sets spacing-unit margins */ //.site-header > *, // Removed, to align site title and menu. .entry-header > *, .post-thumbnail > *, .page-content > *, .comment-content > *, .widget > * { margin-top: var(--global--spacing-unit); margin-bottom: var(--global--spacing-unit); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } /* * .entry-content children specific controls * - Adds special margin overrides for alignment utility classes */ .entry-content > * { &.alignleft, &.alignright, &.alignleft:first-child + *, &.alignright:first-child + *, &.alignfull.has-background { margin-top: 0; } &:last-child, &.alignfull.has-background { margin-bottom: 0; } /* Reset alignleft and alignright margins after alignfull */ &.alignfull + .alignleft, &.alignfull + .alignright { margin-top: var(--global--spacing-vertical); } } assets/sass/03-generic/normalize.scss 0000644 00000013710 15252513625 0013560 0 ustar 00 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; text-decoration-thickness: 1px; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration-style: dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } assets/sass/04-elements/misc.scss 0000644 00000000310 15252513625 0012704 0 ustar 00 /* Over here, place any elements that do not need to have their own file. */ b, strong { font-weight: 700; } dfn, cite, em, i { font-style: italic; } pre { white-space: pre; overflow-x: auto; } assets/sass/04-elements/forms.scss 0000644 00000015633 15252513625 0013115 0 ustar 00 input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], .site textarea { border: var(--form--border-width) solid var(--form--border-color); border-radius: var(--form--border-radius); color: var(--form--color-text); line-height: var(--global--line-height-body); padding: var(--form--spacing-unit); // Gives a little more space for the outline offset. margin: 0 2px; &:focus { color: var(--form--color-text); outline-offset: 2px; outline: 2px dotted var(--form--border-color); } &:disabled { opacity: 0.7; } .is-dark-theme & { background: var(--global--color-white-90); } } // Reset the negative offset from normalize to make the thicker "border" work on focus. input[type="search"] { &:focus { outline-offset: -7px; .is-dark-theme & { outline-color: var(--global--color-background); } } } input[type="color"] { padding: calc(var(--form--spacing-unit) / 2); height: calc(4 * var(--form--spacing-unit)); } input[type="email"], input[type="url"] { /*rtl:ignore*/ direction: ltr; } select { border: var(--form--border-width) solid var(--form--border-color); color: var(--form--color-text); -moz-appearance: none; -webkit-appearance: none; appearance: none; line-height: var(--global--line-height-body); padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit); background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; // stylelint-disable-line function-url-quotes background-position: right var(--form--spacing-unit) top 60%; &:focus { outline-offset: 2px; outline: 2px dotted var(--form--border-color); } .is-dark-theme & { background: var(--global--color-white-90) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; // stylelint-disable-line function-url-quotes background-position: right var(--form--spacing-unit) top 60%; } } textarea { width: 100%; } label { font-size: var(--form--font-size); font-weight: var(--form--label-weight); margin-bottom: calc(var(--global--spacing-vertical) / 3); } /** https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker. License: MIT. */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; position: relative; width: 25px; height: 25px; border: var(--form--border-width) solid var(--form--border-color); background: var(--global--color-white); &:disabled { opacity: 0.7; } .is-dark-theme & { background: var(--global--color-white-90); } } input[type="checkbox"] { &:focus { outline-offset: 2px; outline: 2px dotted var(--form--border-color); } &:after { content: ""; opacity: 0; display: block; left: 5px; top: 2px; position: absolute; width: 7px; height: 13px; border: 3px solid var(--form--color-text); border-top: 0; border-left: 0; transform: rotate(30deg); } &:checked { color: var(--form--color-text); &:after { opacity: 1; } } } input[type="radio"] { border-radius: 50%; &:focus { outline-offset: 2px; outline: 2px dotted var(--form--border-color); } &:after { content: ""; opacity: 0; display: block; left: 3px; top: 3px; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--form--color-text); } &:checked { border: 4px solid var(--form--border-color); &:after { opacity: 1; } // Focus style for checked radio buttons. &:focus { outline-offset: 4px; outline: 2px dotted var(--form--border-color); } } } } input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; padding-left: 10px; font-size: var(--global--font-size-xs); vertical-align: top; } /** * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { input[type="range"] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ height: 6px; background: var(--form--color-ranged); border-radius: 6px; outline-offset: 10px; &:disabled { opacity: 0.7; } } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; border: 3px solid var(--form--color-ranged); height: 44px; width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; } input[type="range"]::-moz-range-thumb { border: 3px solid var(--form--color-ranged); height: 44px; width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; box-sizing: border-box; } } input[type="range"]::-ms-track { width: 100%; height: 6px; border-radius: 6px; border-width: 19px 0; border-color: var(--global--color-background); background: transparent; color: transparent; cursor: pointer; } input[type="range"]::-ms-fill-upper { background: var(--form--color-ranged); border-radius: 6px; } input[type="range"]::-ms-fill-lower { background: var(--form--color-ranged); border-radius: 6px; } input[type="range"]::-ms-thumb { border: 3px solid var(--form--color-ranged); height: 44px; width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; } fieldset { display: grid; border-color: var(--global--color-secondary); padding: var(--global--spacing-horizontal); legend { font-size: var(--global--font-size-lg); } input { &[type="submit"] { max-width: max-content; } &:not([type="submit"]) { margin-bottom: var(--global--spacing-unit); } &[type="radio"], &[type="checkbox"] { margin-bottom: 0; } &[type="radio"] + label, &[type="checkbox"] + label { font-size: var(--form--font-size); padding-left: 0; margin-bottom: var(--global--spacing-unit); } } } ::-moz-placeholder { // Firefox 19+ opacity: 1; } .post-password-message { font-size: var(--global--font-size-lg); } .post-password-form { display: flex; flex-wrap: wrap; &__label { width: 100%; margin-bottom: 0; } input[type="password"] { flex-grow: 1; margin-top: calc(var(--global--spacing-vertical) / 3); margin-right: calc(0.66 * var(--global--spacing-horizontal)); } &__submit { margin-top: calc(var(--global--spacing-vertical) / 3); @include media(tablet) { margin-left: calc(0.4 * var(--global--spacing-horizontal)); } } } assets/sass/04-elements/media.scss 0000644 00000001420 15252513625 0013033 0 ustar 00 img { display: block; height: auto; max-width: 100%; } /* Classic editor images */ .entry-content img { max-width: 100%; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object, video { max-width: 100%; } /* Media captions */ figcaption, .wp-caption, .wp-caption-text, .wp-block-embed figcaption { color: currentColor; font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); margin-top: calc(0.5 * var(--global--spacing-unit)); margin-bottom: var(--global--spacing-unit); text-align: center; .alignleft &, .alignright & { margin-bottom: 0; } } /* WP Smiley */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } assets/sass/04-elements/links.scss 0000644 00000003353 15252513625 0013103 0 ustar 00 /* * text-underline-offset doesn't work in Chrome at all 👎 * But looks nice in Safari/Firefox, so let's keep it and * maybe Chrome will support it soon. */ a { cursor: pointer; color: var(--wp--style--color--link, var(--global--color-primary)); text-underline-offset: 3px; text-decoration-skip-ink: all; } a:hover { text-decoration-style: dotted; text-decoration-skip-ink: none; } .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; text-decoration: underline 1px dotted currentColor; text-decoration-skip-ink: none; background: rgba(255, 255, 255, .9); // Change text color when the body background is dark. .is-dark-theme &, .is-dark-theme & .meta-nav { color: var(--wp--style--color--link, var(--global--color-background)); } // Change colors when the body background is white. .has-background-white & { background: rgba(0, 0, 0, .9); color: var(--wp--style--color--link, var(--global--color-white)); .meta-nav { color: var(--wp--style--color--link, var(--global--color-white)); } } &.skip-link { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; &:focus { color: #21759b; background-color: #f1f1f1; } } img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } } // Enforce the custom link color even if a custom background color has been set. // The extra specificity here is required to override the background color styles. .has-background { // Target both current level and nested block. .has-link-color a, &.has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } } assets/sass/04-elements/blockquote.scss 0000644 00000003121 15252513625 0014124 0 ustar 00 blockquote { padding: 0; position: relative; margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); > * { margin-top: var(--global--spacing-unit); margin-bottom: var(--global--spacing-unit); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } p { letter-spacing: var(--heading--letter-spacing-h4); font-family: var(--quote--font-family); font-size: var(--quote--font-size); font-style: var(--quote--font-style); font-weight: var(--quote--font-weight); line-height: var(--quote--line-height); } cite, footer { font-weight: normal; color: var(--global--color-primary); font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } &.alignleft, &.alignright { padding-left: inherit; p { font-size: var(--heading--font-size-h5); max-width: inherit; width: inherit; } cite, footer { font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } } strong { font-weight: var(--quote--font-weight-strong); } &:before { content: "\201C"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); position: absolute; left: calc(-0.5 * var(--global--spacing-horizontal)); } .wp-block-quote__citation, cite, footer { color: var(--global--color-primary); font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); } @include media(mobile-only) { padding-left: calc(0.5 * var(--global--spacing-horizontal)); &:before { left: 0; } } } assets/sass/04-elements/forms-editor.scss 0000644 00000001271 15252513625 0014372 0 ustar 00 select { border: var(--form--border-width) solid var(--form--border-color); border-radius: var(--form--border-radius); color: var(--form--color-text); font-size: var(--form--font-size); -moz-appearance: none; -webkit-appearance: none; appearance: none; padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit); background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; // stylelint-disable-line function-url-quotes background-position: right var(--form--spacing-unit) top 60%; } assets/sass/style-dark-mode.scss 0000644 00000005031 15252513625 0012722 0 ustar 00 /* OS dark theme preference */ @media only screen { .is-dark-theme.is-dark-theme { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { background: #000; color: #fff; text-decoration: none; } img { filter: brightness(.85) contrast(1.1); } } .respect-color-scheme-preference.is-dark-theme body { background-color: var(--global--color-background); } #dark-mode-toggler { cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--global--font-size-xs); padding: 0.5em; min-height: 44px; // A11y requirement for minimum clickable area. min-width: max-content; border: 2px solid currentColor; box-shadow: none; background: var(--button--color-text); color: var(--button--color-background); z-index: 9998; .no-js & { display: none; } &.fixed-bottom { position: fixed; bottom: 5px; right: 5px; transition: bottom 0.5s; &.hide:not(:focus) { bottom: -80px; } } &.relative { position: absolute; height: 44px; top: calc(2.4 * var(--global--spacing-vertical) - 44px); right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em); .admin-bar & { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px); @media only screen and (max-width: 782px) { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px); } @media only screen and (max-width: 481px) { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px); } } ~ nav { body:not(.primary-navigation-open) & { @media only screen and (max-width: 481px) { top: calc(44px + 44px); } } } } .primary-navigation-open & { display: none; } &:hover, &:focus { color: var(--button--color-background-active); border: 2px solid var(--button--color-text-active); background-color: var(--button--color-text-active); } .is-IE & { display: none; } } } assets/sass/01-settings/file-header.scss 0000644 00000002125 15252513625 0014145 0 ustar 00 /* Theme Name: Twenty Twenty-One Theme URI: https://wordpress.org/themes/twentytwentyone/ Author: the WordPress team Author URI: https://wordpress.org/ Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog. Requires at least: 5.3 Tested up to: 5.6 Requires PHP: 5.6 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentyone Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org Twenty Twenty-One is distributed under the terms of the GNU GPL. */ assets/sass/01-settings/global.scss 0000644 00000024217 15252513625 0013246 0 ustar 00 /* Variables */ // Vertical Rhythm Multiplier $baseline-unit: 10px; :root { /* Font Family */ --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); /* Font Size */ --global--font-size-base: 1.25rem; // 20px / 16px --global--font-size-xs: 1rem; // 16px / 16px --global--font-size-sm: 1.125rem; // 18px / 16px --global--font-size-md: 1.25rem; // 20px / 16px --global--font-size-lg: 1.5rem; // 24px / 16px --global--font-size-xl: 2.25rem; // 36px / 16px --global--font-size-xxl: 4rem; // 64px / 16px --global--font-size-xxxl: 5rem; // 80px / 16px --global--font-size-page-title: var(--global--font-size-xxl); --global--letter-spacing: normal; /* Line Height */ --global--line-height-body: 1.7; --global--line-height-heading: 1.3; --global--line-height-page-title: 1.1; /* Headings */ --heading--font-family: var(--global--font-primary); --heading--font-size-h6: var(--global--font-size-xs); --heading--font-size-h5: var(--global--font-size-sm); --heading--font-size-h4: var(--global--font-size-lg); --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg)); --heading--font-size-h2: var(--global--font-size-xl); --heading--font-size-h1: var(--global--font-size-page-title); --heading--letter-spacing-h6: 0.05em; --heading--letter-spacing-h5: 0.05em; --heading--letter-spacing-h4: var(--global--letter-spacing); --heading--letter-spacing-h3: var(--global--letter-spacing); --heading--letter-spacing-h2: var(--global--letter-spacing); --heading--letter-spacing-h1: var(--global--letter-spacing); --heading--line-height-h6: var(--global--line-height-heading); --heading--line-height-h5: var(--global--line-height-heading); --heading--line-height-h4: var(--global--line-height-heading); --heading--line-height-h3: var(--global--line-height-heading); --heading--line-height-h2: var(--global--line-height-heading); --heading--line-height-h1: var(--global--line-height-page-title); --heading--font-weight: normal; --heading--font-weight-page-title: 300; --heading--font-weight-strong: 600; /* Block: Latest posts */ --latest-posts--title-font-family: var(--heading--font-family); --latest-posts--title-font-size: var(--heading--font-size-h3); --latest-posts--description-font-family: var(--global--font-secondary); --latest-posts--description-font-size: var(--global--font-size-sm); --list--font-family: var(--global--font-secondary); --definition-term--font-family: var(--global--font-primary); /* Colors */ --global--color-black: #000; --global--color-dark-gray: #28303d; --global--color-gray: #39414d; --global--color-light-gray: #f0f0f0; --global--color-green: #d1e4dd; --global--color-blue: #d1dfe4; --global--color-purple: #d1d1e4; --global--color-red: #e4d1d1; --global--color-orange: #e4dad1; --global--color-yellow: #eeeadd; --global--color-white: #fff; --global--color-white-50: rgba(255, 255, 255, 0.5); // Used for disabled buttons --global--color-white-90: rgba(255, 255, 255, 0.9); // Used in form fields. --global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */ --global--color-secondary: var(--global--color-gray); /* Headings */ --global--color-primary-hover: var(--global--color-primary); --global--color-background: var(--global--color-green); /* Mint, default body background */ --global--color-border: var(--global--color-primary); /* Used for borders (separators) */ /* Spacing */ --global--spacing-unit: #{2 * $baseline-unit}; // 20px --global--spacing-measure: unset; // Use ch units here. ie: 60ch = 60 character max-width --global--spacing-horizontal: #{2.5 * $baseline-unit}; // 25px --global--spacing-vertical: #{3 * $baseline-unit}; // 30px. /* Elevation */ --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); /* Forms */ --form--font-family: var(--global--font-secondary); --form--font-size: var(--global--font-size-sm); --form--line-height: var(--global--line-height-body); --form--color-text: var(--global--color-dark-gray); // Text color in input fields is always dark over light background. --form--color-ranged: var(--global--color-secondary); --form--label-weight: 500; --form--border-color: var(--global--color-secondary); --form--border-width: 3px; --form--border-radius: 0; --form--spacing-unit: calc(0.5 * var(--global--spacing-unit)); /* Cover block */ --cover--height: calc(15 * var(--global--spacing-vertical)); --cover--color-foreground: var(--global--color-white); --cover--color-background: var(--global--color-black); /* Buttons */ // Colors --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); // Fonts --button--font-family: var(--global--font-primary); --button--font-size: var(--global--font-size-base); --button--font-weight: 500; --button--line-height: 1.5; // Borders --button--border-width: 3px; --button--border-radius: 0; // Spacing --button--padding-vertical: 15px; --button--padding-horizontal: calc(2 * var(--button--padding-vertical)); /* entry */ --entry-header--color: var(--global--color-primary); --entry-header--color-link: currentColor; --entry-header--color-hover: var(--global--color-primary-hover); --entry-header--color-focus: var(--global--color-secondary); --entry-header--font-size: var(--heading--font-size-h2); --entry-content--font-family: var(--global--font-secondary); --entry-author-bio--font-family: var(--heading--font-family); --entry-author-bio--font-size: var(--heading--font-size-h4); /* Header */ --branding--color-text: var(--global--color-primary); --branding--color-link: var(--global--color-primary); --branding--color-link-hover: var(--global--color-secondary); --branding--title--font-family: var(--global--font-primary); --branding--title--font-size: var(--global--font-size-lg); --branding--title--font-size-mobile: var(--heading--font-size-h4); --branding--title--font-weight: normal; --branding--title--text-transform: uppercase; --branding--description--font-family: var(--global--font-secondary); --branding--description--font-size: var(--global--font-size-sm); --branding--description--font-family: var(--global--font-secondary); --branding--logo--max-width: 300px; --branding--logo--max-height: 100px; --branding--logo--max-width-mobile: 96px; --branding--logo--max-height-mobile: 96px; /* Main navigation */ --primary-nav--font-family: var(--global--font-secondary); --primary-nav--font-family-mobile: var(--global--font-primary); --primary-nav--font-size: var(--global--font-size-md); --primary-nav--font-size-sub-menu: var(--global--font-size-xs); --primary-nav--font-size-mobile: var(--global--font-size-sm); --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm); --primary-nav--font-size-button: var(--global--font-size-xs); --primary-nav--font-style: normal; --primary-nav--font-style-sub-menu-mobile: normal; --primary-nav--font-weight: normal; --primary-nav--font-weight-button: 500; --primary-nav--color-link: var(--global--color-primary); --primary-nav--color-link-hover: var(--global--color-primary-hover); --primary-nav--color-text: var(--global--color-primary); --primary-nav--padding: calc(0.66 * var(--global--spacing-unit)); --primary-nav--border-color: var(--global--color-primary); /* Pagination */ --pagination--color-text: var(--global--color-primary); --pagination--color-link-hover: var(--global--color-primary-hover); --pagination--font-family: var(--global--font-secondary); --pagination--font-size: var(--global--font-size-lg); --pagination--font-weight: normal; --pagination--font-weight-strong: 600; /* Footer */ --footer--color-text: var(--global--color-primary); --footer--color-link: var(--global--color-primary); --footer--color-link-hover: var(--global--color-primary-hover); --footer--font-family: var(--global--font-primary); --footer--font-size: var(--global--font-size-sm); /* Block: Pull quote */ --pullquote--font-family: var(--global--font-primary); --pullquote--font-size: var(--heading--font-size-h3); --pullquote--font-style: normal; --pullquote--letter-spacing: var(--heading--letter-spacing-h4); --pullquote--line-height: var(--global--line-height-heading); --pullquote--border-width: 3px; --pullquote--border-color: var(--global--color-primary); --pullquote--color-foreground: var(--global--color-primary); --pullquote--color-background: var(--global--color-background); --quote--font-family: var(--global--font-secondary); --quote--font-size: var(--global--font-size-md); --quote--font-size-large: var(--global--font-size-xl); --quote--font-style: normal; --quote--font-weight: 700; --quote--font-weight-strong: bolder; --quote--font-style-large: normal; --quote--font-style-cite: normal; --quote--line-height: var(--global--line-height-body); --quote--line-height-large: 1.35; --separator--border-color: var(--global--color-border); --separator--height: 1px; /* Block: Table */ --table--stripes-border-color: var(--global--color-light-gray); --table--stripes-background-color: var(--global--color-light-gray); --table--has-background-text-color: var(--global--color-dark-gray); /* Widgets */ --widget--line-height-list: 1.9; --widget--line-height-title: 1.4; --widget--font-weight-title: 700; --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); /* Admin-bar height */ --global--admin-bar--height: 0; } .admin-bar { --global--admin-bar--height: 32px; @media only screen and (max-width: 782px) { --global--admin-bar--height: 46px; } } @media only screen and (min-width: 652px) { // Not using the mixin because it's compiled after this file :root { --global--font-size-xl: 2.5rem; // 40px / 16px --global--font-size-xxl: 6rem; // 96px / 16px --global--font-size-xxxl: 9rem; // 144px / 16px --heading--font-size-h3: 2rem; // 32px / 16px --heading--font-size-h2: 3rem; // 48px / 16px } } assets/sass/01-settings/fonts.scss 0000644 00000000077 15252513625 0013135 0 ustar 00 // Do we need to serve a font? Add the @font-face styles here. assets/sass/05-blocks/verse/_editor.scss 0000644 00000000072 15252513625 0014171 0 ustar 00 pre.wp-block-verse { padding: 0; color: currentColor; } assets/sass/05-blocks/verse/_style.scss 0000644 00000000105 15252513625 0014040 0 ustar 00 .wp-block-verse { font-family: var(--entry-content--font-family); } assets/sass/05-blocks/navigation/_editor.scss 0000644 00000001370 15252513625 0015206 0 ustar 00 .wp-block-navigation { .wp-block-navigation__container { background: var(--global--color-background); padding: 0; } .wp-block-navigation-link { .wp-block-navigation-link__content { padding: var(--primary-nav--padding); } .wp-block-navigation-link__label { font-family: var(--primary-nav--font-family); font-size: var(--primary-nav--font-size); font-weight: var(--primary-nav--font-weight); } } .has-child { .wp-block-navigation__container { box-shadow: var(--global--elevation); } } &:not(.has-text-color) { .wp-block-navigation-link { > a { &:hover, &:focus { color: var(--primary-nav--color-link-hover); } } } .wp-block-navigation-link__content { color: currentColor; } } } assets/sass/05-blocks/navigation/_style.scss 0000644 00000004515 15252513625 0015064 0 ustar 00 .wp-block-navigation { .wp-block-navigation-link { padding: 0; .wp-block-navigation-link__content { padding: var(--primary-nav--padding); } .wp-block-navigation-link__label { font-family: var(--primary-nav--font-family); font-size: var(--primary-nav--font-size); font-weight: var(--primary-nav--font-weight); } } .wp-block-navigation-link__submenu-icon { padding: 0; } // Top level navigation container. > .wp-block-navigation__container { .has-child { .wp-block-navigation-link { display: inherit; } .wp-block-navigation__container { border: none; left: 0; margin-left: var(--primary-nav--padding); min-width: max-content; opacity: 0; padding: 0; position: inherit; top: inherit; .wp-block-navigation-link { .wp-block-navigation-link__content { display: inline-block; padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding); } } .wp-block-navigation-link__submenu-icon { display: none; } } &:hover, &:focus-within { .wp-block-navigation__container { display: block; opacity: 1; visibility: visible; } } } > .has-child { > .wp-block-navigation__container { background: var(--global--color-background); margin: 0; padding: 0; position: absolute; top: 100%; border: 1px solid var(--primary-nav--border-color); &:before, &:after { content: ""; display: block; position: absolute; width: 0; top: -10px; left: var(--global--spacing-horizontal); border-style: solid; border-color: var(--primary-nav--border-color) transparent; border-width: 0 7px 10px 7px; } &:after { top: -9px; border-color: var(--global--color-background) transparent; } } } } &:not(.has-background) { .wp-block-navigation__container { background: var(--global--color-background); .wp-block-navigation__container { background: var(--global--color-background); } } } &:not(.has-text-color) { .wp-block-navigation-link { > a { &:hover, &:focus { color: var(--primary-nav--color-link-hover); } &:hover { text-decoration: underline; text-decoration-style: dotted; } } } .wp-block-navigation-link__content { color: currentColor; } } } assets/sass/05-blocks/paragraph/_editor.scss 0000644 00000000224 15252513625 0015011 0 ustar 00 p { line-height: var(--wp--typography--line-height, --global--line-height-body); &.has-background { padding: var(--global--spacing-unit); } } assets/sass/05-blocks/paragraph/_style.scss 0000644 00000000523 15252513625 0014665 0 ustar 00 p { line-height: var(--wp--typography--line-height, --global--line-height-body); // inherits general font style set at <body> &.has-background { padding: var(--global--spacing-unit); } // Override `color: inherit` from Core styles. &.has-text-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } } assets/sass/05-blocks/image/_editor.scss 0000644 00000001003 15252513625 0014122 0 ustar 00 /* Center image block by default in the editor */ .wp-block-image > div { text-align: center; } [data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized { margin: 0 auto; } /* Block Styles */ .wp-block-image.is-style-twentytwentyone-border img, .wp-block-image.is-style-twentytwentyone-image-frame img { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-image.is-style-twentytwentyone-image-frame img { padding: var(--global--spacing-unit); } assets/sass/05-blocks/image/_style.scss 0000644 00000002614 15252513625 0014005 0 ustar 00 .wp-block-image { text-align: center; figcaption { color: var(--global--color-primary); font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); margin-top: calc(0.5 * var(--global--spacing-unit)); margin-bottom: var(--global--spacing-unit); text-align: center; } .alignright { margin-left: var(--global--spacing-horizontal); } .alignleft { margin-right: var(--global--spacing-horizontal); } a:focus img { outline-offset: 2px; } } // Remove vertical margins from image block wrappers when floated .entry-content > *[class="wp-block-image"], .entry-content [class*="inner-container"] > *[class="wp-block-image"] { margin-top: 0; margin-bottom: 0; // Remove top margins from the following element when previous image block is floated + * { margin-top: 0; } } img { height: auto; max-width: 100%; vertical-align: middle; } // Block Styles .wp-block-image.is-style-twentytwentyone-border img, .wp-block-image.is-style-twentytwentyone-image-frame img { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-image.is-style-twentytwentyone-image-frame img { padding: var(--global--spacing-unit); } .entry-content { > .wp-block-image { > .alignleft, > .alignright { @include media(mobile) { max-width: 50%; } @include media(mobile-only) { margin-left: 0; margin-right: 0; } } } } assets/sass/05-blocks/tag-clould/_editor.scss 0000644 00000000103 15252513625 0015073 0 ustar 00 .wp-block-tag-cloud { &.aligncenter { text-align: center; } } assets/sass/05-blocks/tag-clould/_style.scss 0000644 00000000206 15252513625 0014751 0 ustar 00 .wp-block-tag-cloud { &.alignfull { padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); } } assets/sass/05-blocks/audio/_style.scss 0000644 00000000161 15252513625 0014017 0 ustar 00 .wp-block-audio { audio:focus { outline-offset: 5px; outline: 2px solid var(--global--color-primary); } } assets/sass/05-blocks/code/_editor.scss 0000644 00000000457 15252513625 0013766 0 ustar 00 .wp-block-code code { font-size: var(--global--font-size-xs); white-space: pre !important; overflow-x: auto; } .wp-block-code { border-color: var(--global--color-border); border-radius: 0; border-style: solid; border-width: 0.1rem; padding: var(--global--spacing-unit); color: currentColor; } assets/sass/05-blocks/code/_style.scss 0000644 00000000426 15252513625 0013634 0 ustar 00 .wp-block-code { border-color: var(--global--color-border); border-radius: 0; border-style: solid; border-width: 0.1rem; padding: var(--global--spacing-unit); code { font-size: var(--global--font-size-xs); white-space: pre; overflow-x: auto; display: block; } } assets/sass/05-blocks/social-icons/_editor.scss 0000644 00000000466 15252513625 0015437 0 ustar 00 .wp-block-social-links { // Social icons are horizontal, so they don't need vertical spacing. [data-block] { margin-top: 0; margin-bottom: 0; } &.is-style-twentytwentyone-social-icons-color { button { color: var(--global--color-primary); } .wp-social-link { background: none; } } } assets/sass/05-blocks/social-icons/_style.scss 0000644 00000000350 15252513625 0015301 0 ustar 00 .wp-block-social-links { a:focus { color: var(--global--color-primary); } &.is-style-twentytwentyone-social-icons-color { a { color: var(--global--color-primary); } .wp-social-link { background: none; } } } assets/sass/05-blocks/html/_editor.scss 0000644 00000000337 15252513625 0014015 0 ustar 00 [data-type="core/html"] textarea { // Make sure that the color is not white on white when a dark body background is used. color: var(--global--color-dark-gray); border-radius: 0; padding: var(--global--spacing-unit); } assets/sass/05-blocks/utilities/_editor.scss 0000644 00000006243 15252513625 0015066 0 ustar 00 /** * Editor Post Title * - Needs a special styles */ // Post title style .wp-block.editor-post-title__block { border-bottom: 3px solid var(--global--color-border); padding-bottom: calc(2 * var(--global--spacing-vertical)); margin-bottom: calc(3 * var(--global--spacing-vertical)); max-width: var(--responsive--alignwide-width); .editor-post-title__input { color: var(--global--color-secondary); font-family: var(--heading--font-family); font-size: var(--global--font-size-page-title); font-weight: var(--heading--font-weight-page-title); line-height: var(--heading--line-height-h1); } } // Editor UI font styles .wp-block.block-editor-default-block-appender > textarea { font-family: var(--global--font-secondary); font-size: var(--global--font-size-md); } // Gutenberg text color options .has-primary-color[class] { color: var(--global--color-primary); } .has-secondary-color[class] { color: var(--global--color-secondary); } // Gutenberg background-color options .has-background { a, p, h1, h2, h3, h4, h5, h6 { color: currentColor; } } .has-primary-background-color[class] { background-color: var(--global--color-primary); color: var(--global--color-background); } .has-secondary-background-color[class] { background-color: var(--global--color-secondary); color: var(--global--color-background); } .has-white-background-color[class] { background-color: var(--global--color-white); color: var(--global--color-secondary); } .has-black-background-color[class] { background-color: var(--global--color-black); color: var(--global--color-primary); } // Spacing Overrides [data-block] { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } // Block Alignments .wp-block { // Gutenberg injects a rule that limits the max width of .wp-block to 580px // This line overrides it to use the responsive spacing rules for default width content max-width: var(--responsive--aligndefault-width); // Use the theme's max-width for wide alignment. &[data-align="wide"], &.alignwide { max-width: var(--responsive--alignwide-width); } &[data-align="full"], &.alignfull { max-width: none; } } .alignleft { margin: 0; margin-right: var(--global--spacing-horizontal); } .alignright { margin: 0; margin-left: var(--global--spacing-horizontal); } // Drop cap .has-drop-cap:not(:focus)::first-letter { font-family: var(--heading--font-family); font-weight: var(--heading--font-weight); line-height: 0.66; text-transform: uppercase; font-style: normal; float: left; margin: 0.1em 0.1em 0 0; font-size: calc(1.2 * var(--heading--font-size-h1)); } @media only screen and (min-width: 482px) { .wp-block[data-align="left"] > * { max-width: 290px; margin-right: var(--global--spacing-horizontal); } .wp-block[data-align="right"] > * { max-width: 290px; margin-left: var(--global--spacing-horizontal); } } // Remove the border of blockquotes inside the classic block. .wp-block-freeform.block-library-rich-text__tinymce blockquote { border: none; } // Adjust the position of the quote symbol for blockquotes inside the classic block. .wp-block-freeform.block-library-rich-text__tinymce blockquote:before { left: 5px; } assets/sass/05-blocks/utilities/_font-sizes.scss 0000644 00000002430 15252513625 0015673 0 ustar 00 // Gutenberg Font-size utility classes :root { .is-extra-small-text, .has-extra-small-font-size { font-size: var(--global--font-size-xs); } .is-small-text, .has-small-font-size { font-size: var(--global--font-size-sm); } .is-regular-text, .has-regular-font-size, .is-normal-font-size, .has-normal-font-size, .has-medium-font-size { font-size: var(--global--font-size-base); } .is-large-text, .has-large-font-size { font-size: var(--global--font-size-lg); line-height: var(--global--line-height-heading); } .is-larger-text, .has-larger-font-size, .is-extra-large-text, .has-extra-large-font-size { font-size: var(--global--font-size-xl); line-height: var(--global--line-height-heading); } .is-huge-text, .has-huge-font-size { font-size: var(--global--font-size-xxl); line-height: var(--global--line-height-heading); // This size is meant to mimic the page titles, so the font weight is reduced to match. font-weight: var(--heading--font-weight-page-title); } .is-gigantic-text, .has-gigantic-font-size { font-size: var(--global--font-size-xxxl); line-height: var(--global--line-height-heading); // This size is meant to mimic the page titles, so the font weight is reduced to match. font-weight: var(--heading--font-weight-page-title); } } assets/sass/05-blocks/utilities/_style.scss 0000644 00000006035 15252513625 0014737 0 ustar 00 /* Block Alignments */ /** * These selectors set the default max width for content appearing inside a post or page. */ .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), *[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { @extend %responsive-aligndefault-width; } /** * .alignleft */ .alignleft { /*rtl:ignore*/ text-align: left; margin-top: 0; } // Targeting the .entry-content class is necessary to ensure these styles // only apply when the block isn't nested. .entry-content > .alignleft { max-width: var(--responsive--aligndefault-width); @extend %responsive-alignleft; } @include media(mobile) { .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-right: var(--global--spacing-horizontal); margin-bottom: var(--global--spacing-vertical); } .entry-content > .alignleft { max-width: calc(50% - var(--responsive--alignleft-margin)); } } /** * .aligncenter */ .aligncenter { clear: both; display: block; float: none; margin-right: auto; margin-left: auto; text-align: center; } /** * .alignright */ .alignright { margin-top: 0; margin-bottom: var(--global--spacing-vertical); } // Targeting the .entry-content class is necessary to ensure these styles // only apply when the block isn't nested. .entry-content > .alignright { max-width: var(--responsive--aligndefault-width); @extend %responsive-alignright; } @include media(mobile) { .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-left: var(--global--spacing-horizontal); } .entry-content > .alignright { max-width: calc(50% - var(--responsive--alignright-margin)); } } // Make sure siblings of floated elements are top-aligned when nested [class*="inner-container"] > .alignleft + *, [class*="inner-container"] > .alignright + * { margin-top: 0; } /** * .alignwide */ .alignwide { clear: both; @extend %responsive-alignwide-width; } .alignwide [class*="inner-container"] > .alignwide { @extend %responsive-alignwide-width-nested; } /** * .alignfull */ .alignfull { clear: both; @extend %responsive-alignfull-width-mobile; @extend %responsive-alignfull-width; } .alignfull [class*="inner-container"] > .alignwide { @extend %responsive-alignwide-width-nested; } // Content alignment .has-left-content { justify-content: flex-start; } .has-right-content { justify-content: flex-end; } // Parallax .has-parallax { background-attachment: fixed; } // Drop caps .has-drop-cap:not(:focus)::first-letter { font-family: var(--heading--font-family); font-weight: var(--heading--font-weight); line-height: 0.66; text-transform: uppercase; font-style: normal; float: left; margin: 0.1em 0.1em 0 0; font-size: calc(1.2 * var(--heading--font-size-h1)); } .has-drop-cap:not(:focus)::after { content: ""; display: table; clear: both; padding-top: 14px; } .desktop-only { display: none; @include media(mobile) { display: block; } } assets/sass/05-blocks/latest-comments/_editor.scss 0000644 00000000060 15252513625 0016161 0 ustar 00 .wp-block-latest-comments { padding-left: 0; } assets/sass/05-blocks/latest-comments/_style.scss 0000644 00000001377 15252513625 0016047 0 ustar 00 .wp-block-latest-comments { padding-left: 0; .wp-block-latest-comments__comment { font-size: var(--global--font-size-sm); line-height: var(--global--line-height-body); /* Vertical margins logic */ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } .wp-block-latest-comments__comment-meta { font-family: var(--heading--font-family); } .wp-block-latest-comments__comment-date { color: var(--global--color-primary); font-size: var(--global--font-size-sm); } .wp-block-latest-comments__comment-excerpt p { font-size: var(--global--font-size-sm); line-height: var(--global--line-height-body); margin: 0; } } assets/sass/05-blocks/list/_editor.scss 0000644 00000000724 15252513625 0014024 0 ustar 00 ul, ol { font-family: var(--list--font-family); margin: var(--global--spacing-vertical) 0; padding-left: calc(2 * var(--global--spacing-horizontal)); // Utility classes &.aligncenter { list-style-position: inside; padding: 0; text-align: center; } &.alignright { list-style-position: inside; padding: 0; text-align: right; } } li { > ul, > ol { margin: 0; } } dt { font-family: var(--definition-term--font-family); font-weight: bold; } assets/sass/05-blocks/list/_style.scss 0000644 00000001011 15252513625 0013664 0 ustar 00 ul, ol { font-family: var(--list--font-family); margin: 0; padding-left: calc(2 * var(--global--spacing-horizontal)); // Utility classes &.aligncenter { list-style-position: inside; padding: 0; } &.alignright { list-style-position: inside; text-align: right; padding: 0; } } ul { list-style-type: disc; } ol { list-style-type: decimal; } dt { font-family: var(--definition-term--font-family); font-weight: bold; } dd { margin: 0; padding-left: calc(2 * var(--global--spacing-horizontal)); } assets/sass/05-blocks/group/_editor.scss 0000644 00000002332 15252513625 0014202 0 ustar 00 .wp-block-group { // Start IE clearfix. // This hack is only necessary because we want to support IE11. // If we don't want to support IE11, then "display: flow-root" would suffice. display: block; clear: both; display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties &:before, &:after { content: ""; display: block; clear: both; } // End IE clearfix. &.has-background { padding: var(--global--spacing-vertical); [data-align="full"] & { margin-top: 0; margin-bottom: 0; } } // Block Styles &.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); padding: var(--global--spacing-vertical); .wp-block-group__inner-container > [data-align="full"] { max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); margin-left: calc(-1 * var(--global--spacing-vertical)); } } @include innerblock-margin-clear(".wp-block-group__inner-container"); } .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { margin: 0; width: 100%; } assets/sass/05-blocks/group/_style.scss 0000644 00000003406 15252513625 0014057 0 ustar 00 .wp-block-group { // Start IE clearfix. // This hack is only necessary because we want to support IE11. // If we don't want to support IE11, then "display: flow-root" would suffice. display: block; clear: both; display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties &:before, &:after { content: ""; display: block; clear: both; } // End IE clearfix. .wp-block-group__inner-container { margin-left: auto; margin-right: auto; > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); &.alignfull { @extend %responsive-alignfull-width-mobile; } @include media(mobile) { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } } &.has-background { padding: calc(0.666 * var(--global--spacing-vertical)); @include media(mobile) { padding: var(--global--spacing-vertical); } } // Block Styles &.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); padding: var(--global--spacing-vertical); } // Adjust alignfull items to account for left and right padding. &.has-background, &.is-style-twentytwentyone-border { .wp-block-group__inner-container > .alignfull, .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); margin-left: calc(-1 * var(--global--spacing-vertical)); } } } assets/sass/05-blocks/file/_editor.scss 0000644 00000000650 15252513625 0013766 0 ustar 00 .wp-block-file { .wp-block-file__textlink { text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: 1px; &:hover { text-decoration: underline; text-decoration-style: dotted; } } .wp-block-file__button { // Extend button style @include button-style(); display: inline-block; &:hover { color: var(--button--color-text-hover); background: transparent; } } } assets/sass/05-blocks/file/_style.scss 0000644 00000000713 15252513625 0013640 0 ustar 00 .wp-block-file { // Undo Gutenberg hover defaults a.wp-block-file__button:active, a.wp-block-file__button:focus, a.wp-block-file__button:hover { color: var(--button--color-text-hover); opacity: inherit; } a.wp-block-file__button:visited { color: var(--button--color-text); &:hover { color: var(--button--color-text-hover); } } .wp-block-file__button { // Extend button style @include button-style(); display: inline-block; } } assets/sass/05-blocks/quote/_editor.scss 0000644 00000006051 15252513625 0014205 0 ustar 00 .wp-block-quote { position: relative; border-left: none; margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal); p { font-family: var(--quote--font-family); font-size: var(--quote--font-size); font-style: var(--quote--font-style); font-weight: var(--quote--font-weight); line-height: var(--quote--line-height); } strong { font-weight: var(--quote--font-weight-strong); } &:before { content: "\201C"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); left: calc(-0.5 * var(--global--spacing-horizontal)); } .wp-block-quote__citation { color: var(--global--color-primary); font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); .has-background &, [class*="background-color"] &, [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { color: currentColor; } } &.has-text-align-right { margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; padding-right: 0; border-right: none; // Hide the left aligned quote. &:before { display: none; } // Align the quote left of the text. p:before { content: "\201D"; font-size: var(--quote--font-size); font-weight: normal; line-height: var(--quote--line-height); margin-right: 5px; } } &.has-text-align-center { margin: var(--global--spacing-vertical) auto; &:before { display: none; } } &.is-large, &.is-style-large { padding-left: 0; /* Resetting margins to match _block-container.scss */ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); p { font-size: var(--quote--font-size-large); font-style: var(--quote--font-style-large); line-height: var(--quote--line-height-large); } &:before { font-size: var(--quote--font-size-large); line-height: var(--quote--line-height-large); left: calc(-1 * var(--global--spacing-horizontal)); } &.has-text-align-right { // Hide the left aligned quote. &:before { display: none; } // Align the quote left of the text. p:before { content: "\201D"; font-size: var(--quote--font-size-large); font-weight: normal; line-height: var(--quote--line-height-large); margin-right: 10px; } } @include media(mobile-only) { padding-left: var(--global--spacing-horizontal); &:before { left: 0; } &.has-text-align-right { padding-left: 0; padding-right: var(--global--spacing-horizontal); &:before { right: 0; } } } } @include media(mobile-only) { padding-left: calc(0.5 * var(--global--spacing-horizontal)); &:before { left: 0; } &.has-text-align-right { padding-left: 0; padding-right: calc(0.5 * var(--global--spacing-horizontal)); &:before { right: 0; } } &.has-text-align-center { padding-left: 0; padding-right: 0; } } @include media(mobile) { margin-left: auto; &.has-text-align-right { margin-right: auto; } } } assets/sass/05-blocks/quote/_style.scss 0000644 00000005065 15252513625 0014063 0 ustar 00 .wp-block-quote { border-left: none; &:before { content: "\201C"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); left: 8px; } .wp-block-quote__citation, cite, footer { .has-background &, [class*="background-color"] &, [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { color: currentColor; } } /** * Block Options */ &.has-text-align-right { margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; padding-right: 0; border-right: none; // Hide the left aligned quote. &:before { display: none; } // Align the quote left of the text. p:before { content: "\201D"; font-size: var(--quote--font-size); font-weight: normal; line-height: var(--quote--line-height); margin-right: 5px; } } &.has-text-align-center { margin: var(--global--spacing-vertical) auto; &:before { display: none; } } &.is-large, &.is-style-large { padding-left: 0; padding-right: 0; /* Resetting margins to match _block-container.scss */ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); p { font-size: var(--quote--font-size-large); font-style: var(--quote--font-style-large); line-height: var(--quote--line-height-large); } &:before { font-size: var(--quote--font-size-large); line-height: var(--quote--line-height-large); left: calc(-1 * var(--global--spacing-horizontal)); } &.has-text-align-right { // Hide the left aligned quote. &:before { display: none; } // Align the quote left of the text. p:before { content: "\201D"; font-size: var(--quote--font-size-large); font-weight: normal; line-height: var(--quote--line-height-large); margin-right: 10px; } } .wp-block-quote__citation, cite, footer { color: var(--global--color-primary); font-size: var(--global--font-size-sm); } @include media(mobile-only) { padding-left: var(--global--spacing-horizontal); &:before { left: 0; } &.has-text-align-right { padding-left: 0; padding-right: var(--global--spacing-horizontal); &:before { right: 0; } } &.has-text-align-center { padding-left: 0; padding-right: 0; } } } @include media(mobile-only) { &.has-text-align-right { padding-left: 0; padding-right: calc(0.5 * var(--global--spacing-horizontal)); &:before { right: 0; } } &.has-text-align-center { padding-left: 0; padding-right: 0; } } } assets/sass/05-blocks/blocks-editor.scss 0000644 00000002204 15252513625 0014160 0 ustar 00 // Block Styles for the Editor // - These styles replace key Gutenberg Block styles for fonts, colors, and // spacing with CSS-variables overrides in the Block Editor // - In the future the Block styles may get compiled to individual .css // files and conditionally loaded @import "button/editor"; @import "code/editor"; @import "cover/editor"; @import "columns/editor"; @import "file/editor"; @import "gallery/editor"; @import "group/editor"; @import "heading/editor"; @import "html/editor"; @import "image/editor"; @import "latest-comments/editor"; @import "latest-posts/editor"; @import "legacy/editor"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc. @import "list/editor"; @import "media-text/editor"; @import "navigation/editor"; @import "paragraph/editor"; @import "preformatted/editor"; @import "pullquote/editor"; @import "quote/editor"; @import "rss/editor"; @import "search/editor"; @import "separator/editor"; @import "social-icons/editor"; @import "table/editor"; @import "tag-clould/editor"; @import "verse/editor"; @import "utilities/font-sizes"; @import "utilities/editor"; // Import LAST to cascade properly assets/sass/05-blocks/separator/_editor.scss 0000644 00000001660 15252513625 0015051 0 ustar 00 .wp-block-separator, hr { border-bottom: var(--separator--height) solid var(--separator--border-color); clear: both; opacity: 1; &[style*="text-align:right"], &[style*="text-align: right"] { border-right-color: var(--separator--border-color); } &:not(.is-style-dots) { max-width: var(--responsive--aligndefault-width); } [data-align="full"] > &, [data-align="wide"] > & { max-width: inherit; } &.is-style-twentytwentyone-separator-thick { border-bottom-width: calc(3 * var(--separator--height)); } &.is-style-dots { border-bottom: none; &.has-background, &.has-text-color { background-color: transparent !important; &:before { color: currentColor !important; } } &:before { color: var(--separator--border-color); } } .has-background &, [class*="background-color"] &, [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { border-color: currentColor; } } assets/sass/05-blocks/separator/_style.scss 0000644 00000002354 15252513625 0014724 0 ustar 00 hr { border-style: none; border-bottom: var(--separator--height) solid var(--separator--border-color); clear: both; margin-left: auto; margin-right: auto; &.wp-block-separator { border-bottom: var(--separator--height) solid var(--separator--border-color); opacity: 1; &:not(.is-style-dots):not(.alignwide) { max-width: var(--responsive--aligndefault-width); } &:not(.is-style-dots) { &.alignwide { max-width: var(--responsive--alignwide-width); } &.alignfull { max-width: var(--responsive--alignfull-width); } } /** * Block Options */ &.is-style-twentytwentyone-separator-thick { border-bottom-width: calc(3 * var(--separator--height)); } &.is-style-dots { &.has-background, &.has-text-color { background-color: transparent !important; &:before { color: currentColor !important; } } &:before { color: var(--separator--border-color); font-size: var(--global--font-size-xl); letter-spacing: var(--global--font-size-sm); padding-left: var(--global--font-size-sm); } } .has-background &, [class*="background-color"] &, [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { border-color: currentColor; } } } assets/sass/05-blocks/search/_editor.scss 0000644 00000011556 15252513625 0014323 0 ustar 00 .wp-block-search { max-width: var(--responsive--aligndefault-width); .wp-block-search__label { font-size: var(--form--font-size); font-weight: var(--form--label-weight); margin-bottom: calc(var(--global--spacing-vertical) / 3); } .wp-block-search__input { border: var(--form--border-width) solid var(--form--border-color); border-radius: var(--form--border-radius); font-family: var(--form--font-family); font-size: var(--form--font-size); line-height: var(--form--line-height); max-width: inherit; margin-right: calc(-1 * var(--button--border-width)); padding: var(--form--spacing-unit); .is-dark-theme & { background: var(--global--color-white-90); } .has-background.has-white-background-color &, .has-background.has-green-background-color &, .has-background.has-blue-background-color &, .has-background.has-purple-background-color &, .has-background.has-red-background-color &, .has-background.has-orange-background-color &, .has-background.has-yellow-background-color & { .is-dark-theme & { border-color: var(--form--color-text); } } .has-background.has-gray-background-color &, .has-background.has-dark-gray-background-color &, .has-background.has-black-background-color & { border-color: var(--global--color-white); } } .wp-block-search__button { @include button-style(); box-shadow: none; margin-left: 0; background-color: transparent; color: var(--button--color-text-hover); &:hover { color: var(--button--color-text); background-color: var(--button--color-background); } &.has-icon { padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)); svg { width: 40px; height: 40px; } } .has-background.has-gray-background-color &, .has-background.has-dark-gray-background-color &, .has-background.has-black-background-color & { color: var(--global--color-white); border-color: currentColor; &:hover { color: var(--global--color-white); background-color: var(--button--color-background); border-color: var(--global--color-white); .is-dark-theme & { color: var(--button--color-text); background-color: var(--button--color-background); } } } .has-background.has-white-background-color &, .has-background.has-green-background-color &, .has-background.has-blue-background-color &, .has-background.has-purple-background-color &, .has-background.has-red-background-color &, .has-background.has-orange-background-color &, .has-background.has-yellow-background-color & { &:hover { color: var(--global--color-white); background-color: var(--form--border-color); border-color: var(--form--border-color); } .is-dark-theme & { color: var(--form--color-text); border-color: currentColor; &:hover { color: var(--global--color-white); background-color: var(--button--color-text); border-color: var(--button--color-text); } } } } &.wp-block-search__button-inside { .wp-block-search__input, .has-background.has-white-background-color & .wp-block-search__input, .has-background.has-green-background-color & .wp-block-search__input, .has-background.has-blue-background-color & .wp-block-search__input, .has-background.has-purple-background-color & .wp-block-search__input, .has-background.has-red-background-color & .wp-block-search__input, .has-background.has-orange-background-color & .wp-block-search__input, .has-background.has-yellow-background-color & .wp-block-search__input { border: none; } &.wp-block-search__text-button { .wp-block-search__button { // Match the text button size with the icon button. padding: var(--button--padding-vertical) var(--button--padding-horizontal); } } .wp-block-search__button { .is-dark-theme & { color: var(--button--color-text); border-color: currentColor; &:hover { color: var(--global--color-white); background-color: var(--button--color-text); border-color: var(--button--color-text); } } .has-background.has-gray-background-color &, .has-background.has-dark-gray-background-color &, .has-background.has-black-background-color & { color: var(--button--color-text-hover); border-color: currentColor; &:hover { color: var(--global--color-white); background-color: var(--button--color-background); border-color: var(--button--color-background); } .is-dark-theme & { color: var(--button--color-text); border-color: currentColor; &:hover { color: var(--global--color-white); background-color: var(--button--color-text); border-color: var(--button--color-text); } } } } } } .wp-block[data-align="center"] > * { text-align: center; } .wp-block[data-align="center"] { .wp-block-search__button-only { .wp-block-search__inside-wrapper { justify-content: center; } } } assets/sass/05-blocks/search/_style.scss 0000644 00000010262 15252513625 0014166 0 ustar 00 .wp-block-search { max-width: var(--responsive--aligndefault-width); &__button-only.aligncenter { .wp-block-search__inside-wrapper { justify-content: center; } } .wp-block-search__label { font-size: var(--form--font-size); font-weight: var(--form--label-weight); margin-bottom: calc(var(--global--spacing-vertical) / 3); } .wp-block-search__input { border: var(--form--border-width) solid var(--form--border-color); border-radius: var(--form--border-radius); color: var(--form--color-text); line-height: var(--form--line-height); max-width: inherit; margin-right: calc(-1 * var(--button--border-width)); padding: var(--form--spacing-unit); &:focus { color: var(--form--color-text); border-color: var(--form--border-color); } .has-background &, [class*="background-color"] &, [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { border-color: currentColor; } .has-background.has-gray-background-color &, .has-background.has-dark-gray-background-color &, .has-background.has-black-background-color & { border-color: var(--global--color-white); } } button.wp-block-search__button { margin-left: 0; background-color: transparent; color: var(--button--color-text-hover); line-height: 1; &:hover { background-color: var(--button--color-background); color: var(--button--color-text); } &.has-icon { padding: 6px calc(0.5 * var(--button--padding-horizontal)); svg { width: 40px; height: 40px; fill: currentColor; } } .has-background.has-gray-background-color &, .has-background.has-dark-gray-background-color &, .has-background.has-black-background-color & { color: var(--global--color-white); border-color: currentColor; &:hover { background-color: var(--button--color-background); border-color: var(--global--color-white); color: var(--global--color-white); .is-dark-theme & { color: var(--button--color-text); } } } .has-background.has-white-background-color &, .has-background.has-green-background-color &, .has-background.has-blue-background-color &, .has-background.has-purple-background-color &, .has-background.has-red-background-color &, .has-background.has-orange-background-color &, .has-background.has-yellow-background-color & { border-color: currentColor; color: currentColor; &:hover { background-color: var(--form--border-color); border-color: var(--form--border-color); color: var(--global--color-white); .is-dark-theme & { border-color: var(--button--color-text); background-color: var(--button--color-text); color: var(--button--color-background); } } } } &.wp-block-search__button-inside { .wp-block-search__inside-wrapper { background-color: var(--global--color-white); border: var(--form--border-width) solid var(--form--border-color); border-radius: var(--form--border-radius); .wp-block-search__input { margin-right: 0; &:focus { outline: 2px dotted var(--form--border-color); outline-offset: -5px; .is-dark-theme & { outline-color: currentColor; } } } } &.wp-block-search__text-button { button.wp-block-search__button { // Match the text button size with the icon button. padding: var(--button--padding-vertical) var(--button--padding-horizontal); } } button.wp-block-search__button { .has-background.has-gray-background-color &, .has-background.has-dark-gray-background-color &, .has-background.has-black-background-color & { border-color: var(--button--color-background); color: var(--button--color-background); &:hover { color: var(--global--color-white); } .is-dark-theme & { border-color: var(--button--color-text); color: var(--button--color-text); &:hover { color: var(--global--color-white); } } } .is-dark-theme & { border-color: var(--button--color-text); color: var(--button--color-text); &:hover { border-color: var(--button--color-text); background-color: var(--button--color-text); color: var(--button--color-background); } } } } } .wp-block-search__button { box-shadow: none; } assets/sass/05-blocks/rss/_editor.scss 0000644 00000005277 15252513625 0013670 0 ustar 00 .wp-block-rss { padding-left: 0; > li { list-style: none; } // Vertical margins logic &:not(.is-grid) > li { margin-top: calc(1.666 * var(--global--spacing-vertical)); margin-bottom: calc(1.666 * var(--global--spacing-vertical)); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } &.is-grid { > li { margin-bottom: var(--global--spacing-vertical); &:last-child { margin-bottom: 0; } } // Remove bottom margins in grid columns &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { margin-bottom: 0; } } > li > * { margin-top: calc(0.333 * var(--global--spacing-vertical)); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } // Post title .wp-block-rss__item-title > a { display: inline-block; font-family: var(--latest-posts--title-font-family); font-size: var(--latest-posts--title-font-size); font-weight: var(--heading--font-weight); line-height: var(--global--line-height-heading); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } // Post author .wp-block-rss__item-author { color: var(--global--color-primary); font-size: var(--global--font-size-md); line-height: var(--global--line-height-body); } // Post date .wp-block-rss__item-publish-date { color: var(--global--color-primary); font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); [class*="inner-container"] &, .has-background & { color: currentColor; } } // Post content .wp-block-rss__item-excerpt, .wp-block-rss__item-full-content { font-family: var(--latest-posts--description-font-family); font-size: var(--latest-posts--description-font-size); line-height: var(--global--line-height-body); margin-top: calc(0.666 * var(--global--spacing-vertical)); } // Utility classes &.alignfull { padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); .entry-content [class*="inner-container"] &, .entry-content .has-background & { padding-left: 0; padding-right: 0; } } } assets/sass/05-blocks/rss/_style.scss 0000644 00000005277 15252513625 0013542 0 ustar 00 .wp-block-rss { padding-left: 0; > li { list-style: none; } // Vertical margins logic &:not(.is-grid) > li { margin-top: calc(1.666 * var(--global--spacing-vertical)); margin-bottom: calc(1.666 * var(--global--spacing-vertical)); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } &.is-grid { > li { margin-bottom: var(--global--spacing-vertical); &:last-child { margin-bottom: 0; } } // Remove bottom margins in grid columns &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { margin-bottom: 0; } } > li > * { margin-top: calc(0.333 * var(--global--spacing-vertical)); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } // Post title .wp-block-rss__item-title > a { display: inline-block; font-family: var(--latest-posts--title-font-family); font-size: var(--latest-posts--title-font-size); font-weight: var(--heading--font-weight); line-height: var(--global--line-height-heading); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } // Post author .wp-block-rss__item-author { color: var(--global--color-primary); font-size: var(--global--font-size-md); line-height: var(--global--line-height-body); } // Post date .wp-block-rss__item-publish-date { color: var(--global--color-primary); font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); [class*="inner-container"] &, .has-background & { color: currentColor; } } // Post content .wp-block-rss__item-excerpt, .wp-block-rss__item-full-content { font-family: var(--latest-posts--description-font-family); font-size: var(--latest-posts--description-font-size); line-height: var(--global--line-height-body); margin-top: calc(0.666 * var(--global--spacing-vertical)); } // Utility classes &.alignfull { padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); .entry-content [class*="inner-container"] &, .entry-content .has-background & { padding-left: 0; padding-right: 0; } } } assets/sass/05-blocks/media-text/_editor.scss 0000644 00000000575 15252513625 0015116 0 ustar 00 .wp-block-media-text { [data-align="full"] & { margin-top: 0; margin-bottom: 0; } @include innerblock-margin-clear(".wp-block-media-text__content"); .wp-block-media-text__content { padding: var(--global--spacing-horizontal); } // Block Styles &.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } } assets/sass/05-blocks/media-text/_style.scss 0000644 00000001760 15252513625 0014765 0 ustar 00 .wp-block-media-text { &.alignfull { margin-top: 0; margin-bottom: 0; } a:focus img { outline-offset: -1px; } .wp-block-media-text__content { padding: var(--global--spacing-horizontal); @include media(tablet) { padding: var(--global--spacing-vertical); } > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); @include media(mobile) { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } } /** * Block Options */ &.is-stacked-on-mobile .wp-block-media-text__content { @include media(mobile) { padding-top: var(--global--spacing-vertical); padding-bottom: var(--global--spacing-vertical); } } // Block Styles &.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } } assets/sass/05-blocks/blocks.scss 0000644 00000002156 15252513625 0012702 0 ustar 00 // Blocks // - These styles replace key Gutenberg Block styles with font, color, and // spacing with CSS-variables overrides // - In the future the Block styles may get compiled to individual .css // files and conditionally loaded @import "audio/style"; @import "button/style"; @import "code/style"; @import "columns/style"; @import "cover/style"; @import "file/style"; @import "gallery/style"; @import "group/style"; @import "heading/style"; @import "image/style"; @import "latest-comments/style"; @import "latest-posts/style"; @import "legacy/style"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc. @import "list/style"; @import "media-text/style"; @import "navigation/style"; @import "paragraph/style"; @import "preformatted/style"; @import "pullquote/style"; @import "quote/style"; @import "rss/style"; @import "search/style"; @import "separator/style"; @import "social-icons/style"; @import "spacer/style"; @import "table/style"; @import "tag-clould/style"; @import "verse/style"; @import "video/style"; @import "utilities/font-sizes"; @import "utilities/style"; // Import LAST to cascade properly assets/sass/05-blocks/heading/_editor.scss 0000644 00000003222 15252513625 0014444 0 ustar 00 .wp-block-heading h1, h1, .h1, .wp-block-heading h2, h2, .h2, .wp-block-heading h3, h3, .h3, .wp-block-heading h4, h4, .h4, .wp-block-heading h5, h5, .h5, .wp-block-heading h6, h6, .h6 { clear: both; font-family: var(--heading--font-family); font-weight: var(--heading--font-weight); strong { font-weight: var(--heading--font-weight-strong); } &[style*="--wp--typography--line-height"] { line-height: var(--wp--typography--line-height, --global--line-height-body); } } .wp-block-heading h1, h1, .h1 { font-size: var(--heading--font-size-h1); letter-spacing: var(--heading--letter-spacing-h1); line-height: var(--heading--line-height-h1); } .wp-block-heading h2, h2, .h2 { font-size: var(--heading--font-size-h2); letter-spacing: var(--heading--letter-spacing-h2); line-height: var(--heading--line-height-h2); } .wp-block-heading h3, h3, .h3 { font-size: var(--heading--font-size-h3); letter-spacing: var(--heading--letter-spacing-h3); line-height: var(--heading--line-height-h3); } .wp-block-heading h4, h4, .h4 { font-size: var(--heading--font-size-h4); font-weight: var(--heading--font-weight-strong); letter-spacing: var(--heading--letter-spacing-h4); line-height: var(--heading--line-height-h4); } .wp-block-heading h5, h5, .h5 { font-size: var(--heading--font-size-h5); font-weight: var(--heading--font-weight-strong); letter-spacing: var(--heading--letter-spacing-h5); line-height: var(--heading--line-height-h5); } .wp-block-heading h6, h6, .h6 { font-size: var(--heading--font-size-h6); font-weight: var(--heading--font-weight-strong); letter-spacing: var(--heading--letter-spacing-h6); line-height: var(--heading--line-height-h6); } assets/sass/05-blocks/heading/_style.scss 0000644 00000002412 15252513625 0014316 0 ustar 00 h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { clear: both; font-family: var(--heading--font-family); font-weight: var(--heading--font-weight); strong { font-weight: var(--heading--font-weight-strong); } } h1, .h1 { font-size: var(--heading--font-size-h1); letter-spacing: var(--heading--letter-spacing-h1); line-height: var(--heading--line-height-h1); } h2, .h2 { font-size: var(--heading--font-size-h2); letter-spacing: var(--heading--letter-spacing-h2); line-height: var(--heading--line-height-h2); } h3, .h3 { font-size: var(--heading--font-size-h3); letter-spacing: var(--heading--letter-spacing-h3); line-height: var(--heading--line-height-h3); } h4, .h4 { font-size: var(--heading--font-size-h4); font-weight: var(--heading--font-weight-strong); letter-spacing: var(--heading--letter-spacing-h4); line-height: var(--heading--line-height-h4); } h5, .h5 { font-size: var(--heading--font-size-h5); font-weight: var(--heading--font-weight-strong); letter-spacing: var(--heading--letter-spacing-h5); line-height: var(--heading--line-height-h5); } h6, .h6 { font-size: var(--heading--font-size-h6); font-weight: var(--heading--font-weight-strong); letter-spacing: var(--heading--letter-spacing-h6); line-height: var(--heading--line-height-h6); } assets/sass/05-blocks/spacer/_style.scss 0000644 00000000343 15252513625 0014175 0 ustar 00 .wp-block-spacer { display: block; // Remove vertical margins margin-bottom: 0 !important; margin-top: 0 !important; @include media(mobile-only) { &[style] { height: var(--global--spacing-unit) !important; } } } assets/sass/05-blocks/button/_editor.scss 0000644 00000005323 15252513625 0014364 0 ustar 00 .wp-block-button__link { // Extend button style @include button-style(); } /** * Block Options */ // The parent container does not need outer margins applied. // The children should all have top and bottom margins. [data-block].wp-block-buttons { margin-top: 0; margin-bottom: 0; .wp-block-button:first-child { margin-top: var(--global--spacing-vertical); } .wp-block-button:last-child { margin-bottom: var(--global--spacing-vertical); } } .wp-block-button { // Target the default and filled button states. &:not(.is-style-outline) { .wp-block-button__link { &:active { color: var(--button--color-text-active) !important; background: transparent !important; border-color: var(--button--color-background); } &:hover { color: var(--button--color-text-hover) !important; background: transparent !important; border-color: var(--button--color-background); } } } // Outline Style. &.is-style-outline { .wp-block-button__link { color: var(--button--color-background); background: transparent; border: var(--button--border-width) solid currentColor; padding: var(--button--padding-vertical) var(--button--padding-horizontal); &:active, &:hover { background-color: var(--button--color-background); color: var(--button--color-text); border-color: var(--button--color-background); } &.has-background { border-color: var(--button--color-background); &:active, &:hover { background-color: var(--button--color-background) !important; } } &.has-background:not(.has-text-color) { color: var(--global--color-dark-gray); } &.has-background.has-gray-background-color:not(.has-text-color), &.has-background.has-dark-gray-background-color:not(.has-text-color), &.has-background.has-black-background-color:not(.has-text-color) { color: var(--global--color-white); } .is-dark-theme & { &:not(.has-text-color) { &.has-background.has-white-background-color, &.has-background.has-green-background-color, &.has-background.has-blue-background-color, &.has-background.has-purple-background-color, &.has-background.has-red-background-color, &.has-background.has-orange-background-color, &.has-background.has-yellow-background-color { color: var(--global--color-dark-gray); } } } &.has-text-color { border-color: currentColor; &:active, &:hover { color: var(--button--color-text) !important; border-color: var(--button--color-background); } } } } // Squared Style &.is-style-squared { border-radius: 0; } } .is-style-outline .wp-block-button__link[style*="radius"], .wp-block-button__link[style*="radius"] { outline-offset: 2px; } assets/sass/05-blocks/button/_style.scss 0000644 00000005707 15252513625 0014244 0 ustar 00 /** * Button */ .site .button, input[type="submit"], input[type="reset"], .wp-block-search__button, .wp-block-button .wp-block-button__link { // Extend button style @include button-style(); } .site .button, input[type="submit"], input[type="reset"], .wp-block-search .wp-block-search__button, .wp-block-file .wp-block-file__button { &:active { color: var(--button--color-text-active); background-color: var(--button--color-background-active); } &:hover { color: var(--button--color-text-hover); background: transparent; } } /** * Block Options */ .wp-block-button { // Target the default and filled button states. &:not(.is-style-outline) { .wp-block-button__link { &:active { color: var(--button--color-text-active) !important; background: transparent !important; border-color: var(--button--color-background); } &:hover { color: var(--button--color-text-hover) !important; background: transparent !important; border-color: var(--button--color-background); } &:focus { color: var(--button--color-text) !important; background: var(--button--color-background) !important; } } } // Outline Style. &.is-style-outline { .wp-block-button__link { padding: var(--button--padding-vertical) var(--button--padding-horizontal); &:not(.has-background) { background: transparent; } &:not(.has-background):not(.has-text-color) { background: transparent; color: var(--button--color-background); border-color: var(--button--color-background); } &.has-background:not(.has-text-color) { color: currentColor; } &.has-background.has-gray-background-color:not(.has-text-color), &.has-background.has-dark-gray-background-color:not(.has-text-color), &.has-background.has-black-background-color:not(.has-text-color) { color: var(--global--color-white); } .is-dark-theme & { &:not(.has-text-color) { &.has-background { color: var(--global--color-dark-gray); } &.has-background.has-gray-background-color, &.has-background.has-dark-gray-background-color, &.has-background.has-black-background-color { color: var(--global--color-white); } } } &.has-text-color, &.has-background.has-text-color { border-color: currentColor; } &:active, &:hover { color: var(--button--color-text) !important; background: var(--button--color-background) !important; border-color: var(--button--color-background); &.has-text-color { border-color: var(--button--color-background); } } &:focus { color: var(--button--color-background) !important; background: transparent !important; } } } // Squared Style .is-style-squared .wp-block-button__link { border-radius: 0; } } .is-style-outline .wp-block-button__link[style*="radius"]:focus, .wp-block-button a.wp-block-button__link[style*="radius"]:focus { outline-offset: 2px; outline: 2px dotted var(--button--color-background); } assets/sass/05-blocks/gallery/_editor.scss 0000644 00000000155 15252513625 0014506 0 ustar 00 .wp-block-gallery { figcaption { margin-bottom: 0; a { color: var(--global--color-white); } } } assets/sass/05-blocks/gallery/_style.scss 0000644 00000001264 15252513625 0014362 0 ustar 00 .wp-block-gallery { margin: 0 auto; .blocks-gallery-image, .blocks-gallery-item { // On mobile and responsive viewports, we allow only 1 or 2 columns at the most. width: calc((100% - var(--global--spacing-unit)) / 2); figcaption { margin: 0; // Text color is always white to account for default gradient background color: var(--global--color-white); font-size: var(--global--font-size-xs); a { color: var(--global--color-white); &:focus { background-color: transparent; outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); text-decoration: none; } } } a:focus img { outline-offset: 2px; } } } assets/sass/05-blocks/_config.scss 0000644 00000000257 15252513625 0013031 0 ustar 00 // Variable Configuration // - Import all config files for display in // the editor, customizer, and front end. @import "separator/config"; @import "utilities/config"; assets/sass/05-blocks/table/_editor.scss 0000644 00000002262 15252513625 0014137 0 ustar 00 table, .wp-block-table { th { font-family: var(--heading--font-family); } td, th { padding: calc(0.5 * var(--global--spacing-unit)); } &.is-style-regular .has-background, &.is-style-stripes .has-background thead tr, &.is-style-stripes .has-background tfoot tr, &.is-style-stripes .has-background tbody tr:nth-child(even) { color: var(--table--has-background-text-color); } &.is-style-stripes { border-color: var(--table--stripes-border-color); th, td { border-width: 0; } tbody tr:nth-child(odd) { background-color: var(--table--stripes-background-color); } } } table.wp-calendar-table { td, th { background: transparent; border: 0; text-align: center; line-height: 2; vertical-align: middle; } th { font-weight: bold; } thead, tbody { color: currentColor; border: 1px solid; } caption { font-weight: bold; text-align: left; margin-bottom: var(--global--spacing-unit); color: currentColor; } } .wp-calendar-nav { text-align: left; margin-top: calc(var(--global--spacing-unit) / 2); svg { height: 1em; vertical-align: middle; path { fill: currentColor; } } .wp-calendar-nav-next { float: right; } } assets/sass/05-blocks/table/_style.scss 0000644 00000002432 15252513625 0014010 0 ustar 00 table, .wp-block-table { width: 100%; min-width: 240px; border-collapse: collapse; th { font-family: var(--heading--font-family); } td, th { padding: calc(0.5 * var(--global--spacing-unit)); border: 1px solid; } &.is-style-regular .has-background, &.is-style-stripes .has-background thead tr, &.is-style-stripes .has-background tfoot tr, &.is-style-stripes .has-background tbody tr:nth-child(even) { color: var(--table--has-background-text-color); } &.is-style-stripes { border-color: var(--table--stripes-border-color); th, td { border-width: 0; } tbody tr:nth-child(odd) { background-color: var(--table--stripes-background-color); } } } table.wp-calendar-table { td, th { background: transparent; border: 0; text-align: center; line-height: 2; vertical-align: middle; word-break: normal; } th { font-weight: bold; } thead, tbody { color: currentColor; border: 1px solid; } caption { font-weight: bold; text-align: left; margin-bottom: var(--global--spacing-unit); color: currentColor; } } .wp-calendar-nav { text-align: left; margin-top: calc(var(--global--spacing-unit) / 2); svg { height: 1em; vertical-align: middle; path { fill: currentColor; } } .wp-calendar-nav-next { float: right; } } assets/sass/05-blocks/latest-posts/_editor.scss 0000644 00000007216 15252513625 0015516 0 ustar 00 .wp-block-latest-posts { padding-left: 0; // Vertical margins logic &:not(.is-grid) > li { margin-top: calc(1.666 * var(--global--spacing-vertical)); margin-bottom: calc(1.666 * var(--global--spacing-vertical)); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } &.is-grid { word-wrap: break-word; word-break: break-word; > li { margin-bottom: var(--global--spacing-vertical); &:last-child { margin-bottom: 0; } } } > li > * { margin-top: calc(0.333 * var(--global--spacing-vertical)); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } // Post title > li > a { display: inline-block; font-family: var(--latest-posts--title-font-family); font-size: var(--latest-posts--title-font-size); font-weight: var(--heading--font-weight); line-height: var(--global--line-height-heading); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } // Post author .wp-block-latest-posts__post-author { color: var(--global--color-primary); font-size: var(--global--font-size-md); line-height: var(--global--line-height-body); } // Post date .wp-block-latest-posts__post-date { color: var(--global--color-primary); font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); [class*="inner-container"] &, .has-background & { color: currentColor; } } // Post content .wp-block-latest-posts__post-excerpt, .wp-block-latest-posts__post-full-content { font-family: var(--latest-posts--description-font-family); font-size: var(--latest-posts--description-font-size); line-height: var(--global--line-height-body); margin-top: calc(0.666 * var(--global--spacing-vertical)); } // Block Styles &.is-style-twentytwentyone-latest-posts-dividers { border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); &:not(.is-grid) > li, > li { padding-bottom: var(--global--spacing-vertical); border-bottom: var(--separator--height) solid var(--global--color-border); margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); &:last-child { padding-bottom: 0; border-bottom: none; } } &.is-grid { // Border moves up 1px to overlap the li borders in the last row. box-shadow: inset 0 -1px 0 0 var(--global--color-border); border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); li { margin: 0; padding-top: var(--global--spacing-vertical); padding-right: var(--global--spacing-horizontal); &:last-child { padding-bottom: var(--global--spacing-vertical); } } // This is using a non-standard media query because it is directly overriding the gutenberg-provided widths. // https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34 @media screen and (min-width: 600px) { @for $i from 2 through 6 { &.columns-#{ $i } li { width: calc((100% / #{ $i })); } } } } } &.is-style-twentytwentyone-latest-posts-borders { li { border: calc(3 * var(--separator--height)) solid var(--global--color-border); padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); &:last-child { padding-bottom: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } &:not(.is-grid) li { margin-top: var(--global--spacing-horizontal); margin-bottom: var(--global--spacing-horizontal); } } } assets/sass/05-blocks/latest-posts/_style.scss 0000644 00000011037 15252513625 0015364 0 ustar 00 .wp-block-latest-posts { padding-left: 0; // Vertical margins logic &:not(.is-grid) > li { margin-top: calc(1.666 * var(--global--spacing-vertical)); margin-bottom: calc(1.666 * var(--global--spacing-vertical)); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } &.is-grid { word-wrap: break-word; word-break: break-word; > li { margin-bottom: var(--global--spacing-vertical); &:last-child { margin-bottom: 0; } } // Remove bottom margins in grid columns &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { margin-bottom: 0; } } > li > * { margin-top: calc(0.333 * var(--global--spacing-vertical)); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } // Post title > li > a { display: inline-block; font-family: var(--latest-posts--title-font-family); font-size: var(--latest-posts--title-font-size); font-weight: var(--heading--font-weight); line-height: var(--global--line-height-heading); margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } // Post author .wp-block-latest-posts__post-author { color: var(--global--color-primary); font-size: var(--global--font-size-md); line-height: var(--global--line-height-body); } // Post date .wp-block-latest-posts__post-date { color: var(--global--color-primary); font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); [class*="inner-container"] &, .has-background & { color: currentColor; } } // Post content .wp-block-latest-posts__post-excerpt, .wp-block-latest-posts__post-full-content { font-family: var(--latest-posts--description-font-family); font-size: var(--latest-posts--description-font-size); line-height: var(--global--line-height-body); margin-top: calc(0.666 * var(--global--spacing-vertical)); } // Utility classes &.alignfull { padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); .entry-content [class*="inner-container"] &, .entry-content .has-background & { padding-left: 0; padding-right: 0; } } // Block Styles &.is-style-twentytwentyone-latest-posts-dividers { border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); &:not(.is-grid) > li, > li { padding-bottom: var(--global--spacing-vertical); border-bottom: var(--separator--height) solid var(--global--color-border); margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); &:last-child { padding-bottom: 0; border-bottom: none; } } &.is-grid { // Border moves up 1px to overlap the li borders in the last row. box-shadow: inset 0 -1px 0 0 var(--global--color-border); border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); li { margin: 0; padding-top: var(--global--spacing-vertical); padding-right: var(--global--spacing-horizontal); &:last-child { padding-bottom: var(--global--spacing-vertical); } } // This is using a non-standard media query because it is directly overriding the gutenberg-provided widths. // https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34 @media screen and (min-width: 600px) { @for $i from 2 through 6 { &.columns-#{ $i } li { width: calc((100% / #{ $i })); } } } } } &.is-style-twentytwentyone-latest-posts-borders { li { border: calc(3 * var(--separator--height)) solid var(--global--color-border); padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); &:last-child { padding-bottom: var(--global--spacing-vertical); } } &:not(.is-grid) li { margin-top: var(--global--spacing-horizontal); margin-bottom: var(--global--spacing-horizontal); } } } assets/sass/05-blocks/legacy/_editor.scss 0000644 00000001010 15252513625 0014302 0 ustar 00 .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; .gallery-columns-2 & { max-width: 50%; } .gallery-columns-3 & { max-width: 33.33%; } .gallery-columns-4 & { max-width: 25%; } .gallery-columns-5 & { max-width: 20%; } .gallery-columns-6 & { max-width: 16.66%; } .gallery-columns-7 & { max-width: 14.28%; } .gallery-columns-8 & { max-width: 12.5%; } .gallery-columns-9 & { max-width: 11.11%; } } .gallery-caption { display: block; } assets/sass/05-blocks/legacy/_style.scss 0000644 00000001240 15252513625 0014161 0 ustar 00 .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; a { display: block; } a:focus img { outline-offset: -2px; } .gallery-columns-2 & { max-width: 50%; } .gallery-columns-3 & { max-width: 33.33%; } .gallery-columns-4 & { max-width: 25%; } .gallery-columns-5 & { max-width: 20%; } .gallery-columns-6 & { max-width: 16.66%; } .gallery-columns-7 & { max-width: 14.28%; } .gallery-columns-8 & { max-width: 12.5%; } .gallery-columns-9 & { max-width: 11.11%; } } .gallery-caption { display: block; } // Legacy images, linked figure.wp-caption a:focus img { outline-offset: 2px; } assets/sass/05-blocks/video/_style.scss 0000644 00000000504 15252513625 0014025 0 ustar 00 .wp-block-video { figcaption { color: var(--global--color-primary); font-size: var(--global--font-size-xs); margin-top: calc(0.5 * var(--global--spacing-unit)); margin-bottom: var(--global--spacing-unit); text-align: center; } } * > figure > video { max-width: unset; width: 100%; vertical-align: middle; } assets/sass/05-blocks/cover/_editor.scss 0000644 00000003077 15252513625 0014173 0 ustar 00 .wp-block-cover, .wp-block-cover-image { &:not(.alignwide):not(.alignfull) { clear: both; } background-color: var(--cover--color-background); min-height: var(--cover--height); margin-top: inherit; margin-bottom: inherit; [data-align="full"] & { margin-top: 0; margin-bottom: 0; } @include innerblock-margin-clear(".wp-block-cover__inner-container"); .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text, .block-editor-block-list__block { color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss a { color: currentColor; } .has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } } // Default & custom background-color &:not([class*="background-color"]) { .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text, .block-editor-block-list__block { color: var(--cover--color-foreground); } } // Treating H2 separately to account for legacy /core styles h2 { font-size: var(--heading--font-size-h2); letter-spacing: var(--heading--letter-spacing-h2); line-height: var(--heading--line-height-h2); padding: 0; max-width: inherit; // undo opinionated styles text-align: inherit; &.has-text-align-left { text-align: left; } &.has-text-align-center { text-align: center; } &.has-text-align-right { text-align: right; } } // Block Styles &.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } } assets/sass/05-blocks/cover/_style.scss 0000644 00000004671 15252513625 0014046 0 ustar 00 .wp-block-cover, .wp-block-cover-image { &:not(.alignwide):not(.alignfull) { clear: both; } &.alignfull { margin-top: 0; margin-bottom: 0; } background-color: var(--cover--color-background); min-height: var(--cover--height); margin-top: inherit; margin-bottom: inherit; .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text { color: currentColor; // Uses text color specified with background-color options in 07-utilities\color-palette.scss margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); a:not(.wp-block-button__link):not(.wp-block-file__button) { color: currentColor; } .has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } } /* default & custom background-color */ &:not([class*="background-color"]) { .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text { color: var(--cover--color-foreground); } } /* Treating H2 separately to account for legacy /core styles */ h2 { font-size: var(--heading--font-size-h2); letter-spacing: var(--heading--letter-spacing-h2); line-height: var(--heading--line-height-h2); max-width: inherit; // undo opinionated styles text-align: inherit; // undo opinionated styles padding: 0; &.has-text-align-left { text-align: left; } &.has-text-align-center { text-align: center; } &.has-text-align-right { text-align: right; } } .wp-block-cover__inner-container { width: calc(100% - calc(2 * var(--global--spacing-vertical))); > * { margin-top: calc(0.666 * var(--global--spacing-vertical)); margin-bottom: calc(0.666 * var(--global--spacing-vertical)); @include media(mobile) { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } } &.alignleft, &.alignright { margin-top: 0; > * { margin-top: calc(2 * var(--global--spacing-vertical)); margin-bottom: calc(2 * var(--global--spacing-vertical)); padding-left: var(--global--spacing-horizontal); padding-right: var(--global--spacing-horizontal); width: 100%; } } &.has-left-content, &.has-right-content { justify-content: center; } /* Block Styles */ &.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } } assets/sass/05-blocks/columns/_editor.scss 0000644 00000002700 15252513625 0014525 0 ustar 00 .wp-block-columns { &:not(.alignwide):not(.alignfull) { clear: both; } .wp-block, .wp-block-column { // Allow Gutenberg to set the width of a block that lives inside the columns block. max-width: inherit; } @include innerblock-margin-clear(".wp-block-column"); &.is-style-twentytwentyone-columns-overlap { @include media(laptop) { .wp-block-column:nth-child(2n) { margin-left: calc(-2 * var(--global--spacing-horizontal)); margin-top: calc(2.5 * var(--global--spacing-horizontal)); z-index: 2; // Provide text-based child blocks with a default background color to ensure they're readable. > p, > h1, > h2, > h3, > h4, > h5, > h6, > ul, > ol, > pre { &:not(.has-background) { background-color: var(--global--color-background); padding: var(--global--spacing-unit); } } // Lists should still have their usual left padding. > ul:not(.has-background), > ol:not(.has-background) { padding-left: calc(2 * var(--global--spacing-horizontal)); } &.is-vertically-aligned-center { margin-top: 0; } } } } .wp-block[data-align="full"] > & { p:not(.has-background), h1:not(.has-background), h2:not(.has-background), h3:not(.has-background), h4:not(.has-background), h5:not(.has-background), h6:not(.has-background) { padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); } } } assets/sass/05-blocks/columns/_style.scss 0000644 00000003762 15252513625 0014410 0 ustar 00 .wp-block-columns { &:not(.alignwide):not(.alignfull) { clear: both; } .wp-block-column { > * { margin-top: calc(0.66 * var(--global--spacing-vertical)); margin-bottom: calc(0.66 * var(--global--spacing-vertical)); @include media(mobile) { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } &:last-child { margin-bottom: 0; } } .wp-block-column:not(:last-child) { margin-bottom: calc(0.66 * var(--global--spacing-vertical)); @include media(mobile) { margin-bottom: var(--global--spacing-vertical); } @include media(desktop) { margin-bottom: 0; } } &.is-style-twentytwentyone-columns-overlap { justify-content: space-around; @include media(laptop) { .wp-block-column { &:nth-child(2n) { margin-left: calc(-2 * var(--global--spacing-horizontal)); margin-top: calc(2.5 * var(--global--spacing-horizontal)); z-index: 2; // Provide text-based child blocks with a default background color to ensure they're readable. > p, > h1, > h2, > h3, > h4, > h5, > h6, > ul, > ol, > pre { &:not(.has-background) { background-color: var(--global--color-background); padding: var(--global--spacing-unit); } } // Lists should still have their usual left padding. > ul:not(.has-background), > ol:not(.has-background) { padding-left: calc(2 * var(--global--spacing-horizontal)); } &.is-vertically-aligned-center { margin-top: 0; } } } } } &.alignfull { .wp-block-column { p:not(.has-background), h1:not(.has-background), h2:not(.has-background), h3:not(.has-background), h4:not(.has-background), h5:not(.has-background), h6:not(.has-background) { padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); } } } } assets/sass/05-blocks/pullquote/_editor.scss 0000644 00000004046 15252513625 0015104 0 ustar 00 .wp-block-pullquote { padding: calc(2 * var(--global--spacing-unit)) 0; text-align: center; border-width: var(--pullquote--border-width); border-bottom-style: solid; border-top-style: solid; color: currentColor; border-color: currentColor; position: relative; blockquote::before { color: currentColor; content: "\201C"; display: block; position: relative; // Override the absolute position. left: 0; font-size: 3rem; font-weight: 500; line-height: 1; } p { font-family: var(--pullquote--font-family); font-size: var(--pullquote--font-size); font-style: var(--pullquote--font-style); font-weight: 700; letter-spacing: var(--pullquote--letter-spacing); line-height: var(--pullquote--line-height); margin: 0; } a { color: currentColor; } .wp-block-pullquote__citation, cite, footer { font-size: var(--global--font-size-xs); font-style: var(--pullquote--font-style); text-transform: none; } // Block Options &:not(.is-style-solid-color) { background: none; } &.is-style-solid-color { margin-left: auto; margin-right: auto; padding: calc(2.5 * var(--global--spacing-unit)); border-width: var(--pullquote--border-width); border-style: solid; border-color: var(--pullquote--border-color); @media ( min-width: 600px ) { padding: calc(5 * var(--global--spacing-unit)); } blockquote::before { text-align: left; } &.alignleft blockquote, &.alignright blockquote { padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); max-width: inherit; } blockquote { margin: 0; max-width: 100%; p { font-size: var(--pullquote--font-size); } } .wp-block-pullquote__citation, cite, footer { color: currentColor; } } } .wp-block[data-align="full"] { .wp-block-pullquote:not(.is-style-solid-color) { blockquote { padding: 0 calc(2 * var(--global--spacing-unit)); } } } .wp-block[data-align="left"], .wp-block[data-align="right"] { .wp-block-pullquote.is-style-solid-color { padding: var(--global--spacing-unit); } } assets/sass/05-blocks/pullquote/_style.scss 0000644 00000004121 15252513625 0014750 0 ustar 00 .wp-block-pullquote { padding: calc(2 * var(--global--spacing-unit)) 0; text-align: center; border-width: var(--pullquote--border-width); border-bottom-style: solid; border-top-style: solid; color: currentColor; border-color: currentColor; position: relative; blockquote::before { color: currentColor; content: "\201C"; display: block; position: relative; // Override the absolute position. left: 0; font-size: 3rem; font-weight: 500; line-height: 1; } p { font-family: var(--pullquote--font-family); font-size: var(--pullquote--font-size); font-style: var(--pullquote--font-style); font-weight: 700; letter-spacing: var(--pullquote--letter-spacing); line-height: var(--pullquote--line-height); margin: 0; } a { color: currentColor; } .wp-block-pullquote__citation, cite, footer { color: currentColor; display: block; font-size: var(--global--font-size-xs); font-style: var(--pullquote--font-style); text-transform: none; } /** * Block Options */ &:not(.is-style-solid-color) { background: none; } &.alignleft:not(.is-style-solid-color) { blockquote:before, cite { text-align: center; } } &.alignwide > p, &.alignwide blockquote { max-width: var(--responsive--alignwide-width); } &.alignfull:not(.is-style-solid-color) > p, &.alignfull:not(.is-style-solid-color) blockquote { padding: 0 calc(2 * var(--global--spacing-unit)); } &.is-style-solid-color { color: var(--pullquote--color-foreground); padding: calc(2.5 * var(--global--spacing-unit)); border-width: var(--pullquote--border-width); border-style: solid; border-color: var(--pullquote--border-color); @media (min-width: 600px) { padding: calc(5 * var(--global--spacing-unit)); } blockquote::before { text-align: left; } blockquote { margin: 0; max-width: inherit; p { font-size: var(--pullquote--font-size); } } .wp-block-pullquote__citation, cite, footer { color: currentColor; } &.alignleft, &.alignright { padding: var(--global--spacing-unit); blockquote { max-width: initial; } } } } assets/sass/05-blocks/preformatted/_editor.scss 0000644 00000000171 15252513625 0015541 0 ustar 00 pre.wp-block-preformatted { overflow-x: auto; white-space: pre !important; font-size: var(--global--font-size-xs); } assets/sass/05-blocks/preformatted/_style.scss 0000644 00000000104 15252513625 0015407 0 ustar 00 pre.wp-block-preformatted { overflow-x: auto; white-space: pre; } assets/sass/06-components/search.scss 0000644 00000000135 15252513625 0013576 0 ustar 00 .search-no-results .page-content { margin-top: calc(3 * var(--global--spacing-vertical)); } assets/sass/06-components/404.scss 0000644 00000000204 15252513625 0012635 0 ustar 00 .error404 main p { font-size: var(--global--font-size-lg); margin-bottom: calc(var(--global--spacing-vertical) * 1.6666666667); } assets/sass/06-components/editor.scss 0000644 00000002120 15252513625 0013613 0 ustar 00 html { font-family: var(--global--font-secondary); line-height: var(--global--line-height-body); } body { --wp--typography--line-height: var(--global--line-height-body); color: var(--global--color-primary); background-color: var(--global--color-background); font-family: var(--global--font-secondary); font-size: var(--global--font-size-base); font-weight: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } // Links styles .wp-block a { color: var(--wp--style--color--link, var(--global--color-primary)); &:hover { text-decoration-style: dotted; } &:focus { outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); text-decoration: none; } } // Enforce the custom link color even if a custom background color has been set. // The extra specificity here is required to override the background color styles. .has-background { // Target both current level and nested block. .has-link-color a, &.has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } } button, a { cursor: pointer; } assets/sass/06-components/header.scss 0000644 00000010315 15252513625 0013562 0 ustar 00 // Site header .site-header { @extend %responsive-alignwide-width; display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: var(--global--spacing-vertical); // Add space in case the menu wraps below the site branding. .wp-custom-logo & { align-items: center; } @include media(mobile) { padding-top: calc(var(--global--spacing-vertical) / 0.75); // 40px } @include media(desktop) { padding-top: calc(2.4 * var(--global--spacing-vertical)); // 60px } } // Site branding .site-branding { color: var(--branding--color-text); margin-right: 140px; &:last-child { margin-right: 0; width: 100%; text-align: center; } @include media(mobile) { margin-right: initial; margin-top: 4px; // Align the baseline of the site title with the primary menu } } // Site title .site-title { color: var(--branding--color-link); font-family: var(--branding--title--font-family); font-size: var(--branding--title--font-size-mobile); letter-spacing: normal; text-transform: var(--branding--title--text-transform); line-height: var(--global--line-height-heading); margin-bottom: calc(var(--global--spacing-vertical) / 6); a { color: currentColor; font-weight: var(--branding--title--font-weight); &:link, &:visited, &:active { color: currentColor; } &:hover, &:focus { color: var(--branding--color-link-hover); } } @include media(mobile) { font-size: var(--branding--title--font-size); } } // Site description .site-description { color: currentColor; font-family: var(--branding--description--font-family); font-size: var(--branding--description--font-size); line-height: 1.4; } a.custom-logo-link { text-decoration: none; &:focus { // Change colors when the body background is white. .has-background-white &, .is-dark-theme & { background: none; } } } .site-title > a { text-decoration-color: var(--global--color-secondary); } // Site logo .site-logo { margin: calc(var(--global--spacing-vertical) / 2) 0; .site-header > & { width: 100%; padding-bottom: calc(var(--global--spacing-vertical) * 1.5); border-bottom: 1px solid; text-align: center; } .custom-logo { margin-left: auto; margin-right: auto; max-width: var(--branding--logo--max-width-mobile); max-height: var(--branding--logo--max-height-mobile); height: auto; display: inline-block; width: auto; } @include media(mobile) { .custom-logo { max-width: var(--branding--logo--max-width); max-height: var(--branding--logo--max-height); height: auto; width: auto; } } } @include media(mobile-only) { .site-header { &.has-logo { &:not(.has-title-and-tagline) { &.has-menu { .site-logo { position: absolute; padding-top: calc(0.5 * var(--global--spacing-vertical)); margin-top: 0; top: var(--global--admin-bar--height); .primary-navigation-open & { display: none; } img { max-height: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit)) + 1.7em); } } } } &.has-title-and-tagline { align-items: flex-start; &.has-menu { justify-content: space-between; .site-branding { max-width: calc(100% - 160px); } } .site-branding { margin-right: 0; } body:not(.primary-navigation-open) & { &:after { display: none; } .primary-navigation { position: relative; top: 0; } .menu-button-container { position: relative; padding-top: 0; margin-top: calc(0px - var(--button--padding-vertical) + (0.25 * var(--global--spacing-unit))); #primary-mobile-menu { // The 4.5px here is to offset the icon size horizontallly // (the icon's width is larger than the path's width and has extra space on the sides). padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); margin-right: calc(0px - var(--global--spacing-horizontal) * 0.6); } } } } } &:not(.has-logo) { &.has-title-and-tagline { .site-branding { margin-right: 0; max-width: calc(100% - 160px); } } } &:not(.has-menu) { justify-content: center; } } } assets/sass/06-components/entry.scss 0000644 00000010133 15252513625 0013471 0 ustar 00 .entry-title { color: var(--entry-header--color); font-size: var(--entry-header--font-size); letter-spacing: var(--heading--letter-spacing-h2); line-height: var(--heading--line-height-h2); overflow-wrap: break-word; a { color: var(--entry-header--color-link); text-underline-offset: 0.15em; &:hover { color: var(--entry-header--color-hover); } &:focus { color: var(--entry-header--color-focus); } &:active { color: var(--entry-header--color-link); } } } .singular .entry-title { font-size: var(--global--font-size-page-title); } h1.entry-title { line-height: var(--heading--line-height-h1); font-weight: var(--heading--font-weight-page-title); } /** * Entry Content */ .entry-content, .entry-summary { font-family: var(--entry-content--font-family); } .entry-content { p { word-wrap: break-word; } // Overwrite iframe embeds that have inline styles. > iframe[style] { margin: var(--global--spacing-vertical) 0 !important; max-width: 100% !important; @include media(mobile) { max-width: var(--global--spacing-vertical) !important; } } // Classic editor audio embeds. .wp-audio-shortcode { @extend %responsive-aligndefault-width; } } .entry-footer { color: var(--global--color-primary); clear: both; float: none; font-size: var(--global--font-size-xs); display: block; > span { display: inline-block; } a { color: currentColor; &:hover, &:focus { color: var(--global--color-primary-hover); } &:active { color: currentColor; } } } // Extra specificity to override rules in _vertical-margins.scss .site-main > article > .entry-footer { margin-top: var(--global--spacing-vertical); padding-top: var(--global--spacing-unit); padding-bottom: calc(3 * var(--global--spacing-vertical)); border-bottom: var(--separator--height) solid var(--separator--border-color); } body:not(.single) .site-main > article:last-of-type .entry-footer { border-bottom: var(--separator--height) solid transparent; } .single .site-main > article > .entry-footer { margin-top: calc(3.4 * var(--global--spacing-vertical)); margin-bottom: calc(3.4 * var(--global--spacing-vertical)); padding-bottom: 0; padding-top: calc(0.8 * var(--global--spacing-vertical)); border-top: 3px solid var(--separator--border-color); border-bottom: var(--separator--height) solid transparent; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: calc(2 * var(--global--spacing-horizontal)); .post-taxonomies, .full-size-link { justify-content: flex-end; text-align: right; } .full-size-link:first-child:last-child { grid-column: span 2; } .posted-on, .byline, .cat-links, .tags-links { display: block; } @include media(mobile-only) { display: block; .full-size-link { display: block; } .post-taxonomies, .full-size-link { text-align: left; } } } /** * Post Thumbnails */ .post-thumbnail { @extend %responsive-aligndefault-width; text-align: center; .entry-header &, .singular & { @extend %responsive-alignwide-width-nested; } .wp-post-image { display: block; width: auto; max-width: 100%; margin-left: auto; margin-right: auto; margin-top: calc(2 * var(--global--spacing-vertical)); } } /** * Author */ .author-bio { position: relative; font-size: var(--global--font-size-xs); max-width: var(--responsive--aligndefault-width); .site-main > article > & { margin-top: calc(2 * var(--global--spacing-vertical)); } // Avatars are optional and can be turned off. &.show-avatars { .avatar { display: inline-block; vertical-align: top; border-radius: 50%; } .author-bio-content { display: inline-block; padding-left: var(--global--spacing-horizontal); max-width: calc(var(--responsive--aligndefault-width) - 90px); } } .author-bio-content { .author-title { font-family: var(--entry-author-bio--font-family); font-size: var(--entry-author-bio--font-size); display: inline; } .author-description { font-size: var(--global--font-size-xs); margin-top: calc(0.5 * var(--global--spacing-vertical)); margin-bottom: calc(0.5 * var(--global--spacing-vertical)); } } } assets/sass/06-components/pagination.scss 0000644 00000010337 15252513625 0014467 0 ustar 00 /* Next/Previous navigation */ // All navigation .navigation { color: var(--global--color-primary); a { color: var(--global--color-primary); text-decoration: none; &:hover { color: var(--global--color-primary-hover); text-decoration: underline; text-decoration-style: dotted; } &:focus { color: var(--global--color-secondary); } &:active { color: var(--global--color-primary); } } .nav-links { > * { min-width: 44px; min-height: 44px; } .nav-next a, .nav-previous a { display: flex; flex-direction: column; } .dots { text-align: center; } @include media(tablet) { display: flex; justify-content: center; flex-wrap: wrap; .nav-next, .nav-previous { flex: 0 1 auto; margin-bottom: inherit; margin-top: inherit; max-width: calc(50% - (0.5 * var(--global--spacing-unit))); } .nav-next { text-align: right; } } } .svg-icon { display: inline-block; fill: currentColor; vertical-align: middle; position: relative; } .nav-previous .svg-icon, .prev .svg-icon { top: -2px; margin-right: calc(0.25 * var(--global--spacing-unit)); } .nav-next .svg-icon, .next .svg-icon { top: -1px; margin-left: calc(0.25 * var(--global--spacing-unit)); } } // Singular navigation .post-navigation { margin: var(--global--spacing-vertical) auto; @include media(desktop) { margin: var(--global--spacing-vertical) auto; } @extend %responsive-alignwide-width; .meta-nav { line-height: var(--global--line-height-body); color: var(--global--color-primary); } .post-title { display: inline-block; font-family: var(--global--font-primary); font-size: var(--global--font-size-lg); font-weight: var(--pagination--font-weight-strong); line-height: var(--global--line-height-heading); @include media(desktop) { margin: 5px calc(24px + (0.25 * var(--global--spacing-unit))) 0; } } .nav-links { @include media(mobile) { justify-content: space-between; } } .nav-next, .nav-previous { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } } // Index/archive navigation .pagination, .comments-pagination { border-top: 3px solid var(--global--color-border); padding-top: var(--global--spacing-vertical); margin: var(--global--spacing-vertical) auto; @include media(desktop) { margin: var(--global--spacing-vertical) auto; } @extend %responsive-alignwide-width; // Resets the top margin added to the .nav-links items below. .nav-links { margin-top: calc(-1 * var(--global--spacing-vertical)); a:hover { color: var(--pagination--color-link-hover); } .is-dark-theme & { a:active, a:hover:active, a:hover:focus { color: var(--global--color-background); } } .has-background-white & { a:active, a:hover:active, a:hover:focus { color: var(--global--color-white); } } } .nav-links > * { color: var(--pagination--color-text); font-family: var(--pagination--font-family); font-size: var(--pagination--font-size); font-weight: var(--pagination--font-weight); margin-top: var(--global--spacing-vertical); margin-left: calc(0.66 * var(--global--spacing-unit)); margin-right: calc(0.66 * var(--global--spacing-unit)); &.current { text-decoration: underline; } &:not(.dots):not(.current):hover { text-decoration-style: dotted; } &:first-child { margin-left: 0; } &:last-child { margin-right: 0; } &.next { margin-left: auto; } &.prev { margin-right: auto; } } @include media(desktop-only) { .nav-links { display: flex; flex-wrap: wrap; } .page-numbers { display: none; &.prev, &.next { display: inline-block; flex: 0 1 auto; } } } @include media(mobile-only) { .nav-short { display: none; } } } // Comments pagination .comments-pagination { padding-top: calc(0.66 * var(--global--spacing-vertical)); margin: calc(3 * var(--global--spacing-vertical)) auto; @include media(desktop) { margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto; } .nav-links > * { font-size: var(--global--font-size-md); } } assets/sass/06-components/footer.scss 0000644 00000003033 15252513625 0013627 0 ustar 00 // Footer .site-footer { padding-top: 0; padding-bottom: calc(1.7 * var(--global--spacing-vertical)); @extend %responsive-alignwide-width; // Increase the top vertical spacing when there is no widget area. .no-widgets & { margin-top: calc(6 * var(--global--spacing-vertical)); } @include media(mobile-only) { .no-widgets & { margin-top: calc(3 * var(--global--spacing-vertical)); } } } // Footer Branding .site-footer > .site-info { padding-top: var(--global--spacing-vertical); color: var(--footer--color-text); font-family: var(--footer--font-family); font-size: var(--footer--font-size); line-height: var(--global--line-height-body); border-top: 3px solid var(--global--color-border); .site-name { text-transform: var(--branding--title--text-transform); font-size: var(--branding--title--font-size); } .powered-by { margin-top: calc(0.5 * var(--global--spacing-vertical)); } @include media(desktop) { display: flex; align-items: center; .powered-by { margin-top: initial; margin-left: auto; } } a { color: var(--footer--color-link); &:link, &:visited, &:active { color: var(--footer--color-link); } &:hover { color: var(--footer--color-link-hover); } &:focus { color: var(--footer--color-link-hover); .is-dark-theme & { color: var(--wp--style--color--link, var(--global--color-background)); } // Change colors when the body background is white. .has-background-white & { color: var(--wp--style--color--link, var(--global--color-white)); } } } } assets/sass/06-components/posts-and-pages.scss 0000644 00000000725 15252513625 0015343 0 ustar 00 .sticky { // This class is required to pass ThemeCheck. } .no-results.not-found > *:first-child { margin-bottom: calc(3 * var(--global--spacing-vertical)); } // Styling for wp_link_pages. .page-links { clear: both; .post-page-numbers { display: inline-block; margin-left: calc(0.66 * var(--global--spacing-unit)); margin-right: calc(0.66 * var(--global--spacing-unit)); min-width: 44px; min-height: 44px; &:first-child { margin-left: 0; } } } assets/sass/06-components/comments.scss 0000644 00000010666 15252513625 0014170 0 ustar 00 /** * Comments Wrapper */ .comments-area { > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } &.show-avatars { .avatar { border-radius: 50%; position: absolute; top: 10px; } .fn { display: inline-block; padding-left: 85px; } .comment-metadata { padding: 8px 0 9px 85px; } } } /** * Comment Title */ .comments-title, .comment-reply-title { font-size: var(--heading--font-size-h2); letter-spacing: var(--heading--letter-spacing-h2); } .comment-reply-title { display: flex; justify-content: space-between; small { a { font-family: var(--global--font-secondary); font-size: var(--global--font-size-xs); font-style: normal; font-weight: normal; letter-spacing: normal; } } } /* Nested comment reply title*/ .comment .comment-respond .comment-reply-title { font-size: var(--global--font-size-lg); } /** * Comment Lists */ .comment-list { padding-left: 0; list-style: none; > li { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } .comment-list .children { list-style: none; padding-left: 0; > li { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } } .comment-list .depth-2, .comment-list .depth-3 { @include media(mobile) { padding-left: calc(4 * var(--global--spacing-horizontal)); } } /** * Comment Meta */ .comment-meta { .comment-author { line-height: var(--global--line-height-heading); margin-bottom: calc(0.25 * var(--global--spacing-unit)); @include media(mobile) { margin-bottom: 0; padding-right: 0; } .fn { font-family: var(--global--font-secondary); font-weight: normal; font-size: var(--global--font-size-lg); hyphens: auto; word-wrap: break-word; word-break: break-word; } } .comment-metadata { color: var(--global--color-primary); font-size: var(--global--font-size-xs); padding: 8px 0 9px 0; .edit-link { margin-left: var(--global--spacing-horizontal); } } @include media(mobile) { margin-right: inherit; .comment-author { max-width: inherit; } } } .reply { font-size: var(--global--font-size-sm); line-height: var(--global--line-height-heading); } .bypostauthor { display: block; } .says { display: none; } .pingback .url, .trackback .url { font-family: var(--global--font-primary); } // Comment body .comment-body { position: relative; margin-bottom: calc(1.7 * var(--global--spacing-vertical)); > * { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .reply { margin: 0; } } .comment-content a { word-wrap: break-word; } // Pingbacks & Trackbacks .pingback .comment-body, .trackback .comment-body { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } .comment-respond { margin-top: var(--global--spacing-vertical); } .comment-respond > * { margin-top: var(--global--spacing-unit); margin-bottom: var(--global--spacing-unit); &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; &.comment-form { margin-bottom: var(--global--spacing-vertical); } } } .comment-author { padding-top: 3px; .url { color: currentColor; } } .comment-form { display: flex; flex-wrap: wrap; > * { flex-basis: 100%; } .comment-notes { font-size: var(--global--font-size-sm); } .comment-form-url, .comment-form-comment { width: 100%; } .comment-form-author, .comment-form-email { flex-basis: 0; flex-grow: 1; @include media(mobile-only) { flex-basis: 100%; } } .comment-form-cookies-consent > label, .comment-notes { font-size: var(--global--font-size-xs); font-weight: normal; } } .comment-form > p { margin-bottom: var(--global--spacing-unit); &:first-of-type { margin-top: 0; } &:last-of-type { margin-bottom: 0; } label, input[type="email"], input[type="text"], input[type="url"], textarea { display: block; font-size: var(--global--font-size-sm); margin-bottom: calc(.5 * var(--global--spacing-unit)); width: 100%; font-weight: var(--form--label-weight); } &.comment-form-cookies-consent { display: flex; } @include media(mobile) { &.comment-form-author { margin-right: calc(1.5 * var(--global--spacing-horizontal)); } &.comment-notes, &.logged-in-as { display: block; } } } assets/sass/06-components/single.scss 0000644 00000000670 15252513625 0013616 0 ustar 00 .singular .entry-header { border-bottom: 3px solid var(--global--color-border); padding-bottom: calc(2 * var(--global--spacing-vertical)); margin-bottom: calc(3 * var(--global--spacing-vertical)); } .home .entry-header { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .singular .has-post-thumbnail .entry-header { border-bottom: none; padding-bottom: calc(1.3 * var(--global--spacing-vertical)); margin-bottom: 0; } assets/sass/06-components/footer-navigation.scss 0000644 00000002646 15252513625 0015775 0 ustar 00 .footer-navigation { margin-top: calc(2 * var(--global--spacing-vertical)); margin-bottom: var(--global--spacing-vertical); color: var(--footer--color-text); font-size: var(--global--font-size-xs); font-family: var(--footer--font-family); } .footer-navigation-wrapper { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; padding-left: 0; li { display: inline; // This is to prevent hover styles from overlapping when the menu wraps. line-height: 3; a { padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); transition: transform 0.1s ease; color: var(--footer--color-link); &:link, &:visited, &:active { color: var(--footer--color-link); } &:hover { text-decoration: underline; text-decoration-style: dotted; text-decoration-skip-ink: none; color: var(--footer--color-link-hover); } &:focus { .is-dark-theme & { .svg-icon { fill: var(--wp--style--color--link, var(--global--color-background)); } } // Change colors when the body background is white. .has-background-white & { .svg-icon { fill: var(--wp--style--color--link, var(--global--color-white)); } } } } .svg-icon { vertical-align: middle; fill: var(--footer--color-link); &:hover { transform: scale(1.1); } } } .sub-menu-toggle, .menu-item-description { display: none; } } assets/sass/06-components/navigation.scss 0000644 00000024033 15252513625 0014473 0 ustar 00 // Navigation // Mobile menu toggles .menu-button-container { display: none; justify-content: space-between; position: absolute; right: 0; padding-top: calc(0.5 * var(--global--spacing-vertical)); padding-bottom: calc(0.25 * var(--global--spacing-vertical)); #primary-mobile-menu { margin-left: auto; padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); } @include media(mobile-only) { display: flex; } // Override specificty from default button styles. .button.button { display: flex; font-size: var(--primary-nav--font-size-button); font-weight: var(--primary-nav--font-weight-button); background-color: transparent; border: none; color: var(--primary-nav--color-link); .dropdown-icon { display: flex; align-items: center; .svg-icon { margin-left: calc(0.25 * var(--global--spacing-unit)); } // Menu icon is off-center vertically to prevent blurry pixels. &.open .svg-icon { position: relative; top: -1px; } &.close { display: none; } } &[aria-expanded*="true"] { .dropdown-icon { &.open { display: none; } &.close { display: flex; .has-logo.has-title-and-tagline & { animation-name: twentytwentyone-close-button-transition; animation-duration: 0.3s; } } } } } // When the menu is open, hide the close button and show the hide button. .primary-navigation-open & { width: 100%; z-index: 500; background-color: var(--global--color-background); #primary-mobile-menu { position: static; } } } .primary-navigation { position: absolute; top: var(--global--admin-bar--height); right: 0; color: var(--primary-nav--color-text); font-size: var(--primary-nav--font-size); line-height: 1.15; margin-top: 0; margin-bottom: 0; // Mobile menu closed > .primary-menu-container { position: fixed; visibility: hidden; opacity: 0; top: 0; right: 0; bottom: 0; left: 0; // Height of the menu-button-container using font size, line height, and total padding, plus 5px so the focus of the first item is visible. padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px); padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); padding-bottom: var(--global--spacing-horizontal); background-color: var(--global--color-background); transition: all .15s ease-in-out; transform: translateY(var(--global--spacing-vertical)); @include media(mobile-only) { height: 100vh; z-index: 499; overflow-x: hidden; overflow-y: auto; border: 2px solid transparent; .has-logo.has-title-and-tagline & { position: fixed; transform: translateY(0) translateX(100%); } .admin-bar .has-logo.has-title-and-tagline & { top: var(--global--admin-bar--height); } .admin-bar & { height: calc(100vh - var(--global--admin-bar--height)); } &:focus { border: 2px solid var(--global--color-primary); } } } // Mobile menu open .primary-navigation-open & { @include media(mobile-only) { width: 100%; position: fixed; z-index: 2; // To be greater than the cover block and embeds. } > .primary-menu-container { position: absolute; visibility: visible; opacity: 1; transform: translateY(0); } } .primary-navigation-open .has-logo.has-title-and-tagline & { @include media(mobile-only) { > .primary-menu-container { transform: translateX(0) translateY(0); } } } @include media(mobile) { position: relative; margin-left: auto; // Hide Mobile menu on desktop > .primary-menu-container { visibility: visible; opacity: 1; position: relative; padding: 0; background-color: transparent; overflow: initial; transform: none; } // Hide mobile menu toggle #toggle-menu { display: none; } // Hide sub-sub-menus > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul { display: none; } // Don't adjust position when logged-in .admin-bar & { top: initial; > .primary-menu-container { top: initial; } } } // Menu list wrapper > div > .menu-wrapper { display: flex; justify-content: flex-start; flex-wrap: wrap; list-style: none; margin: 0; max-width: none; padding-left: 0; position: relative; @include media(mobile-only) { padding-bottom: 100px; ul { padding-left: 0; } } li { display: block; position: relative; width: 100%; @include media(mobile) { margin: 0; width: inherit; &:last-child() { margin-right: 0; } } } // Sub-menu buttons .sub-menu-toggle { display: flex; height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px); width: 44px; padding: 0; justify-content: center; align-items: center; background: transparent; color: currentColor; border: none; &:focus { outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); } @include media(mobile-only) { display: none; } .icon-plus, .icon-minus { height: 100%; display: flex; align-items: center; svg { margin-top: -1px; } } .icon-minus { display: none; } // When the sub-menu is open, display the minus icon &[aria-expanded="true"] { .icon-minus { display: flex; } .icon-plus { display: none; } } } // Sub-menus Flyout > li > .sub-menu { position: relative; @include media(mobile) { left: 0; margin: 0; min-width: max-content; position: absolute; top: 100%; padding-top: 3px; transition: all 0.5s ease; z-index: 88888; &:before, &:after { content: ""; display: block; position: absolute; width: 0; top: -10px; left: var(--global--spacing-horizontal); border-style: solid; border-color: var(--primary-nav--border-color) transparent; border-width: 0 7px 10px 7px; } &:after { top: -9px; border-color: var(--global--color-background) transparent; } li { background: var(--global--color-background); } &.submenu-reposition-left { /* rtl:ignore */ left: 0; /* rtl:ignore */ right: auto; &:before, &:after { /* rtl:ignore */ left: var(--global--spacing-horizontal); /* rtl:ignore */ right: auto; } } &.submenu-reposition-right { /* rtl:ignore */ right: 0; /* rtl:ignore */ left: auto; &:before, &:after { /* rtl:ignore */ left: auto; /* rtl:ignore */ right: var(--global--spacing-horizontal); } } } } } // Top-level Item Link Colors .primary-menu > .menu-item:hover > a { color: var(--primary-nav--color-link-hover); } .primary-menu-container { @include media(mobile) { // Better align with the site title when the menu wraps. margin-right: calc(0px - var(--primary-nav--padding)); margin-left: calc(0px - var(--primary-nav--padding)); // Top-level Menu Item > ul > .menu-item { display: flex; > a { padding-left: var(--primary-nav--padding); padding-right: var(--primary-nav--padding); + .sub-menu-toggle { margin-left: calc(5px - var(--primary-nav--padding)); } } } } } // Menu Item Link a { display: block; font-family: var(--primary-nav--font-family-mobile); font-size: var(--primary-nav--font-size-mobile); font-weight: var(--primary-nav--font-weight); padding: var(--primary-nav--padding) 0; text-decoration: none; @include media(mobile) { display: block; font-family: var(--primary-nav--font-family); font-size: var(--primary-nav--font-size); font-weight: var(--primary-nav--font-weight); } + svg { fill: var(--primary-nav--color-text); } &:hover, &:link, &:visited { color: var(--primary-nav--color-link-hover); } &:hover { text-decoration: underline; text-decoration-style: dotted; } &:focus { position: relative; z-index: 99999; // Ensure focus styles appear above absolute positioned elements outline-offset: 0; text-decoration-thickness: 2px; } } .current-menu-item > a:first-child, .current_page_item > a:first-child { text-decoration: underline; text-decoration-style: solid; &:hover { text-decoration: underline; text-decoration-style: dotted; } } // Sub-menu depth indicators + text styles .sub-menu { margin: 0; padding: 0; list-style: none; margin-left: var(--primary-nav--padding); border: 1px solid var(--primary-nav--border-color); .sub-menu { border: none; } // Sub-menu items om wide screens. @include media(mobile) { // For nested sub-menus, don't duplicate the padding > .menu-item > .sub-menu { padding: 0; } } .menu-item { @include media(mobile-only) { &:last-child() { margin-bottom: 0; } } > a { padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); display: block; font-size: var(--primary-nav--font-size-sub-menu-mobile); font-style: var(--primary-nav--font-style-sub-menu-mobile); @include media(mobile) { font-size: var(--primary-nav--font-size-sub-menu); font-style: var(--primary-nav--font-style); } } } } // Show top-level sub-menu indicators above mobile-breakpoint-only .menu-item-has-children { > .svg-icon { display: none; } @include media(mobile) { > .svg-icon { display: inline-block; height: 100%; } .sub-menu .svg-icon { display: none; } } } .menu-item-description { display: block; clear: both; font-size: var(--global--font-size-xs); text-transform: none; line-height: 1.7; > span { display: inline-block; } } } // Keep the menu pinned to the top when the menu is open. @include media(mobile-only) { .lock-scrolling .site { position: fixed; max-width: 100%; width: 100%; } } // Close button animation for when a custom logo is present. @keyframes twentytwentyone-close-button-transition { from { opacity: 0; } to { opacity: 1; } } assets/sass/06-components/widgets.scss 0000644 00000005102 15252513625 0013776 0 ustar 00 .widget-area { @extend %responsive-alignwide-width; margin-top: calc(6 * var(--global--spacing-vertical)); padding-bottom: calc(var(--global--spacing-vertical) / 3); color: var(--footer--color-text); font-size: var(--footer--font-size); font-family: var(--footer--font-family); @include media(laptop) { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: calc(2 * var(--global--spacing-horizontal)); } @include media(wide) { grid-template-columns: repeat(3, 1fr); } @include media(mobile-only) { margin-top: calc(3 * var(--global--spacing-vertical)); } ul { list-style-type: none; padding: 0; li { line-height: var(--widget--line-height-list); } &.sub-menu, &.children { margin-left: var(--widget--spacing-menu); } .sub-menu-toggle { display: none; } } a { color: var(--footer--color-link); text-decoration: underline; text-decoration-style: solid; text-decoration-color: currentColor; &:link, &:visited, &:active { color: var(--footer--color-link); } &:hover { color: var(--footer--color-link-hover); text-decoration-style: dotted; } } .wp-block-social-links { &.alignright { margin-top: var(--global--spacing-vertical); justify-content: flex-end; } &.alignleft { margin-top: var(--global--spacing-vertical); } } &:after { content: ""; display: table; clear: both; } } .widget-title { font-size: var(--global--font-size-sm); font-weight: var(--widget--font-weight-title); line-height: var(--widget--line-height-title); } // Search widget styles .search-form { display: flex; flex-wrap: wrap; margin: auto; max-width: var(--responsive--aligndefault-width); > label { width: 100%; margin-bottom: 0; font-weight: var(--form--label-weight); } .search-field { flex-grow: 1; max-width: inherit; margin-top: calc(var(--global--spacing-vertical) / 3); margin-right: calc(0.66 * var(--global--spacing-horizontal)); } .search-submit { margin-top: calc(var(--global--spacing-vertical) / 3); margin-left: 10px; } } .widget_search > .search-form { .search-field { margin-right: calc(-1 * var(--button--border-width)); -webkit-appearance: none; margin-bottom: calc(0.5 * var(--global--spacing-vertical)); } .search-submit { margin-left: 0; background-color: transparent; color: var(--button--color-text-hover); margin-bottom: calc(0.5 * var(--global--spacing-vertical)); &:hover { background-color: var(--button--color-background); color: var(--button--color-text); } } } .widget_rss a.rsswidget .rss-widget-icon { display: none; } assets/sass/06-components/archives.scss 0000644 00000002004 15252513625 0014132 0 ustar 00 .page-title { font-size: var(--global--font-size-page-title); } h1.page-title, h2.page-title { font-weight: var(--heading--font-weight-page-title); } h1.page-title { line-height: var(--heading--line-height-h1); } .page-header { border-bottom: 3px solid var(--global--color-border); padding-bottom: calc(2 * var(--global--spacing-vertical)); } .archive, .search, .blog { .content-area { .format-aside, .format-status, .format-link { .entry-content { font-size: var(--global--font-size-lg); } } } .format-image, .format-gallery, .format-video { .entry-content { margin-top: calc(2 * var(--global--spacing-vertical)); } } .entry-footer { .cat-links, .tags-links { display: block; } } &.logged-in { .entry-footer { .posted-on { margin-right: calc(0.5 * var(--global--spacing-unit)); } } } } .archive-description { margin-top: var(--global--spacing-vertical); font-size: var(--global--font-size-xl); line-height: var(--global--line-height-heading); } assets/sass/style.scss 0000644 00000012100 15252513625 0011054 0 ustar 00 @import "01-settings/file-header"; /** * SETTINGS * File-header..........The file header for the themes style.css file. * Fonts................Any font files, if the project needs specific fonts. * Global...............Project-specific, globally available variables. * * TOOLS * Functions............Global functions. * Mixins...............Global mixins. * * GENERIC * Normalize.css........Normalise browser defaults. * Breakpoints..........Mixins and variables for responsive styles * Vertical-margins.....Vertical spacing for the main components. * Reset................Reset specific elements to make them easier to style in other contexts. * Clearings............Clearnings for the main components. * * ELEMENTS * Blockquote...........Default blockquote. * Forms................Element-level form styling. * Headings.............H1–H6 * Links................Default links. * Lists................Default lists. * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video. * * BLOCKS * Audio................Specific styles for the audio block. * Button...............Specific styles for the button block. * Code.................Specific styles for the code block. * Collumns.............Specific styles for the collumns block. * Cover................Specific styles for the cover block. * File.................Specific styles for the file block. * Gallery..............Specific styles for the gallery block. * Group................Specific styles for the group block. * Heading..............Specific styles for the heading block. * Image................Specific styles for the image block. * Latest comments......Specific styles for the latest comments block. * Latest posts.........Specific styles for the latest posts block. * Legacy...............Specific styles for the legacy gallery. * List.................Specific styles for the list block. * Meda text............Specific styles for the media and text block. * Navigation...........Specific styles for the navigation block. * Paragraph............Specific styles for the paragraph block. * Pullquote............Specific styles for the pullquote block. * Quote................Specific styles for the quote block. * Search...............Specific styles for the search block. * Separator............Specific styles for the separator block. * Spacer...............Specific styles for the spacer block. * Table................Specific styles for the table block. * Verse................Specific styles for the verse block. * Video................Specific styles for the video block. * Utilities............Block alignments. * * COMPONENTS * Header...............Header styles. * Footer...............Footer styles. * Comments.............Comment styles. * Archives.............Archive styles. * 404..................404 styles. * Search...............Search styles. * Navigation...........Navigation styles. * Footer Navigation....Footer Navigation styles. * Pagination...........Pagination styles. * Single...............Single page and post styles. * Posts and pages......Misc, sticky post styles. * Entry................Entry, author biography. * Widget...............Widget styles. * Editor...............Editor styles. * * UTILITIES * A11y.................Screen reader text, prefers reduced motion etc. * Color Palette........Classes for the color palette colors. * Editor Font Sizes....Editor Font Sizes. * Measure..............The width of a line of text, in characters. */ // Print................Print styles /* Categories 01 to 03 are the basics. */ @import "01-settings/fonts"; @import "01-settings/global"; @import "02-tools/mixins"; @import "02-tools/functions"; @import "03-generic/normalize"; @import "03-generic/breakpoints"; @import "03-generic/vertical-margins"; @import "03-generic/reset"; @import "03-generic/clearings"; /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */ @import "04-elements/blockquote"; @import "04-elements/forms"; @import "04-elements/media"; @import "04-elements/misc"; @import "04-elements/links"; /* Category 05 is all about adjusting the default block styles to the given layout. I only added three blocks as examples. */ @import "05-blocks/blocks"; /* Category 06 contains all "bigger" components which contain elements of the previous two categories like header, footer, page template, single template, comments section, archives, ... */ @import "06-components/header"; @import "06-components/footer"; @import "06-components/single"; @import "06-components/posts-and-pages"; @import "06-components/entry"; @import "06-components/archives"; @import "06-components/404"; @import "06-components/search"; @import "06-components/comments"; @import "06-components/navigation"; @import "06-components/footer-navigation"; @import "06-components/pagination"; @import "06-components/widgets"; /* Category 07 is for any utility classes that are not assigned to a specific component. */ @import "07-utilities/a11y"; @import "07-utilities/color-palette"; @import "07-utilities/measure"; @import "07-utilities/ie"; assets/sass/02-tools/functions.scss 0000644 00000011022 15252513625 0013305 0 ustar 00 // Remove the unit of a length // @param {Number} $number - Number to remove unit from // @return {Number} - Unitless number @function strip-unit($number) { @if type-of($number) == "number" and not unitless($number) { @return $number / ($number * 0 + 1); } @return $number; } // ---- // Sass (v3.3.14) // Compass (v1.0.0.rc.1) // ---- @function pow($x, $y) { $ret: 1; @if $y > 0 { @for $i from 1 through $y { $ret: $ret * $x; } } @else { @for $i from $y to 0 { $ret: $ret / $x; } } @return $ret; } // Map deep get // @author Hugo Giraudel // @access public // @param {Map} $map - Map // @param {Arglist} $keys - Key chain // @return {*} - Desired value // // Example: // $m-breakpoint: map-deep-get($__prefix-default-config, "layouts", "M"); @function map-deep-get($map, $keys...) { @each $key in $keys { $map: map-get($map, $key); } @return $map; } // ep set function to set a value in nested maps // uthor Hugo Giraudel // ccess public // aram {Map} $map - Map // aram {List} $keys - Key chaine // aram {*} $value - Value to assign // eturn {Map} // // ample: // _prefix-default-config: map-deep-set($__prefix-default-config, "layouts" "M", 650px); @function map-deep-set($map, $keys, $value) { $maps: ($map); $result: null; // If the last key is a map already // Warn the user we will be overriding it with $value @if type-of(nth($keys, -1)) == "map" { @warn "The last key you specified is a map; it will be overrided with `#{$value}`."; } // If $keys is a single key // Just merge and return @if length($keys) == 1 { @return map-merge($map, ($keys: $value)); } // Loop from the first to the second to last key from $keys // Store the associated map to this key in the $maps list // If the key doesn't exist, throw an error @for $i from 1 through length($keys) - 1 { $current-key: nth($keys, $i); $current-map: nth($maps, -1); $current-get: map-get($current-map, $current-key); @if $current-get == null { @error "Key `#{$key}` doesn't exist at current level in map."; } $maps: append($maps, $current-get); } // Loop from the last map to the first one // Merge it with the previous one @for $i from length($maps) through 1 { $current-map: nth($maps, $i); $current-key: nth($keys, $i); $current-val: if($i == length($maps), $value, $result); $result: map-merge($current-map, ($current-key: $current-val)); } // Return result @return $result; } // jQuery-style extend function // - Child themes can use this function to `reset` the values in // config maps without editing the `master` Sass files. // - src: https://www.sitepoint.com/extra-map-functions-sass/ // - About `map-merge()`: // - - only takes 2 arguments // - - is not recursive // @param {Map} $map - first map // @param {ArgList} $maps - other maps // @param {Bool} $deep - recursive mode // @return {Map} // Examples: // $grid-configuration-default: ( // 'columns': 12, // 'layouts': ( // 'small': 800px, // 'medium': 1000px, // 'large': 1200px, // ), // ); // $grid-configuration-custom: ( // 'layouts': ( // 'large': 1300px, // 'huge': 1500px // ), // ); // $grid-configuration-user: ( // 'direction': 'ltr', // 'columns': 16, // 'layouts': ( // 'large': 1300px, // 'huge': 1500px // ), // ); // $deep: false // $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user); // --> ("columns": 16, "layouts": (("large": 1300px, "huge": 1500px)), "direction": "ltr") // $deep: true // $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, true); // --> ("columns": 16, "layouts": (("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px)), "direction": "ltr") @function map-extend($map, $maps.../*, $deep */) { $last: nth($maps, -1); $deep: $last == true; $max: if($deep, length($maps) - 1, length($maps)); // Loop through all maps in $maps... @for $i from 1 through $max { // Store current map $current: nth($maps, $i); // If not in deep mode, simply merge current map with map @if not $deep { $map: map-merge($map, $current); } @else { // If in deep mode, loop through all tuples in current map @each $key, $value in $current { // If value is a nested map and same key from map is a nested map as well @if type-of($value) == "map" and type-of(map-get($map, $key)) == "map" { // Recursive extend $value: map-extend(map-get($map, $key), $value, true); } // Merge current tuple with map $map: map-merge($map, ($key: $value)); } } } @return $map; } assets/sass/02-tools/mixins.scss 0000644 00000003244 15252513625 0012613 0 ustar 00 // Responsive breakpoints mixin @mixin add_variables( $view: frontend ) { @if frontend == $view { :root { @content; } } @if editor == $view { :root, body { @content; } } } // Button style // - Applies button styles to blocks and elements that share them. @mixin button-style() { line-height: var(--button--line-height); color: var(--button--color-text); cursor: pointer; font-weight: var(--button--font-weight); font-family: var(--button--font-family); font-size: var(--button--font-size); background-color: var(--button--color-background); border-radius: var(--button--border-radius); border: var(--button--border-width) solid var(--button--color-background); text-decoration: none; padding: var(--button--padding-vertical) var(--button--padding-horizontal); &:focus { background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; .is-dark-theme & { color: var(--button--color-background); } &:not(.has-background) { color: var(--button--color-text-hover); } } &:disabled { background-color: var(--global--color-white-50); border-color: var(--global--color-white-50); color: var(--button--color-text-active); } } @mixin innerblock-margin-clear($container) { // Clear the top margin for the first-child. > #{$container} > *:first-child { margin-top: 0; } // Last child that is not the appender. > #{$container} > *:last-child:not(.block-list-appender) { margin-bottom: 0; } // When selected, the last item becomes the second last because of the appender. &.has-child-selected > #{$container} > *:nth-last-child(2), &.is-selected > #{$container} > *:nth-last-child(2) { margin-bottom: 0; } } assets/sass/style-editor.scss 0000644 00000000707 15252513625 0012352 0 ustar 00 /** * These styles should be loaded by the Block Editor only */ @import "01-settings/fonts"; @import "01-settings/global"; @import "02-tools/mixins"; @import "02-tools/functions"; @import "03-generic/breakpoints"; @import "04-elements/blockquote"; @import "04-elements/media"; @import "04-elements/forms-editor"; @import "04-elements/links"; @import "05-blocks/blocks-editor"; @import "06-components/editor"; @import "07-utilities/color-palette"; assets/sass/07-utilities/ie.scss 0000644 00000001572 15252513625 0012563 0 ustar 00 .is-IE { &.is-dark-theme { color: #fff; *, a, .site-description, .entry-title, .entry-footer, .widget-area, .post-navigation .meta-nav, .footer-navigation-wrapper li a:link, .site-footer > .site-info, .site-footer > .site-info a, .site-footer > .site-info a:visited { color: #fff; } .sub-menu-toggle svg, .sub-menu-toggle path, .post-navigation .meta-nav svg, .post-navigation .meta-nav path { fill: #fff; } .primary-navigation > div > .menu-wrapper > li > .sub-menu li { background: #000; } &.primary-navigation-open { @include media(mobile-only) { .primary-navigation > .primary-menu-container, .menu-button-container { background-color: #000; } } } .skip-link:focus { color: #21759b; } } .navigation .nav-links { display: block; } .post-thumbnail .wp-post-image { min-width: auto; } } assets/sass/07-utilities/measure.scss 0000644 00000000401 15252513625 0013615 0 ustar 00 // Measure // - The width of a line of text, in characters, is known as its measure. header *, main *, footer * { max-width: var(--global--spacing-measure); } html, body, div, header, nav, article, figure, hr, main, section, footer { max-width: none; } assets/sass/07-utilities/print.scss 0000644 00000006010 15252513625 0013312 0 ustar 00 /* Adding print support. The print styles are based on the the great work of Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Margins & paddings # Typography # Page breaks # Links # Visibility --------------------------------------------------------------*/ @media print { /* Margins & paddings */ @page { margin: 2cm; } .entry .entry-header, .entry, .single .site-main > article > .entry-footer { margin-top: 0; margin-bottom: 0; } .site-footer .site-info { margin: 0; } .site-header { padding: 0; } /* Fonts */ body { font: 13pt Georgia, "Times New Roman", Times, serif; // Fallback for browsers without CSS variables support. font: 13pt var(--global--font-secondary, Georgia, "Times New Roman", Times, serif); line-height: 1.3; background: #fff !important; color: #000; } // Override color settings that changes the text to white. .has-background-dark * { color: #000 !important; } h1, .entry-title, .singular .entry-title, .page-title { font-size: 22pt; font-weight: bold; } h2, h3, h4, .has-regular-font-size, .has-large-font-size, h2.author-title, p.author-bio, .comments-title, .archive-description { font-size: 14pt; margin-top: 25px; } .comment-meta, .comment-meta .comment-author .fn { font-size: 13pt; } /* Page breaks */ a { page-break-inside: avoid; } blockquote { page-break-inside: avoid; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; page-break-inside: avoid; } img { page-break-inside: avoid; page-break-after: avoid; } table, pre, figure { page-break-inside: avoid; } ul, ol, dl { page-break-before: avoid; } /* Links */ a:link, a:visited, a { background: transparent; font-weight: bold; text-decoration: underline; text-align: left; } a[href^="http"]:after { content: " < " attr(href) "> "; } a:after > img { content: ""; } article a[href^="#"]:after { content: ""; } a:not(:local-link):after { // stylelint-disable-line selector-pseudo-class-no-unknown content: " < " attr(href) "> "; } .entry-title a:after { content: "\a < " attr(href) "> "; white-space: pre; font-size: 14pt; } .cat-links a:after, .tags-links a:after, .byline a:after, .comment-metadata a:after, .wp-block-calendar a:after, .wp-block-tag-cloud a:after, .page-links a:after { content: ""; } /* Visibility */ .primary-navigation, .site-title + .primary-navigation, .footer-navigation, .entry-footer, .post-navigation, .navigation.pagination, .widget-area, .edit-link, .more-link, .comment-reply, .reply, .comment .comment-metadata .edit-link, .comment-respond, #dark-mode-toggler { display: none !important; } .entry .entry-content .wp-block-button .wp-block-button__link, .entry .entry-content .button, .entry .entry-content .wp-block-file__button { color: #000; background: none; } } assets/sass/07-utilities/a11y.scss 0000644 00000001612 15252513625 0012734 0 ustar 00 .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; word-break: normal; } .skip-link:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } @media (prefers-reduced-motion) { * { transition-delay: 0s !important; transition-duration: 0s !important; } } assets/sass/07-utilities/color-palette.scss 0000644 00000006373 15252513625 0014744 0 ustar 00 // Gutenberg text color options .has-black-color[class] { color: var(--global--color-black); } .has-gray-color[class] { color: var(--global--color-gray); } .has-dark-gray-color[class] { color: var(--global--color-dark-gray); } .has-green-color[class] { color: var(--global--color-green); } .has-blue-color[class] { color: var(--global--color-blue); } .has-purple-color[class] { color: var(--global--color-purple); } .has-red-color[class] { color: var(--global--color-red); } .has-orange-color[class] { color: var(--global--color-orange); } .has-yellow-color[class] { color: var(--global--color-yellow); } .has-white-color[class] { color: var(--global--color-white); } // Gutenberg background-color options .has-background { a, p, h1, h2, h3, h4, h5, h6 { color: currentColor; } } .has-black-background-color[class] { background-color: var(--global--color-black); } .has-gray-background-color[class] { background-color: var(--global--color-gray); } .has-dark-gray-background-color[class] { background-color: var(--global--color-dark-gray); } .has-green-background-color[class] { background-color: var(--global--color-green); } .has-blue-background-color[class] { background-color: var(--global--color-blue); } .has-purple-background-color[class] { background-color: var(--global--color-purple); } .has-red-background-color[class] { background-color: var(--global--color-red); } .has-orange-background-color[class] { background-color: var(--global--color-orange); } .has-yellow-background-color[class] { background-color: var(--global--color-yellow); } .has-white-background-color[class] { background-color: var(--global--color-white); } :not(.has-text-color) { &.has-black-background-color[class], &.has-gray-background-color[class], &.has-dark-gray-background-color[class] { color: var(--global--color-white); } &.has-green-background-color[class], &.has-blue-background-color[class], &.has-purple-background-color[class], &.has-red-background-color[class], &.has-orange-background-color[class], &.has-yellow-background-color[class], &.has-white-background-color[class] { color: var(--global--color-dark-gray); } } // Custom gradients .has-purple-to-yellow-gradient-background { background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow)); } .has-yellow-to-purple-gradient-background { background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple)); } .has-green-to-yellow-gradient-background { background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow)); } .has-yellow-to-green-gradient-background { background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green)); } .has-red-to-yellow-gradient-background { background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow)); } .has-yellow-to-red-gradient-background { background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red)); } .has-purple-to-red-gradient-background { background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red)); } .has-red-to-purple-gradient-background { background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple)); } assets/images/playing-in-the-sand.jpg 0000644 00000604470 15252513625 0013606 0 ustar 00 ��� JFIF �� C "##! %*5-%'2( .?/279<<<$-BFA:F5;<9�� C 9& &99999999999999999999999999999999999999999999999999�� TJ"