Pārlūkot izejas kodu

Begin styling front end blocks.

Caroline Moore 6 gadi atpakaļ
vecāks
revīzija
d8e3413069
1 mainītis faili ar 85 papildinājumiem un 159 dzēšanām
  1. 85 159
      publication/blocks.css

+ 85 - 159
publication/blocks.css

@@ -21,11 +21,8 @@ Description: Used to style Gutenberg Blocks.
 /* Captions */
 
 [class^="wp-block-"] figcaption {
-	color: #a09a92;
-	font-size: 16px;
-	font-style: italic;
-	line-height: 1.2;
-	text-align: center;
+	font-size: 13px;
+	line-height: 1.3847;
 }
 
 /*--------------------------------------------------------------
@@ -35,15 +32,7 @@ Description: Used to style Gutenberg Blocks.
 /* Paragraph */
 
 p.has-drop-cap:not(:focus)::first-letter {
-	color: #b7b1a9;
-	display: inline-block;
-	float: left;
-	font-family: "Playfair Display";
 	font-size: 70px;
-	font-style: normal;
-	font-weight: 700;
-	line-height: 40px;
-	margin: 6px 10px 0 -5px;
 }
 
 /* Images */
@@ -55,16 +44,10 @@ p.has-drop-cap:not(:focus)::first-letter {
 	display: flex;
 }
 
