diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-dark.svg b/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-dark.svg new file mode 100644 index 000000000..ddf60f4f7 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-dark.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-light.svg b/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-light.svg new file mode 100644 index 000000000..b1dec91a2 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/block-calendar-light.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-dark.svg b/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-dark.svg new file mode 100644 index 000000000..569d1d455 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-light.svg b/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-light.svg new file mode 100644 index 000000000..9be4135be --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/list-type-bullet-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/page-online-workshops-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/page-online-workshops-content.php new file mode 100644 index 000000000..3a673dfe9 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/page-online-workshops-content.php @@ -0,0 +1,86 @@ + + + +
+ + +

+ + + +
+ + +
+ + + +
+ + +
+ + +
+ + + + + +
+ + +
+ + +

+ the Meetup.com group. Each event links to the RSVP page. Events are shown in your local time. You must agree to the Code of Conduct in order to participate in online workshops.', 'wporg-learn' ), + esc_url( 'https://www.meetup.com/learn-wordpress-online-workshops/' ), + esc_url( 'https://learn.wordpress.org/online-workshops/code-of-conduct/' ), + ) + ); ?> +

+ + +
+ + + +
+ + +

· ·

+ + +
+ + +
+ + + +
+
+
+

+ click here to open a private and secure WordPress site that only you can access', 'wporg-learn' ), + esc_url( 'https://developer.wordpress.org/playground/demo/?step=playground&theme=twentytwentythree' ), + ) + ); ?> +

