diff --git a/wp-content/themes/twentyfourteen/editor-style.css b/wp-content/themes/twentyfourteen/editor-style.css new file mode 100644 index 0000000000..7eea182836 --- /dev/null +++ b/wp-content/themes/twentyfourteen/editor-style.css @@ -0,0 +1,425 @@ +/* +Theme Name: Twenty Fourteen +Description: Used to style the TinyMCE editor. +*/ + + +/** + * Table of Contents: + * + * 1.0 - Body + * 2.0 - Headings + * 3.0 - Text Elements + * 4.0 - Links + * 5.0 - Alignment + * 6.0 - Tables + * 7.0 - Images + * 8.0 - RTL + * ---------------------------------------------------------------------------- + */ + + +/** + * 1.0 Body + * ---------------------------------------------------------------------------- + */ + +html .mceContentBody { + font-size: 100%; + max-width: 474px; +} + +body { + color: #2b2b2b; + font-family: Lato, sans-serif; + line-height: 1.5; + text-rendering: optimizeLegibility; + vertical-align: baseline; +} + + +/** + * 2.0 Headings + * ---------------------------------------------------------------------------- + */ + +h1, +h2, +h3, +h4, +h5, +h6 { + clear: both; + font-weight: 700; + margin: 0 0 12px; +} + +h1 { + font-size: 33px; + line-height: 1.0909090909; +} + +h2 { + font-size: 30px; + line-height: 1.2; +} + +h3 { + font-size: 26px; + line-height: 1.3846153846; +} + +h4 { + font-size: 22px; + line-height: 1.0909090909; +} + +h5 { + font-size: 18px; + line-height: 1.3333333333; +} + +h6 { + font-size: 16px; + line-height: 1.5; +} + +hr { + background-color: rgba(0, 0, 0, 0.1); + border: 0; + height: 1px; + margin-bottom: 23px; +} + + +/** + * 3.0 Text Elements + * ---------------------------------------------------------------------------- + */ + +p { + margin: 0 0 24px; +} + +ol, +ul { + margin: 0 0 24px 22px; + padding-left: 0; +} + +ul { + list-style-type: disc; +} + +ol { + list-style: decimal; +} + +li > ul, +li > ol { + margin-bottom: 0; + margin-left: 20px; +} + +dl { + margin: 0 20px; +} + +dt { + font-weight: bold; +} + +dd { + margin: 0 0 24px; +} + +strong { + font-weight: bold; +} + +code, +kbd, +tt, +var, +samp { + font: 15px/1.6 Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; +} + +pre { + background: #eee; + font-family: 'Courier 10 Pitch', Courier, monospace; + font-size: 15px; + line-height: 1.6; + margin-bottom: 24px; + padding: 12px; + overflow: auto; + max-width: 100%; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +blockquote { + font-style: italic; + font-weight: 300; + margin: 0 0 24px; +} + +blockquote em, blockquote i, blockquote cite { + font-style: normal; +} + +blockquote p { + color: #767676; + font-size: 19px; + line-height: 1.2631578947; +} + +blockquote cite, +blockquote small { + color: #2b2b2b; + font-size: 16px; + font-weight: 400; + line-height: 1.5; +} + +blockquote.pull p { + margin-bottom: 17px; +} + +blockquote.pull.alignleft, +blockquote.pull.alignright { + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding-top: 17px; + width: 50%; +} + +blockquote.pull.alignleft { + margin: 7px 24px 7px 0; +} + +blockquote.pull.alignright { + margin: 7px 0 7px 24px; +} + +blockquote blockquote { + margin-right: 0; +} + +cite { + border-bottom: 0; +} + +abbr[title] { + border-bottom: 1px dotted rgba(0, 0, 0, 0.1); +} + +address { + font-style: normal; + margin: 0 0 24px; +} + +del { + color: #333; +} + +ins { + background: #fff9c0; + border: none; + color: #333; + text-decoration: none; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + bottom: 1ex; +} + +sub { + top: .5ex; +} + + +/** + * 4.0 Links + * ---------------------------------------------------------------------------- + */ + +a { + color: #24890d; + text-decoration: none; +} + +a:visited { + color: #24890d; +} + +a:focus { + outline: thin dotted; +} + +a:active, +a:hover { + color: #5ff23d; + outline: 0; +} + +/** + * 5.0 Alignment + * ---------------------------------------------------------------------------- + */ + +.alignleft { + float: left; + margin-right: 24px; +} + +.alignright { + float: right; + margin-left: 24px; +} + +.aligncenter { + clear: both; + display: block; + margin: 0 auto; +} + +img.alignnone { + margin: 5px 0; +} + + +/** + * 6.0 Tables + * ---------------------------------------------------------------------------- + */ + +table { + border: 1px solid rgba(0, 0, 0, 0.1); + border-collapse: collapse; + border-spacing: 0; + font-size: 14px; + line-height: 1.2857142857; + margin-bottom: 24px; + width: 100%; +} + +caption, +th { + border-right: 1px solid rgba(0, 0, 0, 0.1); + font-weight: 700; + padding: 8px; + text-transform: uppercase; +} + +td { + border-top: 1px solid rgba(0, 0, 0, 0.1); + border-right: 1px solid rgba(0, 0, 0, 0.1); + padding: 8px; +} + +/** + * 7.0 Images + * ---------------------------------------------------------------------------- + */ + +img { + height: auto; + max-width: 474px; + vertical-align: middle; +} + +.wp-caption { + background: transparent; + border: none; + margin: 0 0 24px 0; + padding: 0; + text-align: left; +} + +.wp-caption.alignleft { + margin: 7px 24px 7px 0; +} + +.wp-caption.alignright { + margin: 7px 0 7px 24px; +} + +.wp-caption.aligncenter { + margin: 7px 0; +} + +.wp-caption-dt { + margin: 0; +} + +.wp-caption .wp-caption-text, +.wp-caption-dd { + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 12px; + font-style: italic; + line-height: 1.6666666666; + margin: 4px 0; + padding: 0 10px 0 0; /* Avoid the caption to overflow the width of the image because wp-caption has 10px wider width */ + text-align: left; +} + +.mceTemp + ul, +.mceTemp + ol { + list-style-position: inside; +} + +/** + * 8.0 RTL + * ---------------------------------------------------------------------------- + */ + +html .mceContentBody.rtl { + direction: rtl; + unicode-bidi: embed; +} + +.rtl ol, +.rtl ul { + margin-left: 0; + margin-right: 24px; +} + +.rtl blockquote.pull.alignleft { + margin-left: 24px; + margin-right: 0; +} + +.rtl blockquote.pull.alignright { + margin-left: 0; + margin-right: 24px; +} + +.rtl .wp-caption, +.rtl tr th { + text-align: right; +} + +.rtl td { + text-align: right; +} diff --git a/wp-content/themes/twentyfourteen/functions.php b/wp-content/themes/twentyfourteen/functions.php index 25966e11b6..03b2131d16 100644 --- a/wp-content/themes/twentyfourteen/functions.php +++ b/wp-content/themes/twentyfourteen/functions.php @@ -50,6 +50,11 @@ function twentyfourteen_setup() { */ load_theme_textdomain( 'twentyfourteen', get_template_directory() . '/languages' ); + /* + * This theme styles the visual editor to resemble the theme style. + */ + add_editor_style( array( 'editor-style.css', twentyfourteen_font_url() ) ); + // Adds RSS feed links to for posts and comments. add_theme_support( 'automatic-feed-links' ); @@ -174,17 +179,21 @@ function twentyfourteen_widgets_init() { add_action( 'widgets_init', 'twentyfourteen_widgets_init' ); /** - * Register Google fonts for Twenty Fourteen. + * Register Lato Google font for Twenty Fourteen. * * @return void */ -function twentyfourteen_fonts() { - /* translators: If there are characters in your language that are not supported - by Lato, translate this to 'off'. Do not translate into your own language. */ +function twentyfourteen_font_url() { + $font_url = ''; + /* + * Translators: If there are characters in your language that are not supported + * by Lato, translate this to 'off'. Do not translate into your own language. + */ if ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentyfourteen' ) ) - wp_register_style( 'twentyfourteen-lato', '//fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic', array(), null ); + $font_url = add_query_arg( 'family', urlencode( 'Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' ), "//fonts.googleapis.com/css" ); + + return $font_url; } -add_action( 'init', 'twentyfourteen_fonts' ); /** * Enqueues scripts and styles for front end. @@ -212,6 +221,9 @@ function twentyfourteen_scripts() { wp_enqueue_script( 'jquery-masonry' ); wp_enqueue_script( 'twentyfourteen-theme', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130820', true ); + + // Add Lato font used in the main stylesheet. + wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null ); } add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );