├── sass ├── forms │ ├── _forms.scss │ ├── _buttons.scss │ └── _fields.scss ├── variables-site │ ├── _variables-site.scss │ ├── _transitions.scss │ ├── _structure.scss │ ├── _columns.scss │ ├── _colors.scss │ └── _fonts.scss ├── layout │ └── _layout.scss ├── elements │ ├── _tables.scss │ ├── _lists.scss │ └── _elements.scss ├── navigation │ ├── _menu-footer-navigation.scss │ ├── _links.scss │ ├── _navigation.scss │ ├── _menu-social-navigation.scss │ ├── _next-previous.scss │ └── _menu-main-navigation.scss ├── modules │ ├── _clearings.scss │ ├── _alignments.scss │ └── _accessibility.scss ├── typography │ ├── _typography.scss │ ├── _copy.scss │ └── _headings.scss ├── media │ ├── _captions.scss │ ├── _media.scss │ └── _galleries.scss ├── site │ ├── footer │ │ └── _site-footer.scss │ ├── _site.scss │ ├── secondary │ │ └── _widgets.scss │ ├── primary │ │ ├── _archives.scss │ │ ├── _posts-and-pages.scss │ │ └── _comments.scss │ └── header │ │ ├── _site-header.scss │ │ └── _site-featured-image.scss ├── mixins │ ├── _utilities.scss │ └── _mixins-master.scss └── _normalize.scss ├── screenshot.png ├── fonts ├── NonBreakingSpaceOverride.woff └── NonBreakingSpaceOverride.woff2 ├── postcss.config.js ├── style-editor-customizer.scss ├── .github ├── issue_template.md └── pull_request_template.md ├── .editorconfig ├── template-parts ├── footer │ └── footer-widgets.php ├── post │ ├── author-bio.php │ └── discussion-meta.php ├── content │ ├── content-excerpt.php │ ├── content-page.php │ ├── content-single.php │ ├── content-none.php │ └── content.php └── header │ ├── entry-header.php │ └── site-branding.php ├── js ├── customize-controls.js ├── skip-link-focus-fix.js ├── customize-preview.js ├── priority-menu.js └── touch-keyboard-navigation.js ├── page.php ├── composer.json ├── 404.php ├── index.php ├── archive.php ├── search.php ├── readme.txt ├── package.json ├── inc ├── icon-functions.php ├── back-compat.php ├── customizer.php ├── template-tags.php └── color-patterns.php ├── footer.php ├── single.php ├── header.php ├── README.md ├── style.scss ├── style-editor-customizer.css ├── image.php ├── classes └── class-twentynineteen-walker-comment.php ├── comments.php ├── print.scss ├── print.css └── functions.php /sass/forms/_forms.scss: -------------------------------------------------------------------------------- 1 | @import "buttons"; 2 | 3 | @import "fields"; 4 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/twentynineteen/HEAD/screenshot.png -------------------------------------------------------------------------------- /fonts/NonBreakingSpaceOverride.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/twentynineteen/HEAD/fonts/NonBreakingSpaceOverride.woff -------------------------------------------------------------------------------- /fonts/NonBreakingSpaceOverride.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WordPress/twentynineteen/HEAD/fonts/NonBreakingSpaceOverride.woff2 -------------------------------------------------------------------------------- /sass/variables-site/_variables-site.scss: -------------------------------------------------------------------------------- 1 | @import "colors"; 2 | @import "fonts"; 3 | @import "structure"; 4 | @import "columns"; 5 | @import "transitions"; 6 | -------------------------------------------------------------------------------- /sass/layout/_layout.scss: -------------------------------------------------------------------------------- 1 | 2 | /** === Layout === */ 3 | 4 | #page { 5 | width: 100%; 6 | } 7 | 8 | .site-content { 9 | overflow: hidden; 10 | } 11 | 12 | -------------------------------------------------------------------------------- /sass/variables-site/_transitions.scss: -------------------------------------------------------------------------------- 1 | // Transition timeouts. 2 | 3 | $link_transition: 110ms; 4 | $icon_transition: 120ms; 5 | $button_transition: 150ms; 6 | $background_transition: 200ms; -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | var postcssFocusWithin = require('postcss-focus-within'); 2 | 3 | module.exports = { 4 | plugins: { 5 | autoprefixer: {} 6 | } 7 | }; 8 | 9 | module.exports = { 10 | plugins: [ 11 | postcssFocusWithin(/* pluginOptions */) 12 | ] 13 | }; 14 | -------------------------------------------------------------------------------- /sass/elements/_tables.scss: -------------------------------------------------------------------------------- 1 | table { 2 | margin: 0 0 $size__spacing-unit; 3 | border-collapse: collapse; 4 | width: 100%; 5 | font-family: $font__heading; 6 | 7 | td, 8 | th { 9 | padding: 0.5em; 10 | border: 1px solid $color__text-light; 11 | word-break: break-all; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /sass/navigation/_menu-footer-navigation.scss: -------------------------------------------------------------------------------- 1 | /** === Footer menu === */ 2 | 3 | .footer-navigation { 4 | 5 | display: inline; 6 | 7 | & > div { 8 | display: inline; 9 | } 10 | 11 | .footer-menu { 12 | 13 | display: inline; 14 | padding-left: 0; 15 | 16 | li { 17 | display: inline; 18 | margin-right: 1rem; 19 | } 20 | } 21 | 22 | } -------------------------------------------------------------------------------- /sass/navigation/_links.scss: -------------------------------------------------------------------------------- 1 | a { 2 | 3 | @include link-transition; 4 | color: $color__link; 5 | 6 | &:visited { 7 | color: $color__link-visited; 8 | } 9 | 10 | &:hover, 11 | &:active { 12 | color: $color__link-hover; 13 | outline: 0; 14 | text-decoration: none; 15 | } 16 | 17 | &:focus { 18 | outline: thin dotted; 19 | text-decoration: underline; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /style-editor-customizer.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | Twenty Nineteen Customizer Styles & Non-latin Font Fallbacks 3 | 4 | NOTE: This file is automatically populated with additional styles if the user selects a custom primary color in the customzier. 5 | */ 6 | 7 | /** === Includes === */ 8 | 9 | @import "sass/mixins/mixins-master"; 10 | 11 | /** === Non-Latin font fallbacks === */ 12 | 13 | @include non-latin-fonts( '.wp-block' ); -------------------------------------------------------------------------------- /sass/variables-site/_structure.scss: -------------------------------------------------------------------------------- 1 | // Responsive widths. 2 | 3 | $size__spacing-unit: 1rem; 4 | $size__site-main: 100%; 5 | $size__site-sidebar: 25%; 6 | $size__site-margins: calc(10% + 60px); 7 | $size__site-tablet-content: calc(8 * (100vw / 12) - 28px); 8 | $size__site-desktop-content: calc(6 * (100vw / 12) - 28px); 9 | 10 | // Responsive widths. 11 | 12 | $mobile_width: 600px; 13 | $tablet_width: 768px; 14 | $desktop_width: 1168px; 15 | $wide_width: 1379px; 16 | 17 | -------------------------------------------------------------------------------- /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | Hi there! Thanks for contributing. In case you missed it in the main README, this repository will soon be archived. 2 | 3 | Moving forward, issues should be posted to Trac instead: 4 | 5 | https://core.trac.wordpress.org/newticket 6 | 7 | When you open an issue there, please begin your issue's title with "Twenty Nineteen: ", and select the "Bundled Theme" component. 8 | 9 | If you have any questions, feel free to ask in the #core-themes channel on WordPress.org slack. -------------------------------------------------------------------------------- /sass/variables-site/_columns.scss: -------------------------------------------------------------------------------- 1 | $columns: ( 2 | 1: calc(1 * (100vw / 12)), 3 | 2: calc(2 * (100vw / 12)), 4 | 3: calc(3 * (100vw / 12)), 5 | 4: calc(4 * (100vw / 12)), 6 | 5: calc(5 * (100vw / 12)), 7 | 6: calc(6 * (100vw / 12)), 8 | 7: calc(7 * (100vw / 12)), 9 | 8: calc(8 * (100vw / 12)), 10 | 9: calc(9 * (100vw / 12)), 11 | 10: calc(10 * (100vw / 12)), 12 | 11: calc(11 * (100vw / 12)), 13 | 12: calc(12 * (100vw / 12)) 14 | ); 15 | 16 | $columns__margin: $size__spacing-unit; 17 | -------------------------------------------------------------------------------- /sass/elements/_lists.scss: -------------------------------------------------------------------------------- 1 | ul, 2 | ol { 3 | padding-left: ( 1 * $size__spacing-unit ); 4 | } 5 | 6 | ul { 7 | list-style: disc; 8 | 9 | ul { 10 | list-style-type: circle; 11 | } 12 | } 13 | 14 | ol { 15 | list-style: decimal; 16 | } 17 | 18 | li { 19 | line-height: $font__line-height-body; 20 | } 21 | 22 | li > ul, 23 | li > ol { 24 | padding-left: ( 2 * $size__spacing-unit ); 25 | } 26 | 27 | dt { 28 | font-weight: bold; 29 | } 30 | 31 | dd { 32 | margin: 0 $size__spacing-unit $size__spacing-unit; 33 | } 34 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab 15 | 16 | [{package.json,*.yml}] 17 | indent_style = space 18 | indent_size = 2 19 | 20 | [{*.txt,wp-config-sample.php}] 21 | end_of_line = crlf 22 | -------------------------------------------------------------------------------- /sass/modules/_clearings.scss: -------------------------------------------------------------------------------- 1 | .clear:before, 2 | .clear:after, 3 | .entry-content:before, 4 | .entry-content:after, 5 | .comment-content:before, 6 | .comment-content:after, 7 | .site-header:before, 8 | .site-header:after, 9 | .site-content:before, 10 | .site-content:after, 11 | .site-footer:before, 12 | .site-footer:after { 13 | @include clearfix; 14 | } 15 | 16 | .clear:after, 17 | .entry-content:after, 18 | .comment-content:after, 19 | .site-header:after, 20 | .site-content:after, 21 | .site-footer:after { 22 | @include clearfix-after; 23 | } 24 | -------------------------------------------------------------------------------- /sass/modules/_alignments.scss: -------------------------------------------------------------------------------- 1 | .alignleft { 2 | /*rtl:ignore*/ 3 | float: left; 4 | /*rtl:ignore*/ 5 | margin-right: $size__spacing-unit; 6 | 7 | @include media(tablet) { 8 | /*rtl:ignore*/ 9 | margin-right: calc(2 * #{$size__spacing-unit}); 10 | } 11 | } 12 | 13 | .alignright { 14 | /*rtl:ignore*/ 15 | float: right; 16 | /*rtl:ignore*/ 17 | margin-left: $size__spacing-unit; 18 | 19 | @include media(tablet) { 20 | /*rtl:ignore*/ 21 | margin-left: calc(2 * #{$size__spacing-unit}); 22 | } 23 | } 24 | 25 | .aligncenter { 26 | clear: both; 27 | @include center-block; 28 | } 29 | -------------------------------------------------------------------------------- /template-parts/footer/footer-widgets.php: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /sass/navigation/_navigation.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | ## Links 3 | --------------------------------------------------------------*/ 4 | @import "links"; 5 | 6 | /*-------------------------------------------------------------- 7 | ## Menus 8 | --------------------------------------------------------------*/ 9 | @import "menu-main-navigation"; 10 | @import "menu-social-navigation"; 11 | @import "menu-footer-navigation"; 12 | 13 | /*-------------------------------------------------------------- 14 | ## Next / Previous 15 | --------------------------------------------------------------*/ 16 | @import "next-previous"; 17 | -------------------------------------------------------------------------------- /sass/typography/_typography.scss: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | font-size: $font__size_base; 4 | } 5 | 6 | body { 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | color: $color__text-main; 10 | font-family: $font__body; 11 | font-weight: 400; 12 | font-size: 1em; 13 | line-height: $font__line-height-body; 14 | margin: 0; 15 | text-rendering: optimizeLegibility; 16 | } 17 | 18 | button, 19 | input, 20 | select, 21 | optgroup, 22 | textarea { 23 | color: $color__text-main; 24 | font-family: $font__body; 25 | font-weight: 400; 26 | line-height: $font__line-height-body; 27 | text-rendering: optimizeLegibility; 28 | } 29 | 30 | @import "headings"; 31 | 32 | @import "copy"; 33 | 34 | @include non-latin-fonts(); 35 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | Hi there! Thanks for contributing. In case you missed it in the main README, this repository will soon be archived. 2 | 3 | Moving forward, PRs should be posted as patches to Trac: 4 | 5 | 1. Create an issue on Trac if one doesn't already exist there. Begin your issue's title with "Twenty Nineteen: ", and select the "Bundled Theme" component. You can create a new issue here: 6 | 7 | https://core.trac.wordpress.org/newticket 8 | 9 | 2. Submit your changes as a patch to Twenty Nineteen in WordPress core, and attach it to your issue. Instructions for making a patch are here: 10 | 11 | https://make.wordpress.org/core/handbook/tutorials/working-with-patches/ 12 | 13 | If you have any questions, feel free to ask in the #core-themes channel on WordPress.org slack. -------------------------------------------------------------------------------- /sass/media/_captions.scss: -------------------------------------------------------------------------------- 1 | .wp-caption { 2 | margin-bottom: calc(1.5 * #{$size__spacing-unit}); 3 | 4 | &.aligncenter { 5 | 6 | @include media(tablet) { 7 | position: relative; 8 | left: calc( #{$size__site-tablet-content} / 2 ); 9 | transform: translateX( -50% ); 10 | } 11 | 12 | @include media(desktop) { 13 | left: calc( #{$size__site-desktop-content} / 2 ); 14 | } 15 | } 16 | } 17 | 18 | .wp-caption img[class*="wp-image-"] { 19 | display: block; 20 | margin-left: auto; 21 | margin-right: auto; 22 | } 23 | 24 | .wp-caption-text { 25 | color: $color__text-light; 26 | font-size: $font__size-xs; 27 | font-family: $font__heading; 28 | line-height: $font__line-height-pre; 29 | margin: 0; 30 | padding: ( $size__spacing-unit * .5 ); 31 | text-align: center; 32 | } 33 | -------------------------------------------------------------------------------- /js/customize-controls.js: -------------------------------------------------------------------------------- 1 | /** 2 | * File customizer.js. 3 | * 4 | * Theme Customizer enhancements for a better user experience. 5 | * 6 | * Contains handlers to make Theme Customizer preview reload changes asynchronously. 7 | */ 8 | 9 | (function() { 10 | 11 | wp.customize.bind( 'ready', function() { 12 | 13 | // Only show the color hue control when there's a custom primary color. 14 | wp.customize( 'primary_color', function( setting ) { 15 | wp.customize.control( 'primary_color_hue', function( control ) { 16 | var visibility = function() { 17 | if ( 'custom' === setting.get() ) { 18 | control.container.slideDown( 180 ); 19 | } else { 20 | control.container.slideUp( 180 ); 21 | } 22 | }; 23 | 24 | visibility(); 25 | setting.bind( visibility ); 26 | }); 27 | }); 28 | }); 29 | 30 | })( jQuery ); 31 | -------------------------------------------------------------------------------- /sass/site/footer/_site-footer.scss: -------------------------------------------------------------------------------- 1 | /* Site footer */ 2 | 3 | #colophon { 4 | 5 | .widget-area, 6 | .site-info { 7 | margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; 8 | 9 | @include media(tablet) { 10 | margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; 11 | } 12 | } 13 | 14 | .widget-column { 15 | display: flex; 16 | flex-wrap: wrap; 17 | .widget { 18 | width: 100%; 19 | @include media(desktop) { 20 | margin-right: calc(3 * #{$size__spacing-unit}); 21 | width: calc(50% - (3 * #{$size__spacing-unit})); 22 | } 23 | } 24 | } 25 | 26 | .site-info { 27 | color: $color__text-light; 28 | 29 | a { 30 | color: inherit; 31 | 32 | &:hover { 33 | text-decoration: none; 34 | color: $color__link; 35 | } 36 | } 37 | 38 | .imprint, 39 | .privacy-policy-link { 40 | margin-right: $size__spacing-unit; 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /template-parts/post/author-bio.php: -------------------------------------------------------------------------------- 1 | 11 |
12 |

13 | 14 | 21 | 22 |

23 |

24 | 25 | 28 |

29 |
30 | 31 | -------------------------------------------------------------------------------- /page.php: -------------------------------------------------------------------------------- 1 | 14 | 15 |
16 |
17 | 18 | 33 | 34 |
35 |
36 | 37 | 14 | 15 |
16 |
17 | 18 |
19 |
20 |

21 |
22 | 23 |
24 |

25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 | responses > 0; 13 | 14 | if ( $has_responses ) { 15 | /* translators: %1(X comments)$s */ 16 | $meta_label = sprintf( _n( '%d Comment', '%d Comments', $discussion->responses, 'twentynineteen' ), $discussion->responses ); 17 | } else { 18 | $meta_label = __( 'No comments', 'twentynineteen' ); 19 | } 20 | ?> 21 | 22 |
23 | authors ); 26 | } 27 | ?> 28 |

29 | 30 | 31 |

32 |
33 | -------------------------------------------------------------------------------- /template-parts/content/content-excerpt.php: -------------------------------------------------------------------------------- 1 | 13 | 14 |
> 15 |
16 | %s', _x( 'Featured', 'post', 'twentynineteen' ) ); 19 | } 20 | the_title( sprintf( '

', esc_url( get_permalink() ) ), '

