Merge pull request #254 from WordPress/add/tinymce-polish

Polish TinyMCE microprototype.
WordPress · Mar 13, 2017 · 7d9ec80 · 7d9ec80
2 parents 9b3be96 + 7f7e0eb
commit 7d9ec80
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/tinymce/index.html b/tinymce/index.html
@@ -4,11 +4,13 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>TinyMCE Formatting Demo</title>
+		<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i" rel="stylesheet">
 		<link href="style.css" rel="stylesheet" type="text/css" media="all">
+		<link rel="stylesheet" type="text/css" href="../shared/index.css">
 	</head>
 	<body>
-		<section>
-			<p>Many entrepreneurs idolize Steve Jobs. He’s such a <a href="">perfectionist</a>, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p>
+		<section id="editor">
+			<p>Many entrepreneurs idolize Steve Jobs. He’s such a <a href="https://wordpress.org">perfectionist</a>, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p>
 		</section>
 		<script src="https://fiddle.azurewebsites.net/tinymce/nightly/tinymce.min.js"></script>
 		<script src="../shared/tinymce/logger.js"></script>

diff --git a/tinymce/style.css b/tinymce/style.css
@@ -14,19 +14,22 @@ body {
 }
 
 body {
-	font-family: Georgia, serif;
-	font-size: 16px;
 	max-width: 720px;
 	margin: 60px auto;
-	color: #12181e;
+	color: #191e23;
 }
 
 *[contenteditable] {
 	outline: none;
 }
 
+body #editor a {
+	color: #009fd4;
+	padding: 0 2px;
+}
+
 a[data-mce-selected] {
-	background: #bfe6ff;
+	background: #dcf2f8;
 	border-radius: 1px;
-	box-shadow: 0 0 0 1px #bfe6ff;
+	box-shadow: 0 0 0 1px #dcf2f8;
 }