Przeglądaj źródła

Front-end styles for blocks.

Caroline Moore 6 lat temu
rodzic
commit
47adcf2c77
3 zmienionych plików z 87 dodań i 100 usunięć
  1. 64 76
      toujours/blocks.css
  2. 13 15
      toujours/editor-blocks.css
  3. 10 9
      toujours/style.css

+ 64 - 76
toujours/blocks.css

@@ -21,16 +21,12 @@
 /* Captions */
 
 [class^="wp-block-"] figcaption {
-	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
-	font-size: 15px;
-	line-height: 1.5;
+	font-size: 14px;
+	font-style: italic;
 }
 
 [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
-	border-bottom: 1px solid #ddd;
-	color: #b9b9b9;
-	margin-top: 0;
-	padding-bottom: 0.5em;
+	color: #999;
 }
 
 /*--------------------------------------------------------------
@@ -52,29 +48,20 @@ p.has-drop-cap:not(:focus)::first-letter {
 	display: flex;
 }
 
-.wp-block-cover-image .wp-block-cover-image-text,
-.wp-block-cover-image .wp-block-cover-text,
-.wp-block-cover-image h2,
-.wp-block-cover .wp-block-cover-image-text,
-.wp-block-cover .wp-block-cover-text,
-.wp-block-cover h2 {
-	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+.wp-block-cover-text {
+	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
+	font-weight: 300;
 }
 
 /* Gallery */
 
 .wp-block-gallery {
-	margin-bottom: 1.75em;
+	margin-bottom: 1.5em;
 	margin-left: auto;
 	margin-right: auto;
 	max-width: 100%;
 }
 
-.rtl .wp-block-gallery:not(.alignfull):not(.alignwide) {
-	margin-right: auto;
-	margin-left: auto;
-}
-
 /* Quote */
 
 .wp-block-quote.is-large,
@@ -85,7 +72,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 .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,
@@ -93,6 +80,14 @@ p.has-drop-cap:not(:focus)::first-letter {
 	margin-bottom: 1.5em;
 }
 
+.wp-block-quote.is-large cite,
+.wp-block-quote.is-large footer,
+.wp-block-quote.is-style-large cite,
+.wp-block-quote.is-style-large footer {
+	font-size: 22px;
+	text-align: left;
+}
+
 .rtl .wp-block-quote {
 	border: 0;
 }
@@ -100,7 +95,7 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Audio */
 
 .wp-block-audio {
-	margin-bottom: 1.75em;
+	margin-bottom: 1.5em;
 }
 
 .wp-block-audio audio {
@@ -116,31 +111,30 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 .wp-block-file a.wp-block-file__button,
 .wp-block-file a.wp-block-file__button:visited {
-	background: transparent;
-	border: 2px solid rgba(119, 119, 119, 0.5);
-	border-radius: 255px 15px 225px 15px/15px 225px 15px;
-	color: rgba(119, 119, 119, 0.8);
-	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+	background-color: #2590ec;
+	border: 0;
+	border-radius: 0;
+	color: #fff;
+	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
 	font-size: 14px;
-	letter-spacing: 0.05em;
-	outline: none;
-	padding: 10px 20px;
-	text-shadow: none;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	line-height: 1;
+	padding: 15px 30px;
 	text-transform: uppercase;
-	-webkit-transition: color 0.2s, border-color 0.2s;
-	-moz-transition: color 0.2s, border-color 0.2s;
-	transition: color 0.2s, border-color 0.2s;
+	-webkit-transition: background-color 0.2s;
+	-moz-transition: background-color 0.2s;
+	transition: background-color 0.2s;
 }
 
 .wp-block-file a.wp-block-file__button:hover,
 .wp-block-file a.wp-block-file__button:focus,
 .wp-block-file a.wp-block-file__button:active {
-	border-color: rgba(119, 119, 119, 0.8);
-	color: #777;
+	background-color: #444;
 }
 
 .rtl .wp-block-file a.wp-block-file__button {
-	margin-left: 10px;
+	margin-left: 15px;
 	margin-right: 0;
 }
 
@@ -165,16 +159,27 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Code */
 
+.wp-block-code:before {
+	border: 1px solid rgba(255, 255, 255, 0.4);
+	bottom: 3px;
+	content: "";
+	display: block;
+	left: 3px;
+	position: absolute;
+	right: 3px;
+	top: 3px;
+}
+
 .wp-block-code {
-	background: #eee;
+	background: #333;
+	color: #ddd;
 	font-family: "Courier 10 Pitch", Courier, monospace;
-	font-size: 15px;
-	font-size: 0.9375rem;
 	line-height: 1.6;
 	margin-bottom: 1.6em;
 	max-width: 100%;
 	overflow: auto;
 	padding: 1.6em;
+	position: relative;
 }
 
 /* Pullquote */
@@ -185,17 +190,10 @@ p.has-drop-cap:not(:focus)::first-letter {
 	border: 0;
 }
 
-.wp-block-pullquote blockquote:before {
-	display: none;
-}
-
 .wp-block-pullquote blockquote {
-	border-left: 0;
-	border-bottom: 2px solid #bdcbcc;
-	border-top: 5px solid #bdcbcc;
-	font-size: 28px;
-	line-height: 1.6;
-	margin: 0 0 1.5em;
+	border: 0;
+	border-bottom: 1px solid currentColor;
+	border-top: 3px solid currentColor;
 	padding: 1.5em;
 }
 
@@ -204,8 +202,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 }
 
 .wp-block-pullquote cite {
-	color: inherit;
-	font-size: 18px;
 }
 
 .wp-block-pullquote.alignleft,