+
+
+ diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_components.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_components.scss new file mode 100644 index 000000000..a2dd5f3c2 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_components.scss @@ -0,0 +1,12 @@ +.components-modal__frame { + box-shadow: unset; + border-radius: unset; +} + +.components-modal__content { + padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30); +} + +.components-modal__header { + padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0; +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss new file mode 100644 index 000000000..976448eaa --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_wporg-meeting-calendar.scss @@ -0,0 +1,228 @@ +.wporg-block-meeting-calendar { + .wporg-meeting-calendar__header { + flex-direction: row; + padding: unset; + + h2 { + margin: unset; + text-align: unset; + margin-left: var(--wp--preset--spacing--20); + font-size: var(--wp--preset--font-size--heading-4); + } + } + + // Calendar/List toggle + .components-button-group { + display: flex; + flex-direction: row-reverse; + + .components-button { + background-color: unset; + color: var(--wp--preset--color--white); + width: 40px; + height: 40px; + padding: unset; + position: relative; + border-radius: 2px; + margin-left: unset; + + &:not(:focus) { + box-shadow: unset; + } + + &::before { + content: ""; + position: absolute; + display: block; + width: 100%; + height: 100%; + border-radius: 2px; + background-color: var(--wp--preset--color--white); + background-repeat: no-repeat; + background-position: center; + } + + &:disabled { + display: none; + } + + &.is-primary::before { + background-color: var(--wp--preset--color--charcoal-1); + } + + // Month + &:first-child { + &::before { + background-image: url(../../assets/block-calendar-dark.svg); + } + + &.is-primary::before { + background-image: url(../../assets/block-calendar-light.svg); + } + } + + // List + &:last-child { + &::before { + background-image: url(../../assets/list-type-bullet-dark.svg); + } + + &.is-primary::before { + background-image: url(../../assets/list-type-bullet-light.svg); + } + } + } + } + + .wporg-meeting-calendar__filter { + flex-wrap: wrap; + background: unset; + border: unset; + padding-left: unset; + + .wporg-meeting-calendar__filter-feed { + display: none; + } + + .components-base-control__field { + margin-bottom: unset; + } + + .components-button.is-link { + text-decoration: none; + } + } + + table th, + .wporg-meeting-calendar__cell strong { + font-weight: 400; + font-size: var(--wp--preset--font-size--normal); + } + + table th, + .wporg-meeting-calendar__cell { + border: 1px solid var(--wp--custom--color--border); + } + + .wporg-meeting-calendar__cell { + padding: var(--wp--preset--spacing--10); + + > strong { + padding: unset; + margin: unset; + } + + &:first-child, + &:last-child { + background-color: var(--wp--preset--color--light-grey-2); + } + + &.is-today { + background-color: var(--wp--preset--color--acid-green-3); + } + } + + .wporg-meeting-calendar__cell-event { + background-color: var(--wp--preset--color--blueberry-4) !important; + color: var(--wp--custom--link--color--text) !important; + padding: 8px; + border: 1px solid var(--wp--custom--link--color--text); + font-size: var(--wp--preset--font-size--small); + line-height: var(--wp--custom--body--small--typography--line-height); + margin: var(--wp--preset--spacing--10) 0 0; + + &:focus { + box-shadow: none !important; + } + + .wporg-meeting-calendar__cell-event-time { + font-weight: 700; + } + + .wporg-meeting-calendar__cell-event-title { + font-weight: 400; + } + } + + .wporg-meeting-calendar__list-event-team { + background-color: var(--wp--preset--color--acid-green-1); + color: var(--wp--preset--color--charcoal-1) !important; + } + + .wporg-meeting-calendar__list-event-copy { + font-weight: 400; + } + + .wporg-meeting-calendar__list { + padding: unset; + + .wporg-meeting-calendar__list-event { + flex-direction: column-reverse; + margin-bottom: unset; + border-radius: unset; + + + .wporg-meeting-calendar__list-event { + margin-top: unset; + border-top: unset; + } + + &:first-of-type { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + + &:last-of-type { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + + // Time and timezone + > div:first-child { + display: flex; + gap: 0.5em; + font-size: var(--wp--preset--font-size--small); + color: var(--wp--preset--color--charcoal-4); + padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20); + } + } + + .wporg-meeting-calendar__list-event-tz { + font-size: unset; + color: unset; + } + + .wporg-meeting-calendar__list-event-team { + margin-left: unset; + margin-bottom: var(--wp--preset--spacing--20); + + @media screen and (min-width: 768px) { + margin-bottom: unset; + } + } + + .wporg-meeting-calendar__list-event-details { + padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0; + + > div { + flex: 1; + align-items: baseline; + gap: var(--wp--preset--spacing--20); + font-size: var(--wp--preset--font-size--normal); + + @media screen and (min-width: 768px) { + display: flex; + } + } + + .wporg-meeting-calendar__list-event-title { + font-size: inherit; + font-weight: 400; + flex: 1; + + > a { + font-size: inherit; + } + } + } + } +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss index d265da04b..6a7e83b7b 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss @@ -3,4 +3,11 @@ * templates or theme.json settings. */ +@import "components"; @import "sensei"; +@import "wporg-meeting-calendar"; + +:root { + --wp-components-color-accent: var(--wp--preset--color--blueberry-1); + --wp-components-color-accent-darker-10: var(--wp--preset--color--deep-blueberry); +} diff --git a/wp-content/themes/pub/wporg-learn-2024/style.css b/wp-content/themes/pub/wporg-learn-2024/style.css index 08667329d..c84877bea 100644 --- a/wp-content/themes/pub/wporg-learn-2024/style.css +++ b/wp-content/themes/pub/wporg-learn-2024/style.css @@ -4,7 +4,7 @@ * Author: WordPress.org * Author URI: http://wordpress.org/ * Description: A theme for learn.wordpress.org, built in 2024. - * Version: 1.0.0 + * Version: 1.0.1 * License: GNU General Public License v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html * Text Domain: wporg-learn diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/page-online-workshops.html b/wp-content/themes/pub/wporg-learn-2024/templates/page-online-workshops.html new file mode 100644 index 000000000..2093eef25 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/templates/page-online-workshops.html @@ -0,0 +1,19 @@ + + + +
+ + +
+ + + + + +
+ + +
+ + +