rtl.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. /*
  2. Theme Name: Apostrophe
  3. http://codex.wordpress.org/Right_to_Left_Language_Support
  4. */
  5. body {
  6. direction: rtl;
  7. unicode-bidi: embed;
  8. }
  9. /* Move site logo to right-hand side on larger screens */
  10. @media (min-width: 768px) {
  11. .site-logo {
  12. float: right;
  13. margin-left: 3.63636%;
  14. margin-right: 0;
  15. }
  16. }
  17. /* Hidden elements should be hidden to the right */
  18. @media (min-width: 768px) {
  19. .main-navigation ul ul,
  20. .main-navigation ul ul ul,
  21. .apostrophe-2-social li a span {
  22. left: auto;
  23. right: -999em;
  24. }
  25. .main-navigation li:hover > ul {
  26. right: auto;
  27. }
  28. .main-navigation ul ul li:hover > ul {
  29. right: 100%;
  30. }
  31. }
  32. /* Adjust menu icons for proper spacing and swap social with main navigation menu */
  33. .main-navigation .menu-toggle::before {
  34. padding-left: 10px;
  35. padding-right: 0;
  36. }
  37. .main-navigation li {
  38. float: right;
  39. }
  40. .main-navigation li a {
  41. margin-left: 3rem;
  42. margin-right: 0;
  43. }
  44. .apostrophe-2-navigation .menu-item-has-children > a::after {
  45. padding-left: 0;
  46. padding-right: 0.5rem;
  47. }
  48. /* Sub-menus */
  49. .main-navigation ul ul li.menu-item-has-children > a::after {
  50. transform: rotate(90deg);
  51. vertical-align: -0.4rem;
  52. }
  53. .apostrophe-2-navigation .dropdown-toggle {
  54. left: 0;
  55. right: auto;
  56. }
  57. @media (max-width: 767px) {
  58. .main-navigation.toggled-on .apostrophe-2-navigation li.menu-item-has-children a {
  59. padding-left: 60px;
  60. padding-right: 25px;
  61. }
  62. }
  63. .apostrophe-2-social {
  64. float: left;
  65. }
  66. .apostrophe-2-social li a {
  67. margin-left: 0;
  68. margin-right: 20px;
  69. }
  70. /* Move sidebar to the left on two-column screens */
  71. @media (min-width: 1024px) {
  72. #primary {
  73. float: right;
  74. }
  75. #secondary {
  76. float: left;
  77. }
  78. }
  79. /* Move featured images to right on small screens */
  80. @media (max-width: 767px) {
  81. .archive article:not(.apostrophe-2-featured) .entry-thumbnail,
  82. .blog article:not(.apostrophe-2-featured) .entry-thumbnail,
  83. .search article:not(.apostrophe-2-featured) .entry-thumbnail {
  84. float: right;
  85. }
  86. .archive article:not(.apostrophe-2-featured) .entry-header,
  87. .blog article:not(.apostrophe-2-featured) .entry-header,
  88. .search article:not(.apostrophe-2-featured) .entry-header {
  89. float: left;
  90. padding-left: 0;
  91. padding-right: 3.33333%;
  92. }
  93. }
  94. /* Shift overlapped post date to right and float posts to the right on larger screens */
  95. @media (min-width: 768px) {
  96. .archive article .entry-meta,
  97. .blog article .entry-meta,
  98. .search article .entry-meta {
  99. margin-left: 0;
  100. margin-right: -5px;
  101. }
  102. .archive article.apostrophe-2-featured,
  103. .blog article.apostrophe-2-featured,
  104. .search article.apostrophe-2-featured {
  105. float: right;
  106. }
  107. .archive article,
  108. .blog article,
  109. .search article {
  110. float: right;
  111. }
  112. }
  113. /* Move post format icon to the right */
  114. .entry-format::before {
  115. left: 0;
  116. right: auto;
  117. }
  118. @media (min-width: 1024px) {
  119. .entry-format::before {
  120. left: auto;
  121. right: -46px;
  122. }
  123. }
  124. /* Adjust icon spacing for categories and tags */
  125. .entry-footer .post-categories,
  126. .entry-footer .post-tags {
  127. float: right;
  128. }
  129. .entry-footer a[rel="category tag"]::before,
  130. .entry-footer a[rel="tag"]::before {
  131. margin-left: 0.2rem;
  132. margin-right: -0.2rem;
  133. }
  134. /* Previous and next buttons should swap around */
  135. .nav-previous {
  136. float: right;
  137. }
  138. .nav-previous .meta-nav {
  139. padding-left: 0;
  140. padding-right: 25px;
  141. }
  142. .nav-previous .meta-nav::before {
  143. left: auto;
  144. right: -10px;
  145. top: 2px;
  146. transform: rotate(90deg);
  147. }
  148. .nav-next {
  149. float: left;
  150. text-align: left;
  151. }
  152. .nav-next .meta-nav {
  153. padding-left: 25px;
  154. padding-right: 0;
  155. }
  156. .nav-next .meta-nav::before {
  157. left: -10px;
  158. right: auto;
  159. top: -2px;
  160. transform: rotate(-90deg);
  161. }
  162. /* Move comment author avatar to right */
  163. .comment-meta .comment-author .avatar {
  164. float: right;
  165. margin-left: 0.5em;
  166. margin-right: 0;
  167. }
  168. /* Swap search button around */
  169. @media (min-width: 768px) {
  170. .search-form label {
  171. float: right;
  172. }
  173. .search-form input[type="submit"] {
  174. float: right;
  175. margin-left: 0;
  176. margin-right: 1%;
  177. }
  178. }
  179. /* Adjust blockquote and pullquotes */
  180. dd {
  181. margin-right: 0;
  182. margin-left: 1.5em;
  183. }
  184. blockquote {
  185. border-left: 0;
  186. border-right: 4px solid #D9D9D9;
  187. margin-left: 1.5em;
  188. margin-right: 0;
  189. padding-left: 0;
  190. padding-right: 1.5em;
  191. }
  192. .pullquote {
  193. border-right: 0;
  194. }
  195. @media (min-width: 1024px) {
  196. .apostrophe-2-no-sidebar .pullquote {
  197. left: -50%;
  198. right: auto;
  199. }
  200. }
  201. /* Adjust li margins */
  202. li > ul {
  203. margin-left: 0;
  204. margin-right: 1.5em;
  205. }
  206. .widget li > ul {
  207. margin-left: 0;
  208. margin-right: 0.5em;
  209. }
  210. .widget_calendar #next {
  211. text-align: left;
  212. }