Make WordPress Core

Changeset 23672


Ignore:
Timestamp:
03/12/2013 05:27:24 PM (11 years ago)
Author:
lancewillett
Message:

Twenty Thirteen: first pass at editor styles. Props Frank Klein and obenland. See #23551.

Location:
trunk/wp-content/themes/twentythirteen
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-content/themes/twentythirteen/css/editor-style.css

    r23452 r23672  
    44*/
    55
    6 /* TODO */
     6html .mceContentBody {
     7    font-size: 100%;
     8    max-width: 604px;
     9}
     10
     11body {
     12    font-family: "Source Sans Pro", Helvetica, sans-serif;
     13    -webkit-hyphens: auto;
     14    -moz-hyphens:    auto;
     15    -ms-hyphens:     auto;
     16    hyphens: auto;
     17    color: #141412;
     18    line-height: 1.5;
     19    text-rendering: optimizeLegibility;
     20    vertical-align: baseline;
     21}
     22
     23
     24/**
     25 * Headings
     26 * ----------------------------------------------------------------------------
     27 */
     28
     29h1,
     30h2,
     31h3,
     32h4,
     33h5,
     34h6 {
     35    clear: both;
     36    font-family: Bitter, Georgia, serif;
     37    line-height: 1.3;
     38}
     39
     40h1 {
     41    font-size: 48px;
     42    margin: 33px 0;
     43}
     44
     45h2 {
     46    font-size: 30px;
     47    margin: 25px 0;
     48}
     49
     50h3 {
     51    font-size: 22px;
     52    margin: 22px 0;
     53}
     54
     55h4 {
     56    font-size: 20px;
     57    margin: 25px 0;
     58}
     59
     60h5 {
     61    font-size: 18px;
     62    margin: 30px 0;
     63}
     64
     65h6 {
     66    font-size: 16px;
     67    margin: 36px 0;
     68}
     69
     70hr {
     71    background: url(../images/dotted-line.png) repeat center top;
     72    background-size: 4px 4px;
     73    border: 0;
     74    height: 1px;
     75    margin: 0 0 24px;
     76}
     77
     78
     79/**
     80 * Text elements
     81 * ----------------------------------------------------------------------------
     82 */
     83
     84p {
     85    margin: 0 0 24px;
     86}
     87
     88ol,
     89ul {
     90    margin: 16px 0;
     91    padding: 0 0 0 40px;
     92}
     93
     94ul {
     95    list-style-type: square;
     96}
     97
     98ol {
     99    list-style: decimal outside;
     100}
     101
     102li > ul,
     103li > ol {
     104    margin: 0;
     105}
     106
     107dl {
     108    margin: 0 20px;
     109}
     110
     111dt {
     112    font-weight: bold;
     113}
     114
     115dd {
     116    margin: 0 0 20px;
     117}
     118
     119strong {
     120    font-weight: bold;
     121}
     122
     123code,
     124kbd,
     125pre,
     126samp {
     127    font-family: monospace, serif;
     128    font-size: 14px;
     129    -webkit-hyphens: auto;
     130    -moz-hyphens:    auto;
     131    -ms-hyphens:     auto;
     132    hyphens: none;
     133}
     134
     135pre {
     136    background: #f5f5f5;
     137    color: #666;
     138    font-family: monospace;
     139    font-size: 14px;
     140    margin: 20px 0;
     141    overflow: auto;
     142    padding: 20px;
     143    white-space: pre;
     144    white-space: pre-wrap;
     145    word-wrap: break-word;
     146}
     147
     148blockquote,
     149q {
     150    -webkit-hyphens: auto;
     151    -moz-hyphens:    auto;
     152    -ms-hyphens:     auto;
     153    hyphens: none;
     154    quotes: none;
     155}
     156
     157blockquote:before,
     158blockquote:after,
     159q:before,
     160q:after {
     161    content: "";
     162    content: none;
     163}
     164
     165blockquote {
     166    font-size: 24px;
     167    font-style: italic;
     168    font-weight: 300;
     169    margin: 24px 40px;
     170}
     171
     172blockquote blockquote {
     173    margin-right: 0;
     174}
     175
     176blockquote cite,
     177blockquote small {
     178    font-size: 14px;
     179    font-weight: normal;
     180    text-transform: uppercase;
     181}
     182
     183cite {
     184    border-bottom: 0;
     185}
     186
     187abbr[title] {
     188    border-bottom: 1px dotted;
     189}
     190
     191address {
     192    font-style: italic;
     193    margin: 0 0 24px;
     194}
     195
     196del {
     197    color: #333;
     198}
     199
     200ins {
     201    background: #fff9c0;
     202    border: none;
     203    color: #333;
     204    text-decoration: none;
     205}
     206
     207sub,
     208sup {
     209    font-size: 75%;
     210    line-height: 0;
     211    position: relative;
     212    vertical-align: baseline;
     213}
     214
     215sup {
     216    top: -0.5em;
     217}
     218
     219sub {
     220    bottom: -0.25em;
     221}
     222
     223
     224/**
     225 * Links
     226 * ----------------------------------------------------------------------------
     227 */
     228
     229a {
     230    color: #ca3c08;
     231    text-decoration: none;
     232}
     233
     234a:visited {
     235    color: #ac0404;
     236}
     237
     238a:focus {
     239    outline: thin dotted;
     240}
     241
     242a:active,
     243a:hover {
     244    color: #ea9629;
     245    outline: 0;
     246}
     247
     248a:hover {
     249    text-decoration: underline;
     250}
     251
     252
     253/**
     254 * Alignment
     255 * ----------------------------------------------------------------------------
     256 */
     257
     258.alignleft {
     259    float: left;
     260    margin: 5px 20px 5px 0;
     261}
     262
     263.alignright {
     264    float: right;
     265    margin: 5px 0 5px 20px;
     266}
     267
     268.aligncenter {
     269    display: block;
     270    margin: 5px auto;
     271}
     272
     273
     274/**
     275 * Tables
     276 * ----------------------------------------------------------------------------
     277 */
     278
     279table {
     280    border-bottom: 1px solid #ededed;
     281    border-collapse: collapse;
     282    border-spacing: 0;
     283    font-size: 14px;
     284    line-height: 2;
     285    margin: 0 0 20px;
     286    width: 100%;
     287}
     288
     289caption,
     290th,
     291td {
     292    font-weight: normal;
     293    text-align: left;
     294}
     295
     296caption {
     297    font-size: 16px;
     298    margin: 20px 0;
     299}
     300
     301th {
     302    font-weight: bold;
     303    text-transform: uppercase;
     304}
     305
     306td {
     307    border-top: 1px solid #ededed;
     308    padding: 6px 10px 6px 0;
     309}
     310
     311
     312/**
     313 * Images
     314 * ----------------------------------------------------------------------------
     315 */
     316
     317img {
     318    height: auto;
     319    max-width: 100%;
     320    vertical-align: middle;
     321}
     322
     323.wp-caption {
     324    background: transparent;
     325    border: none;
     326    margin: 0;
     327    padding: 0;
     328    text-align: left;
     329}
     330
     331.wp-caption.alignleft {
     332    margin: 5px 10px 5px 0;
     333}
     334
     335.wp-caption.alignright {
     336    margin: 5px 0 5px 10px;
     337}
     338
     339.wp-caption-dt {
     340    margin: 0;
     341}
     342
     343.wp-caption .wp-caption-text,
     344.wp-caption-dd {
     345    color: #220e10;
     346    font-style: italic;
     347    font-weight: 300;
     348    font-size: 18px;
     349    line-height: 1.5;
     350    margin-bottom: 24px;
     351    padding: 0;
     352}
  • trunk/wp-content/themes/twentythirteen/functions.php

    r23629 r23672  
    101101
    102102/**
    103  * Loads our special font CSS file.
     103 * Returns the Google font stylesheet URL, if available.
    104104 *
    105105 * The use of Source Sans Pro and Bitter by default is localized. For languages
    106106 * that use characters not supported by the font, the font can be disabled.
     107 *
     108 * @since Twenty Thirteen 1.0
     109 *
     110 * @return string Font stylesheet or empty string if disabled.
     111 */
     112function twentythirteen_fonts_url() {
     113    $fonts_url = '';
     114
     115    /* Translators: If there are characters in your language that are not
     116     * supported by Source Sans Pro, translate this to 'off'. Do not translate
     117     * into your own language.
     118     */
     119    $source_sans_pro = _x( 'on', 'Source Sans Pro font: on or off', 'twentythirteen' );
     120
     121    /* Translators: If there are characters in your language that are not
     122     * supported by Bitter, translate this to 'off'. Do not translate into your
     123     * own language.
     124     */
     125    $bitter = _x( 'on', 'Bitter font: on or off', 'twentythirteen' );
     126
     127    if ( 'off' !== $source_sans_pro || 'off' !== $bitter ) {
     128        $font_families = array();
     129
     130        if ( 'off' !== $source_sans_pro )
     131            $font_families[] = 'Source+Sans+Pro:400,700,300italic,400italic,700italic';
     132
     133        if ( 'off' !== $bitter )
     134            $font_families[] = 'Bitter:400,700';
     135
     136        $protocol = is_ssl() ? 'https' : 'http';
     137        $query_args = array(
     138            'family' => implode( '|', $font_families ),
     139            'subset' => 'latin,latin-ext',
     140        );
     141        $fonts_url = add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" );
     142    }
     143
     144    return $fonts_url;
     145}
     146
     147/**
     148 * Loads our special font CSS file.
    107149 *
    108150 * To disable in a child theme, use wp_dequeue_style()
     
    120162 */
    121163function twentythirteen_fonts() {
    122 
    123     /* Translators: If there are characters in your language that are not
    124      * supported by Source Sans Pro, translate this to 'off'. Do not translate
    125      * into your own language.
    126      */
    127     $source_sans_pro = _x( 'on', 'Source Sans Pro font: on or off', 'twentythirteen' );
    128 
    129     /* Translators: If there are characters in your language that are not
    130      * supported by Bitter, translate this to 'off'. Do not translate into your
    131      * own language.
    132      */
    133     $bitter = _x( 'on', 'Bitter font: on or off', 'twentythirteen' );
    134 
    135     if ( 'off' !== $source_sans_pro || 'off' !== $bitter ) {
    136         $font_families = array();
    137 
    138         if ( 'off' !== $source_sans_pro )
    139             $font_families[] = 'Source+Sans+Pro:400,700,300italic,400italic,700italic';
    140 
    141         if ( 'off' !== $bitter )
    142             $font_families[] = 'Bitter:400,700';
    143 
    144         $protocol = is_ssl() ? 'https' : 'http';
    145         $query_args = array(
    146             'family' => implode( '|', $font_families ),
    147             'subset' => 'latin,latin-ext',
    148         );
    149         wp_enqueue_style( 'twentythirteen-fonts', add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null );
    150     }
     164    $fonts_url = twentythirteen_fonts_url();
     165    if ( ! empty( $fonts_url ) )
     166        wp_enqueue_style( 'twentythirteen-fonts', esc_url_raw( $fonts_url ), array(), null );
    151167}
    152168add_action( 'wp_enqueue_scripts', 'twentythirteen_fonts' );
     169
     170/**
     171 * Adds additional stylesheets to the TinyMCE editor if needed.
     172 *
     173 * @uses twentythirteen_fonts_url() to get the Google Font stylesheet URL.
     174 *
     175 * @since Twenty Thirteen 1.0
     176 *
     177 * @param string $mce_css CSS path to load in TinyMCE.
     178 * @return string
     179 */
     180function twentythirteen_mce_css( $mce_css ) {
     181    $fonts_url = twentythirteen_fonts_url();
     182
     183    if ( empty( $fonts_url ) )
     184        return $mce_css;
     185
     186    if ( ! empty( $mce_css ) )
     187        $mce_css .= ',';
     188
     189    $mce_css .= esc_url_raw( str_replace( ',', '%2C', $fonts_url ) );
     190
     191    return $mce_css;
     192}
     193add_filter( 'mce_css', 'twentythirteen_mce_css' );
    153194
    154195/**
Note: See TracChangeset for help on using the changeset viewer.