' ); 21 | ?> 22 |
23 | 24 | 25 | 26 |
27 | 28 |
29 | 30 | 33 |
34 | -------------------------------------------------------------------------------- /sass/mixins/_utilities.scss: -------------------------------------------------------------------------------- 1 | 2 | @mixin media( $res ) { 3 | @if mobile == $res { 4 | @media only screen and (min-width: $mobile_width) { 5 | @content; 6 | } 7 | } 8 | 9 | @if tablet == $res { 10 | @media only screen and (min-width: $tablet_width) { 11 | @content; 12 | } 13 | } 14 | 15 | @if desktop == $res { 16 | @media only screen and (min-width: $desktop_width) { 17 | @content; 18 | } 19 | } 20 | 21 | @if wide == $res { 22 | @media only screen and (min-width: $wide_width) { 23 | @content; 24 | } 25 | } 26 | } 27 | 28 | @mixin link-transition( $attr: color ) { 29 | transition: $attr $link_transition ease-in-out; 30 | } 31 | 32 | @mixin button-transition() { 33 | transition: background $button_transition ease-in-out; 34 | } 35 | 36 | @mixin button-all-transition() { 37 | transition: all $button_transition ease-in-out; 38 | } 39 | 40 | @mixin background-transition() { 41 | transition: background $background_transition ease-in-out; 42 | } 43 | 44 | @mixin selection { 45 | ::-moz-selection { 46 | @content; 47 | } 48 | ::selection { 49 | @content; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /sass/modules/_accessibility.scss: -------------------------------------------------------------------------------- 1 | /* Text meant only for screen readers. */ 2 | .screen-reader-text { 3 | border: 0; 4 | clip: rect(1px, 1px, 1px, 1px); 5 | clip-path: inset(50%); 6 | height: 1px; 7 | margin: -1px; 8 | overflow: hidden; 9 | padding: 0; 10 | position: absolute !important; 11 | width: 1px; 12 | word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ 13 | 14 | &:focus { 15 | background-color: $color__background-screen; 16 | border-radius: 3px; 17 | box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 18 | clip: auto !important; 19 | clip-path: none; 20 | color: $color__text-screen; 21 | display: block; 22 | @include font-size(0.875); 23 | font-weight: bold; 24 | height: auto; 25 | left: 5px; 26 | line-height: normal; 27 | padding: 15px 23px 14px; 28 | text-decoration: none; 29 | top: 5px; 30 | width: auto; 31 | z-index: 100000; /* Above WP toolbar. */ 32 | } 33 | } 34 | 35 | /* Do not show the outline on the skip link target. */ 36 | #content[tabindex="-1"]:focus { 37 | outline: 0; 38 | } 39 | -------------------------------------------------------------------------------- /sass/media/_galleries.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | flex-flow: row wrap; 4 | justify-content: center; 5 | margin-bottom: calc(1.5 * #{$size__spacing-unit}); 6 | } 7 | 8 | .gallery-item { 9 | display: inline-block; 10 | margin-right: 16px; 11 | margin-bottom: 16px; 12 | text-align: center; 13 | vertical-align: top; 14 | width: 100%; 15 | 16 | // Loops to enumerate the classes for gallery columns. 17 | @for $i from 2 through 9 { 18 | .gallery-columns-#{$i} & { 19 | max-width: calc((100% - 16px * #{ $i - 1 }) / #{ $i }); 20 | 21 | &:nth-of-type(#{$i}n+#{$i}) { 22 | margin-right: 0; 23 | } 24 | } 25 | } 26 | 27 | &:last-of-type { 28 | padding-right: 0; 29 | } 30 | } 31 | 32 | .gallery-caption { 33 | display: block; 34 | font-size: $font__size-xs; 35 | font-family: $font__heading; 36 | line-height: $font__line-height-pre; 37 | margin: 0; 38 | padding: ( $size__spacing-unit * .5 ); 39 | } 40 | 41 | .gallery-item > div > a { 42 | display: block; 43 | line-height: 0; 44 | 45 | // Accessibility 46 | box-shadow: 0 0 0 0 transparent; 47 | 48 | &:focus { 49 | box-shadow: 0 0 0 2px rgba( $color__link, 1 ); 50 | } 51 | } 52 | 53 | -------------------------------------------------------------------------------- /sass/variables-site/_colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // Backgrounds 3 | $color__background-body: #fff; 4 | $color__background-input: #fff; 5 | $color__background-screen: #f1f1f1; 6 | $color__background-hr: #ccc; 7 | $color__background-button: #0073aa; 8 | $color__background-button-hover: #111; 9 | $color__background-pre: #eee; 10 | $color__background-ins: #fff9c0; 11 | $color__background_selection: mix( $color__background-body, $color__background-button, 75% ); // lighten( salmon, 22.5% ); // lighten( #0999d4, 48% ); 12 | 13 | // Text 14 | $color__text-main: #111; 15 | $color__text-light: #767676; 16 | $color__text-hover: lighten( #111, 22.5% ); 17 | $color__text-screen: #21759b; 18 | $color__text-input: #666; 19 | $color__text-input-focus: #111; 20 | 21 | // Links 22 | $color__link: #0073aa; 23 | $color__link-visited: #0073aa; 24 | $color__link-hover: darken( $color__link, 10% ); 25 | 26 | // Borders 27 | $color__border: #ccc; 28 | $color__border-link: #0073aa; 29 | $color__border-link-hover: darken( $color__link, 10% ); 30 | $color__border-button: #ccc #ccc #bbb; 31 | $color__border-button-hover: #ccc #bbb #aaa; 32 | $color__border-button-focus: #aaa #bbb #bbb; 33 | $color__border-input: $color__border; 34 | $color__border-abbr: #666; 35 | -------------------------------------------------------------------------------- /sass/forms/_fields.scss: -------------------------------------------------------------------------------- 1 | input[type="text"], 2 | input[type="email"], 3 | input[type="url"], 4 | input[type="password"], 5 | input[type="search"], 6 | input[type="number"], 7 | input[type="tel"], 8 | input[type="range"], 9 | input[type="date"], 10 | input[type="month"], 11 | input[type="week"], 12 | input[type="time"], 13 | input[type="datetime"], 14 | input[type="datetime-local"], 15 | input[type="color"], 16 | textarea { 17 | -webkit-backface-visibility: hidden; 18 | background: $color__background-input; 19 | border: solid 1px $color__border; 20 | box-sizing: border-box; 21 | outline: none; 22 | padding: #{.36 * $size__spacing-unit} #{.66 * $size__spacing-unit}; 23 | -webkit-appearance: none; 24 | outline-offset: 0; 25 | border-radius: 0; 26 | 27 | &:focus { 28 | border-color: $color__link; 29 | outline: thin solid rgba( $color__link, 0.15 ); 30 | outline-offset: -4px; 31 | } 32 | } 33 | 34 | input[type="search"] { 35 | &::-webkit-search-decoration { 36 | display: none; 37 | } 38 | } 39 | 40 | select { 41 | 42 | } 43 | 44 | textarea { 45 | box-sizing: border-box; 46 | display: block; 47 | width: 100%; 48 | max-width: 100%; 49 | resize: vertical; 50 | } 51 | 52 | form { 53 | 54 | p { 55 | margin: $size__spacing-unit 0; 56 | } 57 | 58 | } -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 19 | 20 |
21 |
22 | 23 | 42 | 43 |
44 |
45 | 46 | 11 | 12 | ', '' ); ?> 13 | 14 | 15 |
16 | 17 | 18 | 19 | authors ); 22 | } 23 | ?> 24 | 25 | 26 | %s', 'twentynineteen' ), 33 | array( 34 | 'span' => array( 35 | 'class' => array(), 36 | ), 37 | ) 38 | ), 39 | get_the_title() 40 | ), 41 | '' . twentynineteen_get_icon_svg( 'edit', 16 ), 42 | '' 43 | ); 44 | ?> 45 |
46 | 47 | -------------------------------------------------------------------------------- /archive.php: -------------------------------------------------------------------------------- 1 | 14 | 15 |
16 |
17 | 18 | 19 | 20 |
21 | ', '' ); 23 | ?> 24 |
25 | 26 | 50 |
51 |
52 | 53 | p { 84 | margin: 0 0 $size__spacing-unit; 85 | } 86 | 87 | cite { 88 | color: $color__text-light; 89 | } 90 | } 91 | 92 | @import "tables"; 93 | -------------------------------------------------------------------------------- /sass/navigation/_menu-social-navigation.scss: -------------------------------------------------------------------------------- 1 | /* Social menu */ 2 | 3 | .social-navigation { 4 | margin-top: calc(#{$size__spacing-unit} / 2 ); 5 | text-align: left; 6 | 7 | ul.social-links-menu { 8 | @include clearfix; 9 | 10 | display: inline-block; 11 | margin: 0; 12 | padding: 0; 13 | 14 | li { 15 | display: inline-block; 16 | vertical-align: bottom; 17 | vertical-align: -webkit-baseline-middle; 18 | list-style: none; 19 | 20 | &:nth-child(n+2) { 21 | margin-left: 0.1em; 22 | } 23 | 24 | a { 25 | border-bottom: 1px solid transparent; 26 | display: block; 27 | color: $color__text-main; 28 | margin-bottom: -1px; 29 | transition: opacity $link_transition ease-in-out; 30 | 31 | &:hover, 32 | &:active { 33 | color: $color__text-main; 34 | opacity: 0.6; 35 | } 36 | 37 | &:focus { 38 | color: $color__text-main; 39 | opacity: 1; 40 | border-bottom: 1px solid $color__text-main; 41 | } 42 | 43 | svg { 44 | display: block; 45 | width: 32px; 46 | height: 32px; 47 | 48 | // Prevent icons from jumping in Safari using hardware acceleration. 49 | transform: translateZ(0); 50 | 51 | &#ui-icon-link { 52 | transform: rotate(-45deg); 53 | } 54 | } 55 | } 56 | } 57 | } 58 | } 59 | 60 | .site-title + .social-navigation, 61 | .site-description + .social-navigation { 62 | 63 | @include media(tablet) { 64 | margin-top: calc(#{$size__spacing-unit} / 5 ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /sass/site/secondary/_widgets.scss: -------------------------------------------------------------------------------- 1 | .widget { 2 | margin: 0 0 #{$size__spacing-unit}; 3 | 4 | /* Make sure select elements fit in widgets. */ 5 | select { 6 | max-width: 100%; 7 | } 8 | 9 | a { 10 | color: $color__link; 11 | 12 | &:hover { 13 | color: $color__link-hover; 14 | } 15 | } 16 | } 17 | 18 | .widget_archive, 19 | .widget_categories, 20 | .widget_meta, 21 | .widget_nav_menu, 22 | .widget_pages, 23 | .widget_recent_comments, 24 | .widget_recent_entries, 25 | .widget_rss { 26 | 27 | ul { 28 | padding: 0; 29 | list-style: none; 30 | 31 | li { 32 | color: $color__text-light; 33 | font-family: $font__heading; 34 | font-size: calc(#{$font__size_base} * #{$font__size-ratio}); 35 | font-weight: 700; 36 | line-height: $font__line-height-heading; 37 | margin-top: #{0.5 * $size__spacing-unit}; 38 | margin-bottom: #{0.5 * $size__spacing-unit}; 39 | } 40 | 41 | @include nestedSubMenuPadding(); 42 | } 43 | } 44 | 45 | .widget_tag_cloud { 46 | 47 | .tagcloud { 48 | font-family: $font__heading; 49 | font-weight: 700; 50 | } 51 | } 52 | 53 | 54 | .widget_search { 55 | 56 | .search-field { 57 | width: 100%; 58 | 59 | @include media(mobile) { 60 | width: auto; 61 | } 62 | } 63 | 64 | .search-submit { 65 | display: block; 66 | margin-top: $size__spacing-unit; 67 | } 68 | } 69 | 70 | .widget_calendar .calendar_wrap { 71 | text-align: center; 72 | 73 | table td, 74 | table th { 75 | border: none; 76 | } 77 | 78 | a { 79 | text-decoration: underline; 80 | } 81 | } -------------------------------------------------------------------------------- /sass/site/primary/_archives.scss: -------------------------------------------------------------------------------- 1 | .archive .page-header, 2 | .search .page-header, 3 | .error404 .page-header { 4 | 5 | margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit}); 6 | 7 | @include media(tablet) { 8 | margin: 0 $size__site-margins $size__site-margins; 9 | } 10 | 11 | .page-title { 12 | 13 | color: $color__text-light; 14 | display: inline; 15 | letter-spacing: normal; 16 | 17 | &:before { 18 | display: none; 19 | } 20 | } 21 | 22 | .search-term, 23 | .page-description { 24 | display: inherit; 25 | clear: both; 26 | 27 | &:after { 28 | content: "."; 29 | font-weight: bold; 30 | color: $color__text-light; 31 | } 32 | } 33 | } 34 | 35 | .archive .page-header .page-description { 36 | display: block; 37 | color: $color__text-main; 38 | font-size: 1em; 39 | } 40 | 41 | .hfeed .entry .entry-header { 42 | 43 | @include media(tablet) { 44 | margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2); 45 | } 46 | } 47 | 48 | /* 404 & Not found */ 49 | 50 | .error-404.not-found, 51 | .no-results.not-found { 52 | 53 | .page-content { 54 | 55 | margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit}; 56 | 57 | @include media(tablet) { 58 | margin: calc(3 * #{$size__spacing-unit}) $size__site-margins calc(#{ $size__spacing-unit } / 2); 59 | } 60 | } 61 | 62 | .search-submit { 63 | vertical-align: middle; 64 | margin: $size__spacing-unit 0; 65 | } 66 | 67 | .search-field { 68 | width: 100%; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /template-parts/content/content-page.php: -------------------------------------------------------------------------------- 1 | 13 | 14 |
> 15 | 16 |
17 | 18 |
19 | 20 | 21 |
22 | '
' . __( 'Pages:', 'twentynineteen' ), 28 | 'after' => '
', 29 | ) 30 | ); 31 | ?> 32 |
33 | 34 | 35 | 55 | 56 |
57 | -------------------------------------------------------------------------------- /template-parts/content/content-single.php: -------------------------------------------------------------------------------- 1 | 13 | 14 |
> 15 | 16 |
17 | 18 |
19 | 20 | 21 |
22 | "%s"', 'twentynineteen' ), 28 | array( 29 | 'span' => array( 30 | 'class' => array(), 31 | ), 32 | ) 33 | ), 34 | get_the_title() 35 | ) 36 | ); 37 | 38 | wp_link_pages( 39 | array( 40 | 'before' => '
' . __( 'Pages:', 'twentynineteen' ), 41 | 'after' => '
', 42 | ) 43 | ); 44 | ?> 45 |
46 | 47 | 50 | 51 | 52 | 53 | 54 | 55 |
56 | -------------------------------------------------------------------------------- /template-parts/content/content-none.php: -------------------------------------------------------------------------------- 1 | 13 | 14 |
15 |
16 |

17 |
18 | 19 |
20 | ' . wp_kses( 25 | /* translators: 1: link to WP admin new post page. */ 26 | __( 'Ready to publish your first post? Get started here.', 'twentynineteen' ), 27 | array( 28 | 'a' => array( 29 | 'href' => array(), 30 | ), 31 | ) 32 | ) . '

', 33 | esc_url( admin_url( 'post-new.php' ) ) 34 | ); 35 | 36 | elseif ( is_search() ) : 37 | ?> 38 | 39 |

40 | 45 | 46 |

47 | 52 |
53 |
54 | -------------------------------------------------------------------------------- /search.php: -------------------------------------------------------------------------------- 1 | 14 | 15 |
16 |
17 | 18 | 19 | 20 |
21 |

22 | 23 |

24 |
25 |
26 | 27 | 51 |
52 |
53 | 54 | 13 | 14 |
> 15 |
16 | %s', _x( 'Featured', 'post', 'twentynineteen' ) ); 19 | } 20 | if ( is_singular() ) : 21 | the_title( '

', '

' ); 22 | else : 23 | the_title( sprintf( '

', esc_url( get_permalink() ) ), '

' ); 24 | endif; 25 | ?> 26 |
27 | 28 | 29 | 30 |
31 | "%s"', 'twentynineteen' ), 37 | array( 38 | 'span' => array( 39 | 'class' => array(), 40 | ), 41 | ) 42 | ), 43 | get_the_title() 44 | ) 45 | ); 46 | 47 | wp_link_pages( 48 | array( 49 | 'before' => '
' . __( 'Pages:', 'twentynineteen' ), 50 | 'after' => '
', 51 | ) 52 | ); 53 | ?> 54 |
55 | 56 | 59 |
60 | -------------------------------------------------------------------------------- /inc/icon-functions.php: -------------------------------------------------------------------------------- 1 | theme_location ) { 43 | $svg = twentynineteen_get_social_link_svg( $item->url, 26 ); 44 | if ( empty( $svg ) ) { 45 | $svg = twentynineteen_get_icon_svg( 'link' ); 46 | } 47 | $item_output = str_replace( $args->link_after, '' . $svg, $item_output ); 48 | } 49 | 50 | return $item_output; 51 | } 52 | add_filter( 'walker_nav_menu_start_el', 'twentynineteen_nav_menu_social_icons', 10, 4 ); 53 | -------------------------------------------------------------------------------- /footer.php: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /js/customize-preview.js: -------------------------------------------------------------------------------- 1 | /** 2 | * File customizer.js. 3 | * 4 | * Theme Customizer enhancements for a better user experience. 5 | * 6 | * Contains handlers to make Theme Customizer preview reload changes asynchronously. 7 | */ 8 | 9 | (function( $ ) { 10 | 11 | // Primary color. 12 | wp.customize( 'primary_color', function( value ) { 13 | value.bind( function( to ) { 14 | // Update custom color CSS. 15 | var style = $( '#custom-theme-colors' ), 16 | hue = style.data( 'hue' ), 17 | css = style.html(), 18 | color; 19 | 20 | if( 'custom' === to ){ 21 | // If a custom primary color is selected, use the currently set primary_color_hue 22 | color = wp.customize.get().primary_color_hue; 23 | } else { 24 | // If the "default" option is selected, get the default primary_color_hue 25 | color = 199; 26 | } 27 | 28 | // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. 29 | css = css.split( hue + ',' ).join( color + ',' ); 30 | style.html( css ).data( 'hue', color ); 31 | }); 32 | }); 33 | 34 | // Primary color hue. 35 | wp.customize( 'primary_color_hue', function( value ) { 36 | value.bind( function( to ) { 37 | 38 | // Update custom color CSS. 39 | var style = $( '#custom-theme-colors' ), 40 | hue = style.data( 'hue' ), 41 | css = style.html(); 42 | 43 | // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. 44 | css = css.split( hue + ',' ).join( to + ',' ); 45 | style.html( css ).data( 'hue', to ); 46 | }); 47 | }); 48 | 49 | // Image filter. 50 | wp.customize( 'image_filter', function( value ) { 51 | value.bind( function( to ) { 52 | if ( to ) { 53 | $( 'body' ).addClass( 'image-filters-enabled' ); 54 | } else { 55 | $( 'body' ).removeClass( 'image-filters-enabled' ); 56 | } 57 | } ); 58 | } ); 59 | 60 | })( jQuery ); 61 | -------------------------------------------------------------------------------- /single.php: -------------------------------------------------------------------------------- 1 | 14 | 15 |
16 |
17 | 18 | sprintf( __( 'Published in%s', 'twentynineteen' ), '%title' ), 32 | ) 33 | ); 34 | } elseif ( is_singular( 'post' ) ) { 35 | // Previous/next post navigation. 36 | the_post_navigation( 37 | array( 38 | 'next_text' => ' ' . 39 | '' . __( 'Next post:', 'twentynineteen' ) . '
' . 40 | '%title', 41 | 'prev_text' => ' ' . 42 | '' . __( 'Previous post:', 'twentynineteen' ) . '
' . 43 | '%title', 44 | ) 45 | ); 46 | } 47 | 48 | // If comments are open or we have at least one comment, load up the comment template. 49 | if ( comments_open() || get_comments_number() ) { 50 | comments_template(); 51 | } 52 | 53 | endwhile; // End of the loop. 54 | ?> 55 | 56 |
57 |
58 | 59 | section and everything up until
6 | * 7 | * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials 8 | * 9 | * @package WordPress 10 | * @subpackage Twenty_Nineteen 11 | * @since 1.0.0 12 | */ 13 | ?> 14 | > 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | > 23 |
24 | 25 | 26 |
27 | 28 |
29 | 30 |
31 | 32 | 33 |
34 | responses ) > 0 ) { 41 | $classes = 'entry-header has-discussion'; 42 | } 43 | ?> 44 |
45 | 46 |
47 | 48 |
49 | 50 |
51 | 52 |
53 | -------------------------------------------------------------------------------- /template-parts/header/site-branding.php: -------------------------------------------------------------------------------- 1 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 | 20 |

21 | 22 | 23 | 24 | 28 |

29 | 30 |

31 | 32 | 33 | 44 | 45 | 46 | 59 | 60 |
61 | -------------------------------------------------------------------------------- /inc/back-compat.php: -------------------------------------------------------------------------------- 1 |

%s

