feat: update grid and typography

Automattic · Nov 4, 2023 · 64c70d7 · 64c70d7
2 parents 39f855d + a0c485f
commit 64c70d7
Show file tree

Hide file tree

Showing 24 changed files with 347 additions and 241 deletions.
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
@@ -15,6 +15,13 @@ html {
 	border-radius: 100%;
 }
 
+// Dropcap
+body .has-drop-cap:not(:focus)::first-letter {
+	font-size: calc(4 * var(--wp--preset--font-size--medium));
+	line-height: var(--wp--custom--line-height--medium);
+	margin: 0 var(--wp--preset--spacing--30);
+	padding: 0;
+}
 
 // Icons
 [class*='newspack-icon'] {
@@ -30,7 +37,7 @@ html {
 
 		&::after {
 			background-color: currentcolor;
-			content: "";
+			content: '';
 			display: block;
 			height: 36px;
 			mask-size: 36px;
@@ -40,13 +47,13 @@ html {
 }
 
 .newspack-icon-menu .wp-block-button__link::after {
-	mask: url("../../src/images/icon-menu.svg") 0 0 no-repeat;
+	mask: url('../../src/images/icon-menu.svg') 0 0 no-repeat;
 }
 
 .newspack-icon-close .wp-block-button__link::after {
-	mask: url("../../src/images/icon-close.svg") 0 0 no-repeat;
+	mask: url('../../src/images/icon-close.svg') 0 0 no-repeat;
 }
 
 .newspack-icon-search .wp-block-button__link::after {
-	mask: url("../../src/images/icon-search.svg") 0 0 no-repeat;
-}
+	mask: url('../../src/images/icon-search.svg') 0 0 no-repeat;
+}
diff --git a/src/scss/_css-variables.scss b/src/scss/_css-variables.scss
@@ -1,20 +1,28 @@
 // Apply the custom CSS variables defined in theme.json.
 .has-x-small-font-size {
-	line-height: var( --wp--custom--line-height--x-small );
+	line-height: var(--wp--custom--line-height--x-small);
 }
 
 .has-small-font-size {
-	line-height: var( --wp--custom--line-height--small );
+	line-height: var(--wp--custom--line-height--small);
 }
 
 .has-large-font-size {
-	line-height: var( --wp--custom--line-height--large );
+	line-height: var(--wp--custom--line-height--large);
 }
 
 .has-x-large-font-size {
-	line-height: var( --wp--custom--line-height--x-large );
+	line-height: var(--wp--custom--line-height--x-large);
 }
 
 .has-xx-large-font-size {
-	line-height: var( --wp--custom--line-height--xx-large );
-}
+	line-height: var(--wp--custom--line-height--xx-large);
+}
+
+.has-xxx-large-font-size {
+	line-height: var(--wp--custom--line-height--xxx-large);
+}
+
+.has-xxxx-large-font-size {
+	line-height: var(--wp--custom--line-height--xxxx-large);
+}
diff --git a/src/scss/_gutenberg-shim.scss b/src/scss/_gutenberg-shim.scss
@@ -42,8 +42,8 @@
  * https://github.com/WordPress/gutenberg/issues/42319
  */
 a {
-	text-decoration-thickness: .0625em !important;
-	text-underline-offset: .15em;
+	text-decoration-thickness: 0.0625em !important;
+	text-underline-offset: 0.15em;
 }
 
 // Can't control the link element when inside of the caption element.
@@ -89,7 +89,7 @@ figcaption a {
 label {
 	color: var(--wp--preset--color--contrast);
 	display: inline-block;
-	margin-bottom: calc( var(--wp--preset--spacing--20) / 2 ) 0;
+	margin-bottom: var(--wp--preset--spacing--20);
 }
 
 input[type='text'],
@@ -109,18 +109,17 @@ input[type='datetime-local'],
 input[type='zip'],
 input[type='color'],
 textarea {
-	border-radius: var( --wp--custom--border--radius );
+	border-radius: var(--wp--custom--border--radius);
 }
 
-
 /*
  * Editor styles
  *
  * Fix spacing between title and editor content.
  * In other themes, this comes from the spacing around the block, but we're using flex and gap.
  */
- .edit-post-visual-editor {
+.edit-post-visual-editor {
 	&__post-title-wrapper {
-		margin-bottom: var(--wp--preset--spacing--40);
+		margin-bottom: var(--wp--preset--spacing--50);
 	}
-}
+}
diff --git a/src/scss/_header.scss b/src/scss/_header.scss
@@ -7,7 +7,7 @@
 	display: none;
 }
 
-@include sass-utils.media( large ) {
+@include sass-utils.media(large) {
 	.desktop-header {
 		display: inherit;
 	}
@@ -19,7 +19,7 @@
 
 // Overlay
 .overlay-mask {
-	background: var( --wp--custom--color--mobile-menu-overlay );
+	background: var(--wp--custom--color--mobile-menu-overlay);
 	content: '';
 	display: none;
 	inset: 0;
@@ -33,8 +33,8 @@
 
 // Mobile sidebar
 .mobile-sidebar {
-	background: var( --wp--custom--color--mobile-menu-background );
-	color: var( --wp--custom--color--mobile-menu-text );
+	background: var(--wp--custom--color--mobile-menu-background);
+	color: var(--wp--custom--color--mobile-menu-text);
 	inset: 0 -100% 0 auto;
 	opacity: 0;
 	overflow: auto;
@@ -62,4 +62,4 @@
 	.mobile-sidebar > * {
 		visibility: visible;
 	}
-}
+}
diff --git a/src/scss/_sass-utils.scss b/src/scss/_sass-utils.scss
@@ -6,8 +6,8 @@
 $xsmall-screen: 360px;
 $small-screen: 600px;
 $medium-screen: 782px;
-$large-screen: 992px;
-$xlarge-screen: 1320px;
+$large-screen: 1280px;
+$xlarge-screen: 1312px;
 
 // Z-indexes
 $zindex-sticky-header: 1000;
@@ -17,36 +17,26 @@ $zindex-screen-reader-text: 100000; /* Above WP toolbar. */
 /*
  * Sass mixins
  */
-@mixin media( $class ) {
+@mixin media($class) {
 	@if $class == x-small {
-		@media only screen and ( min-width: $xsmall-screen ) {
+		@media only screen and (min-width: $xsmall-screen) {
 			@content;
 		}
-	}
-
-	@else if $class == small {
-		@media only screen and ( min-width: $small-screen ) {
+	} @else if $class == small {
+		@media only screen and (min-width: $small-screen) {
 			@content;
 		}
-	}
-
-	@else if $class == medium {
-		@media only screen and ( min-width: $medium-screen ) {
+	} @else if $class == medium {
+		@media only screen and (min-width: $medium-screen) {
 			@content;
 		}
-	}
-
-	@else if $class == large {
-		@media only screen and ( min-width: $large-screen ) {
+	} @else if $class == large {
+		@media only screen and (min-width: $large-screen) {
 			@content;
 		}
-	}
-
-	@else if $class == x-large {
-		@media only screen and ( min-width: $xlarge-screen ) {
+	} @else if $class == x-large {
+		@media only screen and (min-width: $xlarge-screen) {
 			@content;
 		}
 	}
 }
-
-
diff --git a/src/scss/_search-overlay.scss b/src/scss/_search-overlay.scss
@@ -39,14 +39,14 @@
 
 	.search-menu-toggle {
 		position: relative;
-		z-index: calc( sass-utils.$zindex-overlay-menu + 1 );
+		z-index: calc(sass-utils.$zindex-overlay-menu + 1);
 	}
 }
 
 .jetpack-instant-search {
-	@include sass-utils.media( large ) {
+	@include sass-utils.media(large) {
 		.jetpack-instant-search__search-results-wrapper {
 			max-width: 1020px;
 		}
 	}
-}
+}
diff --git a/src/scss/_theme-description.scss b/src/scss/_theme-description.scss
@@ -7,7 +7,7 @@ Description: A forward-looking news theme designed and developed to be highly cu
 Requires at least: 5.8
 Tested up to: 5.9
 Requires PHP: 5.7
-Version: 1.3.0
+Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Template:

diff --git a/src/scss/block-styles/_block-styles.scss b/src/scss/block-styles/_block-styles.scss
@@ -1 +1 @@
-@import url( './_navigation-styles.scss' );
+@import url('./_navigation-styles.scss');
diff --git a/src/scss/block-styles/_navigation-styles.scss b/src/scss/block-styles/_navigation-styles.scss
@@ -20,7 +20,7 @@
 				background: transparent;
 			}
 
-			&:not( .has-text-color) .wp-block-navigation__submenu-container {
+			&:not(.has-text-color) .wp-block-navigation__submenu-container {
 				color: inherit;
 			}
 
@@ -40,13 +40,14 @@
 				}
 
 				.wp-block-navigation__submenu-container,
-				.wp-block-navigation-submenu__toggle[aria-expanded='true']~.wp-block-navigation__submenu-container,
-				&:not(.open-on-click):hover>.wp-block-navigation__submenu-container {
+				.wp-block-navigation-submenu__toggle[aria-expanded='true']
+					~ .wp-block-navigation__submenu-container,
+				&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
 					width: 100%;
 				}
 
-				&.has-child-selected>.wp-block-navigation__submenu-container,
-				&.is-selected>.wp-block-navigation__submenu-container {
+				&.has-child-selected > .wp-block-navigation__submenu-container,
+				&.is-selected > .wp-block-navigation__submenu-container {
 					width: 100% !important;
 				}
 			}
@@ -56,4 +57,4 @@
 			}
 		}
 	}
-}
+}
diff --git a/src/scss/blocks/_blocks.scss b/src/scss/blocks/_blocks.scss
@@ -1,12 +1,12 @@
-
-@import url( './_columns.scss' );
-@import url( './_homepage-posts.scss' );
-@import url( './_navigation.scss' );
-@import url( './_paragraph.scss' );
-@import url( './_pagination.scss' );
-@import url( './_post-author-name.scss' );
-@import url( './_post-comments.scss' );
-@import url( './_post-carousel.scss' );
-@import url( './_post-terms.scss' );
-@import url( './_pullquote.scss' );
-@import url( './_search.scss' );
+@import url('./_columns.scss');
+@import url('./_homepage-posts.scss');
+@import url('./_navigation.scss');
+@import url('./_paragraph.scss');
+@import url('./_pagination.scss');
+@import url('./_post-author-name.scss');
+@import url('./_post-comments.scss');
+@import url('./_post-carousel.scss');
+@import url('./_post-terms.scss');
+@import url('./_pullquote.scss');
+@import url('./_quote.scss');
+@import url('./_search.scss');
diff --git a/src/scss/blocks/_columns.scss b/src/scss/blocks/_columns.scss
@@ -7,8 +7,68 @@
 	.wp-block-column:empty {
 		display: none;
 
-		@include sass-utils.media( medium ) {
+		@include sass-utils.media(medium) {
 			display: inherit;
 		}
 	}
-}
+}
+
+// Newspack Grid
+.newspack-grid {
+	@include sass-utils.media(large) {
+		/* "25 / 50 / 25" layout */
+		.wp-block-column[style*='25%'] {
+			max-width: 300px;
+		}
+	}
+
+	@include sass-utils.media(x-large) {
+		&.wp-block-columns {
+			display: grid;
+			grid-template-columns: repeat(12, 1fr);
+		}
+
+		& > * {
+			grid-column: 1 / -1;
+			margin: 0 !important;
+		}
+
+		.wp-block-column {
+			grid-column: auto / span 6;
+		}
+
+		.wp-block-column:only-child {
+			grid-column-end: span 12;
+		}
+
+		/* Three column layout */
+		.wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child,
+		.wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child ~ .wp-block-column {
+			grid-column-end: span 4;
+		}
+
+		/* "25 / 50 / 25" layout */
+		.wp-block-column[style*='25%'] {
+			grid-column-end: span 3;
+		}
+		.wp-block-column[style*='50%'] {
+			grid-column-end: span 6;
+		}
+
+		/* "15 / 70 / 15" layout */
+		.wp-block-column[style*='15%'] {
+			grid-column-end: span 2;
+		}
+		.wp-block-column[style*='70%'] {
+			grid-column-end: span 8;
+		}
+
+		/* "30 / 70" and "70 / 30" layouts */
+		.wp-block-column[style*='33.33%'] {
+			grid-column-end: span 4;
+		}
+		.wp-block-column[style*='66.66%'] {
+			grid-column-end: span 8;
+		}
+	}
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		@import url( './_navigation-styles.scss' );
		@import url('./_navigation-styles.scss');