Jelajahi Sumber

Ixion: Made some tweaks to Gutenberg styles, including:
* Reorganized some CSS, and removed empty selectors.
* Reduced size of drop cap.
* Added styles to prevent side-scroll when full blocks are used.
* Updated table block styles to work in wide and full styles.
* Add border underneath post title

Laurel Fulford 6 tahun lalu
induk
melakukan
ce0c799e72
2 mengubah file dengan 102 tambahan dan 74 penghapusan
  1. 58 38
      ixion/blocks.css
  2. 44 36
      ixion/editor-blocks.css

+ 58 - 38
ixion/blocks.css

@@ -18,34 +18,14 @@ Description: Used to style Gutenberg Blocks.
 1.0 General Block Styles
 --------------------------------------------------------------*/
 
-/* Captions */
-
-[class^="wp-block-"] figcaption {
-	text-align: center;
-}
-
-/*--------------------------------------------------------------
-2.0 Blocks - Common Blocks
---------------------------------------------------------------*/
+/* Alignments */
 
-/* Paragraph */
-
-p.has-drop-cap:not(:focus)::first-letter {
-	font-size: 141px;
-    line-height: 1.1;
-    margin-bottom: -40px
-}
-
-/* Images */
-
-.wp-block-cover,
-.wp-block-cover.alignleft,
-.wp-block-cover.alignright,
-.wp-block-cover.aligncenter {
-	display: flex;
+.no-sidebar #page {
+	overflow-x: hidden;
 }
 
 /* Full Width */
+
 .no-sidebar .alignfull {
 	width: 100vw;
 	max-width: 100vw;
@@ -62,13 +42,8 @@ p.has-drop-cap:not(:focus)::first-letter {
 .no-sidebar .wp-block-archives.alignfull,
 .no-sidebar .wp-block-latest-posts.alignfull,
 .no-sidebar .wp-block-file.alignfull {
-	padding-left: 1.5em;
-	padding-right: 1.5em;
-}
-
-.no-sidebar .wp-block-table.alignfull {
-	margin-left: .75em;
-	margin-right: .75em;
+	padding-left: 2em;
+	padding-right: 2em;
 }
 
 .no-sidebar .wp-block-embed.is-type-video.alignfull iframe {
@@ -99,6 +74,24 @@ p.has-drop-cap:not(:focus)::first-letter {
 	}
 }
 
+/* Captions */
+
+[class^="wp-block-"] figcaption {
+	text-align: center;
+}
+
+/*--------------------------------------------------------------
+2.0 Blocks - Common Blocks
+--------------------------------------------------------------*/
+
+/* Paragraph */
+
+p.has-drop-cap:not(:focus)::first-letter {
+	font-size: 110px;
+	line-height: 1.1;
+	margin-top: 0.1em;
+}
+
 /* Gallery */
 
 .wp-block-gallery {
@@ -131,17 +124,10 @@ p.has-drop-cap:not(:focus)::first-letter {
 	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 {
 	font-style: italic;
 }
 
-.wp-block-quote cite:before {
-}
-
 .wp-block-quote.is-large cite,
 .wp-block-quote.is-large footer,
 .wp-block-quote.is-style-large cite,
@@ -172,11 +158,24 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Audio */
 
+.wp-block-audio {
+	margin-bottom: 1.8em;
+}
+
 .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 {
@@ -220,6 +219,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 	color: inherit;
 	font-family: inherit;
 	font-size: inherit;
+	font-style: italic;
 	line-height: inherit;
 	margin-bottom: 1.5em;
 	max-width: 100%;
@@ -287,6 +287,26 @@ p.has-drop-cap:not(:focus)::first-letter {
 	margin: 0;
 }
 
+/* Table */
+
+.wp-block-table th {
+	text-align: left;
+}
+
+.no-sidebar .wp-block-table.alignfull {
+	width: 98vw;
+}
+
+@media (min-width: 1024px) {
+	.no-sidebar .wp-block-table.alignwide {
+		width: 855px;
+	}
+}
+
+.rtl .wp-block-table th {
+	text-align: right;
+}
+
 /*--------------------------------------------------------------
 4.0 Blocks - Layout Elements
 --------------------------------------------------------------*/

+ 44 - 36
ixion/editor-blocks.css

@@ -62,10 +62,14 @@
 .editor-post-title__block .editor-post-title__input {
 	font-family: "Archivo Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
 	font-weight: bold;
-	clear: both;
-	margin: 0 0 .8em;
 	line-height: 1.2;
-	border-width: 0;
+}
+
+.editor-post-title__block:after {
+	content: "";
+	display: block;
+	border-bottom: 1px solid #eeece8;
+	margin: 0 14px;
 }
 
 /* Headings */
@@ -130,12 +134,6 @@
 	margin-bottom: 1.8em;
 }
 
-/* Images */
-
-.wp-block-image figcaption {
-	text-align: center;
-}
-
 /*--------------------------------------------------------------
 2.0 General Block Styles
 --------------------------------------------------------------*/
@@ -152,6 +150,7 @@
 .editor-block-list__block a,
 .wp-block-freeform.block-library-rich-text__tinymce a {
 	color: #d7b221;
+	text-decoration: none;
 }
 
 .edit-post-visual-editor a:hover,
@@ -223,6 +222,12 @@
 	font-size: 14px;
 }
 
+/* Definition List styles */
+
+.wp-block-freeform.block-library-rich-text__tinymce dt {
+	font-weight: bold;
+}
+
 /*--------------------------------------------------------------
 3.0 Blocks - Common Blocks
 --------------------------------------------------------------*/
@@ -230,9 +235,15 @@
 /* Paragraph */
 
 .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
-	font-size: 141px;
-    line-height: 1.1;
-    margin-bottom: -40px
+	font-size: 110px;
+	line-height: 1.1;
+	margin-top: 0.1em;
+}
+
+/* Image */
+
+.wp-block-image figcaption {
+	text-align: center;
 }
 
 /* Quote */
@@ -248,21 +259,12 @@
 	margin: 0 1.5em;
 }
 
-.edit-post-visual-editor .editor-block-list__block blockquote p:not(.wp-block-cover-text) {
-}
-
 .editor-block-list__block .wp-block-quote__citation {
 	font-style: italic;
 	font-size: inherit;
 	color: inherit;
 }
 
-.rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large) {
-}
-
-.rtl .editor-block-list__block .wp-block-quote {
-}
-
 .editor-block-list__block .wp-block-quote em,
 .editor-block-list__block .wp-block-quote i {
 	font-style: normal;
@@ -284,10 +286,6 @@
 	margin-bottom: .75em;
 }
 
