diff --git a/shared/index.css b/shared/index.css index e49952eec3fc2f..f184e2029de965 100644 --- a/shared/index.css +++ b/shared/index.css @@ -1,18 +1,33 @@ +/** + * Basic + */ + +html, body { - background: #f3f6f8; - color: #2f4452; - font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif; - font-size: 1.25em; - line-height: 1.5; - margin: 1em; + margin: 0; + padding: 0; + height: 100%; +} + +* { + box-sizing: border-box; } +body { + font: 13px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; + max-width: 820px; + margin: 60px auto; + color: #12181e; +} + +/** + * Editor Basics + */ + #editor { - background: #fff; - margin: 5em auto; + font-family: "Noto Serif", serif; outline: none; - padding: 5em; - width: 37.5em; + padding: 50px; } #editor .text-align-left { @@ -41,6 +56,50 @@ body { height: auto; } +#editor svg { + fill: currentColor; +} + + +/** + * Editor Basic Blocks + */ + +#editor p, +#editor blockquote, +#editor h1, +#editor h2, +#editor h3, +#editor h4, +#editor h5, +#editor h6, +#editor img { + margin: 1em 0; + box-shadow: inset 0px 0px 0px 0px #e0e5e9; + transition: all .2s ease; +} + +#editor h2 { + font-weight: 900; + font-size: 28px; +} + +#editor p { + font-size: 16px; + min-height: 3.4em; +} + +#editor blockquote { + font-size: 20px; + border-left: 4px solid black; + padding-left: 1em; + font-style: italic; +} + +#editor section:focus { + outline: none; +} + #editor figure { clear: both; float: none; @@ -88,13 +147,13 @@ body { } #editor figcaption { - font-size: 0.8em; margin-top: 0.5em; } #editor figure img, #editor figure iframe { display: block; + margin: 0; } #editor pre { @@ -108,7 +167,7 @@ body { } #editor hr:before { - content: '\2767'; + content: '· · ·'; display: block; text-align: center; } diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index befd01d0658896..dd7497b2f2f0c9 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -2,6 +2,7 @@ tinymce.PluginManager.add( 'block', function( editor ) { var getSelectedBlock = wp.blocks.getSelectedBlock; var getSelectedBlocks = wp.blocks.getSelectedBlocks; + var editorPadding = 50; // Global controls @@ -234,12 +235,12 @@ if ( settings.isEmpty ) { DOM.setStyles( toolbar, { position: 'absolute', - left: contentRect.left + 50 + 'px', + left: contentRect.left + 'px', top: blockRect.top + 3 + window.pageYOffset + 'px' } ); } else { if ( isFullBleed ) { - var left = contentRect.left + 50; + var left = contentRect.left; } else { var left = blockRect.left - 6; } @@ -288,7 +289,7 @@ DOM.setStyles( toolbar, { position: 'absolute', - left: contentRect.left + 100 + 'px', + left: contentRect.left + editorPadding + 'px', top: elementRect.top + window.pageYOffset + 'px' } ); @@ -309,7 +310,7 @@ DOM.setStyles( toolbar, { position: 'absolute', - left: Math.max( contentRect.left + 100, elementRect.left ) + 8 + blockToolbarWidth + 'px', + left: Math.max( contentRect.left + editorPadding, elementRect.left ) + 8 + blockToolbarWidth + 'px', top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px' } ); @@ -334,9 +335,9 @@ var contentRect = editor.getBody().getBoundingClientRect(); if ( isRightAligned ) { - var left = contentRect.right - toolbarRect.width - 50; + var left = contentRect.right - toolbarRect.width; } else { - var left = contentRect.left + 50 + var left = contentRect.left; } if ( isFullBleed ) { @@ -372,7 +373,7 @@ DOM.setStyles( toolbar, { position: 'absolute', - left: Math.max( contentRect.left + 100, elementRect.left ) + 'px', + left: Math.max( contentRect.left + editorPadding, elementRect.left ) + 'px', top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px' } );