@@ -214,8 +210,6 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 .wp-block-pullquote.alignleft blockquote,
 .wp-block-pullquote.alignright blockquote {
-	padding: 1.5em 0;
-	margin: 0 0 .75em;
 }
 
 .wp-block-pullquote.alignleft p,
@@ -248,46 +242,43 @@ p.has-drop-cap:not(:focus)::first-letter {
 /* Buttons */
 
 .wp-block-button .wp-block-button__link {
-	border: 2px solid currentColor;
-	border-radius: 255px 15px 225px 15px/15px 225px 15px;
-	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+	border-radius: 0;
+	border: 0;
+	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
 	font-size: 14px;
-	letter-spacing: 0.05em;
-	outline: none;
-	padding: 10px 20px;
-	text-shadow: none;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	line-height: 1;
+	padding: 15px 30px;
 	text-transform: uppercase;
-	-webkit-transition: color 0.2s, border-color 0.2s;
-	   -moz-transition: color 0.2s, border-color 0.2s;
-	        transition: color 0.2s, border-color 0.2s;
+	-webkit-transition: background-color 0.2s;
+	   -moz-transition: background-color 0.2s;
+	        transition: background-color 0.2s;
 }
 
 .wp-block-button .wp-block-button__link:active,
 .wp-block-button .wp-block-button__link:hover,
 .wp-block-button .wp-block-button__link:focus {
-	box-shadow: none;
-	text-decoration: none;
 }
 
 .wp-block-button__link:not(.has-background) {
-	background: transparent;
-	border: 2px solid rgba(119, 119, 119, 0.5);
+	background-color: #2590ec;
 }
 
 .wp-block-button__link:not(.has-text-color) {
-	color: rgba(119, 119, 119, 0.8);
+	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: #777;
+	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 {
-	border-color: rgba(119, 119, 119, 0.8);
+	background-color: #444;
 }
 
 .wp-block-button.alignleft {
@@ -323,7 +314,7 @@ hr.wp-block-separator {
 /* Media & Text */
 
 .wp-block-media-text {
-	margin-bottom: 1.75em;
+	margin-bottom: 1.5em;
 }
 
 .wp-block-media-text *:last-child {
@@ -380,10 +371,7 @@ hr.wp-block-separator {
 }
 
 .wp-block-latest-comments__comment-date {
-	color: #999;
-	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
-	font-size: 16px;
-	font-size: 1rem;
+	color: #ccc;
 }
 
 /* Latest Posts */

+ 13 - 15
toujours/editor-blocks.css

@@ -420,31 +420,29 @@
 }
 
 .wp-block-file .wp-block-file__button {
-	background: transparent;
-	border: 2px solid rgba(119, 119, 119, 0.5);
-	border-radius: 255px 15px 225px 15px/15px 225px 15px;
-	color: rgba(119, 119, 119, 0.8);
-	font-family: "Kalam", "Chalkboard", "Comic Sans", script;
+	background-color: #2590ec;
+	border: 0;
+	color: #fff;
+	font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
 	font-size: 14px;
-	letter-spacing: 0.05em;
-	outline: none;
-	padding: 10px 20px;
-	text-shadow: none;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	line-height: 1;
+	padding: 15px 30px;
 	text-transform: uppercase;
-	-webkit-transition: color 0.2s, border-color 0.2s;
-	-moz-transition: color 0.2s, border-color 0.2s;
-	transition: color 0.2s, border-color 0.2s;
+	-webkit-transition: background-color 0.2s;
+	-moz-transition: background-color 0.2s;
+	transition: background-color 0.2s;
 }
 
 .wp-block-file .wp-block-file__button:hover,
 .wp-block-file .wp-block-file__button:focus,
 .wp-block-file .wp-block-file__button:active {
-	border-color: rgba(119, 119, 119, 0.8);
-	color: #777;
+	background-color: #444;
 }
 
 .rtl .wp-block-file .wp-block-file__button {
-	margin-left: 10px;
+	margin-left: 15px;
 	margin-right: 0;
 }
 

+ 10 - 9
toujours/style.css

@@ -388,15 +388,16 @@ pre {
 	padding: 1.6em;
 	position: relative;
 }
-	pre:before {
-		border: 1px solid rgba(255, 255, 255, 0.4);
-		bottom: 3px;
-		content: "";
-		display: block;
-		left: 3px;
-		position: absolute;
-		right: 3px;
-		top: 3px;
+
+pre:before {
+	border: 1px solid rgba(255, 255, 255, 0.4);
+	bottom: 3px;
+	content: "";
+	display: block;
+	left: 3px;
+	position: absolute;
+	right: 3px;
+	top: 3px;
 }
 
 code,