-.libretto-oversized {
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 100%;
-}
-
 /* Gallery */
 
 .wp-block-gallery {
-	margin-bottom: .5em;
+	margin-bottom: 24px;
 	margin-left: auto;
 	margin-right: auto;
 	max-width: 100%;
@@ -78,36 +61,41 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Quote */
 
 .wp-block-quote {
-	margin: 0 0 .75em;
+	border-bottom: 3px solid currentcolor;
+	border-top: 3px solid currentColor;
+	color: #555;
+	font-family: Neuton, serif;
+	font-size: 20px;
+	font-style: italic;
+	line-height: 1.2;
+	margin: 0 0 24px;
+	padding: 24px 0;
 }
 
 .wp-block-quote cite {
+	color: #222;
+	font-weight: bold;
+	font-style: italic;
 	display: block;
-	width: 100%;
-	float: none;
-	text-align: right;
+	margin-top: 6px;
 }
 
 .wp-block-quote.is-large,
 .wp-block-quote.is-style-large,
 .wp-block-quote.is-large p,
 .wp-block-quote.is-style-large p {
-	font-size: 32px;
+	font-size: 28px;
 }
 
 .wp-block-quote.is-large p,
 .wp-block-quote.is-style-large p {
-	margin-bottom: .75em;
+	margin-bottom: 24px;
 }
 
 .rtl .wp-block-quote {
 	border: 0;
 }
 
-.rtl  blockquote.wp-block-quote cite:before {
-	float: none;
-}
-
 /* Audio */
 
 .wp-block-audio audio {
@@ -118,37 +106,30 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* File */
 
 .wp-block-file {
-	margin: 1.5em 0;
+	margin: 24px 0;
 }
 
 .wp-block-file a.wp-block-file__button,
 .wp-block-file a.wp-block-file__button:visited {
+	background: #ef7d0b;
+	border: 0;
 	border-radius: 0;
-	background: #a09a92;
-	border: 1px solid #eae9e6;
-	color: #eae9e6;
-	font-size: 12px;
-	letter-spacing: 1px;
-	outline: 4px solid #a09a92;
-	padding: 0.7rem 1.4rem;
-	position: relative;
+	color: #fff;
+	font-weight: bold;
+	padding: 6px 12px;
 	text-transform: uppercase;
 }
 
 .wp-block-file a.wp-block-file__button:hover,
-.wp-block-file a.wp-block-file__button:focus {
-	background: #a09a92;
-	color: #faf9f5;
-	outline: 2px solid #a09a92;
-}
-
+.wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:active {
-	background: #363431;
-	outline: 5px solid #363431;
+	background: #222;
+	color: #fff;
+	outline: 0;
 }
 
 .rtl .wp-block-file a.wp-block-file__button {
-	margin-left: .75em;
+	margin-left: 12px;
 	margin-right: 0;
 }
 
@@ -165,7 +146,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;
-	margin-bottom: 1.5em;
+	margin-bottom: 24px;
 	max-width: 100%;
 	overflow: auto;
 	padding: 0;
@@ -174,15 +155,11 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Code */
 
 .wp-block-code {
-	background: #d9d6d0;
-	font-family: "Droid Sans Mono", "Andale Mono", Consolas, "DejaVu Sans Mono", monospace;
-	font-size: 16px;
-	line-height: 1.6;
-	margin-bottom: 1.6em;
+	background: #eee;
+	font-family: Inconsolata, monospace;
 	max-width: 100%;
-	padding: 1.6em;
-	white-space: pre;
-	white-space: pre-wrap;
+	overflow: auto;
+	padding: 12px;
 }
 
 /* Pullquote */
@@ -193,41 +170,30 @@ p.has-drop-cap:not(:focus)::first-letter {
 	border: 0;
 }
 
-.wp-block-pullquote blockquote:before {
-	display: none;
-}
-
 .wp-block-pullquote blockquote {
-	border-top: 2px solid currentColor;
-	border-bottom: 2px solid currentColor;
+	border-bottom: 3px solid currentcolor;
+	border-top: 3px solid currentColor;
+	color: #555;
+	font-family: Neuton, serif;
+	font-size: 20px;
 	font-style: italic;
-	font-size: 27px;
-	margin: 0 0 1.5em;
-	padding: .75em 0;
+	line-height: 1.2;
+	margin: 0 0 24px;
+	padding: 24px 0;
 }
 
 .wp-block-pullquote cite {
-	float: none;
-	font-size: 18px;
-	font-style: normal;
+	color: #222;
+	font-weight: bold;
+	font-style: italic;
 }
 
 .wp-block-pullquote.alignleft,
 .wp-block-pullquote.alignright {
-	background: #fff;
-	border-bottom: 1px solid #ebe7e1;
-	border-top: 2px solid #a09a92;
-	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.025);
-	font-size: 27px;
-	max-width: 75%;
-	padding: 0.5em;
 }
 
 .wp-block-pullquote.alignleft cite,
 .wp-block-pullquote.alignright cite {
-	display: block;
-	width: 100%;
-	text-align: right;
 }
 
 .wp-block-pullquote.alignleft blockquote,
@@ -237,54 +203,25 @@ p.has-drop-cap:not(:focus)::first-letter {
 	margin: 0;
 }
 
-@media only screen and (min-width: 641px) {
-	.rtl .wp-block-pullquote.alignleft,
-	.wp-block-pullquote.alignleft {
-		margin-left: -1.5em;
-	}
-
-	.rtl .wp-block-pullquote.alignright,
-	.wp-block-pullquote.alignright {
-		margin-right: -1.5em;
-	}
-}
-
-@media only screen and (min-width: 860px) {
-	.rtl .wp-block-pullquote.alignleft,
-	.wp-block-pullquote.alignleft {
-		margin-left: -6em;
-	}
-
-	.rtl .wp-block-pullquote.alignright,
-	.wp-block-pullquote.alignright {
-		margin-right: -6em;
-	}
-}
-
 .wp-block-pullquote.alignleft p,
 .wp-block-pullquote.alignright p {
-	font-size: 24px;
 }
 
 .wp-block-pullquote.alignleft {
-	margin-right: 1.5em;
+	margin-right: 24px;
 }
 
 .wp-block-pullquote.alignright {
-	margin-left: 1.5em;
+	margin-left: 24px;
 }
 
 .wp-block-pullquote.alignfull blockquote {
-	padding-left: 1.5em;
-	padding-right: 1.5em;
-}
-
-.rtl .wp-block-pullquote cite:before {
-	float: none;
+	padding-left: 24px;
+	padding-right: 24px;
 }
 
 .wp-block-pullquote p {
-	margin: 0 0 .75em;
+	margin: 0 0 12px;
 }
 
 /*--------------------------------------------------------------
@@ -295,10 +232,9 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 .wp-block-button .wp-block-button__link {
 	border-radius: 0;
-	font-size: 12px;
-	letter-spacing: 1px;
-	padding: 0.7rem 1.4rem;
-	position: relative;
+	border: 0;
+	font-weight: bold;
+	padding: 6px 12px;
 	text-transform: uppercase;
 }
 
@@ -309,33 +245,23 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .wp-block-button__link:not(.has-background) {
-	background: #a09a92;
-	outline: 4px solid #a09a92;
+	background: #ef7d0b;
 }
 
 .wp-block-button__link:not(.has-text-color) {
-	border: 1px solid #eae9e6;
-	color: #eae9e6;
-}
-
-.wp-block-button__link:not(.has-text-color):active {
-	color: #eae9e6;
+	color: #fff;
 }
 
+.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):hover {
-	color: #faf9f5;
-}
-
-.wp-block-button__link:not(.has-background):active {
-	background: #363431;
-	outline: 5px solid #363431;
+	color: #fff;
 }
 
+.wp-block-button__link:not(.has-background):active,
 .wp-block-button__link:not(.has-background):focus,
 .wp-block-button__link:not(.has-background):hover {
-	background: #a09a92;
-	outline: 2px solid #a09a92;
+	background: #222;
 }
 
 .wp-block-button.alignleft {
@@ -347,7 +273,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .wp-block-button.aligncenter {
-	margin: 1.5em auto;
+	margin: 24px auto;
 }
 
 /* Seperator */
@@ -357,10 +283,10 @@ hr.wp-block-separator {
 }
 
 .wp-block-separator {
-	background-color: #d9d6d0;
+	background-color: #ddd;
 	border: 0;
 	height: 1px;
-	margin-bottom: 1.5em;
+	margin-bottom: 24px;
 	max-width: 100px;
 }
 
@@ -375,13 +301,13 @@ hr.wp-block-separator {
 /* Categories */
 
 .wp-block-categories.aligncenter {
-	margin-left: 1.5em;
-	margin-right: 1.5em;
+	margin-left: 24px;
+	margin-right: 24px;
 	text-align: center;
 }
 
 .wp-block-categories-list.alignleft {
-	margin-left: 1.5em;
+	margin-left: 24px;
 }
 
 /* Latest Comments */
@@ -398,9 +324,9 @@ hr.wp-block-separator {
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment {
-	border-top: 1px solid #d9d6d0;
+	border-top: 1px solid #dddddd;
 	margin-bottom: 0;
-	padding: .75em 0;
+	padding: 12px 0;
 }
 
 .wp-block-latest-comments .avatar,
@@ -439,14 +365,14 @@ hr.wp-block-separator {
 .has-light-gray-color:hover,
 .has-light-gray-color:focus,
 .has-light-gray-color:active {
-	color: #d9d6d0;
+	color: #dddddd;
 }
 
 .has-light-gray-background-color,
 .has-light-gray-background-color:hover,
 .has-light-gray-background-color:focus,
 .has-light-gray-background-color:active {
-	background-color: #d9d6d0;
+	background-color: #dddddd;
 }
 
 .has-white-color,
@@ -463,31 +389,31 @@ hr.wp-block-separator {
 	background-color: #fff;
 }
 
-.has-red-color,
-.has-red-color:hover,
-.has-red-color:focus,
-.has-red-color:active {
+.has-orange-color,
+.has-orange-color:hover,
+.has-orange-color:focus,
+.has-orange-color:active {
 	color: #932817;
 }
 
-.has-red-background-color,
-.has-red-background-color:hover,
-.has-red-background-color:focus,
-.has-red-background-color:active {
+.has-orange-background-color,
+.has-orange-background-color:hover,
+.has-orange-background-color:focus,
+.has-orange-background-color:active {
 	background-color: #932817;
 }
 
-.has-dark-red-color,
-.has-dark-red-color:hover,
-.has-dark-red-color:focus,
-.has-dark-red-color:active {
+.has-dark-orange-color,
+.has-dark-orange-color:hover,
+.has-dark-orange-color:focus,
+.has-dark-orange-color:active {
 	color: #712012;
 }
 
-.has-dark-red-background-color,
-.has-dark-red-background-color:hover,
-.has-dark-red-background-color:focus,
-.has-dark-red-background-color:active {
+.has-dark-orange-background-color,
+.has-dark-orange-background-color:hover,
+.has-dark-orange-background-color:focus,
+.has-dark-orange-background-color:active {
 	background-color: #712012;
 }