From bab5ea811fbe8bf7620dc83dc83df7e6eea631a6 Mon Sep 17 00:00:00 2001 From: Ian Dunn Date: Thu, 23 Nov 2023 13:11:52 -0800 Subject: [PATCH] wip mobile styles --- .../themes/wporg-events-2023/package.json | 1 + .../parts/front-page/contributors.html | 4 +-- .../wporg-events-2023/postcss.config.js | 2 ++ .../postcss/base/breakpoints.pcss | 31 +++++++++++++++++++ .../postcss/blocks/wporg-google-map.pcss | 4 +++ .../postcss/page/front-page/contributors.pcss | 7 +++++ .../postcss/page/front-page/cover.pcss | 12 +++++++ .../wporg-events-2023/postcss/style.pcss | 7 +++++ 8 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss create mode 100644 public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/contributors.pcss diff --git a/public_html/wp-content/themes/wporg-events-2023/package.json b/public_html/wp-content/themes/wporg-events-2023/package.json index 390033b539..a5b1ca5f63 100644 --- a/public_html/wp-content/themes/wporg-events-2023/package.json +++ b/public_html/wp-content/themes/wporg-events-2023/package.json @@ -7,6 +7,7 @@ "cssnano": "^6.0.1", "postcss": "^8.4.31", "postcss-cli": "^10.1.0", + "postcss-custom-media": "^10.0.2", "postcss-import": "^15.1.0", "postcss-preset-env": "^9.3.0" }, diff --git a/public_html/wp-content/themes/wporg-events-2023/parts/front-page/contributors.html b/public_html/wp-content/themes/wporg-events-2023/parts/front-page/contributors.html index e41378a240..19c02d5c10 100644 --- a/public_html/wp-content/themes/wporg-events-2023/parts/front-page/contributors.html +++ b/public_html/wp-content/themes/wporg-events-2023/parts/front-page/contributors.html @@ -1,5 +1,5 @@ - -
+ +
diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss.config.js b/public_html/wp-content/themes/wporg-events-2023/postcss.config.js index 77f48990b5..f1dc45c70a 100644 --- a/public_html/wp-content/themes/wporg-events-2023/postcss.config.js +++ b/public_html/wp-content/themes/wporg-events-2023/postcss.config.js @@ -4,6 +4,8 @@ const plugins = [ // This has to run before any other plugins, to concatenate all files into one. require( 'postcss-import' ), + require( 'postcss-custom-media' ), + // Enable transforms for stage 2+, explictly enable nesting (stage 1). require( 'postcss-preset-env' )( { stage: 2, diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss new file mode 100644 index 0000000000..04a62b99c4 --- /dev/null +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/base/breakpoints.pcss @@ -0,0 +1,31 @@ +/* + * Adapted from upstream SASS files. These assume a desktop-first approach, since that lends itself better to the Site Editor. + */ + + +/* + * Gutenberg + * @link https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss + */ +@custom-media --xhuge (min-width: 1920px); +@custom-media --huge (min-width: 1440px); +@custom-media --wide (min-width: 1280px); +@custom-media --xlarge (min-width: 1080px); +@custom-media --large (min-width: 960px); /* admin sidebar auto folds */ +@custom-media --medium (min-width: 782px); /* adminbar goes big */ +@custom-media --small (min-width: 600px); +@custom-media --mobile (min-width: 480px); +@custom-media --zoomed-in (min-width: 280px); + + +/* + * wporg-parent-2021 + * @link https://github.com/WordPress/wporg-parent-2021/blob/trunk/source/wp-content/themes/wporg-parent-2021/sass/base/_breakpoints.scss + */ +@custom-media --small-only (max-width: 559px); +@custom-media --giant (min-width: 2000px); + + +/* + * Custom + */ 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 4c9c5404fa..38f6b7c7f1 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 @@ -10,6 +10,10 @@ border-bottom: none; padding: 20px; + @media (--small-only) { + display: block; + } + &:last-child { border-bottom: 1px solid var(--wp--preset--color--light-grey-1); } 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 new file mode 100644 index 0000000000..733b226743 --- /dev/null +++ b/public_html/wp-content/themes/wporg-events-2023/postcss/page/front-page/contributors.pcss @@ -0,0 +1,7 @@ +.wporg-events__contributors { + @media (--small-only) { + &.is-layout-flex { + display: block; + } + } +} \ No newline at end of file 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 8638abdf11..4524453169 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 @@ -3,11 +3,23 @@ max-height: 80vh; gap: 0; + @media (--small-only) { + height: unset; + + &.is-layout-flex { + display: block; + } + } + & .wporg-events__cover-stats { gap: 0; } & .wp-block-wporg-google-map .wporg-google-map__container { height: 430px; + + @media (--small-only) { + height: 170px; + } } } 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 b7ead71bca..685c7b602e 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 @@ -6,6 +6,13 @@ * Template: wporg-parent-2021 */ +/* Base */ +@import "base/breakpoints.pcss"; @import "base/layout.pcss"; + +/* Pages */ @import "page/front-page/cover.pcss"; +@import "page/front-page/contributors.pcss"; + +/* Blocks */ @import "blocks/wporg-google-map.pcss";