Browse Source

More fine-tuning of styles across multiple blocks; clean up comments and remove unused selectors.

Caroline Moore 6 years ago
parent
commit
a72b475ed7
2 changed files with 92 additions and 160 deletions
  1. 23 78
      affinity/blocks.css
  2. 69 82
      affinity/editor-style.css

+ 23 - 78
affinity/blocks.css

@@ -2,41 +2,10 @@
 ## Gutenberg Styles
 ## Gutenberg Styles
 --------------------------------------------------------------*/
 --------------------------------------------------------------*/
 
 
-/* Alignments */
-.alignfull {
-	text-align: center;
-	max-width: 100%;
-}
-
-.alignwide {
-	/* max-width: 75%; */
-	max-width: 1020px;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-.alignleft figcaption {}
-
-.alignright figcaption {}
-
-.wp-block-image.alignleft {}
-
-.wp-block-image.alignright {}
-
-.wp-block-image.aligncenter {}
-
-/* Text sizing */
-.is-small-text {}
-.is-regular-text {}
-.is-large-text {}
-.is-larger-text {}
-
-
 /* Dropcaps */
 /* Dropcaps */
 p.has-drop-cap:first-letter {
 p.has-drop-cap:first-letter {
-	font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	font-family: Lora, Baskerville, Georgia, Times, serif;
 	font-size: 64px;
 	font-size: 64px;
-	font-size: 6.4rem;
 }
 }
 
 
 /* Images */
 /* Images */
@@ -56,21 +25,8 @@ p.has-drop-cap:first-letter {
 	margin-bottom: 1.6em;
 	margin-bottom: 1.6em;
 	margin-left: auto;
 	margin-left: auto;
 }
 }
