浏览代码

Intergalactic 2: Made some tweaks to the theme's Gutenberg support, including:
* Reorganized some CSS to remove redundant styles; removed empty selectors
* Added an overflow to the site content to prevent side scrolling with wide blocks
* Fixed some wide alignment weirdness with images
* Made align full and align wide styles more general, so they'd be applied to all classes; made sure text-based aligned blocks weren't quite as wide.
* Added bottom margin to Media & Text block.
* Made the post title 100% of the width
* Reset selectors back to default styles
* Updated JavaScript that adds wide image class, to skip any images inside of GB blocks.

Laurel Fulford 6 年之前
父节点
当前提交
027a2c5fff
共有 3 个文件被更改,包括 261 次插入315 次删除
  1. 90 100
      intergalactic-2/blocks.css
  2. 165 215
      intergalactic-2/editor-blocks.css
  3. 6 0
      intergalactic-2/js/intergalactic-2.js

+ 90 - 100
intergalactic-2/blocks.css

@@ -18,36 +18,31 @@ Description: Used to style Gutenberg Blocks.
 1.0 General Block Styles
 --------------------------------------------------------------*/
 
-/* Captions */
+/* Alignments */
 
-[class^="wp-block-"] figcaption {
-	font-size: .778em;
+.site-content {
+	overflow-x: hidden;
 }
 
-/*--------------------------------------------------------------
-2.0 Blocks - Common Blocks
---------------------------------------------------------------*/
-
-/* Paragraph */
-
-p.has-drop-cap:not(:focus)::first-letter {
-	font-size: 124px;
-}
+/* Wide Width */
 
-/* Images */
+@media (min-width: 1024px) {
+	.alignwide {
+		width: auto;
+		margin-left: -20%;
+		margin-right: -20%;
+		position: relative;
+	}
 
-.wp-block-cover,
-.wp-block-cover.alignleft,
-.wp-block-cover.alignright,
-.wp-block-cover.aligncenter {
-	display: flex;
+	.wp-block-embed.is-type-video.alignwide iframe {
+		width: 100% !important;
+		height: 100% !important;
+	}
 }
 
 /* Full Width */
-figure.alignfull,
-.wp-block-cover.alignfull,
-.wp-block-gallery.alignfull,
-.wp-block-embed.is-type-video.alignfull {
+
+.alignfull {
 	width: 100vw;
 	max-width: 100vw;
 	margin-left: 0;
@@ -57,49 +52,65 @@ figure.alignfull,
 	transform: translateX( -50% );
 }
 
+/* Make non image-based blocks a bit narrower, so they don't get cut off. */
+
+.wp-block-columns.alignfull,
+.wp-block-audio.alignfull,
+.wp-block-table.alignfull,
+.wp-block-latest-comments.alignfull,
+.wp-block-categories.alignfull,
+.wp-block-latest-posts.alignfull {
+	max-width: 96vw;
+	transform: translateX( -50% );
+	width: 96vw;
+}
+
 .wp-block-embed.is-type-video.alignfull iframe {
 	width: 100% !important;
 	height: 100% !important;
 }
 
-.rtl figure.alignfull,
-.rtl .wp-block-cover.alignfull,
-.rtl .wp-block-gallery.alignfull,
-.rtl .wp-block-embed.is-type-video.alignfull {
+.wp-block-embed.is-type-video iframe {
+	max-height: 100%;
+}
+
+.rtl .alignfull {
 	left: auto;
 	right: 50%;
 	transform: translateX(50%);
 }
 
-/* Wide Width */
+/* Captions */
 
-@media (min-width: 1024px) {
-	figure.alignwide,
-	.wp-block-cover.alignwide,
-	.wp-block-gallery.alignwide,
-	.wp-block-embed.is-type-video.alignwide {
-		width: 120%;
-		max-width: 120%;
-		margin-left: -10%;
-		margin-right: -10%;
-		position: relative;
-	}
+[class^="wp-block-"] figcaption {
+	font-size: .778em;
+}
 
-	.wp-block-embed.is-type-video.alignwide iframe {
-		width: 100% !important;
-		height: 100% !important;
-	}
+/*--------------------------------------------------------------
+2.0 Blocks - Common Blocks
+--------------------------------------------------------------*/
+
+/* Paragraph */
+
+p.has-drop-cap:not(:focus)::first-letter {
+	font-size: 124px;
+}
+
+/* Image */
+
+.wp-block-image.alignwide {
+	max-width: 1000%;
 }
 
 /* Gallery */
 
 .wp-block-gallery {
 	margin-bottom: 1.5em;
-	margin-left: auto;
 }
 
-.rtl .wp-block-gallery:not(.alignfull):not(.alignwide) {
-	margin-right: auto;
+.wp-block-gallery:not(.alignwide):not(.alignfull) {
+	margin-left: 0;
+	margin-right: 0;
 }
 
 .wp-block-gallery img.size-big,
@@ -114,11 +125,6 @@ figure.alignfull,
 	margin-bottom: 1.5em;
 }
 
-.wp-block-quote,
-.wp-block-quote.is-large p,
-.wp-block-quote.is-style-large p {
-}
-
 .wp-block-quote.alignleft {
 	margin-right: 1.5em;
 }
@@ -127,16 +133,6 @@ figure.alignfull,
 	margin-left: 1.5em;
 }
 
-.rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
-.rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
-}
-
-.wp-block-quote cite {
-}
-
-.wp-block-quote cite:before {
-}
-
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer,
 .wp-block-quote.is-style-large cite,
@@ -144,10 +140,6 @@ figure.alignfull,
 	font-size: 80%;
 }
 
-.wp-block-quote.is-large,
-.wp-block-quote.is-style-large {
-}
-
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large,
 .wp-block-quote.is-large p,
@@ -166,11 +158,24 @@ figure.alignfull,
 
 /* Audio */
 
+.wp-block-audio {
+	margin-bottom: 1.5em;
+}
+
 .wp-block-audio audio {
 	display: block;
 	width: 100%;
 }
 
+/* Cover */
+
+.wp-block-cover,
+.wp-block-cover.alignleft,
+.wp-block-cover.alignright,
+.wp-block-cover.aligncenter {
+	display: flex;
+}
+
 /* File */
 
 .wp-block-file a.wp-block-file__button,
@@ -229,25 +234,22 @@ figure.alignfull,
 /* Code */
 
 .wp-block-code {
+	background: #eee;
 	font-family: 'Courier 10 Pitch', Courier, monospace;
 	font-size: 15px;
 	line-height: 1.6;
-
-	overflow: auto;
-
 	max-width: 100%;
 	margin-bottom: 1.6em;
+	overflow: auto;
 	padding: 1.6em;
-
-	background: #eee;
 }
 
 /* Pullquote */
 
 .wp-block-pullquote {
+	border: 0;
 	margin: 0;
 	padding: 0;
-	border: 0;
 }
 
 .wp-block-pullquote blockquote {
@@ -278,35 +280,20 @@ figure.alignfull,
 	padding-right: 1.5em;
 }
 
-.rtl .wp-block-pullquote {
-}
-
 .wp-block-pullquote p {
 	margin: 0;
 }
 
 /* Table */
 
-.wp-block-table,
-.wp-block-table th,
-.wp-block-table td {
-}
-
-.wp-block-table {
-}
-
-.wp-block-table th,
-.wp-block-table td {
-}
-
-.wp-block-table th {
-}
-
-.wp-block-table td {
+@media (min-width: 964px) {
+	.wp-block-table.alignwide {
+		width: 924px;
+	}
 }
 
-.rtl .wp-block-table th,
-.rtl .wp-block-table td {
+.wp-block-table.alignfull {
+	width: 96vw;
 }
 
 /*--------------------------------------------------------------
@@ -331,11 +318,6 @@ figure.alignfull,
 	text-shadow: none;
 }
 
-.wp-block-button .wp-block-button__link:active,
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus {
-}
-
 .wp-block-button__link:not(.has-background) {
 	background: transparent;
 	border: 2px solid #222;
@@ -377,10 +359,18 @@ hr.wp-block-separator {
 	max-width: 100%;
 }
 
-.wp-block-separator.is-style-wide {
-	max-width: 120%;
-	margin-left: -10%;
-	margin-right: -10%;
+.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	max-width: 100px;
+}
+
+/* Media & Text */
+
+.wp-block-media-text {
+	margin-bottom: 1.5em;
+}
+
+.wp-block-media-text *:last-child {
+	margin-bottom: 0;
 }
 
 /*--------------------------------------------------------------

+ 165 - 215
intergalactic-2/editor-blocks.css

@@ -46,21 +46,45 @@
 	margin-right: auto;
 }
 
+.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
+	float: left;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright {
+	float: right;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
+	margin: .75em 1.5em .75em 0;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
+	margin: .75em 0 .75em 1.5em;
+}
+
 /* Title */
 
 .editor-post-title__block .editor-post-title__input {
 	font-family: Lato, Helvetica, sans-serif;
 	font-weight: bold;
-	clear: both;
-	font-size: 42px;
-	margin: .375em 0;
+	font-size: 30px;
+	text-align: center;
 	text-transform: uppercase;
 }
 
-@media screen and (min-width: 784px) {
+.wp-block.editor-post-title__block {
+	max-width: 100%;
+}
+
+@media (min-width: 983px) {
+	.editor-post-title__block .editor-post-title__input {
+		font-size: 42px;
+	}
+}
+
+@media screen and (min-width: 1240px) {
 	.editor-post-title__block .editor-post-title__input {
 		font-size: 80px;
-		margin: .1875em 0;
 	}
 }
 
@@ -78,60 +102,66 @@
 	text-transform: uppercase;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce h1,
 .edit-post-visual-editor h1 {
 	font-size: 42px;
-	margin: .375em 0;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce  h2,
 .edit-post-visual-editor h2 {
 	font-size: 30px;
 	line-height: 1.4;
-
-	margin: .375em 0;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce h3,
 .edit-post-visual-editor h3 {
 	font-size: 24px;
 	line-height: 1.3;
-
 	text-transform: none;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce h4,
 .edit-post-visual-editor h4 {
 	font-size: 20px;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce h5,
 .edit-post-visual-editor h5 {
 	font-size: 18px;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce h6,
 .edit-post-visual-editor h6 {
 	font-size: 14px;
 }
 
-@media screen and (min-width: 784px) {
+@media screen and (min-width: 1240px) {
+	.wp-block-freeform.block-library-rich-text__tinymce h1,
 	.edit-post-visual-editor h1 {
 		font-size: 80px;
-		margin: .1875em 0;
 	}
 
+	.wp-block-freeform.block-library-rich-text__tinymce h2,
 	.edit-post-visual-editor h2 {
 		font-size: 42px;
-		margin: .1875em 0;
 	}
 
+	.wp-block-freeform.block-library-rich-text__tinymce h3,
 	.edit-post-visual-editor h3 {
 		font-size: 30px;
 	}
 
+	.wp-block-freeform.block-library-rich-text__tinymce h4,
 	.edit-post-visual-editor h4 {
 		font-size: 20px;
 	}
 
+	.wp-block-freeform.block-library-rich-text__tinymce h5,
 	.edit-post-visual-editor h5 {
 		font-size: 18px;
 	}
 
+	.wp-block-freeform.block-library-rich-text__tinymce h6,
 	.edit-post-visual-editor h6 {
 		font-size: 14px;
 	}
@@ -169,9 +199,11 @@
 .editor-block-list__block a,
 .wp-block-freeform.block-library-rich-text__tinymce a {
 	color: #81699b;
+	font-weight: bold;
 	-webkit-transition: .3s all ease-in-out;
 	   -moz-transition: .3s all ease-in-out;
 			transition: .3s all ease-in-out;
+	text-decoration: none;
 }
 
 .edit-post-visual-editor a:hover,
@@ -215,6 +247,11 @@
 	list-style: decimal;
 }
 
+.edit-post-visual-editor li,
+.editor-block-list__block li {
+	margin-bottom: 0;
+}
+
 .edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
 .editor-block-list__block ul:not(.wp-block-gallery) li > ul,
 .block-library-list li > ul,
@@ -236,12 +273,112 @@
 	padding: 0;
 }
 
+.wp-block-freeform.block-library-rich-text__tinymce ol {
+	list-style: decimal;
+	margin-left: 3em;
+	padding: 0;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce li > ol {
+	margin-left: 1.5em;
+}
+
 /* Captions */
 
-[class^="wp-block-"] figcaption {
+[class^="wp-block-"] figcaption,
+[class^='wp-caption-dd'] {
 	font-size: 14px;
 }
 
+[class^='wp-caption-dd'] {
+	margin: 0;
+	text-align: center;
+}
+
+/* Code styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce code {
+	background: transparent;
+}
+
+/* Definition List styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce dt {
+	font-weight: bold;
+}
+
+/* Image styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce img {
+	max-width: 100%;
+}
+
+/* Address styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce address {
+	margin-bottom: 1.5em;
+}
+
+/* Quote styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote {
+	border: 0;
+	font-style: italic;
+	margin: 0 1.5em;
+	color: #767676;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote p {
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote > :last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
+	font-style: italic;
+	text-transform: none;
+}
+
+.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
+	margin-right: 0;
+	padding-left: 0;
+	padding-right: 1.5em;
+}
+
+/* Pre */
+
+.wp-block-freeform.block-library-rich-text__tinymce pre {
+	background: #eee;
+	font-family: 'Courier 10 Pitch', Courier, monospace;
+	font-size: 15px;
+	line-height: 1.6;
+	margin-bottom: 1.6em;
+	padding: 1.6em;
+}
+
+/* Table */
+
+.wp-block-freeform.block-library-rich-text__tinymce table {
+	width: 100%;
+	margin: 0 0 1.5em;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce table .alternate {
+	background: transparent;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce table td {
+	border-bottom: 1px solid #aaa;
+	padding: 3px 5px;
+}
+
+.wp-block-freeform.block-library-rich-text__tinymce table th {
+	border-bottom: 4px solid #222;
+	font-weight: bold;
+	padding: 10px 5px 5px;
+}
+
 /*--------------------------------------------------------------
 3.0 Blocks - Common Blocks
 --------------------------------------------------------------*/
@@ -329,12 +466,13 @@
 	margin-bottom: .75em;
 }
 
-/* Audio */
-
-/* Cover Images */
-
 /* File */
 
+.wp-block-file__textlink {
+	color: #81699b;
+	font-weight: bold;
+}
+
 .wp-block-file .wp-block-file__button {
 	border-radius: 0;
 	font-size: 18px;
@@ -386,206 +524,29 @@
 /* Code */
 
 .wp-block-code {
-	font-family: 'Courier 10 Pitch', Courier, monospace;
-	font-size: 15px;
-	line-height: 1.6;
-
-	overflow: auto;
-
-	max-width: 100%;
-	margin-bottom: 1.6em;
-	padding: 1.6em;
-
 	background: #eee;
-}
-
-/* Classic */
-
-.wp-block-freeform.block-library-rich-text__tinymce address {
-	margin-bottom: 1.5em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce ol {
-	list-style: decimal;
-	margin-left: 3em;
-	padding: 0;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce li > ol {
-	margin-left: 1.5em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote {
 	border: 0;
-	font-style: italic;
-	margin: 0 1.5em;
-	color: #767676;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote p {
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote > :last-child {
-	margin-bottom: 0;
-}
-
-.editor-block-list__block .wp-block-freeform.block-library-rich-text__tinymce blockquote:not(.alignleft):not(.alignright) {
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
-	font-style: italic;
-	text-transform: none;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
-	margin-right: 0;
-	padding-left: 0;
-	padding-right: 1.5em;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
-	float: left;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright {
-	float: right;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
-	margin: .75em 1.5em .75em 0;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
-	margin: .75em 0 .75em 1.5em;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h1,
-.wp-block-freeform.block-library-rich-text__tinymce h2,
-.wp-block-freeform.block-library-rich-text__tinymce h3,
-.wp-block-freeform.block-library-rich-text__tinymce h4,
-.wp-block-freeform.block-library-rich-text__tinymce h5,
-.wp-block-freeform.block-library-rich-text__tinymce h6 {
-	font-weight: bold;
-	clear: both;
-	margin: .75em 0;
-	text-transform: uppercase;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h1 {
-	font-size: 42px;
-	margin: .375em 0;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h2 {
-	font-size: 30px;
-	line-height: 1.4;
-
-	margin: .375em 0;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h3 {
-	font-size: 24px;
-	line-height: 1.3;
-
-	text-transform: none;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h4 {
-	font-size: 20px;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h5 {
-	font-size: 18px;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce h6 {
-	font-size: 14px;
-}
-
-@media screen and (min-width: 784px) {
-	.wp-block-freeform.block-library-rich-text__tinymce h1 {
-		font-size: 80px;
-		margin: .1875em 0;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h2 {
-		font-size: 42px;
-		margin: .1875em 0;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h3 {
-		font-size: 30px;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h4 {
-		font-size: 20px;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h5 {
-		font-size: 1em;
-	}
-
-	.wp-block-freeform.block-library-rich-text__tinymce h6 {
-		font-size: .778em;
-	}
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce pre {
+	border-radius: 0;
 	font-family: 'Courier 10 Pitch', Courier, monospace;
 	font-size: 15px;
-	font-size: 1.5rem;
 	line-height: 1.6;
-
-	overflow: auto;
-
-	max-width: 100%;
 	margin-bottom: 1.6em;
 	padding: 1.6em;
-
-	background: #eee;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table {
-	width: 100%;
-	margin: 0 0 1.5em;
 }
 
-.wp-block-freeform.block-library-rich-text__tinymce .alternate {
+.wp-block-code textarea {
 	background: transparent;
 }
 
-.wp-block-freeform.block-library-rich-text__tinymce table td {
-	padding: 3px 5px;
-
-	border-bottom: 1px solid #aaa;
-}
-
-.wp-block-freeform.block-library-rich-text__tinymce table th {
-	font-weight: bold;
-
-	padding: 10px 5px 5px;
-
-	border-bottom: 4px solid #222;
-}
-
-.rtl .wp-block-freeform.block-library-rich-text__tinymce th,
-.rtl .wp-block-freeform.block-library-rich-text__tinymce td {
-}
-
 /* Preformatted */
 
 .editor-block-list__block .wp-block-preformatted pre {
+	background: #eee;
 	font-family: 'Courier 10 Pitch', Courier, monospace;
 	font-size: 15px;
 	line-height: 1.6;
-
-	overflow: auto;
-
-	max-width: 100%;
 	margin-bottom: 1.6em;
 	padding: 1.6em;
-
-	background: #eee;
 }
 
 /* Pullquote */
@@ -596,10 +557,6 @@
 	border: 0;
 }
 
-.edit-post-visual-editor .wp-block-pullquote p:not(.wp-block-cover-text) {
-	
-}
-
 .wp-block-pullquote {
 	border-top: 2px solid currentColor;
 	border-bottom: 2px solid currentColor;
@@ -670,11 +627,15 @@
 }
 
 .editor-block-list__block table.wp-block-table th {
+	border: 0;
+	border-bottom: 4px solid #222;
 	font-weight: bold;
-
 	padding: 10px 5px 5px;
+	text-align: left;
+}
 
-	border-bottom: 4px solid #222;
+.rtl .editor-block-list__block table.wp-block-table th {
+	text-align: right;
 }
 
 /*--------------------------------------------------------------
@@ -737,17 +698,6 @@
 	margin-bottom: 1.5em;
 	border: 0;
 	background-color: #ccc;
-	max-width: 100%;
-}
-
-.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
-	max-width: 100%;
-}
-
-.wp-block-separator.is-style-wide {
-	max-width: 120%;
-	margin-left: -10%;
-	margin-right: -10%;
 }
 
 /*--------------------------------------------------------------
@@ -792,4 +742,4 @@
 
 .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 	margin-bottom: 1em;
-}
+}

+ 6 - 0
intergalactic-2/js/intergalactic-2.js

@@ -49,9 +49,15 @@
 			new_img.src = img.attr('src');
 			var img_width = new_img.width;
 
+			// Skip images in Gutenberg blocks.
+			if ( $( this ).parents( '[class^="wp-block-"]') ) {
+				return;
+			}
+
 			if ( img_width >= 1000 ) {
 				$( this ).addClass( 'size-big' );
 				$( this ).parents( 'p' ).addClass( 'size-big-wrapper' );
+
 				if ( $.trim( $( this ).parents( 'p' ).text() ) != '' ) {
 					$( this ).parents( 'p' ).contents().filter( 'a, img' ).wrap( '<span class="size-big-wrapper" />' );
 					$( this ).parents( 'p' ).removeClass( 'size-big-wrapper' );