Jelajahi Sumber

Dara: Tweak a couple small Gutenberg things:
* Update separator styles so the front-end and back-end match
* Update table styles in the editor to match the front-end
* Update code styles in the editor to match the front-end

Laurel Fulford 6 tahun lalu
induk
melakukan
bc725cd464
2 mengubah file dengan 47 tambahan dan 40 penghapusan
  1. 29 39
      dara/blocks.css
  2. 18 1
      dara/editor-blocks.css

+ 29 - 39
dara/blocks.css

@@ -39,43 +39,12 @@ p.has-drop-cap:not(:focus)::first-letter {
 	font-size: 64px;
 }
 
-/* Images */
+/* Image */
 
-.wp-block-cover,
-.wp-block-cover.alignleft,
-.wp-block-cover.alignright,
-.wp-block-cover.aligncenter {
-	display: flex;
-}
-
-/* Wide Width */
-
-@media (min-width: 1024px) {
-	.apostrophe-2-no-sidebar figure.alignwide,
-	.apostrophe-2-no-sidebar .wp-block-cover.alignwide,
-	.apostrophe-2-no-sidebar .wp-block-gallery.alignwide,
-	.apostrophe-2-no-sidebar .wp-block-embed.is-type-video.alignwide {
-		width: 120%;
-		max-width: 120%;
-		margin-left: -10%;
-		margin-right: -10%;
-		position: relative;
-	}
-
-	.apostrophe-2-no-sidebar .wp-block-embed.is-type-video.alignwide:before {
-		content: "";
-		display: block;
-	}
-
-	.apostrophe-2-no-sidebar .wp-block-embed.is-type-video.alignwide iframe {
-		position:  absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		width: 100%;
-		height: 100%;
-	}
+.wp-block-image .alignleft,
+.wp-block-image .alignright,
+.wp-block-image .aligncenter {
+	display: block;
 }
 
 /* Gallery */
@@ -85,6 +54,10 @@ p.has-drop-cap:not(:focus)::first-letter {
 	margin-left: auto;
 }
 
+.wp-block-gallery figcaption {
+	margin-bottom: 0;
+}
+
 /* Quote */
 
 blockquote cite {
@@ -153,6 +126,15 @@ blockquote cite {
 	width: 100%;
 }
 
+/* Cover */
+
+.wp-block-cover,
+.wp-block-cover.alignleft,
+.wp-block-cover.alignright,
+.wp-block-cover.aligncenter {
+	display: flex;
+}
+
 /* File */
 
 .wp-block-file .wp-block-file__button {
@@ -353,6 +335,12 @@ hr.wp-block-separator {
 	max-width: 66%;
 }
 
+.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 100px;
+}
+
 .wp-block-separator.is-style-wide {
 	max-width: 100%;
 }
@@ -375,15 +363,17 @@ hr.wp-block-separator {
 
 /* Latest Comments */
 
+.wp-block-latest-comments {
+	margin-left: 0;
+	margin-right: 0;
+}
+
 .editor-block-list__block .wp-block-latest-comments__comment-meta a {
 	box-shadow: none;
 	font-weight: 700;
 	text-decoration: none;
 }
 
-.wp-block-latest-comments__comment-date {
-}
-
 .wp-block-latest-comments .wp-block-latest-comments__comment {
 	border-top: 1px solid #e6e6e6;
 	margin-bottom: 0;

+ 18 - 1
dara/editor-blocks.css

@@ -421,9 +421,16 @@
 /* Code */
 
 .wp-block-code {
+	background: #f2f2f2;
+	border: 0;
+	border-radius: 0;
 	font-family: "Courier 10 Pitch", Courier, monospace;
 }
 
+.wp-block-code textarea {
+	background: transparent;
+}
+
 /* Classic */
 
 .wp-block-freeform.block-library-rich-text__tinymce blockquote {
@@ -710,11 +717,21 @@
 }
 
 .editor-block-list__block table.wp-block-table th {
+	border: 0;
 	font-weight: bold;
 	padding: 0.4em;
+	text-align: left;
 	text-transform: uppercase;
 }
 
+.rtl .editor-block-list__block table.wp-block-table th {
+	text-align: right;
+}
+
+.wp-block-table__cell-content {
+	padding: 0;
+}
+
 /*--------------------------------------------------------------
 5.0 Blocks - Layout Elements
 --------------------------------------------------------------*/
@@ -820,4 +837,4 @@
 
 .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 	margin-bottom: 1em;
-}
+}