From e0e2ace724a13ce8eadb6e8f866d25b2ec4f7bd2 Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Sat, 2 Nov 2013 04:36:12 +0000 Subject: [PATCH] Twenty Fourteen: revamp the RTL stylesheet and related cleanup. Props iamtakashi, see #25801. Built from https://develop.svn.wordpress.org/trunk@25999 git-svn-id: http://core.svn.wordpress.org/trunk@25932 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentyfourteen/functions.php | 2 +- .../themes/twentyfourteen/inc/customizer.php | 9 + .../themes/twentyfourteen/js/functions.js | 4 +- wp-content/themes/twentyfourteen/rtl.css | 1127 +++++++++-------- wp-content/themes/twentyfourteen/style.css | 190 +-- 5 files changed, 707 insertions(+), 625 deletions(-) diff --git a/wp-content/themes/twentyfourteen/functions.php b/wp-content/themes/twentyfourteen/functions.php index b259343c34..dfe4618000 100644 --- a/wp-content/themes/twentyfourteen/functions.php +++ b/wp-content/themes/twentyfourteen/functions.php @@ -241,7 +241,7 @@ function twentyfourteen_scripts() { if ( 'slider' == get_theme_mod( 'featured_content_layout' ) ) wp_enqueue_script( 'twentyfourteen-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '20131028', true ); - wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131011', true ); + wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131102', true ); } add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' ); diff --git a/wp-content/themes/twentyfourteen/inc/customizer.php b/wp-content/themes/twentyfourteen/inc/customizer.php index 2937abc2da..f173f80ff8 100644 --- a/wp-content/themes/twentyfourteen/inc/customizer.php +++ b/wp-content/themes/twentyfourteen/inc/customizer.php @@ -151,6 +151,10 @@ function twentyfourteen_customizer_styles() { input[type="submit"], .search-toggle, .hentry .mejs-controls .mejs-time-rail .mejs-time-current, + .widget button, + .widget input[type="button"], + .widget input[type="reset"], + .widget input[type="submit"], .widget_calendar tbody a, .slider-control-paging a:hover:before, .slider-direction-nav a:hover { @@ -228,18 +232,23 @@ function twentyfourteen_customizer_styles() { .entry-title a:hover, .entry-meta a:hover, .cat-links a:hover, + .entry-content .edit-link a:hover, .post-navigation a:hover, .image-navigation a:hover, .comment-author a:hover, .comment-list .pingback a:hover, .comment-list .trackback a:hover, .comment-metadata a:hover, + .comment-reply-title small a:hover, .widget a:hover, .widget a:focus, .widget a:active, .content-sidebar .widget a:hover, .content-sidebar .widget a:focus, .content-sidebar .widget a:active, + .content-sidebar .widget .widget-title a:hover, + .content-sidebar .widget .widget-title a:focus, + .content-sidebar .widget .widget-title a:active, .content-sidebar .widget_twentyfourteen_ephemera .entry-meta a:hover, .featured-content a:hover { color: ' . $accent_much_lighter . '; diff --git a/wp-content/themes/twentyfourteen/js/functions.js b/wp-content/themes/twentyfourteen/js/functions.js index c2b7e75ee8..86eb1c36f8 100644 --- a/wp-content/themes/twentyfourteen/js/functions.js +++ b/wp-content/themes/twentyfourteen/js/functions.js @@ -77,8 +77,8 @@ } ); } - // Focus styles for primary menu. - $( '.primary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() { + // Focus styles for menus. + $( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() { $( this ).parents().toggleClass( 'focus' ); } ); } ); diff --git a/wp-content/themes/twentyfourteen/rtl.css b/wp-content/themes/twentyfourteen/rtl.css index 5336b74aea..d7f9fcacf4 100644 --- a/wp-content/themes/twentyfourteen/rtl.css +++ b/wp-content/themes/twentyfourteen/rtl.css @@ -1,63 +1,89 @@ /* Theme Name: Twenty Fourteen +Description: Adds support for languages written in a Right To Left (RTL) direction. +It's easy, just a matter of overwriting all the horizontal positioning attributes +of your CSS stylesheet in a separate stylesheet file named rtl.css. + +See http://codex.wordpress.org/Right_to_Left_Language_Support */ +/** + * Table of Contents: + * + * 1.0 - Reset + * 2.0 - Repeatable Patterns + * 4.0 - Header + * 5.0 - Navigations + * 6.0 - Content + * 6.4 - Entry Content + * 6.5 - Galleries + * 6.7 - Post/Paging Navigation + * 6.10 - Contributor Page + * 6.14 - Comments + * 7.0 - Sidebar + * 7.1 - Widgets + * 7.2 - Content Sidebar Widgets + * 9.0 - Featured Content + * 10.0 - Media Queries + * ----------------------------------------------------------------------------- + */ + + +/** + * 1.0 Reset + * ----------------------------------------------------------------------------- + */ + body { direction: rtl; unicode-bidi: embed; } -/* =Reset ------------------------------------------------ */ - -caption, th, td { - text-align: right; +a { + display: inline-block; } - -/* =Global ------------------------------------------------ */ - -/* Text elements */ - -ul, ol { - margin: 0 22px 24px 0; +ul, +ol { + margin: 0 20px 24px 0; } li > ul, li > ol { - margin-right: 20px; - margin-left: auto; + margin: 0 20px 0 0; } -.site-content blockquote.alignright { - margin: 7px 0 7px 24px; +caption, +th, +td { + text-align: right; } -.site-content blockquote.alignleft { - margin: 7px 24px 7px 0; -} -/* Alignment */ -.alignright { - float: right; - margin-left: 24px; - margin-right: auto; -} +/** + * 2.0 Repeatable Patterns + * ----------------------------------------------------------------------------- + */ -.alignleft { - float: left; - margin-right: 24px; - margin-left: auto; +.wp-caption-text { + padding-left: 10px; + padding-right: 0; } .screen-reader-text:focus { - left: auto; right: 5px; + left: auto; } -/* =Header ------------------------------------------------ */ + +/** + * 4.0 Header + * ----------------------------------------------------------------------------- + */ + +.site-title { + float: right; +} .search-toggle { float: left; @@ -65,120 +91,52 @@ li > ol { margin-right: auto; } -.site-title { - float: right; +.search-box .search-field { + float: left; + padding: 1px 6px 2px 2px; +} + +.search-toggle .screen-reader-text { + right: auto; + left: 0; +} + + +/** + * 5.0 Navigations + * ----------------------------------------------------------------------------- + */ + +.site-navigation ul ul { + margin-right: 20px; + margin-left: auto; } .menu-toggle { + right: auto; left: 0; - right: auto; -} - -.search-toggle { - float: right; - padding: 25px 0 0 10px; -} - -.search-box .search-field { - float: left; } -/* =Menu ------------------------------------------------ */ +/** + * 6.0 Content + * ----------------------------------------------------------------------------- + */ -/* Primary Navigation */ -.primary-navigation ul { - padding-right: 0; - padding-left: 0; -} - -.primary-navigation ul ul li { - margin-left: auto; - margin-right: 15px; -} - -.primary-navigation ul ul { - right: -999em; - left: auto; -} - -.primary-navigation ul ul ul { - right: -999em; - left: auto; -} - - -.primary-navigation ul li:hover > ul, -.primary-navigation ul li.focus > ul { - right: auto; -} - -.primary-navigation ul ul li:hover > ul, -.primary-navigation ul ul li.focus > ul { - left: auto; - right: 100%; -} - -/* Secondary Navigation */ -.secondary-navigation ul ul { - margin: 0 20px 0 0; -} - -/* Mobile Navigations */ -.mobile-navigation ul ul li { - margin-right: 15px; - margin-left: auto; -} - - -/* =Content ------------------------------------------------ */ - -.entry-content th, -.comment-content th { - border-left: 1px solid rgba(0, 0, 0, 0.1); - border-right: none; -} - -.entry-content td, -.comment-content td { - border-left: 1px solid rgba(0, 0, 0, 0.1); - border-right: none; -} - -.more-link .meta-nav, -..post-format-archive-link .meta-nav { - right: 0; - left: auto; -} - -.more-link:hover .meta-nav, -..post-format-archive-link:hover .meta-nav { - right: 5px; - left: auto; -} - -.page-links a, -.page-links > span { - margin-left: 1px; - margin-right: auto; -} - -.page-links > span.page-links-title { - padding-right: 0; - padding-left: 0; -} +/** + * 6.3 Entry Meta + * ----------------------------------------------------------------------------- + */ .tag-links a { margin: 0 10px 4px 4px; } .tag-links a:before { - border-left: 10px solid #8c8c8c; - right: -10px; + border-right: 0; + border-left: 8px solid #767676; + right: -7px; left: auto; - border-right: none; } .tag-links a:hover:before, @@ -192,64 +150,100 @@ li > ol { } -/* =Post Formatted posts column ------------------------------------------------ */ +/** + * 6.4 Entry Content + * ----------------------------------------------------------------------------- + */ -.widget_twentyfourteen_ephemera .widget-title:before { - margin-left: 10px; +.page-links a, +.page-links > span { + margin: 0 0 2px 1px; +} + +.page-links > .page-links-title { + padding-right: 0; + padding-left: 9px; +} + +.more-link .meta-nav, +.post-format-archive-link .meta-nav { + right: 0; + left: auto; +} + +.more-link:hover .meta-nav, +.post-format-archive-link:hover .meta-nav { + right: 5px; + left: auto; +} + + +/** + * 6.5 Gallery + * ----------------------------------------------------------------------------- + */ + +.gallery-item { + float: right; + margin: 0 0 4px 4px; +} + +.gallery-columns-1 .gallery-item:nth-of-type(1n), +.gallery-columns-2 .gallery-item:nth-of-type(2n), +.gallery-columns-3 .gallery-item:nth-of-type(3n), +.gallery-columns-4 .gallery-item:nth-of-type(4n), +.gallery-columns-5 .gallery-item:nth-of-type(5n), +.gallery-columns-6 .gallery-item:nth-of-type(6n), +.gallery-columns-7 .gallery-item:nth-of-type(7n), +.gallery-columns-8 .gallery-item:nth-of-type(8n), +.gallery-columns-9 .gallery-item:nth-of-type(9n) { margin-right: auto; + margin-left: 0; } - -/* =Media ------------------------------------------------ */ - -img.alignright, -.wp-caption.alignright, -blockquote.alignright { - margin: 7px 0 7px 24px; -} - -img.alignleft, -.wp-caption.alignleft, -blockquote.alignleft { - margin: 7px 24px 7px 0; -} - -.wp-caption-text { - padding: 0 0 0 10px; +.gallery-caption { + padding: 6px 8px; + right: 0; + left: auto; text-align: right; } +.gallery-caption:before { + right: 0; + left: auto; +} -/* =Navigation ------------------------------------------------ */ + +/** + * 6.7 Post/Image/Paging Navigation + * ----------------------------------------------------------------------------- + */ .paging-navigation .page-numbers { - margin-left: 5px; - margin-right: auto; -} - -.post-navigation [rel="prev"], -.post-navigation [rel="next"], -.image-navigation .previous-image, -.image-navigation .next-image { - text-align: right; -} - -.comment-navigation { - padding-right: 10px; - padding-left: 0; -} - -.comment-navigation .nav-previous a { - margin-left: 10px; margin-right: auto; + margin-left: 1px; } -/* =Comments ------------------------------------------------ */ +/** + * 6.10 Contributor Page + * ----------------------------------------------------------------------------- + */ + +.contributor-avatar { + float: right; + margin: 0 0 20px 30px; +} + +.contributor-posts-link:before { + margin: -3px -3px -2px 5px; +} + + +/** + * 6.14 Comments + * ----------------------------------------------------------------------------- + */ .comment-author { padding-right: 36px; @@ -261,12 +255,27 @@ blockquote.alignleft { left: auto; } -.comment-metadata, -.comment-content { +.comment-content, +.comment-list .reply, +.comment-metadata { padding-right: 36px; padding-left: 0; } +.comment-edit-link { + margin-right: 10px; + margin-left: auto; +} + +.comment-edit-link:before { + margin: 3px 0 0 2px; +} + +.comment-reply-link:before, +.comment-reply-login:before { + margin: 3px 0 0 3px; +} + .comment-content ul, .comment-content ol { margin: 0 22px 24px 0; @@ -277,334 +286,393 @@ blockquote.alignleft { margin-left: auto; } -.comment .comment-respond { - margin-right: 36px; - margin-left: auto; +.comment-reply-title small a { + float: left; } -.comment-edit-link { - margin-left: 0; +.comment-navigation .nav-previous a { + margin-right: auto; + margin-left: 10px; +} + + +/** + * 7.0 Sidebars + * ----------------------------------------------------------------------------- + */ + +/** + * 7.1 Widgets + * ----------------------------------------------------------------------------- + */ + +.widget li > ol, +.widget li > ul { margin-right: 10px; -} - -.comment-edit-link:before { - margin: 3px 0 0 2px; -} - -.comment-reply-link:before, -.comment-reply-login:before { - margin: 3px 0 0 3px; -} - - -/* =Widgets ------------------------------------------------ */ - -.widget li > ul, -.widget li > ol { - margin: 0 10px 0 0; -} - -.widget select, -.widget iframe { - margin-right: 1px; margin-left: auto; } -/* Caledar widget*/ +.widget input, +.widget textarea { + padding: 1px 4px 2px 2px; +} + .widget_calendar caption { text-align: right; } -.widget_calendar#prev { +.widget_calendar #prev { padding-right: 5px; padding-left: 0; } .widget_calendar #next { - border-left: 1px solid rgba(255, 255, 255, 0.2); + padding-right: 0; padding-left: 5px; text-align: left; - padding-right: 0; - border-right: none; } +.widget_twentyfourteen_ephemera .entry-content ul, +.widget_twentyfourteen_ephemera .entry-content ol { + margin: 0 20px 18px 0; +} -/* =Content Sidebar ------------------------------------------------ */ - -.content-sidebar .widget .children, -.content-sidebar .widget .sub-menu { +.widget_twentyfourteen_ephemera .entry-content li > ul, +.widget_twentyfourteen_ephemera .entry-content li > ol { margin: 0 20px 0 0; } -.content-sidebar .widget .widgets-multi-column-grid li { - padding: 0 0 6px 8px; + +/** + * 7.2 Content Sidebar Widgets + * ----------------------------------------------------------------------------- + */ + +.content-sidebar .widget li > ol, +.content-sidebar .widget li > ul { + margin-right: 18px; + margin-left: auto; +} + +.content-sidebar .widget_twentyfourteen_ephemera .widget-title:before { + margin: -1px 0 0 18px; } -/* =Contributor Page ------------------------------------------------ */ +/** + * 9.0 Featured Content + * ----------------------------------------------------------------------------- + */ -.contributor-avatar { +.featured-content .post-thumbnail img { + right: 0; + left: auto; +} + +.slider-viewport { + direction: ltr; +} + +.slider .featured-content .entry-header { + right: 0; + left: auto; + text-align: right; +} + +.slider-control-paging { float: right; - margin: 0 0 20px 30px; } -.contributor-posts-link:before { - margin: -3px -3px -2px 5px; +.slider-control-paging li { + float: right; + margin: 2px 0 2px 4px; +} + +.slider-control-paging li:last-child { + margin-right: auto; + margin-left: 0; +} + +.slider-control-paging a:before { + right: 10px; + left: auto; +} + +.slider-direction-nav li { + border-width: 2px 0 0 1px; + float: right; +} + +.slider-direction-nav li:last-child { + border-width: 2px 1px 0 0; +} + +.slider-direction-nav a:before { + content: "\f429"; +} + +.slider-direction-nav .slider-next:before { + content: "\f430"; } -/* =Media Queries ------------------------------------------------ */ +/** + * 10.0 Media Queries + * ----------------------------------------------------------------------------- + */ -/* Mobile list style */ @media screen and (max-width: 400px) { - .list-view .post-thumbnail img { + .list-view .site-content .post-thumbnail img { float: right; margin: 0 0 3px 10px; } } -@media screen and (min-width: 400px) { - .content-area .featured-post:before, - .content-area .post-format a:before, - .content-area .entry-date a:before, - .content-area .entry-date a:before, - .content-area .byline a:before, - .content-area .comments-link a:before, - .entry-comment .edit-link a:before, - .content-area .full-size-link a:before, - .content-area .parent-post-link a:before { - margin: 0 0 0 2px; - } - - .content-area .entry-meta > span { - margin-left: 10px; +@media screen and (min-width: 401px) { + .site-content .entry-meta > span { margin-right: auto; + margin-left: 10px; } - .content-area .format-video .post-format a:before { + .site-content .format-video .post-format a:before { margin: -1px 0 0 2px; } - .content-area .format-image .post-format a:before { - margin: -1px 0 0 2px; - } - - .content-area .format-gallery .post-format a:before { - margin: -1px 0 0 4px; - } - - .content-area .featured-post:before { + .site-content .format-image .post-format a:before { margin: -1px 0 0 3px; } - .content-area .entry-date a:before, - .attachment span.entry-date:before { + .site-content .format-quote .post-format a:before { + margin: -1px 0 0 3px; + } + + .site-content .format-gallery .post-format a:before { + margin: -1px 0 0 4px; + } + + .site-content .format-aside .post-format a:before { + margin: -1px 0 0 3px; + } + + .site-content .format-link .post-format a:before { + margin: -1px 0 0 3px; + } + + .site-content .featured-post:before { + margin: 0 0 0 3px; + } + + .site-content .entry-date a:before, + .attachment .site-content span.entry-date:before { margin: 0 0 0 1px; } - .content-area .comments-link a:before { + .site-content .comments-link a:before { margin: -1px 0 0 2px; } - .entry-comment .edit-link a:before { + .entry-content .edit-link a:before, + .entry-meta .edit-link a:before { margin: -1px 0 0 2px; } - .page .entry-comment .edit-link a:before { - margin: 5px 0 0 2px; + .site-content .full-size-link a:before { + margin: -1px 0 0 2px; + } + + .site-content .parent-post-link a:before { + margin: -1px 0 0 2px; } } -@media screen and (min-width: 672px) { +@media screen and (min-width: 642px) { + .site-content .entry-header { + padding-right: 30px; + padding-left: 30px; + } +} + +@media screen and (min-width: 673px) { + .search-toggle { + margin-right: auto; + margin-left: 18px; + } + .content-area { float: right; } .site-content { - margin: 0 0 0 33.33333333%; + margin-right: auto; + margin-left: 33.33333333%; + } + + .archive-header, + .comments-area, + .image-navigation, + .page-header, + .page-content, + .post-navigation, + .site-content .entry-content, + .site-content .entry-summary, + .site-content footer.entry-meta { + padding-right: 30px; + padding-left: 30px; + } + + .full-width .site-content { + margin-left: 0; } .content-sidebar { float: left; - margin: 0 -30.35714285% 0 0; - padding: 36px 0 24px 10px; + margin-right: -33.33333333%; + margin-left: auto; } - .ephemera { - float: left; - margin: 0 -30.35714285% 0 0; - padding: 36px 0 0 10px; - } - - .featured-content .hentry { + .grid .featured-content .hentry { float: right; } -} -@media screen and (min-width: 740px) { - .comment-author { - padding-right: 60px; + .slider-control-paging { + padding-right: 20px; padding-left: 0; } - .comment-metadata, - .comment-content { - padding-right: 60px; - padding-left: 0; + .slider-direction-nav { + float: left; } - .comments-title, - .no-comments, - .comment-respond, - .comments-area article, - .comment-list .trackback, - .comment-list .pingback, - .post-navigation [rel="prev"], - .post-navigation [rel="next"] { - padding-left: 9.12778904%; - padding-right: 9.12778904%; + .slider-direction-nav li { + padding: 0 0 0 1px; } - .comment-navigation { - padding-right: 9.12778904%; - padding-left: 0; - } - - .image-navigation .previous-image, - .image-navigation .next-image, - .full-width .comment-navigation, - .full-width .comments-title, - .full-width .comment-respond, - .full-width .comments-area article, - .full-width .comment-list .trackback, - .full-width .comment-list .pingback { - padding-left: 6.04307432%; - padding-right: 6.04307432%; + .slider-direction-nav li:last-child { + padding: 0 1px 0 0; } } @media screen and (min-width: 782px) { .header-main { - padding: 0 27px 0 0; + padding-right: 30px; + padding-left: 0; } .search-toggle { + margin-right: auto; margin-left: 0; } + + .primary-navigation { + float: left; + margin: 0 -10px 0 1px; + } + + .primary-navigation ul ul { + float: right; + margin: 0; + right: -999em; + left: auto; + } + + .primary-navigation ul ul ul { + right: -999em; + left: auto; + } + + .primary-navigation ul li:hover > ul, + .primary-navigation ul li.focus > ul { + right: auto; + left: auto; + } + + .primary-navigation ul ul li:hover > ul, + .primary-navigation ul ul li.focus > ul { + right: 100%; + left: auto; + } +} + +@media screen and (min-width: 810px) { + .attachment .entry-attachment .attachment { + margin-right: -168px; + margin-left: -168px; + } + + .attachment .entry-attachment .attachment a { + display: block; + } + + .contributor-avatar { + margin-right: -168px; + margin-left: auto; + } + + .contributor-summary { + float: right; + } + + .full-width .site-content blockquote.alignright, + .full-width .site-content img.size-full.alignright, + .full-width .site-content img.size-large.alignright, + .full-width .site-content img.size-medium.alignright, + .full-width .site-content .wp-caption.alignright { + margin-right: -168px; + margin-left: auto; + } + + .full-width .site-content blockquote.alignleft, + .full-width .site-content img.size-full.alignleft, + .full-width .site-content img.size-large.alignleft, + .full-width .site-content img.size-medium.alignleft, + .full-width .site-content .wp-caption.alignleft { + margin-right: auto; + margin-left: -168px; + } } @media screen and (min-width: 870px) { - .content-area .entry-header { - margin-left: 8.03571428%; - margin-right: 12.5%; - } - - .content-area .entry-content, - .content-area .entry-summary { - margin-left: 8.03571428%; - margin-right: 12.5%; - } - - .content-area footer.entry-meta { - margin: 12px 12.5% 24px 8.03571428%; - } - - .page .content-area .entry-header, - .error404 .content-area .entry-header { - margin: 0 12.5% 0 8.03571428%; - } - - .archive-header, - .page-header { - margin: 0 12.5% 24px 8.03571428%; - } - - .comments-title, - .no-comments, - .comment-respond, - .comments-area article, - .comment-list .trackback, - .comment-list .pingback, - .post-navigation [rel="prev"], - .post-navigation [rel="next"] { - padding-left: 12.39493534%; - padding-right: 17.06896551%; - } - - .comment-respond { - padding-left: 13.8900862%; - } - - .comment-list, - .full-width .comment-list { - margin-right: -70px; - margin-left: auto; - } - - .comment-navigation { - padding-right: 17.06896551%; + .comment-author, + .comment-content, + .comment-list .reply, + .comment-metadata { + padding-right: 55px; padding-left: 0; } - .content-sidebar { - padding-top: 72px; - } - - .image-navigation .previous-image, - .image-navigation .next-image, - .full-width .comment-navigation, - .full-width .comments-title, - .full-width .comment-respond, - .full-width .comments-area article, - .full-width .comment-list .trackback, - .full-width .comment-list .pingback { - padding-left: 11.30926724%; - padding-right: 11.30926724%; - } - - .site-content blockquote.alignright { - margin-right: -20%; + .comment-list .children { + margin-right: 35px; margin-left: auto; } - - .site-content blockquote.alignleft { - margin-left: -20%; - margin-right: auto; - } - - .content-area .no-results .entry-header { - margin-right: 12.5%; - margin-left: 8.03571428%; - } - - .content-area .no-results .entry-content { - margin-right: 12.5%; - margin-left: 8.03571428%; - } } @media screen and (min-width: 1008px) { - .site:before { - right: 0; - left: auto; - } - - .header-main { - padding-right: 27px; - padding-left: 0; - } - .search-box-wrapper { - padding-right: 222px; + padding-right: 182px; padding-left: 0; } + .main-content { + float: right; + } + .site-content { - margin: 0 222px 0 27.31707317%; + margin-right: 182px; + margin-left: 29.04761904%; + } + + .full-width .site-content { + margin-right: 182px; + } + + .content-sidebar { + margin-right: -29.04761904%; + margin-left: auto; + } + + .site:before { + right: 0; + left: auto; } #secondary { @@ -612,193 +680,160 @@ blockquote.alignleft { margin: 0 -100% 0 0; } - .front-page-content-wrapper { + .secondary-navigation ul ul { + right: -999em; + left: auto; + } + + .secondary-navigation ul li:hover > ul, + .secondary-navigation ul li.focus > ul { + right: 162px; + left: auto; + } + + .footer-sidebar .widget { float: right; } + .featured-content { + padding-right: 182px; + padding-left: 0; + } +} + +@media screen and (min-width: 1040px) { + .archive-header, + .comments-area, + .image-navigation, + .page-header, + .page-content, + .post-navigation, + .site-content .entry-header, + .site-content .entry-content, + .site-content .entry-summary, + .site-content footer.entry-meta { + padding-right: 15px; + padding-left: 15px; + } + + .full-width .archive-header, + .full-width .comments-area, + .full-width .image-navigation, + .full-width .page-header, + .full-width .page-content, + .full-width .post-navigation, + .full-width .site-content .entry-header, + .full-width .site-content .entry-content, + .full-width .site-content .entry-summary, + .full-width .site-content footer.entry-meta { + padding-right: 30px; + padding-left: 30px; + } +} + +@media screen and (min-width: 1080px) { .site-content { - margin: 0 222px 0 27.31707317%; + margin-right: 222px; + margin-left: 29.04761904%; } - .content-sidebar, - .ephemera { - margin: 0 -27.31707317% 0 0; + .full-width .site-content { + margin-right: 222px; } + .search-box-wrapper, .featured-content { padding-right: 222px; padding-left: 0; } - .site-footer { - padding-right: 27px; - padding-left: 0; - } - - .secondary-navigation ul ul { - right: 168px; + .secondary-navigation ul li:hover > ul, + .secondary-navigation ul li.focus > ul { + right: 202px; left: auto; } - .full-width.site-content { - margin-right: 222px; - margin-left: auto; - } - - .comments-title, - .no-comments, - .comment-respond, - .comments-area article, - .comment-list .trackback, - .comment-list .pingback, - .post-navigation [rel="prev"], - .post-navigation [rel="next"] { - padding-left: 9.87001616%; - padding-right: 9.19765166%; - } - - .comment-list, - .full-width .comment-list { - margin-right: 0; - margin-left: auto; - } - - .comment-navigation { - padding-right: 9.19765166%; + .slider-control-paging { + padding-right: 24px; padding-left: 0; } - .image-navigation .previous-image, - .image-navigation .next-image, - .full-width .comment-navigation, - .full-width .comments-title, - .full-width .comment-respond, - .full-width .comments-area article, - .full-width .comment-list .trackback, - .full-width .comment-list .pingback { - padding-left: 5.882236%; - padding-right: 5.882236%; + .slider-control-paging li { + margin: 12px 0 12px 12px; } - .site-content blockquote.alignright { - margin-right: 0; - margin-left: auto; - } - - .site-content blockquote.alignleft { - margin-left: 0; - margin-right: auto; - } - - .site-footer { - padding-left: 0; - padding-right: 0; - } - - .site-footer .widget-area { - float: right; + .slider-control-paging a:before { + right: 6px; + left: auto; } } -@media screen and (min-width: 1150px) { - .content-area .entry-header { - margin: -48px 12.5% 0 8.03571428%; - } - - .content-area .entry-content, - .content-area .entry-summary { - margin: 0 12.5% 0 8.03571428%; - } - - .content-area footer.entry-meta { - margin: 12px 12.5% 24px 8.03571428%; - } - - .comments-title, - .no-comments, - .comment-respond, - .comments-area article, - .comment-list .trackback, - .comment-list .pingback, - .post-navigation [rel="prev"], - .post-navigation [rel="next"] { - padding-left: 12.44146986%; - padding-right: 16.77524429%; - } - - .comment-respond { - padding-left: 13.73697916%; - } - - .comment-list, - .full-width .comment-list { - margin-right: -70px; - margin-left: auto; - } - - .comment-navigation { - padding-right: 16.77524429%; - padding-left: 0; - } - +@media screen and (min-width: 1110px) { .archive-header, - .page-header { - margin: 0 12.5% 24px 8.03571428%; + .comments-area, + .image-navigation, + .page-header, + .page-content, + .post-navigation, + .site-content .entry-header, + .site-content .entry-content, + .site-content .entry-summary, + .site-content footer.entry-meta { + padding-right: 30px; + padding-left: 30px; + } +} + +@media screen and (min-width: 1218px) { + .archive-header, + .comments-area, + .image-navigation, + .page-header, + .page-content, + .post-navigation, + .site-content .entry-header, + .site-content .entry-content, + .site-content .entry-summary, + .site-content footer.entry-meta { + margin-left: 54px; } - .page .content-area .entry-header, - .error404 .content-area .entry-header { - margin: 0 12.5% 0 8.03571428%; + .full-width .archive-header, + .full-width .comments-area, + .full-width .image-navigation, + .full-width .page-header, + .full-width .page-content, + .full-width .post-navigation, + .full-width .site-content .entry-header, + .full-width .site-content .entry-content, + .full-width .site-content .entry-summary, + .full-width .site-content footer.entry-meta { + margin-right: auto; + margin-left: auto; } - .image-navigation .previous-image, - .image-navigation .next-image, - .full-width .comment-navigation, - .full-width .comments-title, - .full-width .comment-respond, - .full-width .comments-area article, - .full-width .comment-list .trackback, - .full-width .comment-list .pingback { - padding-left: 11.21868265%; - padding-right: 11.21868265%; + .comment-author .avatar { + right: -55px; + left: auto; } - .content-area .entry-content .wp-caption.alignright .wp-caption-text { - padding-right: 10px; + .comment-author, + .comment-content, + .comment-list .reply, + .comment-metadata { + padding-right: 0; padding-left: 0; } +} +@media screen and (min-width: 1260px) { .site-content blockquote.alignright { - margin-right: -20%; + margin-right: -18%; margin-left: auto; } .site-content blockquote.alignleft { - margin-left: -20%; + margin-left: -18%; margin-right: auto; } -} - -@media screen and (min-width: 1230px) { - .content-sidebar, - .ephemera { - padding-left: 0; - } - - .content-area .full-width .entry-header, - .content-area .full-width .entry-content, - .content-area .full-width footer.entry-meta { - margin: 0 11.21868265% 0 0; - } - - .image-navigation .previous-image, - .image-navigation .next-image, - .full-width .comment-navigation, - .full-width .comments-title, - .full-width .comment-respond, - .full-width .comments-area article, - .full-width .comment-list .trackback, - .full-width .comment-list .pingback { - padding-left: 0; - } } \ No newline at end of file diff --git a/wp-content/themes/twentyfourteen/style.css b/wp-content/themes/twentyfourteen/style.css index 710794c4d3..9a6594b20a 100644 --- a/wp-content/themes/twentyfourteen/style.css +++ b/wp-content/themes/twentyfourteen/style.css @@ -23,19 +23,19 @@ Use it to make something cool, have fun, and share what you've learned with othe * 5.0 - Navigations * 6.0 - Content * 6.1 - Post Thumbnail - * 6.1 - Entry Header - * 6.2 - Entry Meta - * 6.3 - Entry Content - * 6.4 - Galleries - * 6.5 - Post Formats - * 6.6 - Post/Paging Navigation - * 6.7 - Attachments - * 6.8 - Archives - * 6.9 - Contributor Page - * 6.10 - 404 Page - * 6.11 - Full-width - * 6.12 - Singular - * 6.13 - Comments + * 6.2 - Entry Header + * 6.3 - Entry Meta + * 6.4 - Entry Content + * 6.5 - Galleries + * 6.6 - Post Formats + * 6.7 - Post/Paging Navigation + * 6.8 - Attachments + * 6.9 - Archives + * 6.10 - Contributor Page + * 6.11 - 404 Page + * 6.12 - Full-width + * 6.13 - Singular + * 6.14 - Comments * 7.0 - Sidebar * 7.1 - Widgets * 7.2 - Content Sidebar Widgets @@ -761,6 +761,7 @@ img.wp-smiley { .comment-edit-link:before, .comment-reply-link:before, .comment-reply-login:before, +.comment-reply-title small a:before, .contributor-posts-link:before, .menu-toggle:before, .search-toggle:before, @@ -1017,7 +1018,7 @@ span + .edit-link:before, display: none; height: auto; margin: 0; - min-height: 216px; + min-height: 192px; position: relative; width: 100%; z-index: 0; @@ -1160,8 +1161,8 @@ a.post-thumbnail:hover { text-transform: uppercase; } -.tag-links a:hover, -.tag-links a:focus { +.entry-meta .tag-links a:hover, +.entry-meta .tag-links a:focus { background-color: #2b2b2b; color: #fff; text-decoration: none; @@ -1197,7 +1198,7 @@ a.post-thumbnail:hover { /** - * 6.3 Entry Content + * 6.4 Entry Content * ----------------------------------------------------------------------------- */ @@ -1268,6 +1269,10 @@ a.post-thumbnail:hover { text-decoration: none; } +.entry-content .edit-link a:hover { + color: #55d737; +} + /* Mediaelements */ .hentry .mejs-container { @@ -1371,7 +1376,7 @@ a.post-thumbnail:hover { /** - * 6.4 Gallery + * 6.5 Gallery * ----------------------------------------------------------------------------- */ @@ -1499,7 +1504,7 @@ a.post-thumbnail:hover { /** - * 6.5 Post Formats + * 6.6 Post Formats * ----------------------------------------------------------------------------- */ @@ -1520,7 +1525,7 @@ a.post-thumbnail:hover { /** - * 6.6 Post/Image/Paging Navigation + * 6.7 Post/Image/Paging Navigation * ----------------------------------------------------------------------------- */ @@ -1606,7 +1611,7 @@ a.post-thumbnail:hover { /** - * 6.7 Attachments + * 6.8 Attachments * ----------------------------------------------------------------------------- */ @@ -1628,7 +1633,7 @@ a.post-thumbnail:hover { /** - * 6.8 Archives + * 6.9 Archives * ----------------------------------------------------------------------------- */ @@ -1655,7 +1660,7 @@ a.post-thumbnail:hover { /** - * 6.9 Contributor Page + * 6.10 Contributor Page * ----------------------------------------------------------------------------- */ @@ -1711,7 +1716,7 @@ a.post-thumbnail:hover { /** - * 6.10 404 Page + * 6.11 404 Page * ----------------------------------------------------------------------------- */ @@ -1725,7 +1730,7 @@ a.post-thumbnail:hover { /** - * 6.11 Full-width + * 6.12 Full-width * ----------------------------------------------------------------------------- */ @@ -1735,7 +1740,7 @@ a.post-thumbnail:hover { /** - * 6.12 Singular + * 6.13 Singular * ----------------------------------------------------------------------------- */ @@ -1750,7 +1755,7 @@ a.post-thumbnail:hover { /** - * 6.13 Comments + * 6.14 Comments * ----------------------------------------------------------------------------- */ @@ -1896,7 +1901,7 @@ a.post-thumbnail:hover { } .comment .comment-respond { - margin-left: 36px; + margin-top: 24px; } .comment-respond h3 { @@ -1929,6 +1934,24 @@ a.post-thumbnail:hover { line-height: 1.5; } +.comment-reply-title small a { + color: #2b2b2b; + float: right; + height: 24px; + overflow: hidden; + width: 24px; +} + +.comment-reply-title small a:hover { + color: #55d737; +} + +.comment-reply-title small a:before { + content: "\f405"; + font-size: 32px; + margin-top: -2px; +} + .comment-navigation { font-size: 12px; line-height: 2; @@ -2169,6 +2192,8 @@ a.post-thumbnail:hover { .widget input[type="button"], .widget input[type="reset"], .widget input[type="submit"] { + background-color: #24890d; + font-size: 12px; padding: 5px 15px 4px; } @@ -2325,7 +2350,7 @@ a.post-thumbnail:hover { .widget_pages li:first-child, .widget_recent_comments li:first-child, .widget_recent_entries li:first-child { - border-top: none; + border-top: 0; } .widget_archive li li, @@ -2336,7 +2361,7 @@ a.post-thumbnail:hover { .widget_pages li li, .widget_recent_comments li li, .widget_recent_entries li li { - border-top: none; + border-top: 0; padding-bottom: 0; } @@ -2453,10 +2478,10 @@ a.post-thumbnail:hover { text-transform: uppercase; } -.content-sidebar .widget-title a, -.content-sidebar .widget-title a:hover, -.content-sidebar .widget-title a:focus, -.content-sidebar .widget-title a:active { +.content-sidebar .widget .widget-title a, +.content-sidebar .widget .widget-title a:hover, +.content-sidebar .widget .widget-title a:focus, +.content-sidebar .widget .widget-title a:active { color: #2b2b2b; } @@ -2932,11 +2957,11 @@ a.post-thumbnail:hover { .site-content .featured-post:before { content: "\f308"; - margin: -1px 3px 0 0; + margin: 0 3px 0 0; } .site-content .entry-date a:before, - .attachment span.entry-date:before { + .attachment .site-content span.entry-date:before { content: "\f303"; margin: 0 1px 0 0; } @@ -2957,6 +2982,10 @@ a.post-thumbnail:hover { margin: -1px 2px 0 0; } + .entry-content .edit-link a:before { + margin: 5px 2px 0 0; + } + .site-content .full-size-link a:before { content: "\f402"; margin: -1px 2px 0 0; @@ -2967,10 +2996,6 @@ a.post-thumbnail:hover { margin: -1px 2px 0 0; } - .entry-content .edit-link a:before { - margin: 1px 2px 0 0; - } - .list-view .site-content .has-post-thumbnail .post-thumbnail, .list-view .site-content .format-standard .post-thumbnail { margin-top: -49px; @@ -3056,6 +3081,10 @@ a.post-thumbnail:hover { margin-top: -48px; } + .full-width .site-content .format-standard.post-password-required .entry-header { + margin-top: 0 + } + .full-width.singular .hentry.format-standard, .full-width.singular .hentry.has-post-thumbnail { margin-top: -36px; @@ -3101,10 +3130,11 @@ a.post-thumbnail:hover { } .slider .featured-content .entry-header { - bottom: 0; min-height: inherit; padding: 24px 30px 48px; position: absolute; + left: 0; + bottom: 0; width: 50%; z-index: 3; } @@ -3251,13 +3281,15 @@ a.post-thumbnail:hover { width: 176px; } - .primary-navigation li:hover > a { + .primary-navigation li:hover > a, + .primary-navigation li.focus > a { background-color: #24890d; color: #fff; opacity: 1.0; } - .primary-navigation ul ul a:hover { + .primary-navigation ul ul a:hover, + .primary-navigation ul ul li.focus > a { background-color: #41a62a; } @@ -3270,8 +3302,6 @@ a.post-thumbnail:hover { .primary-navigation ul ul li.focus > ul { left: 100%; } - - } @media screen and (min-width: 810px) { @@ -3349,15 +3379,11 @@ a.post-thumbnail:hover { .comment-content, .comment-list .reply, .comment-metadata { - padding-left: 54px; + padding-left: 55px; } .comment-list .children { - margin-left: 37px; - } - - .comment .comment-respond { - margin-left: 60px; + margin-left: 35px; } .full-width.singular .hentry.format-standard, @@ -3384,7 +3410,8 @@ a.post-thumbnail:hover { } .site-content { - margin: 0 29.04761904% 0 182px; + margin-right: 29.04761904%; + margin-left: 182px; } .site-content .entry-header { @@ -3438,43 +3465,42 @@ a.post-thumbnail:hover { width: 182px; } - .secondary-navigation li { - position: relative; - } - .secondary-navigation li { border-top: 1px solid rgba(255, 255, 255, 0.2); - } - - .secondary-navigation li li { - border-top: none; + position: relative; } .secondary-navigation a { padding: 10px 30px; } - .secondary-navigation li:hover > a { + .secondary-navigation ul ul { + background-color: #24890d; + position: absolute; + top: 0; + left: -999em; + width: 182px; + z-index: 99999; + } + + .secondary-navigation li li { + border-top: 0; + } + + .secondary-navigation li:hover > a, + .secondary-navigation li.focus > a { background-color: #24890d; color: #fff; } - .secondary-navigation ul ul { - background-color: #24890d; - display: none; - position: absolute; - top: 0; - left: 162px; - width: 182px; - z-index: 9999; - } - - .secondary-navigation ul ul a:hover { + .secondary-navigation ul ul a:hover, + .secondary-navigation ul ul li.focus > a { background-color: #41a62a; } - .secondary-navigation ul li:hover > ul { - display: block; + .secondary-navigation ul li:hover > ul, + .secondary-navigation ul li.focus > ul { + left: 162px; } .footer-sidebar .widget, @@ -3596,7 +3622,7 @@ a.post-thumbnail:hover { .primary-sidebar .widget_pages li, .primary-sidebar .widget_recent_comments li, .primary-sidebar .widget_recent_entries li { - border-top: none; + border-top: 0; padding: 0; } @@ -3692,7 +3718,8 @@ a.post-thumbnail:hover { width: 222px; } - .secondary-navigation ul ul { + .secondary-navigation ul li:hover > ul, + .secondary-navigation ul li.focus > ul { left: 202px; } @@ -3754,6 +3781,17 @@ a.post-thumbnail:hover { margin-right: 54px; } + .comment-author .avatar { + left: -55px; + } + + .comment-author, + .comment-content, + .comment-list .reply, + .comment-metadata { + padding-left: 0; + } + .full-width .archive-header, .full-width .comments-area, .full-width .image-navigation,