-.wp-block-gallery.alignleft,
-.wp-block-gallery.alignright {}
-.columns-1 {}
-.columns-2 {}
-.columns-3 {}
-.columns-4 {}
-.columns-5 {}
-
-/* Captions */
-.wp-block-image figcaption,
-.wp-block-audio figcaption,
-.wp-block-video figcaption {
-}
 
 
-/* Blockquotes*/
+/* Blockquotes */
 .wp-block-quote {
 .wp-block-quote {
 	color: #99908a;
 	color: #99908a;
 	font-size: 18px;
 	font-size: 18px;
@@ -105,18 +61,12 @@ p.has-drop-cap:first-letter {
 	text-align: center;
 	text-align: center;
 }
 }
 
 
-.blocks-quote-style-1 {}
-.blocks-quote-style-2 {}
-
 /* Cover Images */
 /* Cover Images */
 .wp-block-cover-image {
 .wp-block-cover-image {
 	display: flex;
 	display: flex;
 	margin-bottom: 1.6em;
 	margin-bottom: 1.6em;
 }
 }
 
 
-.wp-block-cover-image.has-background-dim:before {}
-.has-parallax {}
-
 /* Video */
 /* Video */
 .wp-block-video {
 .wp-block-video {
 	margin-bottom: 1.6em;
 	margin-bottom: 1.6em;
@@ -146,10 +96,11 @@ p.has-drop-cap:first-letter {
 }
 }
 
 
 /* Pullquotes */
 /* Pullquotes */
+
 .wp-block-pullquote {
 .wp-block-pullquote {
-	color: #99908a;
 	padding: 0;
 	padding: 0;
 }
 }
+
 .wp-block-pullquote blockquote {
 .wp-block-pullquote blockquote {
 	color: #99908a;
 	color: #99908a;
 	font-size: 18px;
 	font-size: 18px;
@@ -162,22 +113,23 @@ p.has-drop-cap:first-letter {
 	padding-bottom: .8em;
 	padding-bottom: .8em;
 }
 }
 
 
-.edit-post-visual-editor .wp-block-pullquote blockquote p {
+.wp-block-pullquote blockquote,
+.wp-block-pullquote.alignleft,
+.wp-block-pullquote.alignright {
 	color: #99908a;
 	color: #99908a;
 	font-size: 18px;
 	font-size: 18px;
+	margin: 0 0 1.6em;
 }
 }
 
 
 .wp-block-pullquote blockquote > p:last-of-type {
 .wp-block-pullquote blockquote > p:last-of-type {
 	margin-bottom: 1.6em;
 	margin-bottom: 1.6em;
 }
 }
 
 
-.wp-block-pullquote blockquote cite,
-.wp-block-pullquote .wp-block-pullquote__citation {
+.wp-block-pullquote blockquote cite {
 	color: #99908a;
 	color: #99908a;
 	display: block;
 	display: block;
-	text-align: center;
 	text-transform: uppercase;
 	text-transform: uppercase;
-	font-size: 16px;
+	font-size: 14px;
 }
 }
 
 
 .wp-block-pullquote.alignleft,
 .wp-block-pullquote.alignleft,
@@ -187,18 +139,6 @@ p.has-drop-cap:first-letter {
 	padding-top: .8em;
 	padding-top: .8em;
 }
 }
 
 
-.entry-content .wp-block-pullquote.alignleft {
-	text-align: left;
-}
-
-.entry-content .wp-block-pullquote.alignright {
-	text-align: right;
-}
-
-.wp-block-pullquote.aligncenter {
-	text-align: center;
-}
-
 /* Categories & Archives */
 /* Categories & Archives */
 .wp-block-categories-list,
 .wp-block-categories-list,
 .wp-block-archives {
 .wp-block-archives {
@@ -282,11 +222,6 @@ p.has-drop-cap:first-letter {
 	text-decoration: none;
 	text-decoration: none;
 }
 }
 
 
-.wp-block-button .wp-block-button__link:hover,
-.wp-block-button .wp-block-button__link:focus,
-.wp-block-button .wp-block-button__link:active {
-}
-
 .wp-block-button__link:not(.has-text-color),
 .wp-block-button__link:not(.has-text-color),
 .wp-block-button__link:not(.has-text-color):active,
 .wp-block-button__link:not(.has-text-color):active,
 .wp-block-button__link:not(.has-text-color):focus,
 .wp-block-button__link:not(.has-text-color):focus,
@@ -327,8 +262,7 @@ p.has-drop-cap:first-letter {
 }
 }
 
 
 /* Latest Posts */
 /* Latest Posts */
-.wp-block-latest-posts {}
-.wp-block-latest-posts__post-date {}
+
 .wp-block-latest-posts.is-grid {
 .wp-block-latest-posts.is-grid {
 	margin: 0 0 1.6em;
 	margin: 0 0 1.6em;
 }
 }
@@ -363,7 +297,18 @@ p.has-drop-cap:first-letter {
 
 
 @media screen and ( min-width: 68em ) {
 @media screen and ( min-width: 68em ) {
 	.wp-block-quote,
 	.wp-block-quote,
-	.wp-block-pullquote blockquote {
+	.wp-block-pullquote blockquote,
+	.wp-block-pullquote.alignleft p,
+	.wp-block-pullquote.alignright p {
 		font-size: 26px;
 		font-size: 26px;
 	}
 	}
+	.wp-block-pullquote.alignleft {
+		margin-right: 1.6em;
+		text-align: left;
+	}
+
+	.wp-block-pullquote.alignright {
+		margin-left: 1.6em;
+		text-align: right;
+	}
 }
 }

+ 69 - 82
affinity/editor-style.css

@@ -1,5 +1,6 @@
 /* Gutenberg Editor Styles */
 /* Gutenberg Editor Styles */
 
 
+/* Editor body */
 .edit-post-visual-editor .editor-post-title__block,
 .edit-post-visual-editor .editor-post-title__block,
 .edit-post-visual-editor .editor-default-block-appender,
 .edit-post-visual-editor .editor-default-block-appender,
 .edit-post-visual-editor .editor-block-list__block {
 .edit-post-visual-editor .editor-block-list__block {
@@ -10,15 +11,43 @@
 	line-height: 1.6 !important;
 	line-height: 1.6 !important;
 }
 }
 
 
-.edit-post-visual-editor,
-.edit-post-visual-editor p,
-.edit-post-visual-editor ol,
-.edit-post-visual-editor ul,
-.edit-post-visual-editor td {
+.editor-block-list__block,
+.editor-block-list__block p,
+.editor-block-list__block ol,
+.editor-block-list__block ul,
+.editor-block-list__block td {
 	color: #5e5853;
 	color: #5e5853;
+	font-size: 18px;
 	font-family: Lora, Baskerville, Georgia, Times, serif;
 	font-family: Lora, Baskerville, Georgia, Times, serif;
 }
 }
 
 
+/* Lists */
+
+.editor-block-list__block .block-library-list ul,
+.editor-block-list__block .block-library-list ol {
+	margin: 0 0 1.6em 3.2em;
+	padding-left: 0;
+}
+
+.editor-block-list__block .block-library-list ul,
+.editor-block-list__block ul.wp-block-categories__list,
+.editor-block-list__block ul.wp-block-archives {
+	list-style: disc;
+}
+
+.editor-block-list__block .block-library-list ol {
+	list-style: decimal;
+}
+
+.editor-block-list__block .block-library-list li > ul,
+.editor-block-list__block .block-library-list li > ol {
+	margin-bottom: 0;
+	margin-left: 1.6em;
+	padding-left: 0;
+}
+
+/* Links */
+
 .edit-post-visual-editor a {
 .edit-post-visual-editor a {
 	color: #99908a;
 	color: #99908a;
   	transition: 0.3s;
   	transition: 0.3s;
@@ -45,6 +74,8 @@
 	text-decoration: none;
 	text-decoration: none;
 }
 }
 
 
+/* Headings */
+
 h1.mce-content-body,
 h1.mce-content-body,
 h2.mce-content-body,
 h2.mce-content-body,
 h3.mce-content-body,
 h3.mce-content-body,
@@ -92,64 +123,19 @@ h6.mce-content-body,
 	font-size: 14px;
 	font-size: 14px;
 }
 }
 
 
-p {
-	margin-bottom: 1.6em;
-}
-
-dfn, cite, em, i {
-	font-style: italic;
-}
-
-address {
-	margin: 0 0 1.6em;
-}
-
-pre {
-	background: #e8e9ea;
-	font-family: "Courier 10 Pitch", Courier, monospace;
-	font-size: 13.2px;
-	line-height: 1.6;
-	margin-bottom: 1.6em;
-	max-width: 100%;
-	overflow: auto;
-	padding: 1.6em;
-}
-
-code, kbd, tt, var {
-	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
-	font-size: 15px;
-}
-
-abbr, acronym {
-	border-bottom: 1px dotted #666;
-	cursor: help;
-}
-
-mark, ins {
-	background: #fff9c0;
-	text-decoration: none;
-}
-
-big {
-	font-size: 125%;
-}
-
-.aligncenter img {
-	display: block;
-	margin: 0 auto;
-}
-
 /* Dropcaps */
 /* Dropcaps */
+
 p.has-drop-cap:first-letter {
 p.has-drop-cap:first-letter {
-	font-family: "Zilla Slab", "Merriweather", Georgia, "Times New Roman", serif;
-	font-size: 4.8em;
-	margin-right: .1em;
+	font-family: Lora, Baskerville, Georgia, Times, serif;
+	font-size: 64px;
 }
 }
 
 
 /* Images */
 /* Images */
+
 .wp-block-image {
 .wp-block-image {
 	margin-bottom: 1.6em;
 	margin-bottom: 1.6em;
 }
 }
+
 .wp-block-image figcaption {
 .wp-block-image figcaption {
 	font-size: 13.2px;
 	font-size: 13.2px;
 	font-style: italic;
 	font-style: italic;
@@ -162,11 +148,6 @@ p.has-drop-cap:first-letter {
 	margin-bottom: 1.6em;
 	margin-bottom: 1.6em;
 	margin-left: auto;
 	margin-left: auto;
 }
 }
-.columns-1 {}
-.columns-2 {}
-.columns-3 {}
-.columns-4 {}
-.columns-5 {}
 
 
 /* Blockquotes*/
 /* Blockquotes*/
 
 
@@ -262,8 +243,6 @@ blockquote cite {
 	color: white;
 	color: white;
 	opacity: 0.5;
 	opacity: 0.5;
 }
 }
-.has-background-dim {}
-.has-parallax {}
 
 
 /* Video */
 /* Video */
 .wp-block-video {
 .wp-block-video {
@@ -276,7 +255,7 @@ blockquote cite {
 }
 }
 
 
 /* Audio */
 /* Audio */
-.wp-block-audio {}
+
 .wp-block-audio audio {
 .wp-block-audio audio {
 	display: block;
 	display: block;
 	max-width: 100%;
 	max-width: 100%;
@@ -285,30 +264,33 @@ blockquote cite {
 
 
 /* Pullquotes */
 /* Pullquotes */
 .wp-block-pullquote {
 .wp-block-pullquote {
+	margin: 0;
 	padding: 0;
 	padding: 0;
 	border: 0;
 	border: 0;
 }
 }
+
 .wp-block-pullquote blockquote {
 .wp-block-pullquote blockquote {
 	color: #99908a;
 	color: #99908a;
 	font-size: 18px;
 	font-size: 18px;
 	font-style: italic;
 	font-style: italic;
-	margin: 0;
 	border-top: 3px solid #e8e9ea;
 	border-top: 3px solid #e8e9ea;
-	padding-top: .8em;
 	border-bottom: 1px solid #e8e9ea;
 	border-bottom: 1px solid #e8e9ea;
 	margin-bottom: .8em;
 	margin-bottom: .8em;
+	padding-top: .8em;
 	padding-bottom: .8em;
 	padding-bottom: .8em;
 }
 }
-.wp-block-pullquote blockquote > p {
+
+.wp-block-pullquote blockquote > .editor-rich-text p {
 	color: #99908a;
 	color: #99908a;
+	font-size: 18px;
 	margin: 0 0 1.6em;
 	margin: 0 0 1.6em;
 }
 }
-.wp-block-pullquote .wp-block-quote__citation {
+
+.wp-block-pullquote .wp-block-pullquote__citation {
 	color: #99908a;
 	color: #99908a;
 	display: block;
 	display: block;
-	text-align: center;
 	text-transform: uppercase;
 	text-transform: uppercase;
-	font-size: 16px;
+	font-size: 14px;
 }
 }
 
 
 .wp-block-pullquote.alignleft,
 .wp-block-pullquote.alignleft,
@@ -318,10 +300,6 @@ blockquote cite {
 	padding-top: .8em;
 	padding-top: .8em;
 }
 }
 
 
-.wp-block-pullquote.aligncenter {
-	text-align: center;
-}
-
 /* Tables */
 /* Tables */
 .wp-block-table {
 .wp-block-table {
 	display: table;
 	display: table;
@@ -411,6 +389,7 @@ blockquote cite {
 .wp-block-separator.is-style-wide {
 .wp-block-separator.is-style-wide {
 	max-width: 100%;
 	max-width: 100%;
 }
 }
+
 /* Buttons */
 /* Buttons */
 .wp-block-button .wp-block-button__link {
 .wp-block-button .wp-block-button__link {
 	border-radius: 0;
 	border-radius: 0;
@@ -452,28 +431,36 @@ blockquote cite {
 	background-color: #5e5853;
 	background-color: #5e5853;
 }
 }
 
 
-/* Text Columns */
-.wp-block-text-columns {}
-.wp-block-column {}
-
 /* Latest Posts */
 /* Latest Posts */
-.wp-block-latest-posts {}
-.wp-block-latest-posts__post-date {}
 .wp-block-latest-posts.is-grid {
 .wp-block-latest-posts.is-grid {
-	margin: 0 0 1.6em;
+	list-style: none !important;
+	margin: 0 0 1.6em !important;
 }
 }
 
 
 /* Media Queries */
 /* Media Queries */
 
 
 @media screen and ( min-width: 68em ) {
 @media screen and ( min-width: 68em ) {
 	.wp-block-quote,
 	.wp-block-quote,
-	.wp-block-pullquote,
 	.wp-block-quote:not(.is-large):not(.is-style-large),
 	.wp-block-quote:not(.is-large):not(.is-style-large),
 	.wp-block-quote p,
 	.wp-block-quote p,
-	.wp-block-pullquote p,
 	.wp-block-quote:not(.is-large):not(.is-style-large) p {
 	.wp-block-quote:not(.is-large):not(.is-style-large) p {
 		font-size: 26px;
 		font-size: 26px;
 	}
 	}
+
+	.wp-block-pullquote blockquote,
+	.wp-block-pullquote blockquote > .editor-rich-text p {
+		font-size: 26px;
+	}
+
+	.wp-block-pullquote.alignleft {
+		margin-right: 1.6em;
+		text-align: left;
+	}
+
+	.wp-block-pullquote.alignright {
+		margin-left: 1.6em;
+		text-align: right;
+	}
 }
 }
 
 
 @media screen and ( min-width: 46em ) {
 @media screen and ( min-width: 46em ) {