wip mobile styles

WordPress · Nov 23, 2023 · bab5ea8 · bab5ea8
1 parent 2b24e84
commit bab5ea8
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 2 deletions.
diff --git 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
@@ -1,5 +1,5 @@
-<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-<div class="wp-block-group">
+<!-- wp:group {"className":"wporg-events__contributors","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group wporg-events__contributors">
 	<!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"},"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}},"layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} -->
 	<div class="wp-block-group"
 		style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">

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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,7 @@
+.wporg-events__contributors {
+	@media (--small-only) {
+		&.is-layout-flex {
+			display: block;
+		}
+	}
+}
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
@@ -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
@@ -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";