-.rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
-.rtl .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large).alignright  {
-}
-
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large {
 	font-style: normal;
@@ -308,12 +306,17 @@
 	font-style: normal;
 }
 
-/* Audio */
-
-/* Cover Images */
+.editor-block-list__block .wp-block-quote.is-large .wp-block-quote__citation,
+.editor-block-list__block .wp-block-quote.is-style-large .wp-block-quote__citation {
+	font-size: 80%;
+}
 
 /* File */
 
+.wp-block-file__textlink {
+	color: #d7b221;
+}
+
 .wp-block-file .wp-block-file__button {
 	border: 0;
 	border-radius: 0;
@@ -349,10 +352,8 @@
 	color: inherit;
 	font-family: inherit;
 	font-size: inherit;
+	font-style: italic;
 	line-height: inherit;
-	margin-bottom: 1.5em;
-	max-width: 100%;
-	overflow: auto;
 	padding: 0;
 }
 
@@ -360,6 +361,8 @@
 
 .wp-block-code {
 	background: #eee;
+	border: 0;
+	border-radius: 0;
 	font-family: "Courier 10 Pitch", Courier, monospace;
 	font-size: 15px;
 	line-height: 1.6;
@@ -584,21 +587,26 @@
 
 /* Table */
 
-.editor-block-list__block .wp-block-table__cell-content {
+.wp-block-table__cell-content {
 	padding: 0;
 }
 
-.editor-block-list__block table.wp-block-table {
+table.wp-block-table {
 	width: 100%;
 	margin: 0 0 1.5em;
 }
 
-.editor-block-list__block table.wp-block-table td {
+table.wp-block-table td {
 	border: 0;
 }
 
-.editor-block-list__block table.wp-block-table th {
+table.wp-block-table th {
 	border: 0;
+	text-align: left;
+}
+
+.rtl table.wp-block-table th {
+	text-align: right;
 }
 
 /*--------------------------------------------------------------
@@ -704,4 +712,4 @@
 
 .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 	margin-bottom: 1em;
-}
+}