', $message ); 41 | } 42 | 43 | /** 44 | * Prevents the Customizer from being loaded on WordPress versions prior to 4.7. 45 | * 46 | * @since Twenty Nineteen 1.0.0 47 | * 48 | * @global string $wp_version WordPress version. 49 | */ 50 | function twentynineteen_customize() { 51 | wp_die( 52 | sprintf( 53 | __( 'Twenty Nineteen requires at least WordPress version 4.7. You are running version %s. Please upgrade and try again.', 'twentynineteen' ), 54 | $GLOBALS['wp_version'] 55 | ), 56 | '', 57 | array( 58 | 'back_link' => true, 59 | ) 60 | ); 61 | } 62 | add_action( 'load-customize.php', 'twentynineteen_customize' ); 63 | 64 | /** 65 | * Prevents the Theme Preview from being loaded on WordPress versions prior to 4.7. 66 | * 67 | * @since Twenty Nineteen 1.0.0 68 | * 69 | * @global string $wp_version WordPress version. 70 | */ 71 | function twentynineteen_preview() { 72 | if ( isset( $_GET['preview'] ) ) { 73 | wp_die( sprintf( __( 'Twenty Nineteen requires at least WordPress version 4.7. You are running version %s. Please upgrade and try again.', 'twentynineteen' ), $GLOBALS['wp_version'] ) ); 74 | } 75 | } 76 | add_action( 'template_redirect', 'twentynineteen_preview' ); 77 | -------------------------------------------------------------------------------- /sass/site/header/_site-header.scss: -------------------------------------------------------------------------------- 1 | // Site header 2 | 3 | .site-header { 4 | padding: 1em; 5 | 6 | &.featured-image { 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: space-between; 10 | min-height: 90vh; 11 | 12 | .site-branding-container { 13 | margin-bottom: auto; 14 | } 15 | } 16 | 17 | @include media(tablet) { 18 | margin: 0; 19 | padding: 3rem 0; 20 | 21 | &.featured-image { 22 | min-height: 100vh; 23 | margin-bottom: 3rem; 24 | } 25 | } 26 | } 27 | 28 | // Site branding 29 | 30 | .site-branding { 31 | 32 | color: $color__text-light; 33 | position: relative; 34 | 35 | @include media(tablet) { 36 | margin: 0 $size__site-margins; 37 | } 38 | } 39 | 40 | // Site logo 41 | 42 | .site-logo { 43 | 44 | position: relative; 45 | z-index: 999; 46 | margin-bottom: calc(.66 * #{$size__spacing-unit}); 47 | 48 | @include media(tablet) { 49 | margin-bottom: 0; 50 | position: absolute; 51 | right: calc(100% + (1.25 * #{$size__spacing-unit})); 52 | top: 4px; // Accounts for box-shadow widths 53 | z-index: 999; 54 | } 55 | 56 | .custom-logo-link { 57 | border-radius: 100%; 58 | box-sizing: content-box; 59 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); 60 | display: block; 61 | width: 50px; 62 | height: 50px; 63 | overflow: hidden; 64 | transition: box-shadow $background_transition ease-in-out; 65 | 66 | .custom-logo { 67 | min-height: inherit; 68 | } 69 | 70 | &:hover, 71 | &:active, 72 | &:focus { 73 | box-shadow: 0 0 0 2px rgba(0, 0, 0, 1); 74 | } 75 | 76 | @include media(tablet) { 77 | width: 64px; 78 | height: 64px; 79 | } 80 | } 81 | } 82 | 83 | // Site title 84 | 85 | .site-title { 86 | margin: auto; 87 | display: inline; 88 | color: $color__text-main; 89 | 90 | a { 91 | color: $color__text-main; 92 | 93 | &:link, 94 | &:visited { 95 | color: $color__text-main; 96 | } 97 | 98 | &:hover { 99 | color: $color__text-hover; 100 | } 101 | } 102 | 103 | .featured-image & { 104 | margin: 0; 105 | 106 | @include media(tablet) { 107 | display: inline-block; 108 | } 109 | } 110 | 111 | /* When there is no description set, make sure navigation appears below title. */ 112 | + .main-navigation { 113 | display: block; 114 | } 115 | 116 | @include media(tablet) { 117 | display: inline; 118 | } 119 | 120 | &:not(:empty) + .site-description:not(:empty):before { 121 | content: "\2014"; 122 | margin: 0 .2em; 123 | } 124 | } 125 | 126 | // Site description 127 | 128 | .site-description { 129 | 130 | display: inline; 131 | color: $color__text-light; 132 | font-weight: normal; 133 | margin: 0; 134 | } 135 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **Theme Name:** Twenty Nineteen 2 | **Theme URI:** https://wordpress.org/themes/twentynineteen/ 3 | **Contributors:** the WordPress team 4 | **Requires at least:** WordPress 4.9.6 5 | **Version:** 1.2 6 | **License:** GPLv2 or later 7 | **License URI:** http://www.gnu.org/licenses/gpl-2.0.html 8 | **Tags:** one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready 9 | 10 | ## Description 11 | 12 | Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes. 13 | 14 | ## Installation 15 | 16 | 1. In your admin panel, go to Appearance -> Themes and click the 'Add New' button. 17 | 2. Type in Twenty Nineteen in the search form and press the 'Enter' key on your keyboard. 18 | 3. Click on the 'Activate' button to use your new theme right away. 19 | 4. Go to https://codex.wordpress.org/Twenty_Nineteen for a guide on how to customize this theme. 20 | 5. Navigate to Appearance > Customize in your admin panel and customize to taste. 21 | 22 | ## Copyright 23 | 24 | Twenty Nineteen WordPress Theme, Copyright 2018 WordPress.org 25 | Twenty Nineteen is distributed under the terms of the GNU GPL. 26 | 27 | This program is free software: you can redistribute it and/or modify 28 | it under the terms of the GNU General Public License as published by 29 | the Free Software Foundation, either version 2 of the License, or 30 | (at your option) any later version. 31 | 32 | This program is distributed in the hope that it will be useful, 33 | but WITHOUT ANY WARRANTY; without even the implied warranty of 34 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 35 | GNU General Public License for more details. 36 | 37 | Twenty Nineteen bundles the following third-party resources: 38 | 39 | _s, Copyright 2015-2018 Automattic, Inc. 40 | **License:** GPLv2 or later 41 | Source: https://github.com/Automattic/_s/ 42 | 43 | normalize.css, Copyright 2012-2016 Nicolas Gallagher and Jonathan Neal 44 | **License:** MIT 45 | Source: https://necolas.github.io/normalize.css/ 46 | 47 | ## Changelog 48 | 49 | ### 1.0 50 | 51 | * Released: 12-06-2019 52 | 53 | Initial release 54 | 55 | ### 1.1 56 | 57 | * Released: 12-19-2019 58 | 59 | Bug Fixes 60 | 61 | ### 1.2 62 | 63 | * Released: 01-09-2019 64 | 65 | Bug Fixes 66 | -------------------------------------------------------------------------------- /sass/typography/_headings.scss: -------------------------------------------------------------------------------- 1 | .author-description .author-link, 2 | .comment-metadata, 3 | .comment-reply-link, 4 | .comments-title, 5 | .comment-author .fn, 6 | .discussion-meta-info, 7 | .entry-meta, 8 | .entry-footer, 9 | .main-navigation, 10 | .no-comments, 11 | .not-found .page-title, 12 | .error-404 .page-title, 13 | .post-navigation .post-title, 14 | .page-links, 15 | .page-description, 16 | .pagination .nav-links, 17 | .sticky-post, 18 | .site-title, 19 | .site-info, 20 | #cancel-comment-reply-link, 21 | img:after, 22 | h1, 23 | h2, 24 | h3, 25 | h4, 26 | h5, 27 | h6 { 28 | font-family: $font__heading; 29 | } 30 | 31 | .main-navigation, 32 | .page-description, 33 | .author-description .author-link, 34 | .not-found .page-title, 35 | .error-404 .page-title, 36 | .post-navigation .post-title, 37 | .pagination .nav-links, 38 | .comments-title, 39 | .comment-author .fn, 40 | .no-comments, 41 | .site-title, 42 | h1, 43 | h2, 44 | h3, 45 | h4, 46 | h5, 47 | h6 { 48 | font-weight: 700; 49 | letter-spacing: -0.02em; 50 | line-height: $font__line-height-heading; 51 | -webkit-font-smoothing: antialiased; 52 | -moz-osx-font-smoothing: grayscale; 53 | } 54 | 55 | .page-title { 56 | font-family: $font__body; 57 | } 58 | 59 | .site-branding, 60 | .main-navigation ul.main-menu > li, 61 | .social-navigation, 62 | .author-description .author-bio, 63 | .nav-links { 64 | line-height: 1.25; 65 | } 66 | 67 | h1 { 68 | font-size: $font__size-xl; 69 | 70 | @include media(tablet) { 71 | font-size: $font__size-xxl; 72 | } 73 | } 74 | 75 | .entry-title, 76 | .not-found .page-title, 77 | .error-404 .page-title, 78 | .has-larger-font-size, 79 | h2 { 80 | font-size: $font__size-lg; 81 | 82 | @include media(tablet) { 83 | font-size: $font__size-xl; 84 | } 85 | } 86 | 87 | .has-regular-font-size, 88 | .has-large-font-size, 89 | .comments-title, 90 | h3 { 91 | font-size: $font__size-lg; 92 | } 93 | 94 | .site-title, 95 | .site-description, 96 | .main-navigation, 97 | .nav-links, 98 | .page-title, 99 | .page-description, 100 | .comment-author .fn, 101 | .no-comments, 102 | h2.author-title, 103 | p.author-bio, 104 | h4 { 105 | font-size: $font__size-md; 106 | } 107 | 108 | .pagination .nav-links, 109 | .comment-content, 110 | h5 { 111 | font-size: $font__size-sm; 112 | } 113 | 114 | .entry-meta, 115 | .entry-footer, 116 | .discussion-meta-info, 117 | .site-info, 118 | .has-small-font-size, 119 | .comment-reply-link, 120 | .comment-metadata, 121 | .comment-notes, 122 | .sticky-post, 123 | #cancel-comment-reply-link, 124 | img:after, 125 | h6 { 126 | font-size: $font__size-xs; 127 | } 128 | 129 | .site-title, 130 | .page-title { 131 | font-weight: normal; 132 | } 133 | 134 | .page-description, 135 | .page-links a { 136 | font-weight: bold; 137 | } 138 | 139 | .site-description { 140 | letter-spacing: -0.01em; 141 | } 142 | 143 | .post-navigation .post-title, 144 | .entry-title, 145 | .not-found .page-title, 146 | .error-404 .page-title, 147 | .comments-title, 148 | blockquote { 149 | hyphens: auto; 150 | word-break: break-word; 151 | } 152 | 153 | /* Do not hyphenate entry title on tablet view and bigger. */ 154 | .entry-title { 155 | @include media(tablet) { 156 | hyphens: none; 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Twenty Nineteen 3 | Theme URI: https://github.com/WordPress/twentynineteen 4 | Author: the WordPress team 5 | Author URI: https://wordpress.org/ 6 | Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes. 7 | Requires at least: WordPress 4.9.6 8 | Version: 1.2 9 | License: GNU General Public License v2 or later 10 | License URI: LICENSE 11 | Text Domain: twentynineteen 12 | Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready 13 | 14 | This theme, like WordPress, is licensed under the GPL. 15 | Use it to make something cool, have fun, and share what you've learned with others. 16 | 17 | Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc. 18 | Underscores is distributed under the terms of the GNU GPL v2 or later. 19 | 20 | Normalizing styles have been helped along thanks to the fine work of 21 | Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ 22 | */ 23 | 24 | /*-------------------------------------------------------------- 25 | >>> TABLE OF CONTENTS: 26 | ---------------------------------------------------------------- 27 | # Variables 28 | # Normalize 29 | # Typography 30 | ## Headings 31 | ## Copy 32 | # Elements 33 | ## Lists 34 | ## Tables 35 | # Forms 36 | ## Buttons 37 | ## Fields 38 | # Navigation 39 | ## Links 40 | ## Menus 41 | ## Next & Previous 42 | # Accessibility 43 | # Alignments 44 | # Clearings 45 | # Layout 46 | # Widgets 47 | # Content 48 | ## Archives 49 | ## Posts and pages 50 | ## Comments 51 | # Blocks 52 | # Media 53 | ## Captions 54 | ## Galleries 55 | --------------------------------------------------------------*/ 56 | @import "sass/variables-site/variables-site"; 57 | @import "sass/mixins/mixins-master"; 58 | 59 | /* Normalize */ 60 | 61 | @import "sass/normalize"; 62 | 63 | /* Typography */ 64 | 65 | @import "sass/typography/typography"; 66 | 67 | /* Elements */ 68 | 69 | @import "sass/elements/elements"; 70 | 71 | /* Forms */ 72 | 73 | @import "sass/forms/forms"; 74 | 75 | /* Navigation */ 76 | 77 | @import "sass/navigation/navigation"; 78 | 79 | /* Accessibility */ 80 | 81 | @import "sass/modules/accessibility"; 82 | 83 | /* Alignments */ 84 | 85 | @import "sass/modules/alignments"; 86 | 87 | /* Clearings */ 88 | 89 | @import "sass/modules/clearings"; 90 | 91 | /* Layout */ 92 | 93 | @import "sass/layout/layout"; 94 | 95 | /* Content */ 96 | 97 | @import "sass/site/site"; 98 | 99 | /* Widgets */ 100 | 101 | @import "sass/site/secondary/widgets"; 102 | 103 | /* Blocks */ 104 | 105 | @import "sass/blocks/blocks"; 106 | 107 | /* Media */ 108 | 109 | @import "sass/media/media"; 110 | -------------------------------------------------------------------------------- /style-editor-customizer.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Twenty Nineteen Customizer Styles & Non-latin Font Fallbacks 3 | 4 | NOTE: This file is automatically populated with additional styles if the user selects a custom primary color in the customzier. 5 | */ 6 | /** === Includes === */ 7 | /* If we add the border using a regular CSS border, it won't look good on non-retina devices, 8 | * since its edges can look jagged due to lack of antialiasing. In this case, we are several 9 | * layers of box-shadow to add the border visually, which will render the border smoother. */ 10 | /* Fallback for non-latin fonts */ 11 | /* Calculates maximum width for post content */ 12 | /* Nested sub-menu padding: 10 levels deep */ 13 | /** === Non-Latin font fallbacks === */ 14 | /* Arabic */ 15 | html[lang="ar"] .wp-block *, 16 | html[lang="ary"] .wp-block *, 17 | html[lang="azb"] .wp-block *, 18 | html[lang="ckb"] .wp-block *, 19 | html[lang="fa-IR"] .wp-block *, 20 | html[lang="haz"] .wp-block *, 21 | html[lang="ps"] .wp-block * { 22 | font-family: Tahoma, Arial, sans-serif !important; 23 | } 24 | 25 | /* Cyrillic */ 26 | html[lang="be"] .wp-block *, 27 | html[lang="bg-BG"] .wp-block *, 28 | html[lang="kk"] .wp-block *, 29 | html[lang="mk-MK"] .wp-block *, 30 | html[lang="mn"] .wp-block *, 31 | html[lang="ru-RU"] .wp-block *, 32 | html[lang="sah"] .wp-block *, 33 | html[lang="sr-RS"] .wp-block *, 34 | html[lang="tt-RU"] .wp-block *, 35 | html[lang="uk"] .wp-block * { 36 | font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif !important; 37 | } 38 | 39 | /* Chinese (Hong Kong) */ 40 | html[lang="zh-HK"] .wp-block * { 41 | font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; 42 | } 43 | 44 | /* Chinese (Taiwan) */ 45 | html[lang="zh-TW"] .wp-block * { 46 | font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; 47 | } 48 | 49 | /* Chinese (China) */ 50 | html[lang="zh-CN"] .wp-block * { 51 | font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; 52 | } 53 | 54 | /* Devanagari */ 55 | html[lang="bn-BD"] .wp-block *, 56 | html[lang="hi-IN"] .wp-block *, 57 | html[lang="mr"] .wp-block *, 58 | html[lang="ne-NP"] .wp-block * { 59 | font-family: Arial, sans-serif !important; 60 | } 61 | 62 | /* Greek */ 63 | html[lang="el"] .wp-block * { 64 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 65 | } 66 | 67 | /* Gujarati */ 68 | html[lang="gu"] .wp-block * { 69 | font-family: Arial, sans-serif !important; 70 | } 71 | 72 | /* Hebrew */ 73 | html[lang="he-IL"] .wp-block * { 74 | font-family: 'Arial Hebrew', Arial, sans-serif !important; 75 | } 76 | 77 | /* Japanese */ 78 | html[lang="ja"] .wp-block * { 79 | font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important; 80 | } 81 | 82 | /* Korean */ 83 | html[lang="ko-KR"] .wp-block * { 84 | font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans-serif !important; 85 | } 86 | 87 | /* Thai */ 88 | html[lang="th"] .wp-block * { 89 | font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif !important; 90 | } 91 | 92 | /* Vietnamese */ 93 | html[lang="vi"] .wp-block * { 94 | font-family: 'Libre Franklin', sans-serif !important; 95 | } 96 | -------------------------------------------------------------------------------- /image.php: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 |
15 | 16 | 21 | 22 |
> 23 | 24 |
25 | ', '' ); ?> 26 |
27 | 28 |
29 | 30 |
31 | 43 | 44 |
45 | 46 |
47 | 48 | '
' . __( 'Pages:', 'twentynineteen' ) . '', 53 | 'after' => '
', 54 | 'link_before' => '', 55 | 'link_after' => '', 56 | 'pagelink' => '' . __( 'Page', 'twentynineteen' ) . ' %', 57 | 'separator' => ', ', 58 | ) 59 | ); 60 | ?> 61 |
62 | 63 |
64 | %1$s%3$s × %4$s', 70 | _x( 'Full size', 'Used before full size attachment link.', 'twentynineteen' ), 71 | esc_url( wp_get_attachment_url() ), 72 | absint( $metadata['width'] ), 73 | absint( $metadata['height'] ) 74 | ); 75 | } 76 | ?> 77 | 78 | 79 | 80 |
81 |
82 | 83 | _x( 'Published in
%title', 'Parent post link', 'twentynineteen' ), 88 | ) 89 | ); 90 | 91 | // If comments are open or we have at least one comment, load up the comment template. 92 | if ( comments_open() || get_comments_number() ) { 93 | comments_template(); 94 | } 95 | 96 | // End the loop. 97 | endwhile; 98 | ?> 99 | 100 |
101 |
102 | 103 | * { 113 | padding: calc(.5 * #{$size__spacing-unit}); 114 | 115 | &.dots, 116 | &.prev { 117 | padding-left: 0; 118 | } 119 | 120 | &.dots, 121 | &.next { 122 | padding-right: 0; 123 | } 124 | } 125 | 126 | a:focus { 127 | text-decoration: underline; 128 | outline-offset: -1px; 129 | 130 | &.prev, 131 | &.next { 132 | text-decoration: none; 133 | 134 | .nav-prev-text, 135 | .nav-next-text { 136 | text-decoration: underline; 137 | } 138 | } 139 | } 140 | 141 | .nav-next-text, 142 | .nav-prev-text { 143 | display: none; 144 | } 145 | 146 | @include media(tablet) { 147 | 148 | margin-left: $size__site-margins; 149 | padding: 0; 150 | 151 | .prev, 152 | .next { 153 | 154 | & > * { 155 | display: inline-block; 156 | vertical-align: text-bottom; 157 | } 158 | } 159 | 160 | & > * { 161 | padding: $size__spacing-unit; 162 | } 163 | } 164 | } 165 | } 166 | 167 | // Comments navigation 168 | .comment-navigation { 169 | 170 | .nav-links { 171 | display: flex; 172 | flex-direction: row; 173 | } 174 | 175 | .nav-previous, 176 | .nav-next { 177 | min-width: 50%; 178 | width: 100%; 179 | font-family: $font__heading; 180 | font-weight: bold; 181 | 182 | .secondary-text { 183 | display: none; 184 | 185 | @include media(tablet) { 186 | display: inline; 187 | } 188 | } 189 | 190 | svg { 191 | vertical-align: middle; 192 | position: relative; 193 | margin: 0 -0.35em; 194 | top: -1px; 195 | } 196 | } 197 | 198 | .nav-next { 199 | text-align: right; 200 | } 201 | } 202 | -------------------------------------------------------------------------------- /classes/class-twentynineteen-walker-comment.php: -------------------------------------------------------------------------------- 1 | 31 | < id="comment-" has_children ? 'parent' : '', $comment ); ?>> 32 |
33 |
34 |
35 | ', $comment_author_url ); 46 | echo $avatar; 47 | } 48 | } 49 | 50 | /* 51 | * Using the `check` icon instead of `check_circle`, since we can't add a 52 | * fill color to the inner check shape when in circle form. 53 | */ 54 | if ( twentynineteen_is_comment_by_post_author( $comment ) ) { 55 | printf( '', twentynineteen_get_icon_svg( 'check', 24 ) ); 56 | } 57 | 58 | printf( 59 | /* translators: %s: comment author link */ 60 | wp_kses( 61 | __( '%s says:', 'twentynineteen' ), 62 | array( 63 | 'span' => array( 64 | 'class' => array(), 65 | ), 66 | ) 67 | ), 68 | '' . get_comment_author_link( $comment ) . '' 69 | ); 70 | 71 | if ( ! empty( $comment_author_url ) ) { 72 | echo ''; 73 | } 74 | ?> 75 |
76 | 77 |
78 | 79 | 83 | 86 | 87 | — ' . $edit_comment_icon, '' ); 90 | ?> 91 |
92 | 93 | comment_approved ) : ?> 94 |

95 | 96 |
97 | 98 |
99 | 100 |
101 | 102 |
103 | 104 | 'div-comment', 110 | 'depth' => $depth, 111 | 'max_depth' => $args['max_depth'], 112 | 'before' => '
', 113 | 'after' => '
', 114 | ) 115 | ) 116 | ); 117 | ?> 118 | 26 | 27 |
28 |
29 |

30 | responses ) { 39 | /* translators: %s: post title */ 40 | printf( _x( 'One reply on “%s”', 'comments title', 'twentynineteen' ), get_the_title() ); 41 | } else { 42 | printf( 43 | /* translators: 1: number of comments, 2: post title */ 44 | _nx( 45 | '%1$s reply on “%2$s”', 46 | '%1$s replies on “%2$s”', 47 | $discussion->responses, 48 | 'comments title', 49 | 'twentynineteen' 50 | ), 51 | number_format_i18n( $discussion->responses ), 52 | get_the_title() 53 | ); 54 | } 55 | } 56 | ?> 57 |

58 | 64 |
65 | 74 |
    75 | new TwentyNineteen_Walker_Comment(), 79 | 'avatar_size' => twentynineteen_get_avatar_size(), 80 | 'short_ping' => true, 81 | 'style' => 'ol', 82 | ) 83 | ); 84 | ?> 85 |
86 | sprintf( '%s %s %s', $prev_icon, __( 'Previous', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ) ), 96 | 'next_text' => sprintf( '%s %s %s', __( 'Next', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ), $next_icon ), 97 | ) 98 | ); 99 | endif; 100 | 101 | // Show comment form at bottom if showing newest comments at the bottom. 102 | if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) : 103 | ?> 104 |
105 | 106 | 107 | 108 |
109 | 115 |

116 | 117 |

