diff --git a/.circleci/config.yml b/.circleci/config.yml index d0dbc370f..5e502279f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -33,6 +33,8 @@ jobs: - run: name: Build theme ZIPs command: npm run build && npm run release:archive + - store_artifacts: + path: release/newspack-joan.zip - store_artifacts: path: release/newspack-joseph.zip - store_artifacts: diff --git a/composer.json b/composer.json index 8070f9c15..74e0abed2 100644 --- a/composer.json +++ b/composer.json @@ -48,4 +48,4 @@ "dealerdirect/phpcodesniffer-composer-installer": true } } -} \ No newline at end of file +} diff --git a/newspack-joan/fonts/inter/InterVariable-Italic.woff2 b/newspack-joan/fonts/inter/InterVariable-Italic.woff2 new file mode 100644 index 000000000..b3530f3f5 Binary files /dev/null and b/newspack-joan/fonts/inter/InterVariable-Italic.woff2 differ diff --git a/newspack-joan/fonts/inter/InterVariable.woff2 b/newspack-joan/fonts/inter/InterVariable.woff2 new file mode 100644 index 000000000..5a8d3e72a Binary files /dev/null and b/newspack-joan/fonts/inter/InterVariable.woff2 differ diff --git a/newspack-joan/fonts/inter/LICENSE.md b/newspack-joan/fonts/inter/LICENSE.md new file mode 100644 index 000000000..9b2ca37b3 --- /dev/null +++ b/newspack-joan/fonts/inter/LICENSE.md @@ -0,0 +1,92 @@ +Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION AND CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/newspack-joan/fonts/jetbrains-mono/JetBrainsMono-Italic_wght.ttf b/newspack-joan/fonts/jetbrains-mono/JetBrainsMono-Italic_wght.ttf new file mode 100644 index 000000000..541483553 Binary files /dev/null and b/newspack-joan/fonts/jetbrains-mono/JetBrainsMono-Italic_wght.ttf differ diff --git a/newspack-joan/fonts/jetbrains-mono/JetBrainsMono_wght.ttf b/newspack-joan/fonts/jetbrains-mono/JetBrainsMono_wght.ttf new file mode 100644 index 000000000..b60e77f5d Binary files /dev/null and b/newspack-joan/fonts/jetbrains-mono/JetBrainsMono_wght.ttf differ diff --git a/newspack-joan/fonts/jetbrains-mono/LICENSE.md b/newspack-joan/fonts/jetbrains-mono/LICENSE.md new file mode 100644 index 000000000..8bee4148c --- /dev/null +++ b/newspack-joan/fonts/jetbrains-mono/LICENSE.md @@ -0,0 +1,93 @@ +Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/newspack-joan/functions.php b/newspack-joan/functions.php new file mode 100755 index 000000000..25fdb90e2 --- /dev/null +++ b/newspack-joan/functions.php @@ -0,0 +1,105 @@ + + + + + + + + li, + .h-sb.h-sh .nav1 ul.main-menu > li > a, + .h-sb.h-sh .nav1 ul.main-menu > li > a:hover, + .h-sb .top-header-contain, + .h-sb .middle-header-contain { + color: ' . esc_html( $header_color_contrast ) . '; + } + '; + } + + if ( isset( $footer_color ) && '' !== $footer_color ) { + $theme_css .= ' + #colophon, + #colophon .widget-title, + #colophon .social-navigation a, + #colophon .widgettitle { + color: ' . esc_html( $footer_color_contrast ) . '; + } + + #colophon .footer-branding .wrapper, + #colophon .footer-widgets:first-child { + border: 0; + } + + .site-footer .accent-header::before, + .site-footer .article-section-title::before { + background-color: ' . esc_html( newspack_adjust_brightness( $footer_color, -20 ) ) . '; + } + '; + } + + if ( function_exists( 'register_block_type' ) && is_admin() ) { + $theme_css = $editor_css; + } + + return $theme_css; +} diff --git a/newspack-joan/inc/child-typography.php b/newspack-joan/inc/child-typography.php new file mode 100644 index 000000000..2914a5015 --- /dev/null +++ b/newspack-joan/inc/child-typography.php @@ -0,0 +1,52 @@ + * { + grid-column: span 12; + width: 100%; + } + + .main-content { + grid-column: 1 / 7; + + .alignright { + margin-left: var(--wp--preset--spacing--50); + margin-right: calc((var(--newspack-theme-width-xx-small) * 2 + var(--wp--preset--spacing--50) * 2) * -1); + max-width: calc((var(--newspack-theme-width-xx-small) * 8 + var(--wp--preset--spacing--50) * 7) / 2 - (var(--wp--preset--spacing--50) / 2)); + } + } + + #secondary { + grid-column: 9 / 13; + } + } + } +} + +.entry .entry-content, +.newspack-inline-popup, +[id="pico"] { + > * { + margin: var(--wp--preset--spacing--50) 0; + } +} + +/* Typography */ +h1 { + font-size: var(--newspack-theme-font-size-xxxl); + line-height: var(--newspack-theme-line-height-xxxl); +} + +h2 { + font-size: var(--newspack-theme-font-size-xxl); + line-height: var(--newspack-theme-line-height-xxl); +} + +h3 { + font-size: var(--newspack-theme-font-size-xl); + line-height: var(--newspack-theme-line-height-xl); +} + +.has-large-font-size, +.comments-title, +.archive .entry-title, +.search .entry-title, +.blog .entry-title, +h4 { + font-size: var(--newspack-theme-font-size-lg); + line-height: var(--newspack-theme-line-height-lg); +} + +.has-regular-font-size, +h5 { + font-size: var(--newspack-theme-font-size-md); + line-height: var(--newspack-theme-line-height-md); +} + +h6 { + font-size: var(--newspack-theme-font-size-sm); + line-height: var(--newspack-theme-line-height-sm); +} + +// Accent headers +.accent-header:not(.widget-title), +.article-section-title, +.cat-links, +.page-title { + color: var(--newspack-theme-color-text-light); + font-size: var(--newspack-theme-font-size-sm); + line-height: var(--newspack-theme-line-height-sm); +} + + +/* Header */ +.middle-header-contain { + .wrapper { + @include utilities.media( tablet ) { + padding: var(--wp--preset--spacing--30) 0; + } + + .desktop-menu-toggle { + height: 36px; + margin-right: var(--wp--preset--spacing--20); + place-items: center; + width: 36px; + + svg { + height: 24px; + width: 24px; + } + } + } +} + +.bottom-header-contain { + .wrapper { + &:not(:has(#site-navigation a)) { + border-bottom: 0; + } + } +} + +.button.mb-cta { + border-radius: 0; +} + +.accent-header, +.wp-block-columns .wp-block-column > .accent-header, +div.wpnbha .article-section-title { + margin-bottom: 1em; +} + +#secondary .widget-title, +#secondary .widgettitle { + font-size: var(--newspack-theme-font-size-lg); + line-height: var(--newspack-theme-line-height-lg); +} + +.h-dh { + .site-header .desktop-menu-toggle, + .subpage-toggle-contain { + @include utilities.media( tablet ) { + display: grid; + } + } +} + +/* Posts & Pages */ + +@include utilities.media( tablet ) { + .featured-image-beside { + .cat-links::before { + background-color: var(--newspack-theme-color-against-primary); + } + } +} + +.search, +.blog, +.archive { + .cat-links::before { + display: none; + } +} + +.entry-title { + font-size: var(--newspack-theme-font-size-xxl); + line-height: var(--newspack-theme-line-height-xxl); + text-wrap: balance; +} + +.cat-links { + align-items: center; + display: inline-flex; + font-family: var(--newspack-theme-font-heading); + font-size: var(--newspack-theme-font-size-sm); + line-height: var(--newspack-theme-line-height-sm); + gap: 8px; +} + +.entry-meta { + .author-avatar:not(:empty) { + margin-right: var(--wp--preset--spacing--20); + } + + .byline { + a, + a:visited { + color: var(--newspack-theme-color-text-light); + } + + a:hover { + color: var(--newspack-theme-color-text-main); + } + } +} + +.single { + .entry-header { + padding-bottom: var(--wp--preset--spacing--50); + } + + .entry-title { + font-size: var(--newspack-theme-font-size-xxxl); + line-height: var(--newspack-theme-line-height-xxxl); + margin: 0 0 var(--wp--preset--spacing--30); + } + + @include utilities.media( tablet ) { + .entry-meta { + align-items: center; + display: flex; + flex-wrap: wrap; + + > * { + float: none; + } + } + + &.single-featured-image-default .byline, + &.single-featured-image-above .byline { + margin-right: #{1.5 * structure.$size__spacing-unit}; + } + } + + #secondary { + margin-top: var(--wp--preset--spacing--50); + padding-top: 0; + } + + .cat-links { + margin: 0; + } +} + +.entry-header { + display: grid; + padding-bottom: var(--wp--preset--spacing--50); +} + +.entry-subhead { + font-size: var(--newspack-theme-font-size-sm); + gap: var(--wp--preset--spacing--30); + line-height: var(--newspack-theme-line-height-sm); + + > * { + margin: 0 !important; + } + + .avatar { + @include utilities.media( tablet ) { + height: 48px; + width: 48px; + } + } + + .trust-label { + margin-bottom: var(--wp--preset--spacing--20); + } +} + +.entry-footer { + color: var(--newspack-theme-color-text-light); + font-size: var(--newspack-theme-font-size-sm); + line-height: var(--newspack-theme-line-height-sm); + margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--80); + + a { + color: inherit; + text-decoration: underline; + + &:hover { + color: var(--newspack-theme-color-text-main); + } + } + + .edit-link { + font-size: inherit; + line-height: inherit; + + svg { + display: none; + } + } +} + +/* Post Thumbnail */ +.post-thumbnail { + display: grid; + gap: var(--wp--preset--spacing--20); + + &:has(.size-newspack-featured-image-small) { + width: calc(var(--newspack-theme-width-xx-small) * 8 + var(--wp--preset--spacing--50) * 7); + } + + .single .main-content > &:first-child { + margin-top: var(--wp--preset--spacing--50); + } +} + +.featured-image-behind, +.featured-image-beside { + margin: -1px calc(50% - 50vw) var(--wp--preset--spacing--80); + width: 100vw !important; + + .entry-header { + padding: var(--wp--preset--spacing--80) 0; + } + + body:has(&) { + #secondary, + .entry-content > :first-child { + margin-top: 0; + } + } +} + +.featured-image-behind { + &::before { + background: linear-gradient(to bottom, transparent, rgba(black, 0.7) 75%, rgba(black, 0.7)); + } + + .entry-header { + margin: 0; + } + + + figcaption { + margin: calc(var(--wp--preset--spacing--80) * -1) auto var(--wp--preset--spacing--80); + padding-top: var(--wp--preset--spacing--20); + width: 100%; + } +} + +.featured-image-beside { + .entry-header { + padding: var(--wp--preset--spacing--80); + max-width: calc(100% - var(--wp--preset--spacing--50) * 2); + width: calc(var(--newspack-theme-width-medium) + var(--wp--preset--spacing--80) + var(--wp--preset--spacing--50) / 2); + } + + .entry-title { + font-size: var(--newspack-theme-font-size-xxl); + line-height: var(--newspack-theme-line-height-xxl); + } + + .entry-subhead .sharedaddy { + margin-top: var(--wp--preset--spacing--50) !important; + } + + figcaption { + margin: 0; + text-align: right; + text-shadow: 0 0 2px rgba(black, 0.7); + width: 50%; + + &::before { + background: linear-gradient(to bottom, transparent, rgba(black, 0.7) 100%); + } + + > span { + max-width: 100%; + padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20); + } + } +} + +.featured-image-above { + .post-thumbnail { + margin-bottom: var(--wp--preset--spacing--80); + margin-top: var(--wp--preset--spacing--50); + + .site:has(.site-breadcrumb) & { + margin-top: var(--wp--preset--spacing--30); + } + } +} + +figcaption, +.wp-caption-text, +.amp-image-lightbox-caption, +.swiper-pagination-simple { + font-family: var(--newspack-theme-font-ui); + font-size: var(--newspack-theme-font-size-xs); + line-height: var(--newspack-theme-line-height-xs); +} + +/* Author Bio */ + +.author-bio .accent-header { + color: var(--newspack-theme-color-text-main); + font-size: var(--newspack-theme-font-size-md); + margin: 0 0 #{0.25 * structure.$size__spacing-unit}; + + span { + font-size: var(--newspack-theme-font-size-xs); + } + + &::before { + display: none; + } +} + +/* Blocks */ + +//! Paragraph +.has-drop-cap:not(:focus)::first-letter { + font-family: var(--newspack-theme-font-heading); + font-weight: bold; +} + +//! Pullquote +.wp-block-pullquote { + border-width: 0; + font-family: var(--newspack-theme-font-heading); + font-weight: bold; + padding-top: #{4 * structure.$size__spacing-unit}; + position: relative; + text-align: center; + + &.is-style-solid-color blockquote p, + blockquote p { + @include utilities.media( tablet ) { + font-size: var(--newspack-theme-font-size-xl); + } + } + + &.has-text-align-right:not(.alignleft):not(.alignright), + &.has-text-align-left:not(.alignleft):not(.alignright) { + @include utilities.media( tablet ) { + p { + font-size: var(--newspack-theme-font-size-xl); + } + } + } + + blockquote { + border-color: var(--newspack-theme-color-primary); + + &::before, + &::after { + border-top: 2px solid; + border-color: inherit; + content: ""; + display: block; + position: absolute; + opacity: 0.8; + top: #{2 * structure.$size__spacing-unit}; + } + + &::before { + left: 15%; + right: calc(50% + 2em); + } + + &::after { + left: calc(50% + 2em); + right: 15%; + } + + p:first-of-type::before { + color: var(--newspack-theme-color-primary); + content: "\201C"; + display: inline-block; + font-size: calc(1rem * 5); + font-weight: normal; + left: calc(50% - 0.3em); + line-height: 0.75; + position: absolute; + text-align: center; + top: #{1.5 * structure.$size__spacing-unit}; + width: 0.5em; + z-index: 1; + + @include utilities.media( tablet ) { + font-size: calc(1rem * 7); + } + } + } + + &.has-border-color blockquote { + border-color: inherit; + } + + &.is-style-solid-color, + &.has-background { + blockquote { + &::before { + color: inherit; + } + + &::after { + border-top-color: currentcolor; + } + + &::before, + &::after { + border-top-color: currentcolor; + } + + cite { + text-transform: uppercase; + } + } + + p:first-of-type::before { + color: inherit; + } + } + + cite { + font-size: var(--newspack-theme-font-size-sm); + font-weight: normal; + text-transform: uppercase; + } + + &.has-text-align-left, + &.has-text-align-right { + blockquote::after { + display: none; + } + + &, + &.is-style-solid-color, + &.has-background { + padding-top: #{3 * structure.$size__spacing-unit}; + } + } + + &.has-text-align-left { + blockquote { + &::before { + left: 3em; + right: 0; + + @include utilities.media( tablet ) { + left: 4em; + } + } + } + + p:first-of-type::before { + left: 0; + } + + &.is-style-solid-color, + &.has-background { + p:first-of-type::before { + left: #{1.5 * structure.$size__spacing-unit}; + } + + blockquote::before { + left: 4em; + } + } + } + + &.has-text-align-right { + blockquote { + &::before { + right: 3em; + left: 0; + + @include utilities.media( tablet ) { + right: 4em; + } + } + } + + p:first-of-type::before { + left: auto; + right: 0; + } + + &.is-style-solid-color, + &.has-background { + p:first-of-type::before { + right: #{1.5 * structure.$size__spacing-unit}; + } + + blockquote::before { + right: 4em; + } + } + } + + &.alignleft, + &.alignright { + text-align: left; + + blockquote { + &::before { + left: 3em; + right: 15%; + } + + &::after { + display: none; + } + } + + &.is-style-solid-color blockquote p, + blockquote p { + font-size: var(--newspack-theme-font-size-md); + } + + &, + &.is-style-solid-color, + &.has-background { + padding-top: #{3 * structure.$size__spacing-unit}; + } + + p:first-of-type::before { + font-size: calc(1rem * 5); + left: 0; + text-align: left; + width: 0.5em; + } + + &.is-style-solid-color, + &.has-background { + p:first-of-type::before { + left: #{1.5 * structure.$size__spacing-unit}; + } + + blockquote::before { + left: 4.5em; + } + } + } + + &[style*="border-width"] { + padding-top: structure.$size__spacing-unit; + + p:first-of-type::before, + blockquote::before, + blockquote::after { + display: none; + } + } +} + +/* Sharedaddy */ +.sharedaddy { + margin-bottom: var(--wp--preset--spacing--50); + + .sd-sharing { + margin: 0; + + .sd-content { + margin: 0; + + ul { + display: flex; + gap: var(--wp--preset--spacing--20); + flex-wrap: wrap; + + li { + display: flex; + margin: 0; + + a { + margin: 0 !important; + top: 0 !important; + } + } + + .share-end { + display: none; + } + } + } + } +} + +/* Comments */ +.comments-area { + margin-bottom: 0; + + .entry + & { + margin-top: var(--wp--preset--spacing--80); + } + + > * { + margin-bottom: var(--wp--preset--spacing--50); + margin-top: var(--wp--preset--spacing--50); + } + + > .comment-respond { + margin: 0; + } + + .comments-title-wrap { + margin-bottom: var(--wp--preset--spacing--30); + } +} + +form { + p { + margin: var(--wp--preset--spacing--30) 0; + + &.form-submit { + margin-bottom: 0; + } + } +} + +.comment-form { + label, + .comment-notes { + color: var(--newspack-theme-color-text-light); + display: inline-flex; + font-family: var(--newspack-theme-font-ui); + font-size: var(--newspack-theme-font-size-sm); + gap: 0.25em; + line-height: var(--newspack-theme-line-height-sm); + margin-bottom: var(--wp--preset--spacing--20); + } + + .comment-notes { + margin: 0; + } + + .required { + color: var(--newspack-theme-color-primary-against-white); + } + + @include utilities.media( tablet ) { + .comment-form-author, + .comment-form-email { + margin-top: 0; + width: calc(50% - var(--wp--preset--spacing--50) / 2); + } + + .comment-form-email { + margin-left: var(--wp--preset--spacing--50); + } + + .comment-form-url { + clear: both; + } + } +} + +//! Newspack +.wpnbha .cat-links::before { + display: none; +} + +//! Newspack Article Carousel +.wp-block-newspack-blocks-carousel { + .cat-links::before { + display: none; + } +} + +// Archive +.archive .page-title { + color: var(--newspack-theme-color-text-light); +} + +// Widgets +.mobile-sidebar, +.site-footer { + .article-section-title, + .accent-header { + color: inherit; + } +} + +/* Footer */ + +#colophon { + &, + .social-navigation a { + color: var(--newspack-theme-color-text-main); + } + + .widget-title { + color: var(--newspack-theme-color-text-main); + font-size: var(--newspack-theme-font-size-base-sm); + line-height: var(--newspack-theme-line-height-base-sm); + } +} + +.footer-branding .wrapper, +.footer-widgets:first-child { + border-top: 3px solid currentcolor; +} + +.af-widget { + .footer-branding .wrapper, + .footer-widgets:first-child { + border: 0; + } +} + +// If custom font is set, `#colophon .site-info` selector would override it +// (See issue #663) +.site-info { + font-family: var(--newspack-theme-font-ui); + font-size: var(--newspack-theme-font-size-xs); + line-height: var(--newspack-theme-line-height-xs); +} + +/* Yoast Breadcrumbs */ + +.site-breadcrumb { + font-family: var(--newspack-theme-font-body); + font-size: var(--newspack-theme-font-size-xs); + line-height: var(--newspack-theme-line-height-xs); + + .wrapper { + padding: var(--wp--preset--spacing--30) 0 0; + + > span { + font-family: inherit; + font-size: inherit; + line-height: inherit; + } + } +} + +// Sponsored Content +.single .sponsor-label { + font-size: var(--newspack-theme-font-size-sm); + + + .cat-links { + font-size: 0.9rem; + } +} + +/* Inputs */ +button, +input, +select, +optgroup, +textarea { + color: var(--newspack-theme-color-text-main); + font-family: var(--newspack-theme-font-ui); + font-size: var(--newspack-theme-font-size-sm); + line-height: var(--newspack-theme-line-height-sm); +} + +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="tel"], +input[type="range"], +input[type="date"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="datetime"], +input[type="datetime-local"], +input[type="zip"], +input[type="color"], +textarea { + border-radius: var(--newspack-theme-radius-md); + padding: calc(var(--wp--preset--spacing--25) - 1px); +} + +/* Buttons */ +.button, +button, +input[type="button"], +input[type="reset"], +input[type="submit"], +.wp-block-search__button { + background-color: var(--newspack-theme-color-primary); + border-radius: var(--newspack-theme-radius-md); + color: var(--newspack-theme-color-against-primary); + font-family: var(--newspack-theme-font-ui); + font-size: var(--newspack-theme-font-size-sm); + font-weight: 600; + line-height: var(--newspack-theme-line-height-sm); + padding: 0.75rem 1.5rem; + transition: background 125ms ease-in-out, color 125ms ease-in-out; +} diff --git a/newspack-joan/sass/theme-description.scss b/newspack-joan/sass/theme-description.scss new file mode 100644 index 000000000..b7739cb40 --- /dev/null +++ b/newspack-joan/sass/theme-description.scss @@ -0,0 +1,24 @@ +/*! +Theme Name: Newspack Joan +Theme URI: https://github.com/Automattic/newspack-theme +Author: Automattic +Author URI: https://newspack.com +Description: The official theme for Newspack, an all-in-one platform that simplifies publishing and drives audience and revenue right out of the box. +Requires at least: 6.7 +Tested up to: 6.8 +Version: 2.14.0 +License: GNU General Public License v2 or later +License URI: http://www.gnu.org/licenses/gpl-2.0.html +Template: newspack-theme +Text Domain: newspack-joan +Tags: Newspack + +This theme, like WordPress, is licensed under the GPL. +Use it to make something cool, have fun, and share what you've learned with others. + +Newspack Theme is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc. +Underscores is distributed under the terms of the GNU GPL v2 or later. + +Normalizing styles have been helped along thanks to the fine work of +Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ +*/ diff --git a/newspack-joan/sass/variables-style/_variables-style.scss b/newspack-joan/sass/variables-style/_variables-style.scss new file mode 100644 index 000000000..d0f1ff6e7 --- /dev/null +++ b/newspack-joan/sass/variables-style/_variables-style.scss @@ -0,0 +1,121 @@ +// Import the default variable values. +@use "../../../newspack-theme/sass/variables-site/colors"; +@use "../../../newspack-theme/sass/variables-site/fonts"; + +// Use @font-face to make the theme's font files available. +@font-face { + font-family: InterVariable; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("fonts/inter/InterVariable.woff2") format("woff2"); +} +@font-face { + font-family: InterVariable; + font-style: italic; + font-weight: 100 900; + font-display: swap; + src: url("fonts/inter/InterVariable-Italic.woff2") format("woff2"); +} +@font-face { + font-family: JetBrainsMono; + font-style: normal; + font-weight: 100 800; + font-display: swap; + src: url("fonts/jetbrains-mono/JetBrainsMono_wght.ttf") format("ttf"); +} +@font-face { + font-family: JetBrainsMono; + font-style: italic; + font-weight: 100 800; + font-display: swap; + src: url("fonts/jetbrains-mono/JetBrainsMono-Italic_wght.ttf") format("ttf"); +} + +// Now overlay our style-specific variables, so we're only overriding specific variables. +:root { + /* Typography */ + --newspack-theme-font-heading: "InterVariable", "Inter", system-ui, sans-serif; + --newspack-theme-font-body: "InterVariable", "Inter", system-ui, sans-serif; + --newspack-theme-font-ui: "InterVariable", "Inter", system-ui, sans-serif; + --newspack-theme-font-code: "JetBrainsMono", monospace; + --newspack-theme-font-pre: var(--newspack-theme-font-code); + --newspack-theme-font-size-base: clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem); + --newspack-theme-line-height-base: 1.6; + --newspack-theme-font-size-base-sm: 1rem; + --newspack-theme-line-height-base-sm: 1.5; + --newspack-theme-font-size-ratio: 1.3; + --newspack-theme-font-size-xxs: 0.75rem; + --newspack-theme-line-height-xxs: 1.3333; + --newspack-theme-font-size-xs: 0.875rem; + --newspack-theme-line-height-xs: 1.4286; + --newspack-theme-font-size-sm: var(--newspack-theme-font-size-base-sm); + --newspack-theme-line-height-sm: var(--newspack-theme-line-height-base-sm); + --newspack-theme-font-size-md: var(--newspack-theme-font-size-base); + --newspack-theme-line-height-md: var(--newspack-theme-line-height-base); + --newspack-theme-font-size-lg: clamp(1.25rem, 0.857rem + 0.803vw, 1.5rem); + --newspack-theme-line-height-lg: 1.5; + --newspack-theme-font-size-xl: clamp(1.375rem, 0.394rem + 2.008vw, 2rem); + --newspack-theme-line-height-xl: 1.375; + --newspack-theme-font-size-xxl: clamp(1.625rem, 0.055rem + 3.213vw, 2.625rem); + --newspack-theme-line-height-xxl: 1.3333; + --newspack-theme-font-size-xxxl: clamp(1.75rem, -0.213rem + 4.016vw, 3rem); + --newspack-theme-line-height-xxxl: 1.25; + --newspack-theme-font-size-xxxxl: clamp(2rem, -1.141rem + 6.426vw, 4rem); + --newspack-theme-line-height-xxxxl: 1.125; + --newspack-theme-font-size-xxxxxl: clamp(2.125rem, -2.39rem + 9.237vw, 5rem); + --newspack-theme-line-height-xxxxxl: 1.1; + --newspack-theme-font-size-xxxxxxl: clamp(2.25rem, -3.639rem + 12.048vw, 6rem); + --newspack-theme-line-height-xxxxxxl: 1.0833; + --newspack-theme-font-line-height-body: var(--newspack-theme-line-height-base); + --newspack-theme-font-line-height-heading: inherit; + --wp--preset--font-size--small: var(--newspack-theme-font-size-sm); + --wp--preset--font-size--medium: var(--newspack-theme-font-size-md); + --wp--preset--font-size--normal: var(--newspack-theme-font-size-md); + --wp--preset--font-size--large: var(--newspack-theme-font-size-lg); + --wp--preset--font-size--x-large: var(--newspack-theme-font-size-xl); + --wp--preset--font-size--huge: var(--newspack-theme-font-size-xxl); + + /* Colors */ + --newspack-theme-color-text-main: #1e1e1e; + --newspack-theme-color-text-light: #6c6c6c; + --newspack-theme-color-text-hover: inherit; + --newspack-theme-color-text-screen: var(--newspack-theme-color-text-main); + --newspack-theme-color-link: inherit; + --newspack-theme-color-link-hover: inherit; + --newspack-theme-color-bg-body: #fff; + --newspack-theme-color-bg-hr: #ddd; + --newspack-theme-color-border: #ccc; + --newspack-theme-color-border-light: #ddd; + --newspack-theme-color-bg-button-hover: var(--newspack-theme-color-text-main); + --wp--preset--color--dark-gray: var(--newspack-theme-color-text-main); + --wp--preset--color--medium-gray: var(--newspack-theme-color-text-light); + --wp--preset--color--light-gray: var(--newspack-theme-color-bg-hr); + + /* Radius */ + --newspack-theme-radius-xs: 3px; + --newspack-theme-radius-sm: 4px; + --newspack-theme-radius-md: 6px; + --newspack-theme-radius-lg: 8px; +} + +// Use body selector to match parent theme and ensure override +body.wp-child-theme-newspack-joan { + /* Spacing */ + --wp--preset--spacing--20: 0.5rem; + --wp--preset--spacing--25: 0.75rem; + --wp--preset--spacing--30: 1rem; + --wp--preset--spacing--40: 1.5rem; + --wp--preset--spacing--50: 2rem; + --wp--preset--spacing--60: clamp(2rem, 1.215rem + 1.606vw, 2.5rem); + --wp--preset--spacing--70: clamp(2rem, 0.43rem + 3.213vw, 3rem); + --wp--preset--spacing--80: clamp(2rem, -1.141rem + 6.426vw, 4rem); + + /* Widths */ + --newspack-theme-width-xx-small: calc((var(--newspack-theme-width-x-large) - var(--wp--preset--spacing--50) * 11) / 12); + --newspack-theme-width-x-small: 300px; + --newspack-theme-width-small: 410px; + --newspack-theme-width-medium: 632px; + --newspack-theme-width-large: 964px; + --newspack-theme-width-x-large: 1296px; +} diff --git a/newspack-joan/screenshot.png b/newspack-joan/screenshot.png new file mode 100644 index 000000000..d7dc7e9cb Binary files /dev/null and b/newspack-joan/screenshot.png differ diff --git a/newspack-joan/tribe-events/tribe-events.scss b/newspack-joan/tribe-events/tribe-events.scss new file mode 100644 index 000000000..5032c38c1 --- /dev/null +++ b/newspack-joan/tribe-events/tribe-events.scss @@ -0,0 +1,13 @@ +// The Event Calendar CSS override +// See: https://theeventscalendar.com/knowledgebase/k/basic-font-and-color-changes-with-css/ + +// Import theme variables +@use "../sass/variables-style/variables-style"; + +// Import TEC baseline styles +@use "../../newspack-theme/sass/plugins/the-events-calendar"; + +// Theme-specific styles +.tribe_community_edit .button.mb-cta { + border-radius: 0; +} diff --git a/newspack-theme/sass/mixins/_utilities.scss b/newspack-theme/sass/mixins/_utilities.scss index 862f5aca8..ef2251c47 100755 --- a/newspack-theme/sass/mixins/_utilities.scss +++ b/newspack-theme/sass/mixins/_utilities.scss @@ -44,6 +44,12 @@ } } + @if narrowwide == $res { + @media only screen and ( min-width: structure.$narrow_wide_width ) { + @content; + } + } + @if wide == $res { @media only screen and ( min-width: structure.$wide_width ) { @content; diff --git a/newspack-theme/sass/variables-site/_structure.scss b/newspack-theme/sass/variables-site/_structure.scss index 8c11984d0..3500cb872 100755 --- a/newspack-theme/sass/variables-site/_structure.scss +++ b/newspack-theme/sass/variables-site/_structure.scss @@ -14,6 +14,7 @@ $mobile_width: 600px; $tablet_width: 782px; $narrow_desktop_width: 960px; $desktop_width: 1168px; +$narrow_wide_width: 1328px; $wide_width: 1379px; // Gutenberg spacing variables. diff --git a/package.json b/package.json index 33fd39d73..74d0b05e3 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "format:scss": "newspack-scripts wp-scripts lint-style '**/*.scss' --customSyntax postcss-scss --fix", "typescript:check": "echo 'No TypeScript files in this repository.'", "release": "npm run build && npm run semantic-release", - "release:archive": "mkdir -p release && zip -r release/newspack-theme.zip newspack-theme -x .DS_Store && zip -r release/newspack-sacha.zip newspack-sacha -x .DS_Store && zip -r release/newspack-scott.zip newspack-scott -x .DS_Store && zip -r release/newspack-nelson.zip newspack-nelson -x .DS_Store && zip -r release/newspack-katharine.zip newspack-katharine -x .DS_Store && zip -r release/newspack-joseph.zip newspack-joseph -x .DS_Store" + "release:archive": "mkdir -p release && zip -r release/newspack-theme.zip newspack-theme -x .DS_Store && zip -r release/newspack-sacha.zip newspack-sacha -x .DS_Store && zip -r release/newspack-scott.zip newspack-scott -x .DS_Store && zip -r release/newspack-nelson.zip newspack-nelson -x .DS_Store && zip -r release/newspack-katharine.zip newspack-katharine -x .DS_Store && zip -r release/newspack-joseph.zip newspack-joseph -x .DS_Store && zip -r release/newspack-joan.zip newspack-joan -x .DS_Store" }, "devDependencies": { "@octokit/rest": "^20.1.2", diff --git a/scripts/compile-scss.js b/scripts/compile-scss.js index 7089c630e..dccf08ef6 100644 --- a/scripts/compile-scss.js +++ b/scripts/compile-scss.js @@ -33,6 +33,10 @@ if ( ! fs.existsSync( './newspack-joseph/styles' ) ) { fs.mkdirSync( './newspack-joseph/styles' ); } +if ( ! fs.existsSync( './newspack-joan/styles' ) ) { + fs.mkdirSync( './newspack-joan/styles' ); +} + /** * Save a file do disk. */ @@ -211,6 +215,20 @@ const SASS_STYLESHEETS = [ inFile: 'newspack-joseph/tribe-events/tribe-events.scss', outFile: 'newspack-joseph/tribe-events/tribe-events.css', }, + // Newspack Joan Child theme + { + inFile: 'newspack-joan/sass/style.scss', + outFile: 'newspack-joan/style.css', + withRTL: true, + }, + { + inFile: 'newspack-joan/sass/style-editor.scss', + outFile: 'newspack-joan/style-editor.css', + }, + { + inFile: 'newspack-joan/tribe-events/tribe-events.scss', + outFile: 'newspack-joan/tribe-events/tribe-events.css', + }, ]; // initial run @@ -221,7 +239,19 @@ if ( isWatching ) { console.log( `watching the scss files… ` ); - chokidar.watch( 'newspack-theme/sass/**/*.scss' ).on( 'change', path => { + // Watch all theme directories for SCSS changes + const watchPaths = [ + 'newspack-theme/sass/**/*.scss', + 'newspack-sacha/sass/**/*.scss', + 'newspack-scott/sass/**/*.scss', + 'newspack-nelson/sass/**/*.scss', + 'newspack-katharine/sass/**/*.scss', + 'newspack-joseph/sass/**/*.scss', + 'newspack-joan/sass/**/*.scss', + 'newspack-*/tribe-events/**/*.scss' + ]; + + chokidar.watch( watchPaths ).on( 'change', path => { console.log( `updated: ${ path } ` ); diff --git a/scripts/create-child-releases.js b/scripts/create-child-releases.js index b88046c2d..c1103b2e4 100644 --- a/scripts/create-child-releases.js +++ b/scripts/create-child-releases.js @@ -7,6 +7,7 @@ const fetch = require( 'node-fetch' ); // Required for Node v16. See: https://gi const THEMES = [ 'newspack-theme', + 'newspack-joan', 'newspack-joseph', 'newspack-katharine', 'newspack-nelson',