From 3f48a00708819dfa5e49453f1c0a41c75e789279 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Mon, 11 Dec 2023 16:06:10 +0900 Subject: [PATCH 1/6] Clean up wporg-google-map.pcss. --- .../postcss/blocks/wporg-google-map.pcss | 50 ++++--------------- 1 file changed, 11 insertions(+), 39 deletions(-) diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss index d653987eab..257fc959ae 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss @@ -32,7 +32,12 @@ grid-template-columns: 60% 1fr 1fr; } + &:first-child { + border-radius: 2px 2px 0 0; + } + &:last-child { + border-radius: 0 0 2px 2px; border-bottom: 1px solid var(--wp--preset--color--light-grey-1); } @@ -70,31 +75,19 @@ @media (--small) { display: inline-flex; - justify-content: right; - } - - @media (--medium) { - .wporg-google-map__date { - display: block; - } - } - - @media (--huge) { + justify-content: flex-end; white-space: nowrap; - - .wporg-google-map__date { - display: inline-block; - } + align-items: center; } - } - .wporg-google-map__date { - position: relative; + @media (--wide) { + display: flex; + } } .wporg-marker-list-item__location::after, .wporg-google-map__date::after { - content: ''; + content: ""; margin-top: -1px; /* vertical-middle doesn't subtract the size of the element */ margin-left: 10px; margin-right: 10px; @@ -116,27 +109,6 @@ display: none; } } - - @media (--wide) { - .wporg-marker-list-item__date-time { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; - } - - .wporg-google-map__date:after { - display: inline-block; - } - } - - &:first-child { - border-radius: 2px 2px 0 0; - } - - &:last-child { - border-radius: 0 0 2px 2px; - } } .wporg-map-marker__title { From 17700ceacef3d6d7148277d64ea7011dea674fcb Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Mon, 11 Dec 2023 22:50:23 +0900 Subject: [PATCH 2/6] Break out the css that isn't related to the map to event-list.pcss. --- .../postcss/blocks/event-list.pcss | 106 ++++++++++++++++ .../postcss/blocks/wporg-google-map.pcss | 113 ------------------ .../wporg-events-2023/postcss/style.pcss | 1 + 3 files changed, 107 insertions(+), 113 deletions(-) create mode 100644 public_html/wp-content/themes/wporg-events-2023/postcss/blocks/event-list.pcss diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/event-list.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/event-list.pcss new file mode 100644 index 0000000000..42aba9e7c9 --- /dev/null +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/event-list.pcss @@ -0,0 +1,106 @@ +.wporg-marker-list__container { + padding-left: 0; + + .wporg-marker-list-item { + border: 1px solid var(--wp--preset--color--light-grey-1); + border-bottom: none; + padding: var(--wp--preset--spacing--20); + list-style: none; + font-size: var(--wp--preset--font-size--small); + + &:first-child { + border-radius: 2px 2px 0 0; + } + + &:last-child { + border-radius: 0 0 2px 2px; + border-bottom: 1px solid var(--wp--preset--color--light-grey-1); + } + + @media (--large) { + display: grid; + align-items: start; + gap: var(--wp--preset--spacing--20); + grid-template-columns: 45% 1fr 2fr; + } + + @media (--xlarge) { + font-size: var(--wp--preset--font-size--normal); + } + + @media (--wide) { + grid-template-columns: 45% 1fr 1.5fr; + } + + @media (--huge) { + grid-template-columns: 55% 1fr 1fr; + } + + @media (--xhuge) { + grid-template-columns: 60% 1fr 1fr; + } + + .wporg-marker-list-item__title { + margin: 0; + font-family: var(--wp--preset--font-family--inter); + font-size: var(--wp--preset--font-size--small); + line-height: var(--wp--custom--body--typography--line-height); + --wp--preset--spacing--30: 0; + + &.a { + text-decoration: none; + } + + @media (--xlarge) { + font-size: var(--wp--preset--font-size--normal); + } + } + + .wporg-marker-list-item__location { + + @media (--medium-small) { + margin-top: 2px; + margin-bottom: -2px; + } + + @media (--small) { + display: inline; + } + } + + .wporg-marker-list-item__date-time { + + @media (--small) { + display: inline-flex; + justify-content: flex-end; + white-space: nowrap; + align-items: center; + } + + @media (--wide) { + display: flex; + } + } + + .wporg-marker-list-item__location::after, + .wporg-google-map__date::after { + content: ""; + margin-top: -1px; /* vertical-middle doesn't subtract the size of the element */ + margin-left: 10px; + margin-right: 10px; + height: 3px; + width: 3px; + border-radius: 3px; + background: var(--wp--preset--color--charcoal-5); + display: inline-block; + vertical-align: middle; + } + + .wporg-marker-list-item__location::after { + + @media (--small-only), (--large) { + display: none; + } + } + } +} diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss index 257fc959ae..471619c4e7 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss @@ -1,116 +1,3 @@ -.wporg-marker-list__container { - padding-left: 0; -} - -.wporg-marker-list-item { - border: 1px solid var(--wp--preset--color--light-grey-1); - border-bottom: none; - padding: var(--wp--preset--spacing--20); - list-style: none; - font-size: var(--wp--preset--font-size--small); - - @media (--large) { - display: grid; - align-items: start; - gap: var(--wp--preset--spacing--20); - grid-template-columns: 45% 1fr 2fr; - } - - @media (--xlarge) { - font-size: var(--wp--preset--font-size--normal); - } - - @media (--wide) { - grid-template-columns: 45% 1fr 1.5fr; - } - - @media (--huge) { - grid-template-columns: 55% 1fr 1fr; - } - - @media (--xhuge) { - grid-template-columns: 60% 1fr 1fr; - } - - &:first-child { - border-radius: 2px 2px 0 0; - } - - &:last-child { - border-radius: 0 0 2px 2px; - border-bottom: 1px solid var(--wp--preset--color--light-grey-1); - } - - .wporg-marker-list-item__title { - margin: 0; - font-family: var(--wp--preset--font-family--inter); - font-size: var(--wp--preset--font-size--small); - line-height: var(--wp--custom--body--typography--line-height); - --wp--preset--spacing--30: 0; - - @media (--xlarge) { - font-size: var(--wp--preset--font-size--normal); - } - - } - - .wporg-marker-list-item__title a { - text-decoration: none; - } - - - .wporg-marker-list-item__location { - - @media (--medium-small) { - margin-top: 2px; - margin-bottom: -2px; - } - - @media (--small) { - display: inline; - } - } - - .wporg-marker-list-item__date-time { - - @media (--small) { - display: inline-flex; - justify-content: flex-end; - white-space: nowrap; - align-items: center; - } - - @media (--wide) { - display: flex; - } - } - - .wporg-marker-list-item__location::after, - .wporg-google-map__date::after { - content: ""; - margin-top: -1px; /* vertical-middle doesn't subtract the size of the element */ - margin-left: 10px; - margin-right: 10px; - height: 3px; - width: 3px; - border-radius: 3px; - background: var(--wp--preset--color--charcoal-5); - display: inline-block; - vertical-align: middle; - } - - .wporg-marker-list-item__location::after { - - @media (--small-only) { - display: none; - } - - @media (--large) { - display: none; - } - } -} - .wporg-map-marker__title { font-family: var(--wp--preset--font-family--inter); font-size: var(--wp--preset--font-size--normal); diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss index 8adb90afd5..b118199354 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/style.pcss @@ -19,3 +19,4 @@ /* Blocks */ @import "blocks/wporg-google-map.pcss"; @import "blocks/wporg-query-filter.pcss"; +@import "blocks/event-list.pcss"; From b1c2ee1ccd0face6902d728008868edf705a9697 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Mon, 11 Dec 2023 23:41:00 +0900 Subject: [PATCH 3/6] Clean up contributors.pcss. --- .../postcss/page/front-page/contributors.pcss | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/contributors.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/contributors.pcss index eb78641d08..2effb3e45c 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/contributors.pcss +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/contributors.pcss @@ -1,22 +1,25 @@ .wporg-events__contributors { - .is-style-links-list li:first-child { - border-top: none; - } + .is-style-links-list { + li { + border-color: var(--wp--preset--color--light-grey-1); - .is-style-links-list li:last-child { - border-bottom: none; - } + a { + color: var(--wp--preset--color--charcoal-0); + } - .is-style-links-list li { - border-color: var(--wp--preset--color--light-grey-1); + &:first-child { + border-top: none; + } - a { - color: var(--wp--preset--color--charcoal-0); + &:last-child { + border-bottom: none; + } } } - @media screen and (min-width: 1170px) { - .wporg-events__contributors__image { + .wporg-events__contributors__image { + + @media screen and (min-width: 1170px) { min-width: 565px; align-self: flex-start; } From 9f3d5135e3e82592be23130875f9348575c8feec Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Tue, 12 Dec 2023 00:13:31 +0900 Subject: [PATCH 4/6] Clean up cover.pcss. --- .../postcss/page/front-page/cover.pcss | 75 ++++++++++--------- 1 file changed, 40 insertions(+), 35 deletions(-) diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/cover.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/cover.pcss index 034d959e18..210a626f0b 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/cover.pcss +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/cover.pcss @@ -1,68 +1,73 @@ .wporg-events__cover { - .wp-block-columns .wp-block-column:first-child { + @media (--large) { padding-left: var(--wp--preset--spacing--edge-space); padding-right: var(--wp--preset--spacing--edge-space); } - @media (--medium) { - .wp-block-columns { - flex-wrap: wrap !important; + .wp-block-columns { - .wp-block-column { - flex-grow: 1 !important; - } + @media (--medium) { + flex-wrap: wrap !important; } - } - @media (--large) { - padding-left: var(--wp--preset--spacing--edge-space); - padding-right: var(--wp--preset--spacing--edge-space); - - .wp-block-columns { + @media (--large) { flex-wrap: nowrap !important; } - .wp-block-columns .wp-block-column:first-child { - padding-left: 0; - padding-right: 0; - } + .wp-block-column { + &:first-child { + padding-left: var(--wp--preset--spacing--edge-space); + padding-right: var(--wp--preset--spacing--edge-space); - .wp-block-columns .wp-block-column:first-child > p { - max-width: 460px; - } - } + @media (--large) { + padding-left: 0; + padding-right: 0; - .wp-block-heading em { - display: block; - } + > p { + max-width: 460px; + } + } - @media (--huge) { - .wp-block-columns .wp-block-column:first-child { - flex-basis: 33% !important; - } + @media (--huge) { + flex-basis: 33% !important; + } + } + + &:last-child { + + @media (--huge) { + flex-basis: 66.665% !important; + } + } - .wp-block-columns .wp-block-column:last-child { - flex-basis: 66.665% !important; + @media (--medium) { + flex-grow: 1 !important; + } + + .wp-block-heading em { + display: block; + } } } - & .wp-block-wporg-google-map { + + .wp-block-wporg-google-map { height: 430px; @media (--small-only) { height: 246px; } - & .wporg-google-map__container { + .wporg-google-map__container { height: 100%; } } } +.wporg-events__stats .wp-block-columns { -@media (--medium-small) { - .wporg-events__stats .wp-block-columns { + @media (--medium-small) { gap: var(--wp--preset--spacing--10); } -} \ No newline at end of file +} From 50b839226a9e7c4511e424c7f2eda4845c9edcf2 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Tue, 12 Dec 2023 00:13:49 +0900 Subject: [PATCH 5/6] Clean up misc.pcss. --- .../wporg-events-2023/postcss/page/misc.pcss | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/page/misc.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/page/misc.pcss index 08cb580de9..d4a21a0680 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/page/misc.pcss +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/page/misc.pcss @@ -3,8 +3,9 @@ text-align: center; } -@media (--medium-small) { - .page-organize-content-image { +.page-organize-content-image { + + @media (--medium-small) { display: none; } } @@ -14,18 +15,18 @@ body .is-layout-flex.page-upcoming-title-past-wrapper { } .wporg-events__filters__no-count .wporg-events__filters__search { - flex: 1; + flex: 1; - form { - flex: 1; - min-width: 240px; + form { + flex: 1; + min-width: 240px; - @media (min-width: 663px){ - max-width: 240px; - } - } + @media (min-width: 663px) { + max-width: 240px; + } + } } .wporg-events__search .wporg-events__filters { - margin-top: 10px !important; -} \ No newline at end of file + margin-top: 10px !important; +} From 20e6a3de35c9a221cd29bb4d902c7ae700b1cd6a Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Tue, 12 Dec 2023 00:14:13 +0900 Subject: [PATCH 6/6] Clean up the rest. --- .../wporg-events-2023/postcss/base/layout.pcss | 3 ++- .../postcss/blocks/wporg-query-filter.pcss | 15 ++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss index 417e37ef18..d95ce0e325 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/base/layout.pcss @@ -5,7 +5,8 @@ body { .wp-site-blocks .is-layout-constrained, .wp-block-post-content-is-layout-constrained { & .alignwide { + /* See note about about the `global` sizes. */ - max-width: var( --wp--custom--layout--wide-size ) !important; + max-width: var(--wp--custom--layout--wide-size) !important; } } diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-query-filter.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-query-filter.pcss index 3f246ac8a2..61a867ca3a 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-query-filter.pcss +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-query-filter.pcss @@ -1,13 +1,14 @@ /* Until we move to multi-select we should show the count so users know there is a filter applied. */ -.wporg-query-filter__toggle.has-no-filter-applied span, +.wporg-query-filter__toggle.has-no-filter-applied span, .wporg-query-filter__toggle.is-single-select span { - display: inline-block; + display: inline-block; } -@media(max-width: 889px) { - .wporg-query-filters { - max-width:100%; - overflow-x: scroll - } +.wporg-query-filters { + + @media (max-width: 889px) { + max-width: 100%; + overflow-x: scroll; + } }