118 | 128 |
129 | -------------------------------------------------------------------------------- /print.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Twenty Nineteen 3 | 4 | Adding print support. The print styles are based on the the great work of 5 | Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/. 6 | */ 7 | 8 | /*-------------------------------------------------------------- 9 | >>> TABLE OF CONTENTS: 10 | ---------------------------------------------------------------- 11 | # Margins 12 | # Typography÷ 13 | # Page breaks 14 | # Links 15 | # Visibility 16 | --------------------------------------------------------------*/ 17 | 18 | @media print { 19 | 20 | /* Margins */ 21 | 22 | @page { 23 | margin: 2cm; 24 | } 25 | 26 | .entry { 27 | margin-top: 1em; 28 | } 29 | 30 | .entry .entry-header, .site-footer .site-info { 31 | margin: 0; 32 | } 33 | 34 | /* Fonts */ 35 | 36 | body { 37 | font: 13pt Georgia, "Times New Roman", Times, serif; 38 | line-height: 1.3; 39 | background: #fff !important; 40 | color: #000; 41 | } 42 | 43 | h1 { 44 | font-size: 24pt; 45 | } 46 | 47 | h2, 48 | h3, 49 | h4, 50 | .has-regular-font-size, 51 | .has-large-font-size, 52 | h2.author-title, 53 | p.author-bio, 54 | .comments-title, h3 { 55 | font-size: 14pt; 56 | margin-top: 25px; 57 | } 58 | 59 | /* Page breaks */ 60 | 61 | a { 62 | page-break-inside: avoid 63 | } 64 | 65 | blockquote { 66 | page-break-inside: avoid; 67 | } 68 | 69 | h1, 70 | h2, 71 | h3, 72 | h4, 73 | h5, 74 | h6 { 75 | page-break-after: avoid; 76 | page-break-inside: avoid 77 | } 78 | 79 | img { 80 | page-break-inside: avoid; 81 | page-break-after: avoid; 82 | } 83 | 84 | table, pre { 85 | page-break-inside: avoid; 86 | } 87 | 88 | ul, ol, dl { 89 | page-break-before: avoid; 90 | } 91 | 92 | /* Links */ 93 | 94 | a:link, a:visited, a { 95 | background: transparent; 96 | font-weight: bold; 97 | text-decoration: underline; 98 | text-align: left; 99 | } 100 | 101 | a { 102 | page-break-inside: avoid; 103 | } 104 | 105 | a[href^=http]:after { 106 | content: " < " attr(href) "> "; 107 | } 108 | 109 | a:after > img { 110 | content: ""; 111 | } 112 | 113 | article a[href^="#"]:after { 114 | content: ""; 115 | } 116 | 117 | a:not(:local-link):after { 118 | content: " < " attr(href) "> "; 119 | } 120 | 121 | /* Visibility */ 122 | .main-navigation, 123 | .site-title + .main-navigation, 124 | .social-navigation, 125 | .site-branding-container:before, 126 | .entry .entry-title:before, 127 | .entry-footer, 128 | .author-description:before, 129 | .post-navigation, 130 | .widget-area, 131 | .comment-form-flex, 132 | .comment-reply, 133 | .comment .comment-metadata .edit-link { 134 | display: none; 135 | } 136 | 137 | .entry .entry-content .wp-block-button .wp-block-button__link, 138 | .entry .entry-content .button { 139 | color: #000; 140 | background: none; 141 | } 142 | 143 | /* Site Header (With Featured Image) */ 144 | .site-header.featured-image { 145 | min-height: 0; 146 | 147 | .main-navigation a, 148 | .main-navigation a + svg, 149 | .social-navigation a, 150 | .site-title a, 151 | .site-featured-image a, 152 | .site-branding .site-title, 153 | .site-branding .site-description, 154 | .main-navigation a:after, 155 | .main-navigation .main-menu > li.menu-item-has-children:after, 156 | .main-navigation li, 157 | .social-navigation li, 158 | .entry-meta, 159 | .entry-title, 160 | &#masthead .site-title a { 161 | color: #000; 162 | text-shadow: none; 163 | } 164 | 165 | .site-featured-image .entry-header, 166 | .site-branding-container { 167 | margin-top: 0; 168 | margin-bottom: 0; 169 | } 170 | 171 | .site-featured-image .post-thumbnail img { 172 | position: relative; 173 | height: initial; 174 | width: initial; 175 | object-fit: none; 176 | min-width: 0; 177 | min-height: 0; 178 | max-width: 100%; 179 | margin-top: 1rem; 180 | } 181 | } 182 | 183 | /* Remove image filters from featured image */ 184 | .image-filters-enabled { 185 | 186 | *:after { 187 | display: none !important; 188 | } 189 | 190 | .site-header.featured-image .site-featured-image:before { 191 | display: none; 192 | } 193 | 194 | .site-header.featured-image .site-featured-image .post-thumbnail img { 195 | filter: none; 196 | } 197 | } 198 | } -------------------------------------------------------------------------------- /print.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Theme Name: Twenty Nineteen 4 | 5 | Adding print support. The print styles are based on the the great work of 6 | Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/. 7 | */ 8 | /*-------------------------------------------------------------- 9 | >>> TABLE OF CONTENTS: 10 | ---------------------------------------------------------------- 11 | # Margins 12 | # Typography÷ 13 | # Page breaks 14 | # Links 15 | # Visibility 16 | --------------------------------------------------------------*/ 17 | @media print { 18 | /* Margins */ 19 | @page { 20 | margin: 2cm; 21 | } 22 | .entry { 23 | margin-top: 1em; 24 | } 25 | .entry .entry-header, .site-footer .site-info { 26 | margin: 0; 27 | } 28 | /* Fonts */ 29 | body { 30 | font: 13pt Georgia, "Times New Roman", Times, serif; 31 | line-height: 1.3; 32 | background: #fff !important; 33 | color: #000; 34 | } 35 | h1 { 36 | font-size: 24pt; 37 | } 38 | h2, 39 | h3, 40 | h4, 41 | .has-regular-font-size, 42 | .has-large-font-size, 43 | h2.author-title, 44 | p.author-bio, 45 | .comments-title, h3 { 46 | font-size: 14pt; 47 | margin-top: 25px; 48 | } 49 | /* Page breaks */ 50 | a { 51 | page-break-inside: avoid; 52 | } 53 | blockquote { 54 | page-break-inside: avoid; 55 | } 56 | h1, 57 | h2, 58 | h3, 59 | h4, 60 | h5, 61 | h6 { 62 | page-break-after: avoid; 63 | page-break-inside: avoid; 64 | } 65 | img { 66 | page-break-inside: avoid; 67 | page-break-after: avoid; 68 | } 69 | table, pre { 70 | page-break-inside: avoid; 71 | } 72 | ul, ol, dl { 73 | page-break-before: avoid; 74 | } 75 | /* Links */ 76 | a:link, a:visited, a { 77 | background: transparent; 78 | font-weight: bold; 79 | text-decoration: underline; 80 | text-align: left; 81 | } 82 | a { 83 | page-break-inside: avoid; 84 | } 85 | a[href^=http]:after { 86 | content: " < " attr(href) "> "; 87 | } 88 | a:after > img { 89 | content: ""; 90 | } 91 | article a[href^="#"]:after { 92 | content: ""; 93 | } 94 | a:not(:local-link):after { 95 | content: " < " attr(href) "> "; 96 | } 97 | /* Visibility */ 98 | .main-navigation, 99 | .site-title + .main-navigation, 100 | .social-navigation, 101 | .site-branding-container:before, 102 | .entry .entry-title:before, 103 | .entry-footer, 104 | .author-description:before, 105 | .post-navigation, 106 | .widget-area, 107 | .comment-form-flex, 108 | .comment-reply, 109 | .comment .comment-metadata .edit-link { 110 | display: none; 111 | } 112 | .entry .entry-content .wp-block-button .wp-block-button__link, 113 | .entry .entry-content .button { 114 | color: #000; 115 | background: none; 116 | } 117 | /* Site Header (With Featured Image) */ 118 | .site-header.featured-image { 119 | min-height: 0; 120 | } 121 | .site-header.featured-image .main-navigation a, 122 | .site-header.featured-image .main-navigation a + svg, 123 | .site-header.featured-image .social-navigation a, 124 | .site-header.featured-image .site-title a, 125 | .site-header.featured-image .site-featured-image a, 126 | .site-header.featured-image .site-branding .site-title, 127 | .site-header.featured-image .site-branding .site-description, 128 | .site-header.featured-image .main-navigation a:after, 129 | .site-header.featured-image .main-navigation .main-menu > li.menu-item-has-children:after, 130 | .site-header.featured-image .main-navigation li, 131 | .site-header.featured-image .social-navigation li, 132 | .site-header.featured-image .entry-meta, 133 | .site-header.featured-image .entry-title, 134 | .site-header.featured-image#masthead .site-title a { 135 | color: #000; 136 | text-shadow: none; 137 | } 138 | .site-header.featured-image .site-featured-image .entry-header, 139 | .site-header.featured-image .site-branding-container { 140 | margin-top: 0; 141 | margin-bottom: 0; 142 | } 143 | .site-header.featured-image .site-featured-image .post-thumbnail img { 144 | position: relative; 145 | height: initial; 146 | width: initial; 147 | object-fit: none; 148 | min-width: 0; 149 | min-height: 0; 150 | max-width: 100%; 151 | margin-top: 1rem; 152 | } 153 | /* Remove image filters from featured image */ 154 | .image-filters-enabled *:after { 155 | display: none !important; 156 | } 157 | .image-filters-enabled .site-header.featured-image .site-featured-image:before { 158 | display: none; 159 | } 160 | .image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img { 161 | filter: none; 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /inc/customizer.php: -------------------------------------------------------------------------------- 1 | get_setting( 'blogname' )->transport = 'postMessage'; 17 | $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; 18 | $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage'; 19 | 20 | if ( isset( $wp_customize->selective_refresh ) ) { 21 | $wp_customize->selective_refresh->add_partial( 22 | 'blogname', 23 | array( 24 | 'selector' => '.site-title a', 25 | 'render_callback' => 'twentynineteen_customize_partial_blogname', 26 | ) 27 | ); 28 | $wp_customize->selective_refresh->add_partial( 29 | 'blogdescription', 30 | array( 31 | 'selector' => '.site-description', 32 | 'render_callback' => 'twentynineteen_customize_partial_blogdescription', 33 | ) 34 | ); 35 | } 36 | 37 | /** 38 | * Primary color. 39 | */ 40 | $wp_customize->add_setting( 41 | 'primary_color', 42 | array( 43 | 'default' => 'default', 44 | 'transport' => 'postMessage', 45 | 'sanitize_callback' => 'twentynineteen_sanitize_color_option', 46 | ) 47 | ); 48 | 49 | $wp_customize->add_control( 50 | 'primary_color', 51 | array( 52 | 'type' => 'radio', 53 | 'label' => __( 'Primary Color', 'twentynineteen' ), 54 | 'choices' => array( 55 | 'default' => _x( 'Default', 'primary color', 'twentynineteen' ), 56 | 'custom' => _x( 'Custom', 'primary color', 'twentynineteen' ), 57 | ), 58 | 'section' => 'colors', 59 | 'priority' => 5, 60 | ) 61 | ); 62 | 63 | // Add primary color hue setting and control. 64 | $wp_customize->add_setting( 65 | 'primary_color_hue', 66 | array( 67 | 'default' => 199, 68 | 'transport' => 'postMessage', 69 | 'sanitize_callback' => 'absint', 70 | ) 71 | ); 72 | 73 | $wp_customize->add_control( 74 | new WP_Customize_Color_Control( 75 | $wp_customize, 76 | 'primary_color_hue', 77 | array( 78 | 'description' => __( 'Apply a custom color for buttons, links, featured images, etc.', 'twentynineteen' ), 79 | 'section' => 'colors', 80 | 'mode' => 'hue', 81 | ) 82 | ) 83 | ); 84 | 85 | // Add image filter setting and control. 86 | $wp_customize->add_setting( 87 | 'image_filter', 88 | array( 89 | 'default' => 1, 90 | 'sanitize_callback' => 'absint', 91 | 'transport' => 'postMessage', 92 | ) 93 | ); 94 | 95 | $wp_customize->add_control( 96 | 'image_filter', 97 | array( 98 | 'label' => __( 'Apply a filter to featured images using the primary color', 'twentynineteen' ), 99 | 'section' => 'colors', 100 | 'type' => 'checkbox', 101 | ) 102 | ); 103 | } 104 | add_action( 'customize_register', 'twentynineteen_customize_register' ); 105 | 106 | /** 107 | * Render the site title for the selective refresh partial. 108 | * 109 | * @return void 110 | */ 111 | function twentynineteen_customize_partial_blogname() { 112 | bloginfo( 'name' ); 113 | } 114 | 115 | /** 116 | * Render the site tagline for the selective refresh partial. 117 | * 118 | * @return void 119 | */ 120 | function twentynineteen_customize_partial_blogdescription() { 121 | bloginfo( 'description' ); 122 | } 123 | 124 | /** 125 | * Bind JS handlers to instantly live-preview changes. 126 | */ 127 | function twentynineteen_customize_preview_js() { 128 | wp_enqueue_script( 'twentynineteen-customize-preview', get_theme_file_uri( '/js/customize-preview.js' ), array( 'customize-preview' ), '20181231', true ); 129 | } 130 | add_action( 'customize_preview_init', 'twentynineteen_customize_preview_js' ); 131 | 132 | /** 133 | * Load dynamic logic for the customizer controls area. 134 | */ 135 | function twentynineteen_panels_js() { 136 | wp_enqueue_script( 'twentynineteen-customize-controls', get_theme_file_uri( '/js/customize-controls.js' ), array(), '20181231', true ); 137 | } 138 | add_action( 'customize_controls_enqueue_scripts', 'twentynineteen_panels_js' ); 139 | 140 | /** 141 | * Sanitize custom color choice. 142 | * 143 | * @param string $choice Whether image filter is active. 144 | * 145 | * @return string 146 | */ 147 | function twentynineteen_sanitize_color_option( $choice ) { 148 | $valid = array( 149 | 'default', 150 | 'custom', 151 | ); 152 | 153 | if ( in_array( $choice, $valid, true ) ) { 154 | return $choice; 155 | } 156 | 157 | return 'default'; 158 | } 159 | -------------------------------------------------------------------------------- /sass/mixins/_mixins-master.scss: -------------------------------------------------------------------------------- 1 | // Rem output with px fallback 2 | @mixin font-size($sizeValue: 1) { 3 | font-size: ($sizeValue * 16) * 1px; 4 | font-size: $sizeValue * 1rem; 5 | } 6 | 7 | // Center block 8 | @mixin center-block { 9 | display: block; 10 | margin-left: auto; 11 | margin-right: auto; 12 | } 13 | 14 | // Clearfix 15 | @mixin clearfix() { 16 | content: ""; 17 | display: table; 18 | table-layout: fixed; 19 | } 20 | 21 | // Clear after (not all clearfix need this also) 22 | @mixin clearfix-after() { 23 | clear: both; 24 | } 25 | 26 | // Column width with margin 27 | @mixin column-width($numberColumns: 3) { 28 | width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns); 29 | } 30 | 31 | @mixin filter-duotone { 32 | 33 | &:before { 34 | background: $color__link; 35 | mix-blend-mode: screen; 36 | opacity: 0.1; 37 | z-index: 2; 38 | } 39 | 40 | &:after { 41 | background: $color__link; 42 | mix-blend-mode: multiply; 43 | opacity: .8; 44 | z-index: 3; 45 | 46 | /* Browsers supporting mix-blend-mode don't need opacity < 1 */ 47 | @supports (mix-blend-mode: multiply) { 48 | opacity: 1; 49 | } 50 | } 51 | } 52 | 53 | @mixin filter-grayscale { 54 | 55 | position: relative; 56 | filter: grayscale(100%); 57 | z-index: 1; 58 | 59 | &:after { 60 | display: block; 61 | width: 100%; 62 | height: 100%; 63 | z-index: 10; 64 | } 65 | } 66 | 67 | @mixin post-section-dash { 68 | 69 | &:before { 70 | background: $color__text-light; 71 | content: "\020"; 72 | display: block; 73 | height: 2px; 74 | margin: $size__spacing-unit 0; 75 | width: 1em; 76 | } 77 | } 78 | 79 | /* If we add the border using a regular CSS border, it won't look good on non-retina devices, 80 | * since its edges can look jagged due to lack of antialiasing. In this case, we are several 81 | * layers of box-shadow to add the border visually, which will render the border smoother. */ 82 | 83 | @mixin box-shadow( $size ) { 84 | box-shadow: 85 | 0 0 0 $size $color__text-light inset, // Original border. 86 | 0 0 0 ($size + 1px) $color__text-light inset, // Antialiasing, inner edge. 87 | 0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge. 88 | } 89 | 90 | /* Fallback for non-latin fonts */ 91 | 92 | @mixin non-latin-fonts( $wrapper_classname: '.site' ) { 93 | 94 | /* Arabic */ 95 | html[lang="ar"] #{$wrapper_classname} *, 96 | html[lang="ary"] #{$wrapper_classname} *, 97 | html[lang="azb"] #{$wrapper_classname} *, 98 | html[lang="ckb"] #{$wrapper_classname} *, 99 | html[lang="fa-IR"] #{$wrapper_classname} *, 100 | html[lang="haz"] #{$wrapper_classname} *, 101 | html[lang="ps"] #{$wrapper_classname} * { 102 | font-family: Tahoma, Arial, sans-serif !important; 103 | } 104 | 105 | /* Cyrillic */ 106 | html[lang="be"] #{$wrapper_classname} *, 107 | html[lang="bg-BG"] #{$wrapper_classname} *, 108 | html[lang="kk"] #{$wrapper_classname} *, 109 | html[lang="mk-MK"] #{$wrapper_classname} *, 110 | html[lang="mn"] #{$wrapper_classname} *, 111 | html[lang="ru-RU"] #{$wrapper_classname} *, 112 | html[lang="sah"] #{$wrapper_classname} *, 113 | html[lang="sr-RS"] #{$wrapper_classname} *, 114 | html[lang="tt-RU"] #{$wrapper_classname} *, 115 | html[lang="uk"] #{$wrapper_classname} * { 116 | font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif !important; 117 | } 118 | 119 | /* Chinese (Hong Kong) */ 120 | html[lang="zh-HK"] #{$wrapper_classname} * { 121 | font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; 122 | } 123 | 124 | /* Chinese (Taiwan) */ 125 | html[lang="zh-TW"] #{$wrapper_classname} * { 126 | font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; 127 | } 128 | 129 | /* Chinese (China) */ 130 | html[lang="zh-CN"] #{$wrapper_classname} * { 131 | font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important; 132 | } 133 | 134 | /* Devanagari */ 135 | html[lang="bn-BD"] #{$wrapper_classname} *, 136 | html[lang="hi-IN"] #{$wrapper_classname} *, 137 | html[lang="mr"] #{$wrapper_classname} *, 138 | html[lang="ne-NP"] #{$wrapper_classname} * { 139 | font-family: Arial, sans-serif !important; 140 | } 141 | 142 | /* Greek */ 143 | html[lang="el"] #{$wrapper_classname} * { 144 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 145 | } 146 | 147 | /* Gujarati */ 148 | html[lang="gu"] #{$wrapper_classname} * { 149 | font-family: Arial, sans-serif !important; 150 | } 151 | 152 | /* Hebrew */ 153 | html[lang="he-IL"] #{$wrapper_classname} * { 154 | font-family: 'Arial Hebrew', Arial, sans-serif !important; 155 | } 156 | 157 | /* Japanese */ 158 | html[lang="ja"] #{$wrapper_classname} * { 159 | font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important; 160 | } 161 | 162 | /* Korean */ 163 | html[lang="ko-KR"] #{$wrapper_classname} * { 164 | font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans-serif !important; 165 | } 166 | 167 | /* Thai */ 168 | html[lang="th"] #{$wrapper_classname} * { 169 | font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif !important; 170 | } 171 | 172 | /* Vietnamese */ 173 | html[lang="vi"] #{$wrapper_classname} * { 174 | font-family: 'Libre Franklin', sans-serif !important; 175 | } 176 | } 177 | 178 | /* Calculates maximum width for post content */ 179 | @mixin postContentMaxWidth() { 180 | 181 | @include media(tablet) { 182 | max-width: $size__site-tablet-content; 183 | } 184 | 185 | @include media(desktop) { 186 | max-width: $size__site-desktop-content; 187 | } 188 | } 189 | 190 | /* Nested sub-menu padding: 10 levels deep */ 191 | @mixin nestedSubMenuPadding() { 192 | 193 | ul { 194 | counter-reset: submenu; 195 | } 196 | 197 | ul > li > a::before { 198 | font-family: $font__body; 199 | font-weight: normal; 200 | content: "\2013\00a0" counters(submenu, "\2013\00a0", none); 201 | counter-increment: submenu 202 | } 203 | } 204 | 205 | @import "utilities"; 206 | -------------------------------------------------------------------------------- /js/priority-menu.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | /** 4 | * Debounce 5 | * 6 | * @param {Function} func 7 | * @param {number} wait 8 | * @param {boolean} immediate 9 | */ 10 | function debounce(func, wait, immediate) { 11 | 'use strict'; 12 | 13 | var timeout; 14 | wait = (typeof wait !== 'undefined') ? wait : 20; 15 | immediate = (typeof immediate !== 'undefined') ? immediate : true; 16 | 17 | return function() { 18 | 19 | var context = this, args = arguments; 20 | var later = function() { 21 | timeout = null; 22 | 23 | if (!immediate) { 24 | func.apply(context, args); 25 | } 26 | }; 27 | 28 | var callNow = immediate && !timeout; 29 | 30 | clearTimeout(timeout); 31 | timeout = setTimeout(later, wait); 32 | 33 | if (callNow) { 34 | func.apply(context, args); 35 | } 36 | }; 37 | } 38 | 39 | /** 40 | * Prepends an element to a container. 41 | * 42 | * @param {Element} container 43 | * @param {Element} element 44 | */ 45 | function prependElement(container, element) { 46 | if (container.firstChild.nextSibling) { 47 | return container.insertBefore(element, container.firstChild.nextSibling); 48 | } else { 49 | return container.appendChild(element); 50 | } 51 | } 52 | 53 | /** 54 | * Shows an element by adding a hidden className. 55 | * 56 | * @param {Element} element 57 | */ 58 | function showButton(element) { 59 | // classList.remove is not supported in IE11 60 | element.className = element.className.replace('is-empty', ''); 61 | } 62 | 63 | /** 64 | * Hides an element by removing the hidden className. 65 | * 66 | * @param {Element} element 67 | */ 68 | function hideButton(element) { 69 | // classList.add is not supported in IE11 70 | if (!element.classList.contains('is-empty')) { 71 | element.className += ' is-empty'; 72 | } 73 | } 74 | 75 | /** 76 | * Returns the currently available space in the menu container. 77 | * 78 | * @returns {number} Available space 79 | */ 80 | function getAvailableSpace( button, container ) { 81 | return container.offsetWidth - button.offsetWidth - 22; 82 | } 83 | 84 | /** 85 | * Returns whether the current menu is overflowing or not. 86 | * 87 | * @returns {boolean} Is overflowing 88 | */ 89 | function isOverflowingNavivation( list, button, container ) { 90 | return list.offsetWidth > getAvailableSpace( button, container ); 91 | } 92 | 93 | /** 94 | * Set menu container variable 95 | */ 96 | var navContainer = document.querySelector('.main-navigation'); 97 | var breaks = []; 98 | 99 | /** 100 | * Let’s bail if we our menu doesn't exist 101 | */ 102 | if ( ! navContainer ) { 103 | return; 104 | } 105 | 106 | /** 107 | * Refreshes the list item from the menu depending on the menu size 108 | */ 109 | function updateNavigationMenu( container ) { 110 | 111 | /** 112 | * Let’s bail if our menu is empty 113 | */ 114 | if ( ! container.parentNode.querySelector('.main-menu[id]') ) { 115 | return; 116 | } 117 | 118 | // Adds the necessary UI to operate the menu. 119 | var visibleList = container.parentNode.querySelector('.main-menu[id]'); 120 | var hiddenList = visibleList.parentNode.nextElementSibling.querySelector('.hidden-links'); 121 | var toggleButton = visibleList.parentNode.nextElementSibling.querySelector('.main-menu-more-toggle'); 122 | 123 | if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) { 124 | 125 | // Record the width of the list 126 | breaks.push( visibleList.offsetWidth ); 127 | // Move last item to the hidden list 128 | prependElement( hiddenList, ! visibleList.lastChild || null === visibleList.lastChild ? visibleList.previousElementSibling : visibleList.lastChild ); 129 | // Show the toggle button 130 | showButton( toggleButton ); 131 | 132 | } else { 133 | 134 | // There is space for another item in the nav 135 | if ( getAvailableSpace( toggleButton, container ) > breaks[breaks.length - 1] ) { 136 | // Move the item to the visible list 137 | visibleList.appendChild( hiddenList.firstChild.nextSibling ); 138 | breaks.pop(); 139 | } 140 | 141 | // Hide the dropdown btn if hidden list is empty 142 | if (breaks.length < 2) { 143 | hideButton( toggleButton ); 144 | } 145 | } 146 | 147 | // Recur if the visible list is still overflowing the nav 148 | if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) { 149 | updateNavigationMenu( container ); 150 | } 151 | } 152 | 153 | /** 154 | * Run our priority+ function as soon as the document is `ready` 155 | */ 156 | document.addEventListener( 'DOMContentLoaded', function() { 157 | 158 | updateNavigationMenu( navContainer ); 159 | 160 | // Also, run our priority+ function on selective refresh in the customizer 161 | var hasSelectiveRefresh = ( 162 | 'undefined' !== typeof wp && 163 | wp.customize && 164 | wp.customize.selectiveRefresh && 165 | wp.customize.navMenusPreview.NavMenuInstancePartial 166 | ); 167 | 168 | if ( hasSelectiveRefresh ) { 169 | // Re-run our priority+ function on Nav Menu partial refreshes 170 | wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function ( placement ) { 171 | 172 | var isNewNavMenu = ( 173 | placement && 174 | placement.partial.id.includes( 'nav_menu_instance' ) && 175 | 'null' !== placement.container[0].parentNode && 176 | placement.container[0].parentNode.classList.contains( 'main-navigation' ) 177 | ); 178 | 179 | if ( isNewNavMenu ) { 180 | updateNavigationMenu( placement.container[0].parentNode ); 181 | } 182 | }); 183 | } 184 | }); 185 | 186 | /** 187 | * Run our priority+ function on load 188 | */ 189 | window.addEventListener( 'load', function() { 190 | updateNavigationMenu( navContainer ); 191 | }); 192 | 193 | /** 194 | * Run our priority+ function every time the window resizes 195 | */ 196 | var isResizing = false; 197 | window.addEventListener( 'resize', 198 | debounce( function() { 199 | if ( isResizing ) { 200 | return; 201 | } 202 | 203 | isResizing = true; 204 | setTimeout( function() { 205 | updateNavigationMenu( navContainer ); 206 | isResizing = false; 207 | }, 150 ); 208 | } ) 209 | ); 210 | 211 | /** 212 | * Run our priority+ function 213 | */ 214 | updateNavigationMenu( navContainer ); 215 | 216 | })(); 217 | -------------------------------------------------------------------------------- /sass/site/primary/_posts-and-pages.scss: -------------------------------------------------------------------------------- 1 | .sticky { 2 | display: block; 3 | } 4 | 5 | .sticky-post { 6 | background: $color__background-button; 7 | color: #fff; 8 | display: inline-block; 9 | font-weight: bold; 10 | line-height: 1; 11 | padding: .25rem; 12 | position: absolute; 13 | text-transform: uppercase; 14 | top: -$size__spacing-unit; 15 | z-index: 1; 16 | } 17 | 18 | .updated:not(.published) { 19 | display: none; 20 | } 21 | 22 | .page-links { 23 | clear: both; 24 | margin: 0 0 calc(1.5 * #{$size__spacing-unit}); 25 | } 26 | 27 | .entry { 28 | 29 | margin-top: calc(6 * #{$size__spacing-unit}); 30 | 31 | &:first-of-type { 32 | margin-top: 0; 33 | } 34 | 35 | .entry-header { 36 | 37 | margin: calc(3 * #{ $size__spacing-unit}) $size__spacing-unit $size__spacing-unit; 38 | position: relative; 39 | 40 | @include media(tablet) { 41 | margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit; 42 | } 43 | } 44 | 45 | .entry-title { 46 | 47 | @include post-section-dash; 48 | margin: 0; 49 | 50 | a { 51 | color: inherit; 52 | 53 | &:hover { 54 | color: $color__text-hover; 55 | } 56 | } 57 | } 58 | 59 | .entry-meta, 60 | .entry-footer { 61 | 62 | color: $color__text-light; 63 | font-weight: 500; 64 | 65 | > span { 66 | 67 | margin-right: $size__spacing-unit; 68 | display: inline-block; 69 | 70 | &:last-child { 71 | margin-right: 0; 72 | } 73 | } 74 | 75 | a { 76 | 77 | @include link-transition; 78 | color: currentColor; 79 | 80 | &:hover { 81 | text-decoration: none; 82 | color: $color__link; 83 | } 84 | } 85 | 86 | .svg-icon { 87 | position: relative; 88 | display: inline-block; 89 | vertical-align: middle; 90 | margin-right: 0.5em; 91 | } 92 | } 93 | 94 | .entry-meta { 95 | margin: $size__spacing-unit 0; 96 | } 97 | 98 | .entry-footer { 99 | 100 | margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit; 101 | 102 | @include media(tablet) { 103 | margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit}); 104 | max-width: $size__site-tablet-content; 105 | } 106 | 107 | @include media(tablet) { 108 | max-width: $size__site-desktop-content; 109 | } 110 | } 111 | 112 | .post-thumbnail { 113 | 114 | margin: $size__spacing-unit; 115 | 116 | @include media(tablet) { 117 | margin: $size__spacing-unit $size__site-margins; 118 | } 119 | 120 | &:focus { 121 | outline: none; 122 | } 123 | 124 | .post-thumbnail-inner { 125 | display: block; 126 | 127 | img { 128 | position: relative; 129 | display: block; 130 | width: 100%; 131 | } 132 | } 133 | } 134 | 135 | .image-filters-enabled & { 136 | 137 | .post-thumbnail { 138 | position: relative; 139 | display: block; 140 | 141 | .post-thumbnail-inner { 142 | filter: grayscale(100%); 143 | 144 | &:after { 145 | background: rgba(0, 0, 0, 0.35); 146 | content: ""; 147 | display: block; 148 | height: 100%; 149 | opacity: .5; 150 | pointer-events: none; 151 | position: absolute; 152 | top: 0; 153 | width: 100%; 154 | z-index: 4; 155 | 156 | @supports (mix-blend-mode: multiply) { 157 | display: none; 158 | } 159 | } 160 | } 161 | 162 | &:before, 163 | &:after, { 164 | position: absolute; 165 | display: block; 166 | width: 100%; 167 | height: 100%; 168 | top: 0; left: 0; 169 | content: "\020"; 170 | pointer-events: none; 171 | } 172 | 173 | @include filter-duotone; 174 | 175 | } 176 | } 177 | 178 | .entry-content, 179 | .entry-summary { 180 | max-width: calc(100% - (2 * #{ $size__spacing-unit })); 181 | margin: 0 $size__spacing-unit; 182 | 183 | @include media(tablet) { 184 | max-width: 80%; 185 | margin: 0 10%; 186 | padding: 0 60px; 187 | } 188 | } 189 | 190 | .entry-content { 191 | 192 | p { 193 | word-wrap: break-word; 194 | } 195 | 196 | .more-link { 197 | @include link-transition; 198 | display: inline; 199 | color: inherit; 200 | 201 | &:after { 202 | content: "\02192"; 203 | display: inline-block; 204 | margin-left: 0.5em; 205 | } 206 | 207 | &:hover { 208 | color: $color__link; 209 | text-decoration: none; 210 | } 211 | } 212 | 213 | a { 214 | text-decoration: underline; 215 | 216 | &.button, 217 | &:hover { 218 | text-decoration: none; 219 | } 220 | 221 | &.button { 222 | display: inline-block; 223 | } 224 | 225 | &.button:hover { 226 | background: $color__background-button-hover; 227 | color: $color__background-body; 228 | cursor: pointer; 229 | } 230 | } 231 | 232 | // Overwrite iframe embeds that have inline styles. 233 | > iframe[style] { 234 | 235 | margin: 32px 0 !important; 236 | max-width: 100% !important; 237 | 238 | @include media(tablet) { 239 | max-width: $size__site-tablet-content !important; 240 | } 241 | 242 | @include media(desktop) { 243 | max-width: $size__site-desktop-content !important; 244 | } 245 | } 246 | 247 | // Page links 248 | .page-links a { 249 | margin: calc(0.5 * #{$size__spacing-unit}); 250 | text-decoration: none; 251 | } 252 | 253 | // Classic editor audio embeds. 254 | .wp-audio-shortcode { 255 | max-width: calc(100vw - (2 * #{ $size__spacing-unit })); 256 | 257 | @include media(tablet) { 258 | max-width: $size__site-tablet-content; 259 | } 260 | 261 | @include media(desktop) { 262 | max-width: $size__site-desktop-content; 263 | } 264 | } 265 | } 266 | } 267 | 268 | /* Author description */ 269 | 270 | .author-bio { 271 | margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit; 272 | 273 | @include postContentMaxWidth(); 274 | 275 | @include media(tablet) { 276 | margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; 277 | } 278 | 279 | @include media(desktop) { 280 | margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; 281 | } 282 | 283 | .author-title { 284 | @include post-section-dash; 285 | display: inline; 286 | } 287 | 288 | .author-description { 289 | 290 | display: inline; 291 | color: $color__text-light; 292 | font-size: $font__size-md; 293 | line-height: $font__line-height-heading; 294 | 295 | .author-link { 296 | display: inline-block; 297 | 298 | &:hover { 299 | color: $color__link-hover; 300 | text-decoration: none; 301 | } 302 | } 303 | } 304 | } 305 | -------------------------------------------------------------------------------- /sass/site/header/_site-featured-image.scss: -------------------------------------------------------------------------------- 1 | // Featured image styles 2 | 3 | .site-header.featured-image { 4 | 5 | /* Hide overflow for overflowing featured image */ 6 | overflow: hidden; 7 | 8 | /* Need relative positioning to properly align layers. */ 9 | position: relative; 10 | 11 | /* Add text shadow to text, to increase readability. */ 12 | text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); 13 | 14 | /* Set white text color when featured image is set. */ 15 | .site-branding .site-title, 16 | .site-branding .site-description, 17 | .main-navigation a:after, 18 | .main-navigation .main-menu > li.menu-item-has-children:after, 19 | .main-navigation li, 20 | .social-navigation li, 21 | .entry-meta, 22 | .entry-title { 23 | color: $color__background-body; 24 | } 25 | 26 | .main-navigation a, 27 | .main-navigation a + svg, 28 | .social-navigation a, 29 | .site-title a, 30 | .site-featured-image a { 31 | color: $color__background-body; 32 | transition: opacity $link_transition ease-in-out; 33 | 34 | &:hover, 35 | &:active, 36 | &:hover + svg, 37 | &:active + svg { 38 | color: $color__background-body; 39 | opacity: 0.6; 40 | } 41 | 42 | &:focus, 43 | &:focus + svg { 44 | color: $color__background-body; 45 | } 46 | } 47 | 48 | .main-navigation .sub-menu a { 49 | opacity: inherit; 50 | } 51 | 52 | /* add focus state to social media icons */ 53 | .social-navigation a { 54 | &:focus { 55 | color: $color__background-body; 56 | opacity: 1; 57 | border-bottom: 1px solid $color__background-body; 58 | } 59 | } 60 | 61 | .social-navigation svg, 62 | .site-featured-image svg { 63 | /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */ 64 | -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); 65 | filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) ); 66 | } 67 | 68 | /* Entry header */ 69 | .site-featured-image { 70 | 71 | /* First layer: grayscale. */ 72 | .post-thumbnail img { 73 | height: auto; 74 | left: 50%; 75 | max-width: 1000%; 76 | min-height: 100%; 77 | min-width: 100vw; 78 | position: absolute; 79 | top: 50%; 80 | transform: translateX(-50%) translateY(-50%); 81 | width: auto; 82 | z-index: 1; 83 | 84 | @supports ( object-fit: cover ) { 85 | height: 100%; 86 | left: 0; 87 | object-fit: cover; 88 | top: 0; 89 | transform: none; 90 | width: 100%; 91 | } 92 | 93 | /* When image filters are active, make it grayscale to colorize it blue. */ 94 | .image-filters-enabled & { 95 | filter: grayscale(100%); 96 | } 97 | } 98 | 99 | .entry-header { 100 | 101 | margin-top: calc( 4 * #{$size__spacing-unit}); 102 | margin-bottom: 0; 103 | margin-left: 0; 104 | margin-right: 0; 105 | 106 | @include media (tablet) { 107 | 108 | margin-left: $size__site-margins; 109 | margin-right: $size__site-margins; 110 | } 111 | 112 | .entry-title { 113 | 114 | &:before { 115 | background: $color__background-body; 116 | } 117 | } 118 | 119 | /* Entry meta */ 120 | 121 | .entry-meta { 122 | 123 | font-weight: 500; 124 | 125 | > span { 126 | 127 | margin-right: $size__spacing-unit; 128 | display: inline-block; 129 | 130 | &:last-child { 131 | margin-right: 0; 132 | } 133 | } 134 | 135 | a { 136 | 137 | @include link-transition; 138 | color: currentColor; 139 | 140 | &:hover { 141 | text-decoration: none; 142 | } 143 | } 144 | 145 | .svg-icon { 146 | position: relative; 147 | display: inline-block; 148 | vertical-align: middle; 149 | margin-right: 0.5em; 150 | } 151 | 152 | .discussion-avatar-list { 153 | display: none; 154 | } 155 | } 156 | 157 | &.has-discussion { 158 | 159 | @include media (tablet) { 160 | 161 | .entry-meta { 162 | display: flex; 163 | position: relative; 164 | } 165 | 166 | .entry-title { 167 | padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit}); 168 | } 169 | 170 | .entry-meta .comment-count { 171 | position: absolute; 172 | right: 0; 173 | } 174 | 175 | .entry-meta .discussion-avatar-list { 176 | display: block; 177 | position: absolute; 178 | bottom: 100%; 179 | } 180 | } 181 | } 182 | } 183 | } 184 | 185 | /* Custom Logo Link */ 186 | 187 | .custom-logo-link { 188 | 189 | background: $color__background-body; 190 | box-shadow: 0 0 0 0 rgba($color__background-body, 0); 191 | 192 | &:hover, 193 | &:active, 194 | &:focus { 195 | box-shadow: 0 0 0 2px rgba($color__background-body, 1); 196 | } 197 | } 198 | 199 | /* Make sure important elements are above pseudo elements used for effects. */ 200 | .site-branding { 201 | position: relative; 202 | z-index: 10; 203 | } 204 | 205 | .site-featured-image .entry-header { 206 | position: relative; 207 | z-index: 9; 208 | } 209 | 210 | /* Set up image filter layer positioning */ 211 | .site-branding-container:after, 212 | .site-featured-image:before, 213 | .site-featured-image:after, 214 | &:after { 215 | display: block; 216 | position: absolute; 217 | top: 0; left: 0; 218 | content: "\020"; 219 | width: 100%; 220 | height: 100%; 221 | } 222 | 223 | /* Background & Effects */ 224 | /* Shared background settings between pseudo elements. */ 225 | background-position: center; 226 | background-repeat: no-repeat; 227 | background-size: cover; 228 | 229 | /* The intensity of each blend mode is controlled via layer opacity. */ 230 | 231 | /* Second layer: screen. */ 232 | .image-filters-enabled & .site-featured-image:before { 233 | background: $color__link; 234 | mix-blend-mode: screen; 235 | opacity: 0.1; 236 | } 237 | 238 | /* Third layer: multiply. */ 239 | /* When image filters are inactive, a black overlay is added. */ 240 | .site-featured-image:after { 241 | background: #000; 242 | mix-blend-mode: multiply; 243 | opacity: .7; 244 | 245 | /* When image filters are active, a blue overlay is added. */ 246 | .image-filters-enabled & { 247 | background: $color__link; 248 | opacity: .8; 249 | z-index: 3; 250 | 251 | /* Browsers supporting mix-blend-mode don't need opacity < 1 */ 252 | @supports (mix-blend-mode: multiply) { 253 | opacity: 1; 254 | } 255 | } 256 | } 257 | 258 | /* Fourth layer: overlay. */ 259 | .image-filters-enabled & .site-branding-container:after { 260 | background: rgba(0, 0, 0, 0.35); 261 | mix-blend-mode: overlay; 262 | opacity: 0.5; 263 | z-index: 4; 264 | 265 | /* Browsers supporting mix-blend-mode can have a light overlay */ 266 | @supports (mix-blend-mode: overlay) { 267 | background: rgba($color__background-body, 0.35); 268 | } 269 | } 270 | 271 | /* Fifth layer: readability overlay */ 272 | &:after { 273 | background: #000; 274 | /** 275 | * Add a transition to the readability overlay, to add a subtle 276 | * but smooth effect when resizing the screen. 277 | */ 278 | transition: opacity 1200ms ease-in-out; 279 | opacity: 0.7; 280 | z-index: 5; 281 | 282 | /* When image filters are active, a blue overlay is added. */ 283 | .image-filters-enabled & { 284 | background: mix($color__link, black, 12%); 285 | opacity: 0.38; 286 | 287 | @include media(tablet) { 288 | opacity: 0.18; 289 | } 290 | } 291 | } 292 | 293 | 294 | ::-moz-selection { 295 | background: rgba($color__background-body, 0.17); 296 | } 297 | 298 | ::selection { 299 | background: rgba($color__background-body, 0.17); 300 | } 301 | } 302 | -------------------------------------------------------------------------------- /sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Correct the font size and margin on `h1` elements within `section` and 29 | * `article` contexts in Chrome, Firefox, and Safari. 30 | */ 31 | 32 | h1 { 33 | font-size: 2em; 34 | margin: 0.67em 0; 35 | } 36 | 37 | /* Grouping content 38 | ========================================================================== */ 39 | 40 | /** 41 | * 1. Add the correct box sizing in Firefox. 42 | * 2. Show the overflow in Edge and IE. 43 | */ 44 | 45 | hr { 46 | box-sizing: content-box; /* 1 */ 47 | height: 0; /* 1 */ 48 | overflow: visible; /* 2 */ 49 | } 50 | 51 | /** 52 | * 1. Correct the inheritance and scaling of font size in all browsers. 53 | * 2. Correct the odd `em` font sizing in all browsers. 54 | */ 55 | 56 | pre { 57 | font-family: monospace, monospace; /* 1 */ 58 | font-size: 1em; /* 2 */ 59 | } 60 | 61 | /* Text-level semantics 62 | ========================================================================== */ 63 | 64 | /** 65 | * Remove the gray background on active links in IE 10. 66 | */ 67 | 68 | a { 69 | background-color: transparent; 70 | } 71 | 72 | /** 73 | * 1. Remove the bottom border in Chrome 57- 74 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 75 | */ 76 | 77 | abbr[title] { 78 | border-bottom: none; /* 1 */ 79 | text-decoration: underline; /* 2 */ 80 | text-decoration: underline dotted; /* 2 */ 81 | } 82 | 83 | /** 84 | * Add the correct font weight in Chrome, Edge, and Safari. 85 | */ 86 | 87 | b, 88 | strong { 89 | font-weight: bolder; 90 | } 91 | 92 | /** 93 | * 1. Correct the inheritance and scaling of font size in all browsers. 94 | * 2. Correct the odd `em` font sizing in all browsers. 95 | */ 96 | 97 | code, 98 | kbd, 99 | samp { 100 | font-family: monospace, monospace; /* 1 */ 101 | font-size: 1em; /* 2 */ 102 | } 103 | 104 | /** 105 | * Add the correct font size in all browsers. 106 | */ 107 | 108 | small { 109 | font-size: 80%; 110 | } 111 | 112 | /** 113 | * Prevent `sub` and `sup` elements from affecting the line height in 114 | * all browsers. 115 | */ 116 | 117 | sub, 118 | sup { 119 | font-size: 75%; 120 | line-height: 0; 121 | position: relative; 122 | vertical-align: baseline; 123 | } 124 | 125 | sub { 126 | bottom: -0.25em; 127 | } 128 | 129 | sup { 130 | top: -0.5em; 131 | } 132 | 133 | /* Embedded content 134 | ========================================================================== */ 135 | 136 | /** 137 | * Remove the border on images inside links in IE 10. 138 | */ 139 | 140 | img { 141 | border-style: none; 142 | } 143 | 144 | /* Forms 145 | ========================================================================== */ 146 | 147 | /** 148 | * 1. Change the font styles in all browsers. 149 | * 2. Remove the margin in Firefox and Safari. 150 | */ 151 | 152 | button, 153 | input, 154 | optgroup, 155 | select, 156 | textarea { 157 | font-family: inherit; /* 1 */ 158 | font-size: 100%; /* 1 */ 159 | line-height: 1.15; /* 1 */ 160 | margin: 0; /* 2 */ 161 | } 162 | 163 | /** 164 | * Show the overflow in IE. 165 | * 1. Show the overflow in Edge. 166 | */ 167 | 168 | button, 169 | input { /* 1 */ 170 | overflow: visible; 171 | } 172 | 173 | /** 174 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 175 | * 1. Remove the inheritance of text transform in Firefox. 176 | */ 177 | 178 | button, 179 | select { /* 1 */ 180 | text-transform: none; 181 | } 182 | 183 | /** 184 | * Correct the inability to style clickable types in iOS and Safari. 185 | */ 186 | 187 | button, 188 | [type="button"], 189 | [type="reset"], 190 | [type="submit"] { 191 | -webkit-appearance: button; 192 | } 193 | 194 | /** 195 | * Remove the inner border and padding in Firefox. 196 | */ 197 | 198 | button::-moz-focus-inner, 199 | [type="button"]::-moz-focus-inner, 200 | [type="reset"]::-moz-focus-inner, 201 | [type="submit"]::-moz-focus-inner { 202 | border-style: none; 203 | padding: 0; 204 | } 205 | 206 | /** 207 | * Restore the focus styles unset by the previous rule. 208 | */ 209 | 210 | button:-moz-focusring, 211 | [type="button"]:-moz-focusring, 212 | [type="reset"]:-moz-focusring, 213 | [type="submit"]:-moz-focusring { 214 | outline: 1px dotted ButtonText; 215 | } 216 | 217 | /** 218 | * Correct the padding in Firefox. 219 | */ 220 | 221 | fieldset { 222 | padding: 0.35em 0.75em 0.625em; 223 | } 224 | 225 | /** 226 | * 1. Correct the text wrapping in Edge and IE. 227 | * 2. Correct the color inheritance from `fieldset` elements in IE. 228 | * 3. Remove the padding so developers are not caught out when they zero out 229 | * `fieldset` elements in all browsers. 230 | */ 231 | 232 | legend { 233 | box-sizing: border-box; /* 1 */ 234 | color: inherit; /* 2 */ 235 | display: table; /* 1 */ 236 | max-width: 100%; /* 1 */ 237 | padding: 0; /* 3 */ 238 | white-space: normal; /* 1 */ 239 | } 240 | 241 | /** 242 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 243 | */ 244 | 245 | progress { 246 | vertical-align: baseline; 247 | } 248 | 249 | /** 250 | * Remove the default vertical scrollbar in IE 10+. 251 | */ 252 | 253 | textarea { 254 | overflow: auto; 255 | } 256 | 257 | /** 258 | * 1. Add the correct box sizing in IE 10. 259 | * 2. Remove the padding in IE 10. 260 | */ 261 | 262 | [type="checkbox"], 263 | [type="radio"] { 264 | box-sizing: border-box; /* 1 */ 265 | padding: 0; /* 2 */ 266 | } 267 | 268 | /** 269 | * Correct the cursor style of increment and decrement buttons in Chrome. 270 | */ 271 | 272 | [type="number"]::-webkit-inner-spin-button, 273 | [type="number"]::-webkit-outer-spin-button { 274 | height: auto; 275 | } 276 | 277 | /** 278 | * 1. Correct the odd appearance in Chrome and Safari. 279 | * 2. Correct the outline style in Safari. 280 | */ 281 | 282 | [type="search"] { 283 | -webkit-appearance: textfield; /* 1 */ 284 | outline-offset: -2px; /* 2 */ 285 | } 286 | 287 | /** 288 | * Remove the inner padding in Chrome and Safari on macOS. 289 | */ 290 | 291 | [type="search"]::-webkit-search-decoration { 292 | -webkit-appearance: none; 293 | } 294 | 295 | /** 296 | * 1. Correct the inability to style clickable types in iOS and Safari. 297 | * 2. Change font properties to `inherit` in Safari. 298 | */ 299 | 300 | ::-webkit-file-upload-button { 301 | -webkit-appearance: button; /* 1 */ 302 | font: inherit; /* 2 */ 303 | } 304 | 305 | /* Interactive 306 | ========================================================================== */ 307 | 308 | /* 309 | * Add the correct display in Edge, IE 10+, and Firefox. 310 | */ 311 | 312 | details { 313 | display: block; 314 | } 315 | 316 | /* 317 | * Add the correct display in all browsers. 318 | */ 319 | 320 | summary { 321 | display: list-item; 322 | } 323 | 324 | /* Misc 325 | ========================================================================== */ 326 | 327 | /** 328 | * Add the correct display in IE 10+. 329 | */ 330 | 331 | template { 332 | display: none; 333 | } 334 | 335 | /** 336 | * Add the correct display in IE 10. 337 | */ 338 | 339 | [hidden] { 340 | display: none; 341 | } 342 | -------------------------------------------------------------------------------- /inc/template-tags.php: -------------------------------------------------------------------------------- 1 | %2$s'; 16 | if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) { 17 | $time_string = ''; 18 | } 19 | 20 | $time_string = sprintf( 21 | $time_string, 22 | esc_attr( get_the_date( DATE_W3C ) ), 23 | esc_html( get_the_date() ), 24 | esc_attr( get_the_modified_date( DATE_W3C ) ), 25 | esc_html( get_the_modified_date() ) 26 | ); 27 | 28 | printf( 29 | '%1$s%3$s', 30 | twentynineteen_get_icon_svg( 'watch', 16 ), 31 | esc_url( get_permalink() ), 32 | $time_string 33 | ); 34 | } 35 | endif; 36 | 37 | if ( ! function_exists( 'twentynineteen_posted_by' ) ) : 38 | /** 39 | * Prints HTML with meta information about theme author. 40 | */ 41 | function twentynineteen_posted_by() { 42 | printf( 43 | /* translators: 1: SVG icon. 2: post author, only visible to screen readers. 3: author link. */ 44 | '%1$s%2$s%4$s', 45 | twentynineteen_get_icon_svg( 'person', 16 ), 46 | __( 'Posted by', 'twentynineteen' ), 47 | esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), 48 | esc_html( get_the_author() ) 49 | ); 50 | } 51 | endif; 52 | 53 | if ( ! function_exists( 'twentynineteen_comment_count' ) ) : 54 | /** 55 | * Prints HTML with the comment count for the current post. 56 | */ 57 | function twentynineteen_comment_count() { 58 | if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) { 59 | echo ''; 60 | echo twentynineteen_get_icon_svg( 'comment', 16 ); 61 | 62 | /* translators: %s: Name of current post. Only visible to screen readers. */ 63 | comments_popup_link( sprintf( __( 'Leave a comment on %s', 'twentynineteen' ), get_the_title() ) ); 64 | 65 | echo ''; 66 | } 67 | } 68 | endif; 69 | 70 | if ( ! function_exists( 'twentynineteen_entry_footer' ) ) : 71 | /** 72 | * Prints HTML with meta information for the categories, tags and comments. 73 | */ 74 | function twentynineteen_entry_footer() { 75 | 76 | // Hide author, post date, category and tag text for pages. 77 | if ( 'post' === get_post_type() ) { 78 | 79 | // Posted by 80 | twentynineteen_posted_by(); 81 | 82 | // Posted on 83 | twentynineteen_posted_on(); 84 | 85 | /* translators: used between list items, there is a space after the comma. */ 86 | $categories_list = get_the_category_list( __( ', ', 'twentynineteen' ) ); 87 | if ( $categories_list ) { 88 | printf( 89 | /* translators: 1: SVG icon. 2: posted in label, only visible to screen readers. 3: list of categories. */ 90 | '%1$s%2$s%3$s', 91 | twentynineteen_get_icon_svg( 'archive', 16 ), 92 | __( 'Posted in', 'twentynineteen' ), 93 | $categories_list 94 | ); // WPCS: XSS OK. 95 | } 96 | 97 | /* translators: used between list items, there is a space after the comma. */ 98 | $tags_list = get_the_tag_list( '', __( ', ', 'twentynineteen' ) ); 99 | if ( $tags_list ) { 100 | printf( 101 | /* translators: 1: SVG icon. 2: posted in label, only visible to screen readers. 3: list of tags. */ 102 | '%1$s%2$s %3$s', 103 | twentynineteen_get_icon_svg( 'tag', 16 ), 104 | __( 'Tags:', 'twentynineteen' ), 105 | $tags_list 106 | ); // WPCS: XSS OK. 107 | } 108 | } 109 | 110 | // Comment count. 111 | if ( ! is_singular() ) { 112 | twentynineteen_comment_count(); 113 | } 114 | 115 | // Edit post link. 116 | edit_post_link( 117 | sprintf( 118 | wp_kses( 119 | /* translators: %s: Name of current post. Only visible to screen readers. */ 120 | __( 'Edit %s', 'twentynineteen' ), 121 | array( 122 | 'span' => array( 123 | 'class' => array(), 124 | ), 125 | ) 126 | ), 127 | get_the_title() 128 | ), 129 | '' . twentynineteen_get_icon_svg( 'edit', 16 ), 130 | '' 131 | ); 132 | } 133 | endif; 134 | 135 | if ( ! function_exists( 'twentynineteen_post_thumbnail' ) ) : 136 | /** 137 | * Displays an optional post thumbnail. 138 | * 139 | * Wraps the post thumbnail in an anchor element on index views, or a div 140 | * element when on single views. 141 | */ 142 | function twentynineteen_post_thumbnail() { 143 | if ( ! twentynineteen_can_show_post_thumbnail() ) { 144 | return; 145 | } 146 | 147 | if ( is_singular() ) : 148 | ?> 149 | 150 |
151 | 152 |
153 | 154 | 157 | 158 |
159 | 162 |
163 | 164 | %s
', get_avatar( $id_or_email, twentynineteen_get_avatar_size() ) ); 180 | } 181 | endif; 182 | 183 | if ( ! function_exists( 'twentynineteen_discussion_avatars_list' ) ) : 184 | /** 185 | * Displays a list of avatars involved in a discussion for a given post. 186 | */ 187 | function twentynineteen_discussion_avatars_list( $comment_authors ) { 188 | if ( empty( $comment_authors ) ) { 189 | return; 190 | } 191 | echo '
    ', "\n"; 192 | foreach ( $comment_authors as $id_or_email ) { 193 | printf( 194 | "
  1. %s
    2. \n", 195 | twentynineteen_get_user_avatar_markup( $id_or_email ) 196 | ); 197 | } 198 | echo '
', "\n"; 199 | } 200 | endif; 201 | 202 | if ( ! function_exists( 'twentynineteen_comment_form' ) ) : 203 | /** 204 | * Documentation for function. 205 | */ 206 | function twentynineteen_comment_form( $order ) { 207 | if ( true === $order || strtolower( $order ) === strtolower( get_option( 'comment_order', 'asc' ) ) ) { 208 | 209 | comment_form( 210 | array( 211 | 'logged_in_as' => null, 212 | 'title_reply' => null, 213 | ) 214 | ); 215 | } 216 | } 217 | endif; 218 | 219 | if ( ! function_exists( 'twentynineteen_the_posts_navigation' ) ) : 220 | /** 221 | * Documentation for function. 222 | */ 223 | function twentynineteen_the_posts_navigation() { 224 | the_posts_pagination( 225 | array( 226 | 'mid_size' => 2, 227 | 'prev_text' => sprintf( 228 | '%s %s', 229 | twentynineteen_get_icon_svg( 'chevron_left', 22 ), 230 | __( 'Newer posts', 'twentynineteen' ) 231 | ), 232 | 'next_text' => sprintf( 233 | '%s %s', 234 | __( 'Older posts', 'twentynineteen' ), 235 | twentynineteen_get_icon_svg( 'chevron_right', 22 ) 236 | ), 237 | ) 238 | ); 239 | } 240 | endif; 241 | -------------------------------------------------------------------------------- /sass/site/primary/_comments.scss: -------------------------------------------------------------------------------- 1 | .comment-content a { 2 | word-wrap: break-word; 3 | } 4 | 5 | .bypostauthor { 6 | display: block; 7 | } 8 | 9 | .comments-area { 10 | margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; 11 | @include postContentMaxWidth(); 12 | 13 | @include media(tablet) { 14 | margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; 15 | } 16 | 17 | & > * { 18 | margin-top: calc(2 * #{$size__spacing-unit}); 19 | margin-bottom: calc(2 * #{$size__spacing-unit}); 20 | 21 | @include media(tablet) { 22 | margin-top: calc(3 * #{$size__spacing-unit}); 23 | margin-bottom: calc(3 * #{$size__spacing-unit}); 24 | } 25 | } 26 | 27 | /* Add extra margin when the comments section is located immediately after the 28 | * post itself (this happens on pages). 29 | */ 30 | .entry + & { 31 | margin-top: calc(3 * #{$size__spacing-unit}); 32 | } 33 | 34 | .comments-title-wrap { 35 | 36 | @include media(tablet) { 37 | align-items: baseline; 38 | display: flex; 39 | justify-content: space-between; 40 | } 41 | 42 | .comments-title { 43 | @include post-section-dash; 44 | margin: 0; 45 | 46 | @include media(tablet) { 47 | flex: 1 0 calc(3 * (100vw / 12)); 48 | } 49 | } 50 | 51 | .discussion-meta { 52 | @include media(tablet) { 53 | flex: 0 0 calc(2 * (100vw / 12)); 54 | margin-left: #{$size__spacing-unit}; 55 | } 56 | } 57 | } 58 | } 59 | 60 | #comment { 61 | max-width: 100%; 62 | box-sizing: border-box; 63 | } 64 | 65 | #respond { 66 | position: relative; 67 | 68 | .comment-user-avatar { 69 | margin: $size__spacing-unit 0 -#{$size__spacing-unit}; 70 | } 71 | 72 | .comment .comment-form { 73 | padding-left: 0; 74 | } 75 | 76 | > small { 77 | display: block; 78 | font-size: $font__size_base; 79 | position: absolute; 80 | left: calc(#{$size__spacing-unit} + 100%); 81 | top: calc(-3.5 * #{$size__spacing-unit}); 82 | width: calc(100vw / 12 ); 83 | } 84 | } 85 | 86 | #comments { 87 | 88 | > .comments-title:last-child { 89 | display: none; 90 | } 91 | } 92 | 93 | .comment-form-flex { 94 | display: flex; 95 | flex-direction: column; 96 | 97 | .comments-title { 98 | display: none; 99 | margin: 0; 100 | order: 1; 101 | } 102 | 103 | #respond { 104 | order: 2; 105 | 106 | + .comments-title { 107 | display: block; 108 | } 109 | } 110 | } 111 | 112 | .comment-list { 113 | list-style: none; 114 | padding: 0; 115 | 116 | .children { 117 | margin: 0; 118 | padding: 0 0 0 $size__spacing-unit; 119 | } 120 | 121 | > .comment:first-child { 122 | margin-top: 0; 123 | } 124 | 125 | .pingback, 126 | .trackback { 127 | 128 | .comment-body { 129 | color: $color__text-light; 130 | font-family: $font__heading; 131 | font-size: $font__size-xs; 132 | font-weight: 500; 133 | margin-top: $size__spacing-unit; 134 | margin-bottom: $size__spacing-unit; 135 | 136 | a:not(.comment-edit-link) { 137 | font-weight: bold; 138 | font-size: $font__size-base / (1 * $font__size-ratio); 139 | line-height: 1.5; 140 | padding-right: #{0.5 * $size__spacing-unit}; 141 | display: block; 142 | } 143 | 144 | .comment-edit-link { 145 | color: $color__text-light; 146 | font-family: $font__heading; 147 | font-weight: 500; 148 | } 149 | } 150 | } 151 | } 152 | 153 | .comment-reply { 154 | 155 | #respond + & { 156 | display: none; 157 | } 158 | 159 | .comment-reply-link { 160 | display: inline-block; 161 | } 162 | } 163 | 164 | .comment { 165 | list-style: none; 166 | position: relative; 167 | 168 | @include media(tablet) { 169 | padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 ))); 170 | 171 | &.depth-1, 172 | .children { 173 | padding-left: 0; 174 | } 175 | 176 | &.depth-1 { 177 | margin-left: calc(3.25 * #{$size__spacing-unit}); 178 | } 179 | } 180 | 181 | .comment-body { 182 | margin: calc(2 * #{$size__spacing-unit}) 0 0; 183 | } 184 | 185 | 186 | .comment-meta { 187 | position: relative; 188 | } 189 | 190 | .comment-author { 191 | 192 | .avatar { 193 | float: left; 194 | margin-right: $size__spacing-unit; 195 | position: relative; 196 | 197 | @include media(tablet) { 198 | float: inherit; 199 | margin-right: inherit; 200 | position: absolute; 201 | top: 0; 202 | right: calc(100% + #{$size__spacing-unit}); 203 | } 204 | } 205 | 206 | .fn { 207 | position: relative; 208 | display: block; 209 | 210 | a { 211 | color: inherit; 212 | 213 | &:hover { 214 | color: $color__link-hover; 215 | } 216 | } 217 | } 218 | 219 | .post-author-badge { 220 | border-radius: 100%; 221 | display: block; 222 | height: 18px; 223 | position: absolute; 224 | background: lighten( $color__link, 8% ); 225 | right: calc(100% - #{$size__spacing-unit * 2.5}); 226 | top: -3px; 227 | width: 18px; 228 | 229 | @include media(tablet) { 230 | right: calc(100% + #{$size__spacing-unit * .75}); 231 | } 232 | 233 | svg { 234 | width: inherit; 235 | height: inherit; 236 | display: block; 237 | fill: white; 238 | transform: scale(0.875); 239 | } 240 | } 241 | } 242 | 243 | .comment-metadata { 244 | 245 | > a, 246 | .comment-edit-link { 247 | display: inline; 248 | font-weight: 500; 249 | color: $color__text-light; 250 | vertical-align: baseline; 251 | 252 | time { 253 | vertical-align: baseline; 254 | } 255 | 256 | &:hover { 257 | color: $color__link-hover; 258 | text-decoration: none; 259 | } 260 | } 261 | 262 | > * { 263 | display: inline-block; 264 | } 265 | 266 | .edit-link-sep { 267 | color: $color__text-light; 268 | margin: 0 0.2em; 269 | vertical-align: baseline; 270 | } 271 | 272 | .edit-link { 273 | color: $color__text-light; 274 | 275 | svg { 276 | transform: scale(0.8); 277 | vertical-align: baseline; 278 | margin-right: 0.1em; 279 | } 280 | } 281 | 282 | .comment-edit-link { 283 | position: relative; 284 | padding-left: $size__spacing-unit; 285 | margin-left: -#{$size__spacing-unit}; 286 | z-index: 1; 287 | 288 | &:hover { 289 | color: $color__link; 290 | } 291 | } 292 | } 293 | 294 | .comment-content { 295 | 296 | margin: $size__spacing-unit 0; 297 | 298 | @include media(desktop) { 299 | padding-right: $size__spacing-unit; 300 | } 301 | 302 | > *:first-child { 303 | margin-top: 0; 304 | } 305 | 306 | > *:last-child { 307 | margin-bottom: 0; 308 | } 309 | 310 | blockquote { 311 | margin-left: 0; 312 | } 313 | 314 | a { 315 | text-decoration: underline; 316 | 317 | &:hover { 318 | text-decoration: none; 319 | } 320 | } 321 | } 322 | } 323 | 324 | .comment-reply-link, 325 | #cancel-comment-reply-link { 326 | font-weight: 500; 327 | 328 | &:hover { 329 | color: $color__link-hover; 330 | } 331 | } 332 | 333 | .discussion-avatar-list { 334 | @include clearfix; 335 | 336 | margin: 0; 337 | padding: 0; 338 | 339 | li { 340 | position: relative; 341 | list-style: none; 342 | margin: 0 -8px 0 0; 343 | padding: 0; 344 | float: left; 345 | } 346 | 347 | .comment-user-avatar { 348 | 349 | img { 350 | height: calc(1.5 * #{$size__spacing-unit}); 351 | width: calc(1.5 * #{$size__spacing-unit}); 352 | } 353 | } 354 | } 355 | 356 | .discussion-meta { 357 | 358 | .discussion-meta-info { 359 | margin: 0; 360 | 361 | .svg-icon { 362 | vertical-align: middle; 363 | fill: currentColor; 364 | transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em); 365 | margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above. 366 | } 367 | } 368 | 369 | } 370 | 371 | .comment-form { 372 | 373 | .comment-notes, 374 | label { 375 | font-family: $font__heading; 376 | font-size: $font__size-xs; 377 | color: $color__text-light; 378 | } 379 | 380 | .comment-form-author, 381 | .comment-form-email { 382 | @include media(tablet) { 383 | width: calc(50% - #{$size__spacing-unit / 2}); 384 | float: left; 385 | } 386 | } 387 | 388 | .comment-form-email { 389 | @include media(tablet) { 390 | margin-left: $size__spacing-unit; 391 | } 392 | } 393 | 394 | input[name="author"], 395 | input[name="email"], 396 | input[name="url"] { 397 | display: block; 398 | width: 100%; 399 | } 400 | } 401 | -------------------------------------------------------------------------------- /js/touch-keyboard-navigation.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Touch & Keyboard navigation. 3 | * 4 | * Contains handlers for touch devices and keyboard navigation. 5 | */ 6 | 7 | (function() { 8 | 9 | /** 10 | * Debounce 11 | * 12 | * @param {Function} func 13 | * @param {number} wait 14 | * @param {boolean} immediate 15 | */ 16 | function debounce(func, wait, immediate) { 17 | 'use strict'; 18 | 19 | var timeout; 20 | wait = (typeof wait !== 'undefined') ? wait : 20; 21 | immediate = (typeof immediate !== 'undefined') ? immediate : true; 22 | 23 | return function() { 24 | 25 | var context = this, args = arguments; 26 | var later = function() { 27 | timeout = null; 28 | 29 | if (!immediate) { 30 | func.apply(context, args); 31 | } 32 | }; 33 | 34 | var callNow = immediate && !timeout; 35 | 36 | clearTimeout(timeout); 37 | timeout = setTimeout(later, wait); 38 | 39 | if (callNow) { 40 | func.apply(context, args); 41 | } 42 | }; 43 | } 44 | 45 | /** 46 | * Add class 47 | * 48 | * @param {Object} el 49 | * @param {string} cls 50 | */ 51 | function addClass(el, cls) { 52 | if ( ! el.className.match( '(?:^|\\s)' + cls + '(?!\\S)') ) { 53 | el.className += ' ' + cls; 54 | } 55 | } 56 | 57 | /** 58 | * Delete class 59 | * 60 | * @param {Object} el 61 | * @param {string} cls 62 | */ 63 | function deleteClass(el, cls) { 64 | el.className = el.className.replace( new RegExp( '(?:^|\\s)' + cls + '(?!\\S)' ),'' ); 65 | } 66 | 67 | /** 68 | * Has class? 69 | * 70 | * @param {Object} el 71 | * @param {string} cls 72 | * 73 | * @returns {boolean} Has class 74 | */ 75 | function hasClass(el, cls) { 76 | 77 | if ( el.className.match( '(?:^|\\s)' + cls + '(?!\\S)' ) ) { 78 | return true; 79 | } 80 | } 81 | 82 | /** 83 | * Toggle Aria Expanded state for screenreaders 84 | * 85 | * @param {Object} ariaItem 86 | */ 87 | function toggleAriaExpandedState( ariaItem ) { 88 | 'use strict'; 89 | 90 | var ariaState = ariaItem.getAttribute('aria-expanded'); 91 | 92 | if ( ariaState === 'true' ) { 93 | ariaState = 'false'; 94 | } else { 95 | ariaState = 'true'; 96 | } 97 | 98 | ariaItem.setAttribute('aria-expanded', ariaState); 99 | } 100 | 101 | /** 102 | * Open sub-menu 103 | * 104 | * @param {Object} currentSubMenu 105 | */ 106 | function openSubMenu( currentSubMenu ) { 107 | 'use strict'; 108 | 109 | // Update classes 110 | // classList.add is not supported in IE11 111 | currentSubMenu.parentElement.className += ' off-canvas'; 112 | currentSubMenu.parentElement.lastElementChild.className += ' expanded-true'; 113 | 114 | // Update aria-expanded state 115 | toggleAriaExpandedState( currentSubMenu ); 116 | } 117 | 118 | /** 119 | * Close sub-menu 120 | * 121 | * @param {Object} currentSubMenu 122 | */ 123 | function closeSubMenu( currentSubMenu ) { 124 | 'use strict'; 125 | 126 | var menuItem = getCurrentParent( currentSubMenu, '.menu-item' ); // this.parentNode 127 | var menuItemAria = menuItem.querySelector('a[aria-expanded]'); 128 | var subMenu = currentSubMenu.closest('.sub-menu'); 129 | 130 | // If this is in a sub-sub-menu, go back to parent sub-menu 131 | if ( getCurrentParent( currentSubMenu, 'ul' ).classList.contains( 'sub-menu' ) ) { 132 | 133 | // Update classes 134 | // classList.remove is not supported in IE11 135 | menuItem.className = menuItem.className.replace( 'off-canvas', '' ); 136 | subMenu.className = subMenu.className.replace( 'expanded-true', '' ); 137 | 138 | // Update aria-expanded and :focus states 139 | toggleAriaExpandedState( menuItemAria ); 140 | 141 | // Or else close all sub-menus 142 | } else { 143 | 144 | // Update classes 145 | // classList.remove is not supported in IE11 146 | menuItem.className = menuItem.className.replace( 'off-canvas', '' ); 147 | menuItem.lastElementChild.className = menuItem.lastElementChild.className.replace( 'expanded-true', '' ); 148 | 149 | // Update aria-expanded and :focus states 150 | toggleAriaExpandedState( menuItemAria ); 151 | } 152 | } 153 | 154 | /** 155 | * Find first ancestor of an element by selector 156 | * 157 | * @param {Object} child 158 | * @param {String} selector 159 | * @param {String} stopSelector 160 | */ 161 | function getCurrentParent( child, selector, stopSelector ) { 162 | 163 | var currentParent = null; 164 | 165 | while ( child ) { 166 | 167 | if ( child.matches(selector) ) { 168 | 169 | currentParent = child; 170 | break; 171 | 172 | } else if ( stopSelector && child.matches(stopSelector) ) { 173 | 174 | break; 175 | } 176 | 177 | child = child.parentElement; 178 | } 179 | 180 | return currentParent; 181 | } 182 | 183 | /** 184 | * Remove all off-canvas states 185 | */ 186 | function removeAllFocusStates() { 187 | 'use strict'; 188 | 189 | var siteBranding = document.getElementsByClassName( 'site-branding' )[0]; 190 | var getFocusedElements = siteBranding.querySelectorAll(':hover, :focus, :focus-within'); 191 | var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused'); 192 | var i; 193 | var o; 194 | 195 | for ( i = 0; i < getFocusedElements.length; i++) { 196 | getFocusedElements[i].blur(); 197 | } 198 | 199 | for ( o = 0; o < getFocusedClassElements.length; o++) { 200 | deleteClass( getFocusedClassElements[o], 'is-focused' ); 201 | } 202 | } 203 | 204 | /** 205 | * Matches polyfill for IE11 206 | */ 207 | if (!Element.prototype.matches) { 208 | Element.prototype.matches = Element.prototype.msMatchesSelector; 209 | } 210 | 211 | /** 212 | * Toggle `focus` class to allow sub-menu access on touch screens. 213 | */ 214 | function toggleSubmenuDisplay() { 215 | 216 | document.addEventListener('touchstart', function(event) { 217 | 218 | if ( event.target.matches('a') ) { 219 | 220 | var url = event.target.getAttribute( 'href' ) ? event.target.getAttribute( 'href' ) : ''; 221 | 222 | // Open submenu if url is # 223 | if ( '#' === url && event.target.nextSibling.matches('.submenu-expand') ) { 224 | openSubMenu( event.target ); 225 | } 226 | } 227 | 228 | // Check if .submenu-expand is touched 229 | if ( event.target.matches('.submenu-expand') ) { 230 | openSubMenu(event.target); 231 | 232 | // Check if child of .submenu-expand is touched 233 | } else if ( null != getCurrentParent( event.target, '.submenu-expand' ) && 234 | getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) { 235 | openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) ); 236 | 237 | // Check if .menu-item-link-return is touched 238 | } else if ( event.target.matches('.menu-item-link-return') ) { 239 | closeSubMenu( event.target ); 240 | 241 | // Check if child of .menu-item-link-return is touched 242 | } else if ( null != getCurrentParent( event.target, '.menu-item-link-return' ) && getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) { 243 | closeSubMenu( event.target ); 244 | } 245 | 246 | // Prevent default mouse/focus events 247 | removeAllFocusStates(); 248 | 249 | }, false); 250 | 251 | document.addEventListener('touchend', function(event) { 252 | 253 | var mainNav = getCurrentParent( event.target, '.main-navigation' ); 254 | 255 | if ( null != mainNav && hasClass( mainNav, '.main-navigation' ) ) { 256 | // Prevent default mouse events 257 | event.preventDefault(); 258 | 259 | } else if ( 260 | event.target.matches('.submenu-expand') || 261 | null != getCurrentParent( event.target, '.submenu-expand' ) && 262 | getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) || 263 | event.target.matches('.menu-item-link-return') || 264 | null != getCurrentParent( event.target, '.menu-item-link-return' ) && 265 | getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) { 266 | // Prevent default mouse events 267 | event.preventDefault(); 268 | } 269 | 270 | // Prevent default mouse/focus events 271 | removeAllFocusStates(); 272 | 273 | }, false); 274 | 275 | document.addEventListener('focus', function(event) { 276 | 277 | if ( event.target.matches('.main-navigation > div > ul > li a') ) { 278 | 279 | // Remove Focused elements in sibling div 280 | var currentDiv = getCurrentParent( event.target, 'div', '.main-navigation' ); 281 | var currentDivSibling = currentDiv.previousElementSibling === null ? currentDiv.nextElementSibling : currentDiv.previousElementSibling; 282 | var focusedElement = currentDivSibling.querySelector( '.is-focused' ); 283 | var focusedClass = 'is-focused'; 284 | var prevLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).previousElementSibling; 285 | var nextLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).nextElementSibling; 286 | 287 | if ( null !== focusedElement && null !== hasClass( focusedElement, focusedClass ) ) { 288 | deleteClass( focusedElement, focusedClass ); 289 | } 290 | 291 | // Add .is-focused class to top-level li 292 | if ( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ) ) { 293 | addClass( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ), focusedClass ); 294 | } 295 | 296 | // Check for previous li 297 | if ( prevLi && hasClass( prevLi, focusedClass ) ) { 298 | deleteClass( prevLi, focusedClass ); 299 | } 300 | 301 | // Check for next li 302 | if ( nextLi && hasClass( nextLi, focusedClass ) ) { 303 | deleteClass( nextLi, focusedClass ); 304 | } 305 | } 306 | 307 | }, true); 308 | 309 | document.addEventListener('click', function(event) { 310 | 311 | // Remove all focused menu states when clicking outside site branding 312 | if ( event.target !== document.getElementsByClassName( 'site-branding' )[0] ) { 313 | removeAllFocusStates(); 314 | } else { 315 | // nothing 316 | } 317 | 318 | }, false); 319 | } 320 | 321 | /** 322 | * Run our sub-menu function as soon as the document is `ready` 323 | */ 324 | document.addEventListener( 'DOMContentLoaded', function() { 325 | toggleSubmenuDisplay(); 326 | }); 327 | 328 | /** 329 | * Run our sub-menu function on selective refresh in the customizer 330 | */ 331 | document.addEventListener( 'customize-preview-menu-refreshed', function( e, params ) { 332 | if ( 'menu-1' === params.wpNavMenuArgs.theme_location ) { 333 | toggleSubmenuDisplay(); 334 | } 335 | }); 336 | 337 | /** 338 | * Run our sub-menu function every time the window resizes 339 | */ 340 | var isResizing = false; 341 | window.addEventListener( 'resize', function() { 342 | isResizing = true; 343 | debounce( function() { 344 | if ( isResizing ) { 345 | return; 346 | } 347 | 348 | toggleSubmenuDisplay(); 349 | isResizing = false; 350 | 351 | }, 150 ); 352 | } ); 353 | 354 | })(); 355 | -------------------------------------------------------------------------------- /sass/navigation/_menu-main-navigation.scss: -------------------------------------------------------------------------------- 1 | /** === Main menu === */ 2 | 3 | .main-navigation { 4 | 5 | display: block; 6 | margin-top: #{0.25 * $size__spacing-unit}; 7 | 8 | body.page & { 9 | display: block; 10 | } 11 | 12 | > div { 13 | display: inline; 14 | } 15 | 16 | /* Un-style buttons */ 17 | button { 18 | display: inline-block; 19 | border: none; 20 | padding: 0; 21 | margin: 0; 22 | font-family: $font__heading; 23 | font-weight: 700; 24 | line-height: $font__line-height-heading; 25 | text-decoration: none; 26 | background: transparent; 27 | color: inherit; 28 | cursor: pointer; 29 | transition: background 250ms ease-in-out, 30 | transform 150ms ease; 31 | -webkit-appearance: none; 32 | -moz-appearance: none; 33 | 34 | &:hover, 35 | &:focus { 36 | background: transparent; 37 | } 38 | 39 | &:focus { 40 | outline: 1px solid transparent; 41 | outline-offset: -4px; 42 | } 43 | 44 | &:active { 45 | transform: scale(0.99); 46 | } 47 | } 48 | 49 | .main-menu { 50 | 51 | display: inline-block; 52 | margin: 0; 53 | padding: 0; 54 | 55 | > li { 56 | 57 | color: $color__link; 58 | display: inline; 59 | position: relative; 60 | 61 | > a { 62 | 63 | font-weight: 700; 64 | color: $color__link; 65 | margin-right: #{0.5 * $size__spacing-unit}; 66 | 67 | + svg { 68 | margin-right: #{0.5 * $size__spacing-unit}; 69 | } 70 | 71 | &:hover, 72 | &:hover + svg { 73 | color: $color__link-hover; 74 | } 75 | } 76 | 77 | &.menu-item-has-children { 78 | 79 | display: inline-block; 80 | position: inherit; 81 | 82 | @include media(tablet) { 83 | position: relative; 84 | } 85 | 86 | > a { 87 | margin-right: #{0.125 * $size__spacing-unit}; 88 | } 89 | 90 | & > a, 91 | .menu-item-has-children > a { 92 | 93 | &:after { 94 | content: ""; 95 | display: none; 96 | } 97 | } 98 | 99 | .submenu-expand { 100 | 101 | display: inline-block; 102 | margin-right: #{0.25 * $size__spacing-unit}; 103 | 104 | /* Priority+ Menu */ 105 | &.main-menu-more-toggle { 106 | 107 | position: relative; 108 | height: 24px; 109 | line-height: $font__line-height-heading; 110 | width: 24px; 111 | padding: 0; 112 | margin-left: #{0.5 * $size__spacing-unit}; 113 | 114 | svg { 115 | height: 24px; 116 | width: 24px; 117 | top: #{-0.125 * $size__spacing-unit}; 118 | vertical-align: text-bottom; 119 | } 120 | } 121 | 122 | .wp-customizer-unloading &, 123 | &.is-empty { 124 | display: none; 125 | } 126 | 127 | svg { 128 | position: relative; 129 | top: 0.2rem; 130 | } 131 | } 132 | } 133 | 134 | &:last-child > a, 135 | &:last-child.menu-item-has-children .submenu-expand { 136 | margin-right: 0; 137 | } 138 | } 139 | } 140 | 141 | .sub-menu { 142 | 143 | background-color: $color__link; 144 | color: $color__background-body; 145 | list-style: none; 146 | padding-left: 0; 147 | 148 | position: absolute; 149 | opacity: 0; 150 | left: -9999px; 151 | z-index: 99999; 152 | 153 | @include media(tablet) { 154 | width: auto; 155 | min-width: -moz-max-content; 156 | min-width: -webkit-max-content; 157 | min-width: max-content; 158 | } 159 | 160 | > li { 161 | 162 | display: block; 163 | float: none; 164 | position: relative; 165 | 166 | &.menu-item-has-children { 167 | 168 | .submenu-expand { 169 | display: inline-block; 170 | position: absolute; 171 | width: calc( 24px + #{$size__spacing-unit} ); 172 | right: 0; 173 | top: calc( .125 * #{$size__spacing-unit} ); 174 | bottom: 0; 175 | color: white; 176 | line-height: 1; 177 | padding: calc( .5 * #{$size__spacing-unit} ); 178 | 179 | svg { 180 | top: 0; 181 | } 182 | } 183 | 184 | .submenu-expand { 185 | margin-right: 0; 186 | } 187 | 188 | @include media(tablet) { 189 | 190 | .menu-item-has-children > a { 191 | 192 | &:after { 193 | content: "\203a"; 194 | } 195 | } 196 | } 197 | } 198 | 199 | > a, 200 | > .menu-item-link-return { 201 | 202 | color: $color__background-body; 203 | display: block; 204 | line-height: $font__line-height-heading; 205 | text-shadow: none; 206 | padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit; 207 | white-space: nowrap; 208 | 209 | &:hover, 210 | &:focus { 211 | background: $color__link-hover; 212 | 213 | &:after { 214 | background: $color__link-hover; 215 | } 216 | } 217 | } 218 | 219 | > .menu-item-link-return { 220 | width: 100%; 221 | font-size: $font__size_base; 222 | font-weight: normal; 223 | text-align: left; 224 | } 225 | 226 | > a:empty { 227 | display: none; 228 | } 229 | 230 | &.mobile-parent-nav-menu-item { 231 | 232 | display: none; 233 | font-size: $font__size-sm; 234 | font-weight: normal; 235 | 236 | svg { 237 | position: relative; 238 | top: 0.2rem; 239 | margin-right: calc( .25 * #{$size__spacing-unit} ); 240 | } 241 | } 242 | } 243 | } 244 | 245 | /* 246 | * Sub-menu styles 247 | * 248 | * :focus-within needs its own selector so other similar 249 | * selectors don’t get ignored if a browser doesn’t recognize it 250 | */ 251 | .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu { 252 | 253 | display: block; 254 | left: 0; 255 | margin-top: 0; 256 | opacity: 1; 257 | width: auto; 258 | min-width: 100%; 259 | 260 | 261 | /* Non-mobile position */ 262 | @include media(tablet) { 263 | display: block; 264 | margin-top: 0; 265 | opacity: 1; 266 | position: absolute; 267 | left: 0; 268 | right: auto; 269 | top: auto; 270 | bottom: auto; 271 | height: auto; 272 | min-width: -moz-max-content; 273 | min-width: -webkit-max-content; 274 | min-width: max-content; 275 | transform: none; 276 | } 277 | 278 | &.hidden-links { 279 | left: 0; 280 | width: 100%; 281 | display: table; 282 | position: absolute; 283 | 284 | @include media(tablet) { 285 | right: 0; 286 | left: auto; 287 | display: block; 288 | width: max-content; 289 | } 290 | } 291 | 292 | .submenu-expand { 293 | display: none; 294 | } 295 | 296 | .sub-menu { 297 | display: block; 298 | margin-top: inherit; 299 | position: relative; 300 | width: 100%; 301 | left: 0; 302 | opacity: 1; 303 | 304 | /* Non-mobile position */ 305 | @include media(tablet) { 306 | float: none; 307 | max-width: 100%; 308 | } 309 | } 310 | 311 | /* Nested sub-menu dashes */ 312 | .sub-menu { 313 | counter-reset: submenu; 314 | } 315 | 316 | .sub-menu > li > a::before { 317 | font-family: $font__body; 318 | font-weight: normal; 319 | content: "\2013\00a0" counters(submenu, "\2013\00a0", none); 320 | counter-increment: submenu 321 | } 322 | } 323 | 324 | .main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu, 325 | .main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu, 326 | .main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu { 327 | 328 | display: block; 329 | left: 0; 330 | margin-top: 0; 331 | opacity: 1; 332 | width: auto; 333 | min-width: 100%; 334 | 335 | 336 | /* Non-mobile position */ 337 | @include media(tablet) { 338 | display: block; 339 | float: none; 340 | margin-top: 0; 341 | opacity: 1; 342 | position: absolute; 343 | left: 0; 344 | right: auto; 345 | top: auto; 346 | bottom: auto; 347 | height: auto; 348 | min-width: -moz-max-content; 349 | min-width: -webkit-max-content; 350 | min-width: max-content; 351 | transform: none; 352 | } 353 | 354 | &.hidden-links { 355 | left: 0; 356 | width: 100%; 357 | display: table; 358 | position: absolute; 359 | 360 | @include media(tablet) { 361 | right: 0; 362 | left: auto; 363 | display: table; 364 | width: max-content; 365 | } 366 | } 367 | 368 | .submenu-expand { 369 | display: none; 370 | } 371 | 372 | .sub-menu { 373 | display: block; 374 | margin-top: inherit; 375 | position: relative; 376 | width: 100%; 377 | left: 0; 378 | opacity: 1; 379 | 380 | /* Non-mobile position */ 381 | @include media(tablet) { 382 | float: none; 383 | max-width: 100%; 384 | } 385 | } 386 | 387 | /* Nested sub-menu dashes */ 388 | .sub-menu { 389 | counter-reset: submenu; 390 | } 391 | 392 | .sub-menu > li > a::before { 393 | font-family: $font__body; 394 | font-weight: normal; 395 | content: "\2013\00a0" counters(submenu, "\2013\00a0", none); 396 | counter-increment: submenu 397 | } 398 | } 399 | 400 | /** 401 | * Fade-in animation for top-level submenus 402 | */ 403 | .main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu { 404 | animation: fade_in 0.1s forwards; 405 | } 406 | 407 | /** 408 | * Off-canvas touch device styles 409 | */ 410 | .main-menu .menu-item-has-children.off-canvas .sub-menu { 411 | 412 | .submenu-expand .svg-icon { 413 | transform: rotate(270deg); 414 | } 415 | 416 | .sub-menu { 417 | opacity: 0; 418 | position: absolute; 419 | z-index: 0; 420 | transform: translateX(-100%); 421 | } 422 | 423 | li:hover, 424 | li:focus, 425 | li > a:hover, 426 | li > a:focus { 427 | background-color: transparent; 428 | } 429 | 430 | > li > a, 431 | > li > .menu-item-link-return { 432 | white-space: inherit; 433 | } 434 | 435 | &.expanded-true { 436 | 437 | display: table; 438 | margin-top: 0; 439 | opacity: 1; 440 | padding-left: 0; 441 | 442 | /* Mobile position */ 443 | left: 0; 444 | top: 0; 445 | right: 0; 446 | bottom: 0; 447 | position: fixed; 448 | z-index: 100000; /* Make sure appears above mobile admin bar */ 449 | width: 100vw; 450 | height: 100vh; 451 | max-width: 100vw; 452 | transform: translateX(+100%); 453 | animation: slide_in_right 0.3s forwards; 454 | 455 | > .mobile-parent-nav-menu-item { 456 | display: block; 457 | } 458 | 459 | /* Prevent menu from being blocked by admin bar */ 460 | .admin-bar & { 461 | top: 46px; 462 | height: calc( 100vh - 46px ); 463 | 464 | .sub-menu.expanded-true { 465 | top: 0; 466 | } 467 | 468 | /* WP core breakpoint */ 469 | @media only screen and ( min-width: 782px ) { 470 | top: 32px; 471 | height: calc( 100vh - 32px ); 472 | 473 | .sub-menu.expanded-true { 474 | top: 0; 475 | } 476 | } 477 | } 478 | } 479 | } 480 | 481 | // Hide duplicate menu-more-link when re-loading a menu in the customizer 482 | .main-menu-more { 483 | &:nth-child(n+3) { 484 | display: none; 485 | } 486 | } 487 | 488 | } 489 | 490 | /* Menu animation */ 491 | 492 | @keyframes slide_in_right { 493 | 100% { 494 | transform: translateX(0%); 495 | } 496 | } 497 | 498 | @keyframes fade_in { 499 | from { 500 | opacity: 0; 501 | } 502 | to { 503 | opacity: 1; 504 | } 505 | } 506 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | tag in the document head, and expect WordPress to 44 | * provide it for us. 45 | */ 46 | add_theme_support( 'title-tag' ); 47 | 48 | /* 49 | * Enable support for Post Thumbnails on posts and pages. 50 | * 51 | * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ 52 | */ 53 | add_theme_support( 'post-thumbnails' ); 54 | set_post_thumbnail_size( 1568, 9999 ); 55 | 56 | // This theme uses wp_nav_menu() in two locations. 57 | register_nav_menus( 58 | array( 59 | 'menu-1' => __( 'Primary', 'twentynineteen' ), 60 | 'footer' => __( 'Footer Menu', 'twentynineteen' ), 61 | 'social' => __( 'Social Links Menu', 'twentynineteen' ), 62 | ) 63 | ); 64 | 65 | /* 66 | * Switch default core markup for search form, comment form, and comments 67 | * to output valid HTML5. 68 | */ 69 | add_theme_support( 70 | 'html5', 71 | array( 72 | 'search-form', 73 | 'comment-form', 74 | 'comment-list', 75 | 'gallery', 76 | 'caption', 77 | ) 78 | ); 79 | 80 | /** 81 | * Add support for core custom logo. 82 | * 83 | * @link https://codex.wordpress.org/Theme_Logo 84 | */ 85 | add_theme_support( 86 | 'custom-logo', 87 | array( 88 | 'height' => 190, 89 | 'width' => 190, 90 | 'flex-width' => false, 91 | 'flex-height' => false, 92 | ) 93 | ); 94 | 95 | // Add theme support for selective refresh for widgets. 96 | add_theme_support( 'customize-selective-refresh-widgets' ); 97 | 98 | // Add support for Block Styles. 99 | add_theme_support( 'wp-block-styles' ); 100 | 101 | // Add support for full and wide align images. 102 | add_theme_support( 'align-wide' ); 103 | 104 | // Add support for editor styles. 105 | add_theme_support( 'editor-styles' ); 106 | 107 | // Enqueue editor styles. 108 | add_editor_style( 'style-editor.css' ); 109 | 110 | // Add custom editor font sizes. 111 | add_theme_support( 112 | 'editor-font-sizes', 113 | array( 114 | array( 115 | 'name' => __( 'Small', 'twentynineteen' ), 116 | 'shortName' => __( 'S', 'twentynineteen' ), 117 | 'size' => 19.5, 118 | 'slug' => 'small', 119 | ), 120 | array( 121 | 'name' => __( 'Normal', 'twentynineteen' ), 122 | 'shortName' => __( 'M', 'twentynineteen' ), 123 | 'size' => 22, 124 | 'slug' => 'normal', 125 | ), 126 | array( 127 | 'name' => __( 'Large', 'twentynineteen' ), 128 | 'shortName' => __( 'L', 'twentynineteen' ), 129 | 'size' => 36.5, 130 | 'slug' => 'large', 131 | ), 132 | array( 133 | 'name' => __( 'Huge', 'twentynineteen' ), 134 | 'shortName' => __( 'XL', 'twentynineteen' ), 135 | 'size' => 49.5, 136 | 'slug' => 'huge', 137 | ), 138 | ) 139 | ); 140 | 141 | // Editor color palette. 142 | add_theme_support( 143 | 'editor-color-palette', 144 | array( 145 | array( 146 | 'name' => __( 'Primary', 'twentynineteen' ), 147 | 'slug' => 'primary', 148 | 'color' => twentynineteen_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? 199 : get_theme_mod( 'primary_color_hue', 199 ), 100, 33 ), 149 | ), 150 | array( 151 | 'name' => __( 'Secondary', 'twentynineteen' ), 152 | 'slug' => 'secondary', 153 | 'color' => twentynineteen_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? 199 : get_theme_mod( 'primary_color_hue', 199 ), 100, 23 ), 154 | ), 155 | array( 156 | 'name' => __( 'Dark Gray', 'twentynineteen' ), 157 | 'slug' => 'dark-gray', 158 | 'color' => '#111', 159 | ), 160 | array( 161 | 'name' => __( 'Light Gray', 'twentynineteen' ), 162 | 'slug' => 'light-gray', 163 | 'color' => '#767676', 164 | ), 165 | array( 166 | 'name' => __( 'White', 'twentynineteen' ), 167 | 'slug' => 'white', 168 | 'color' => '#FFF', 169 | ), 170 | ) 171 | ); 172 | 173 | // Add support for responsive embedded content. 174 | add_theme_support( 'responsive-embeds' ); 175 | } 176 | endif; 177 | add_action( 'after_setup_theme', 'twentynineteen_setup' ); 178 | 179 | /** 180 | * Register widget area. 181 | * 182 | * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar 183 | */ 184 | function twentynineteen_widgets_init() { 185 | 186 | register_sidebar( 187 | array( 188 | 'name' => __( 'Footer', 'twentynineteen' ), 189 | 'id' => 'sidebar-1', 190 | 'description' => __( 'Add widgets here to appear in your footer.', 'twentynineteen' ), 191 | 'before_widget' => '
', 192 | 'after_widget' => '
', 193 | 'before_title' => '

', 194 | 'after_title' => '

', 195 | ) 196 | ); 197 | 198 | } 199 | add_action( 'widgets_init', 'twentynineteen_widgets_init' ); 200 | 201 | /** 202 | * Set the content width in pixels, based on the theme's design and stylesheet. 203 | * 204 | * Priority 0 to make it available to lower priority callbacks. 205 | * 206 | * @global int $content_width Content width. 207 | */ 208 | function twentynineteen_content_width() { 209 | // This variable is intended to be overruled from themes. 210 | // Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}. 211 | // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound 212 | $GLOBALS['content_width'] = apply_filters( 'twentynineteen_content_width', 640 ); 213 | } 214 | add_action( 'after_setup_theme', 'twentynineteen_content_width', 0 ); 215 | 216 | /** 217 | * Enqueue scripts and styles. 218 | */ 219 | function twentynineteen_scripts() { 220 | wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) ); 221 | 222 | wp_style_add_data( 'twentynineteen-style', 'rtl', 'replace' ); 223 | 224 | if ( has_nav_menu( 'menu-1' ) ) { 225 | wp_enqueue_script( 'twentynineteen-priority-menu', get_theme_file_uri( '/js/priority-menu.js' ), array(), '1.1', true ); 226 | wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-keyboard-navigation.js' ), array(), '1.1', true ); 227 | } 228 | 229 | wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' ); 230 | 231 | if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { 232 | wp_enqueue_script( 'comment-reply' ); 233 | } 234 | } 235 | add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' ); 236 | 237 | /** 238 | * Fix skip link focus in IE11. 239 | * 240 | * This does not enqueue the script because it is tiny and because it is only for IE11, 241 | * thus it does not warrant having an entire dedicated blocking script being loaded. 242 | * 243 | * @link https://git.io/vWdr2 244 | */ 245 | function twentynineteen_skip_link_focus_fix() { 246 | // The following is minified via `terser --compress --mangle -- js/skip-link-focus-fix.js`. 247 | ?> 248 | 251 | 287 | 288 | 291 | .has-primary-background-color, 92 | .entry .entry-content > *[class^="wp-block-"].has-primary-background-color, 93 | .entry .entry-content > *[class^="wp-block-"] .has-primary-background-color, 94 | .entry .entry-content > *[class^="wp-block-"].is-style-solid-color, 95 | .entry .entry-content > *[class^="wp-block-"].is-style-solid-color.has-primary-background-color, 96 | .entry .entry-content .wp-block-file .wp-block-file__button { 97 | background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 98 | } 99 | 100 | /* 101 | * Set Color for: 102 | * - all links 103 | * - main navigation links 104 | * - Post navigation links 105 | * - Post entry meta hover 106 | * - Post entry header more-link hover 107 | * - main navigation svg 108 | * - comment navigation 109 | * - Comment edit link hover 110 | * - Site Footer Link hover 111 | * - Widget links 112 | */ 113 | a, 114 | a:visited, 115 | .main-navigation .main-menu > li, 116 | .main-navigation ul.main-menu > li > a, 117 | .post-navigation .post-title, 118 | .entry .entry-meta a:hover, 119 | .entry .entry-footer a:hover, 120 | .entry .entry-content .more-link:hover, 121 | .main-navigation .main-menu > li > a + svg, 122 | .comment .comment-metadata > a:hover, 123 | .comment .comment-metadata .comment-edit-link:hover, 124 | #colophon .site-info a:hover, 125 | .widget a, 126 | .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), 127 | .entry .entry-content > .has-primary-color, 128 | .entry .entry-content > *[class^="wp-block-"] .has-primary-color, 129 | .entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-primary-color, 130 | .entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-primary-color p { 131 | color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 132 | } 133 | 134 | /* 135 | * Set left border color for: 136 | * wp block quote 137 | */ 138 | blockquote, 139 | .entry .entry-content blockquote, 140 | .entry .entry-content .wp-block-quote:not(.is-large), 141 | .entry .entry-content .wp-block-quote:not(.is-style-large) { 142 | border-left-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 143 | } 144 | 145 | /* 146 | * Set border color for: 147 | * :focus 148 | */ 149 | input[type="text"]:focus, 150 | input[type="email"]:focus, 151 | input[type="url"]:focus, 152 | input[type="password"]:focus, 153 | input[type="search"]:focus, 154 | input[type="number"]:focus, 155 | input[type="tel"]:focus, 156 | input[type="range"]:focus, 157 | input[type="date"]:focus, 158 | input[type="month"]:focus, 159 | input[type="week"]:focus, 160 | input[type="time"]:focus, 161 | input[type="datetime"]:focus, 162 | input[type="datetime-local"]:focus, 163 | input[type="color"]:focus, 164 | textarea:focus { 165 | border-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 166 | } 167 | 168 | .gallery-item > div > a:focus { 169 | box-shadow: 0 0 0 2px hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 170 | } 171 | 172 | /* Hover colors */ 173 | a:hover, a:active, 174 | .main-navigation .main-menu > li > a:hover, 175 | .main-navigation .main-menu > li > a:hover + svg, 176 | .post-navigation .nav-links a:hover, 177 | .post-navigation .nav-links a:hover .post-title, 178 | .author-bio .author-description .author-link:hover, 179 | .entry .entry-content > .has-secondary-color, 180 | .entry .entry-content > *[class^="wp-block-"] .has-secondary-color, 181 | .entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-secondary-color, 182 | .entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-secondary-color p, 183 | .comment .comment-author .fn a:hover, 184 | .comment-reply-link:hover, 185 | .comment-navigation .nav-previous a:hover, 186 | .comment-navigation .nav-next a:hover, 187 | #cancel-comment-reply-link:hover, 188 | .widget a:hover { 189 | color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */ 190 | } 191 | 192 | .main-navigation .sub-menu > li > a:hover, 193 | .main-navigation .sub-menu > li > a:focus, 194 | .main-navigation .sub-menu > li > a:hover:after, 195 | .main-navigation .sub-menu > li > a:focus:after, 196 | .main-navigation .sub-menu > li > .menu-item-link-return:hover, 197 | .main-navigation .sub-menu > li > .menu-item-link-return:focus, 198 | .main-navigation .sub-menu > li > a:not(.submenu-expand):hover, 199 | .main-navigation .sub-menu > li > a:not(.submenu-expand):focus, 200 | .entry .entry-content > .has-secondary-background-color, 201 | .entry .entry-content > *[class^="wp-block-"].has-secondary-background-color, 202 | .entry .entry-content > *[class^="wp-block-"] .has-secondary-background-color, 203 | .entry .entry-content > *[class^="wp-block-"].is-style-solid-color.has-secondary-background-color { 204 | background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */ 205 | } 206 | 207 | /* Text selection colors */ 208 | ::selection { 209 | background-color: hsl( ' . $primary_color . ', ' . $saturation_selection . ', ' . $lightness_selection . ' ); /* base: #005177; */ 210 | } 211 | ::-moz-selection { 212 | background-color: hsl( ' . $primary_color . ', ' . $saturation_selection . ', ' . $lightness_selection . ' ); /* base: #005177; */ 213 | }'; 214 | 215 | $editor_css = ' 216 | /* 217 | * Set colors for: 218 | * - links 219 | * - blockquote 220 | * - pullquote (solid color) 221 | * - buttons 222 | */ 223 | .editor-block-list__layout .editor-block-list__block a, 224 | .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), 225 | .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color), 226 | .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color), 227 | .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color), 228 | .editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__textlink { 229 | color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 230 | } 231 | 232 | .editor-block-list__layout .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large), 233 | .editor-styles-wrapper .editor-block-list__layout .wp-block-freeform blockquote { 234 | border-left: 2px solid hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 235 | } 236 | 237 | .editor-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color:not(.has-background-color) { 238 | background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 239 | } 240 | 241 | .editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__button, 242 | .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link, 243 | .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:active, 244 | .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus, 245 | .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { 246 | background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 247 | } 248 | 249 | /* Hover colors */ 250 | .editor-block-list__layout .editor-block-list__block a:hover, 251 | .editor-block-list__layout .editor-block-list__block a:active, 252 | .editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__textlink:hover { 253 | color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */ 254 | } 255 | 256 | /* Do not overwrite solid color pullquote or cover links */ 257 | .editor-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color a, 258 | .editor-block-list__layout .editor-block-list__block .wp-block-cover a { 259 | color: inherit; 260 | } 261 | '; 262 | 263 | if ( function_exists( 'register_block_type' ) && is_admin() ) { 264 | $theme_css = $editor_css; 265 | } 266 | 267 | /** 268 | * Filters Twenty Nineteen custom colors CSS. 269 | * 270 | * @since Twenty Nineteen 1.0 271 | * 272 | * @param string $css Base theme colors CSS. 273 | * @param int $primary_color The user's selected color hue. 274 | * @param string $saturation Filtered theme color saturation level. 275 | */ 276 | return apply_filters( 'twentynineteen_custom_colors_css', $theme_css, $primary_color, $saturation ); 277 | } 278 | --------------------------------------------------------------------------------