From 9a17fd3dec601e7f95ff13eeffd1573006c175f0 Mon Sep 17 00:00:00 2001 From: Lance Willett Date: Tue, 12 Mar 2013 21:18:15 +0000 Subject: [PATCH] Twenty Thirteen: second pass at RTL support and minor style.css fixes, props obenland. See #23550. git-svn-id: http://core.svn.wordpress.org/trunk@23674 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-content/themes/twentythirteen/rtl.css | 847 ++++++++++++++++++--- wp-content/themes/twentythirteen/style.css | 34 +- 2 files changed, 777 insertions(+), 104 deletions(-) diff --git a/wp-content/themes/twentythirteen/rtl.css b/wp-content/themes/twentythirteen/rtl.css index e81d4110da..2bfa3527f5 100644 --- a/wp-content/themes/twentythirteen/rtl.css +++ b/wp-content/themes/twentythirteen/rtl.css @@ -8,32 +8,116 @@ See http://codex.wordpress.org/Right_to_Left_Language_Support */ /** -* Table of Contents: -* -* 4.0 - Header -* 4.2 - Navigation -* 5.0 - Content -* 5.2 - Entry Meta -* 5.4 - Galleries -* 5.7 - Post/Paging Navigation -* 5.8 - Author Bio -* 5.12 - Comments -* 6.0 - Sidebar -* 6.1 - Widgets -* 7.0 - Footer -* 8.0 - Media Queries -* ---------------------------------------------------------------------------- -*/ + * Table of Contents: + * + * 1.0 - Reset + * 2.0 - Repeatable Patterns + * 4.0 - Header + * 4.1 - Site Header + * 4.2 - Navigation + * 5.0 - Content + * 5.2 - Entry Meta + * 5.4 - Galleries + * 5.5 - Post Formats + * 5.6 - Attachments + * 5.7 - Post/Paging Navigation + * 5.8 - Author Bio + * 5.9 - Archives + * 5.10 - Search Results/No posts + * 5.12 - Comments + * 6.0 - Sidebar + * 6.1 - Widgets + * 7.0 - Footer + * 8.0 - Media Queries + * 9.0 - Print + * ---------------------------------------------------------------------------- + */ + /** -* 4.0 Header -* ---------------------------------------------------------------------------- -*/ + * 1.0 Reset + * ---------------------------------------------------------------------------- + */ + +body { + direction: rtl; + unicode-bidi: embed; +} + +a { + display: inline-block; +} + +blockquote blockquote { + margin-left: 0; + margin-right: 24px; +} + +menu, +ol, +ul { + padding: 0 40px 0 0; +} + +caption, +th, +td { + text-align: right; +} + +td { + padding-left: 10px; + padding-right: 0; +} +.assistive-text:hover, +.assistive-text:active, +.assistive-text:focus { + left: auto; + right: 5px; +} + /** -* 4.1 Site Header -* ---------------------------------------------------------------------------- -*/ + * 2.0 Repeatable patterns + * ---------------------------------------------------------------------------- + */ + +.genericon:after, +.menu-toggle:before, +.featured-post:after, +.date a:after, +.entry-meta .author a:after, +.format-audio .entry-content:after, +.comments-link a:after, +.tags-links a:first-child:after, +.categories-links a:first-child:after, +.edit-link a:after, +.attachment .entry-title:after, +.attachment-meta:after, +.attachment-meta a:after, +.comment-awaiting-moderation:after, +.comment-reply-link:after, +#reply-title small a:after, +.bypostauthor .fn:after, +.error404 .page-title:after { + -webkit-font-smoothing: antialiased; + font: normal 16px/1 Genericons; + vertical-align: text-bottom; +} + + +/** + * 4.0 Header + * ---------------------------------------------------------------------------- + */ + +/** + * 4.1 Site Header + * ---------------------------------------------------------------------------- + */ +.site-header > a:first-child { + display: inherit; +} .site-description { font-style: normal; @@ -41,14 +125,30 @@ See http://codex.wordpress.org/Right_to_Left_Language_Support /** -* 4.2 Navigation -* ---------------------------------------------------------------------------- -*/ + * 4.2 Navigation + * ---------------------------------------------------------------------------- + */ /* Navbar */ +ul.nav-menu, div.nav-menu > ul { - margin: 0; - padding: 0; + margin: 0 -20px 0 0; + padding: 0 0 0 40px; +} + +.nav-menu .sub-menu, +.nav-menu .children { + float: right; + left: auto; + right: -2px; +} + +.nav-menu .sub-menu ul, +.nav-menu .children ul { + border-left: 2px solid #F7F5E7; + border-right: 0; + left: auto; + right: 100%; } .main-navigation .searchform { @@ -56,6 +156,11 @@ div.nav-menu > ul { right: auto; } +.site-header .searchform [type="search"] { + background-position: 98% center; + padding: 0 34px 0 0; +} + .nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, @@ -63,80 +168,333 @@ div.nav-menu > ul { font-style: normal; } +.menu-toggle { + padding-left: auto; + padding-right: 20px; +} + /** -* 5.0 Content -* ---------------------------------------------------------------------------- -*/ + * 5.0 Content + * ---------------------------------------------------------------------------- + */ .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta { - max-width: 1040px; - padding-right: 60px; padding-left: 376px; + padding-right: 60px; } + /** -* 5.2 Entry Meta -* ---------------------------------------------------------------------------- -*/ + * 5.2 Entry Meta + * ---------------------------------------------------------------------------- + */ .entry-meta > span { - display: inline-block; - margin-right: 0; margin-left: 20px; + margin-right: auto; } .entry-meta > span:last-child { - margin-right: auto; margin-left: 0; + margin-right: auto; } -.comments-link a:before { - float: right; +.featured-post:before { + content: normal; margin-right: auto; +} + +.featured-post:after { + content: "\f308"; margin-left: 2px; } -.categories-links a:first-child:before, +.entry-meta .date a:before { + content: normal; +} + +.entry-meta .date a:after { + content: "\f303"; +} + +.comments-link a:before { + content: normal; + margin-left: auto; + top: auto; +} + +.comments-link a:after { + content: "\f300"; + margin-left: 2px; + top: -1px; + position: relative; +} + +.entry-meta .author a:before { + content: normal; + top: auto; +} + +.entry-meta .author a:after { + content: "\f304"; + top: -1px; + position: relative; +} + +.categories-links a:first-child:before { + content: normal; +} + +.categories-links a:first-child:after { + content: "\f301"; +} + +.tags-links a:first-child:before { + content: normal; + top: auto; +} + +.tags-links a:first-child:after { + content: "\f302"; + top: -1px; + position: relative; +} + .edit-link a:before { - float: right; + content: normal; + top: auto; +} + +.edit-link a:after { + content: "\f411"; + top: -1px; + position: relative; +} + +.page-links .page-links-title { + margin-left: 20px; + margin-right: auto; } /** -* 5.4 Galleries -* ---------------------------------------------------------------------------- -*/ + * 5.4 Galleries + * ---------------------------------------------------------------------------- + */ + +.gallery { + margin-left: auto; + margin-right: -4px; +} .gallery-item { - float: left; + float: right; margin: 0 0 4px 4px; } -/** -* 5.6 Post Formats -* ---------------------------------------------------------------------------- -*/ +.gallery-item a { + display: inline; +} + +.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-left: 0; + margin-right: 4px; +} + + +/** + * 5.5 Post Formats + * ---------------------------------------------------------------------------- + */ + +.format-aside .entry-content .date { + margin-left: auto; + margin-right: 20px; +} + +.format-aside .entry-content .date a:before { + content: normal; +} + +.format-aside .entry-content .date a:after { + content: "\f303"; +} + +.format-aside cite:before { + content: normal; + margin-right: auto; +} + +.format-aside cite:after { + content: "\2014"; + margin-left: 5px; +} + +.format-audio .entry-content:before { + float: none; + content: normal; + font-size: inherit; +} + +.format-audio .entry-content:after { + content: "\f109"; + font-size: 64px; +} + +.format-audio .audio-content { + background-position: right top; + float: left; + padding-left: auto; + padding-right: 35px; +} + +.format-chat .entry-meta .date a:before { + content: normal; + margin-right: auto; +} + +.format-chat .entry-meta .date a:after { + content: "\f108"; + margin-left: 2px; +} + +.blog .format-gallery .gallery-item, +.archive .format-gallery .gallery-item, +.search .format-gallery .gallery-item { + margin-left: 4px; + margin-right: auto; +} +.blog .format-gallery .gallery-item img, +.archive .format-gallery .gallery-item img, +.search .format-gallery .gallery-item img { + position: absolute; + left: 0; +} + +.format-image .wp-caption-text { + text-align: right; +} + +.format-link .entry-title { + margin-left: 20px; + margin-right: auto; +} + +.format-status .entry-content, +.format-status .entry-meta { + padding-left: auto; + padding-right: 35px; +} + +.sidebar .format-status .entry-content, +.sidebar .format-status .entry-meta { + padding-left: 376px; + padding-right: 95px; +} -/* Status */ .format-status .entry-content:before, .format-status .entry-meta:before { left: auto; right: 10px; } +.sidebar .format-status .entry-content:before, +.sidebar .format-status .entry-meta:before { + left: auto; + right: 70px; +} + .format-status .entry-content p:first-child:before { left: auto; right: 4px; } +.sidebar .format-status .entry-content p:first-child:before { + left: auto; + right: 64px; +} + +.format-status .entry-meta .date a:before { + content: normal; +} + +.format-status .entry-meta .date a:after { + content: "\f105"; +} + /** -* 5.7 Post/Paging Navigation -* ---------------------------------------------------------------------------- -*/ + * 5.6 Attachments + * ---------------------------------------------------------------------------- + */ + +.attachment .entry-title { + float: right; +} + +.attachment .entry-title:before { + content: normal; + font-size: inherit; + margin-right: auto; +} + +.attachment .entry-title:after { + content: "\f416"; + font-size: 32px; + margin-left: 10px; +} + +.attachment .entry-meta { + float: left; +} + +.attachment-meta:before, +.full-size-link a:before { + content: normal; +} + +.attachment-meta:after { + content: "\f307"; +} + +.full-size-link a:after { + content: "\f402"; +} + +.full-size-link:after { + content: normal; +} + +.image-navigation .nav-previous { + left: auto; + right: 0; +} + +.image-navigation .nav-next { + left: 0; + right: auto; +} + +.attachment .entry-caption { + text-align: right; +} + + +/** + * 5.7 Post/Paging Navigation + * ---------------------------------------------------------------------------- + */ .navigation .nav-previous { float: right; @@ -146,25 +504,77 @@ div.nav-menu > ul { float: left; } +.sidebar .paging-navigation .nav-links, +.sidebar .post-navigation .nav-links { + padding-left: 376px; + padding-right: 60px; +} + +.paging-navigation .nav-previous .meta-nav { + margin-left: 10px; + margin-right: auto; +} + +.paging-navigation .nav-next .meta-nav { + margin-left: auto; + margin-right: 10px; +} + +.post-navigation a[rel="next"] { + float: left; +} + /** -* 5.8 Author Bio -* ---------------------------------------------------------------------------- -*/ + * 5.8 Author Bio + * ---------------------------------------------------------------------------- + */ .author-info { text-align: right; /* gallery & video post formats */ } +.author.sidebar .author-info { + padding-left: 376px; + padding-right: 60px; +} + .author-avatar { float: right; margin: 0 0 30px 30px; } +.author-link { + margin-left: auto; + margin-right: 2px; +} + + /** -* 5.12 Comments -* ---------------------------------------------------------------------------- -*/ + * 5.9 Archives + * ---------------------------------------------------------------------------- + */ + +.sidebar .archive-meta { + padding-left: 316px; + padding-right: 0; +} + + +/** + * 5.10 Search Results/No posts + * ---------------------------------------------------------------------------- + */ + +.sidebar .page-content { + padding-left: 376px; + padding-right: 60px; +} + +/** + * 5.12 Comments + * ---------------------------------------------------------------------------- + */ .sidebar .comments-title, .sidebar .comment-list, @@ -175,6 +585,73 @@ div.nav-menu > ul { padding-right: 60px; } +.comment-list .children { + margin-left: auto; + margin-right: 20px; +} + +.comment-author { + float: right; + margin-left: 50px; + margin-right: auto; +} + + +.bypostauthor .fn:before { + content: normal; + vertical-align: inherit; +} + +.bypostauthor .fn:after { + content: "\f408"; + vertical-align: text-top; +} + +.comment-list .edit-link { + margin-left: auto; + margin-right: 20px; +} + +.comment-meta, +.comment-content, +.reply { + float: left; +} + +.comment-awaiting-moderation:before { + content: normal; + margin-right: auto; + top: auto; +} + +.comment-awaiting-moderation:after { + content: "\f414"; + margin-left: 5px; + position: relative; + top: -2px; +} + +.comment-reply-link:before { + content: normal; + margin-right: auto; +} + +.comment-reply-link:after { + content: "\f412"; + margin-left: 3px; +} + +#reply-title small a { + float: left; + height: auto; + overflow: visible; + width: auto; +} + +#reply-title small a:before { + content: normal; +} + #commentform label[for="author"], #commentform label[for="email"], #commentform label[for="url"], @@ -182,53 +659,104 @@ div.nav-menu > ul { float: right; } -#reply-title { - font-style: normal; +.form-allowed-tags code { + margin-left: auto; + margin-right: 3px; } +.sidebar .no-comments { + padding-left: 376px; + padding-right: 60px; +} + + /** -* 6.0 Sidebar -* ---------------------------------------------------------------------------- -*/ + * 6.0 Sidebar + * ---------------------------------------------------------------------------- + */ .site-main .widget-area { float: left; } +.widget-area a { + max-width: 100%; +} + + /** -* 6.1 Widgets -* ---------------------------------------------------------------------------- -*/ + * 6.1 Widgets + * ---------------------------------------------------------------------------- + */ .widget .widget-title { font-style: normal; } -/** -* 7.0 Footer -* ---------------------------------------------------------------------------- -*/ - -.site-footer .widget { - float: right; - margin-right: 0; - margin-left: 20px; - text-align: right; +.widget li > ul, +.widget li > ol { + margin-left: auto; + margin-right: 20px; } +/** + * 7.0 Footer + * ---------------------------------------------------------------------------- + */ + +.site-footer .widget-area, +.sidebar .site-footer { + text-align: right; +} .sidebar .site-footer .widget-area { left: auto; right: -158px; } +.site-footer .widget { + float: right; + margin-right: auto; + margin-left: 20px; +} + +.sidebar .site-footer .widget:nth-of-type(4), +.sidebar .site-footer .widget:nth-of-type(3) { + margin-left: 0; + margin-right: auto; +} .site-info { text-align: right; } + /** -* 8.0 Media Queries -* ---------------------------------------------------------------------------- -*/ + * 8.0 Media Queries + * ---------------------------------------------------------------------------- + */ + +@media (max-width: 1069px) { + ul.nav-menu, + div.nav-menu > ul { + margin-left: auto; + margin-right: 0; + } + + .error404 .page-header, + .sidebar .format-image .entry-content img.size-full, + .sidebar .format-image .wp-caption:first-child .wp-caption-text { + margin-right: auto; + } + + .main-navigation .searchform { + right: auto; + left: 20px; + } + + .site-main .widget-area { + margin-left: 60px; + margin-right: auto; + } +} @media (max-width: 999px) { .sidebar .entry-header, @@ -249,20 +777,165 @@ div.nav-menu > ul { } .site-main .widget-area { - margin: 0; - float: none !important; - width: 100%; + float: none; + margin-left: auto; + } + + .attachment .entry-meta { + float: right; + text-align: right; + } + + .sidebar .format-status .entry-content, + .sidebar .format-status .entry-meta { + padding-left: auto; + padding-right: 35px; + } + + .sidebar .format-status .entry-content:before, + .sidebar .format-status .entry-meta:before { + left: auto; + right: 10px; + } + + .sidebar .format-status .entry-content p:first-child:before { + left: auto; + right: 4px; } .sidebar .site-footer .widget-area { left: auto; right: 0; } + + .sidebar .paging-navigation .nav-links { + padding: 0 60px; + } } -@media (max-width: 1069px) { - .main-navigation .searchform { +@media (max-width: 767px) { + .format-image .entry-content img:first-of-type, + .format-image .wp-caption:first-child .wp-caption-text { + margin-right: auto; + } +} + +@media (max-width: 643px) { + #content .format-status .entry-content, + #content .format-status .entry-met { + padding-left: auto; + padding-right: 35px; + } + + .menu-toggle:before { + content: "\f502"; + font-size: 12px; + padding-right: 8px; + vertical-align: -webkit-calc(-4px); + vertical-align: calc(-4px); + } + + .menu-toggle:after { + content: normal; + font-size: 12px; + padding-left: auto; + vertical-align: baseline; + } + + .toggled-on .menu-toggle:before { + content: "\f500"; + vertical-align: -webkit-calc(2px); + vertical-align: calc(2px); + } + + .toggled-on .menu-toggle:after { + content: normal; + vertical-align: baseline; + } + + .toggled-on .nav-menu, + .toggled-on .nav-menu > ul { + margin-left: auto; + margin-right: 0px; + } + + .toggled-on .nav-menu li > ul { + margin-left: auto; + margin-right: 20px; right: auto; - left: 20px; + } + + #content .featured-gallery { + padding-left: auto; + padding-right: 24px; + } + + .gallery-columns-1 .gallery-item { + margin-left: 0; + margin-right: auto; + } + + .comment-author { + margin-left: 30px; + margin-right: auto; + } + + .format-audio .audio-content { + padding-left: auto; + padding-right: 0; + } + + .single .gallery-columns-3 .gallery-item:nth-of-type(3n) { + margin-left: 4px; + margin-right: auto; + } +} + +@media (max-width: 359px) { + .gallery { + margin-left: auto; + margin-right: 0; + } + + .gallery .gallery-item, + .single .gallery-columns-2.gallery-size-thumbnail .gallery-item, + .blog .format-gallery .gallery-item, + .archive .format-gallery .gallery-item, + .search .format-gallery .gallery-item, + .single .gallery.gallery-columns-3 .gallery-item:nth-of-type(even), + .gallery-columns-5 .gallery-item:nth-of-type(5n), + .gallery-columns-7 .gallery-item:nth-of-type(7n), + .gallery-columns-9 .gallery-item:nth-of-type(9n) { + margin-left: 2%; + margin-right: auto; + } + + .blog .format-gallery .gallery-item:nth-of-type(odd), + .archive .format-gallery .gallery-item:nth-of-type(odd), + .search .format-gallery .gallery-item:nth-of-type(odd), + .single .gallery .gallery-item:nth-of-type(even), + .single .gallery.gallery-columns-3 .gallery-item:nth-of-type(3n) { + margin-left: 0; + margin-right: auto; + } +} + + +/** + * 9.0 Print + * ---------------------------------------------------------------------------- + */ + +@media print { + .entry-content img.alignleft, + .entry-content .wp-caption.alignleft { + margin-left: auto; + margin-right: 0; + } + + .entry-content img.alignright, + .entry-content .wp-caption.alignright { + margin-left: 0; + margin-right: auto; } } \ No newline at end of file diff --git a/wp-content/themes/twentythirteen/style.css b/wp-content/themes/twentythirteen/style.css index ad971a41d8..016abf1230 100644 --- a/wp-content/themes/twentythirteen/style.css +++ b/wp-content/themes/twentythirteen/style.css @@ -29,8 +29,8 @@ Use it to make something cool, have fun, and share what you've learned with othe * 5.2 - Entry Meta * 5.3 - Entry Content * 5.4 - Galleries - * 5.5 - Attachments - * 5.6 - Post Formats + * 5.5 - Post Formats + * 5.6 - Attachments * 5.7 - Post/Paging Navigation * 5.8 - Author Bio * 5.9 - Archives @@ -547,7 +547,7 @@ hr { .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; - box-shadow: 0 0 2px 2px rgba(0,0,0,.6); + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; @@ -591,10 +591,10 @@ input[type="button"], input[type="reset"] { background: #e05d22; /* Old browsers */ background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ - background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ + background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e05d22', endColorstr='#d94412', GradientType=0); /* IE6-9 */ display: inline-block; - padding: 11px 24px 10px 24px; + padding: 11px 24px 10px; color: #fff; text-decoration: none; border: none; @@ -612,7 +612,7 @@ input[type="button"]:focus, input[type="reset"]:focus { background: #ed6a31; /* Old browsers */ background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */ - background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ + background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed6a31', endColorstr='#e55627', GradientType=0); /* IE6-9 */ outline: none; } @@ -623,11 +623,11 @@ input[type="button"]:active, input[type="reset"]:active { background: #d94412; /* Old browsers */ background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */ - background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */ + background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d94412', endColorstr='#e05d22', GradientType=0); /* IE6-9 */ border: none; border-top: 3px solid #b93207; - padding: 10px 24px 11px 24px; + padding: 10px 24px 11px; } .post-password-required input[type="submit"] { @@ -1372,7 +1372,7 @@ footer.entry-meta { } /** - * 5.6 Post Formats + * 5.5 Post Formats * ---------------------------------------------------------------------------- */ @@ -1737,7 +1737,7 @@ footer.entry-meta { .format-status .entry-meta:before { background: url(images/dotted-line.png) repeat-y left bottom; background-size: 4px 4px; - content: ""; + content: normal; display: block; height: 100%; position: absolute; @@ -1773,7 +1773,7 @@ footer.entry-meta { .format-status .entry-content p:first-child:before { background-color: rgba(0, 0, 0, 0.65); - content: ""; + content: normal; height: 3px; margin-top: 13px; position: absolute; @@ -1825,7 +1825,7 @@ footer.entry-meta { /** - * 5.5 Attachments + * 5.6 Attachments * ---------------------------------------------------------------------------- */ @@ -2193,7 +2193,7 @@ footer.entry-meta { overflow: hidden; position: absolute; left: 7px; - top: 28px + top: 28px; } .error404 .page-wrapper { @@ -2254,7 +2254,7 @@ footer.entry-meta { .comment-list .children > li:before { background: url(images/dotted-line.png) repeat left top; background-size: 4px 4px; - content: ""; + content: normal; display: block; height: 1px; width: 100%; @@ -2680,7 +2680,7 @@ footer.entry-meta { #wpstats { display: block; - margin: -10px auto 0 auto; + margin: -10px auto 0; } @@ -2842,7 +2842,7 @@ footer.entry-meta { } .sidebar .paging-navigation .nav-links { - padding: 0 60px 0 60px; + padding: 0 60px; } .site-main .sidebar-container { @@ -3023,7 +3023,7 @@ footer.entry-meta { } .error404 .page-title:before { - content: ""; + content: normal; } .comment-author {