themezee-related-posts.css 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. /*
  2. * Themezee Related Posts CSS
  3. * https://themezee.com/plugins/related-posts/
  4. *
  5. * Copyright(C) 2015, ThemeZee.com - support@themezee.com
  6. * License: GPL v3
  7. * License URI: http://www.gnu.org/licenses/gpl-3.0.html
  8. *
  9. * @package Momentous Lite
  10. */
  11. /*--------------------------------------------------------------
  12. # General Styling
  13. ---------------------------------------------------------------- */
  14. .related-posts .entry-meta .meta-author {
  15. margin-left: 0.5em;
  16. }
  17. .related-posts .entry-meta span:before {
  18. display: inline-block;
  19. -webkit-font-smoothing: antialiased;
  20. font: normal 16px 'Genericons';
  21. vertical-align: top;
  22. color: #555;
  23. margin-top: 0.2em;
  24. }
  25. .related-posts .entry-meta .meta-date:before{
  26. content: '\f303';
  27. margin-right: 0.2em;
  28. }
  29. .related-posts .entry-meta .meta-author:before{
  30. content: '\f411';
  31. }
  32. /*--------------------------------------------------------------
  33. # List Layout
  34. ---------------------------------------------------------------- */
  35. ul.related-posts-list {
  36. margin: 1em 0 0;
  37. padding: 0;
  38. list-style: none;
  39. }
  40. .related-posts-list li {
  41. margin: 0 0 1em;
  42. padding: 0;
  43. list-style: none;
  44. }
  45. .related-posts-list li .entry-header {
  46. margin-top: 0.25em;
  47. }
  48. .related-posts-list li .entry-title {
  49. font-size: 1.3em;
  50. padding: 0;
  51. border: none;
  52. }
  53. .related-posts-list li .entry-meta {
  54. padding: 0.5em;
  55. border: none;
  56. }
  57. .related-posts-list li .wp-post-image {
  58. float: left;
  59. margin: 0 1em 0 0;
  60. padding: 0;
  61. border: none;
  62. max-width: 20%;
  63. height: auto;
  64. }
  65. /*--------------------------------------------------------------
  66. # Grid Layouts
  67. ---------------------------------------------------------------- */
  68. .related-posts-grid {
  69. margin: 1em 0 0;
  70. }
  71. .related-posts-columns {
  72. margin-right: -1em;
  73. }
  74. .related-posts-columns .related-post-column {
  75. float: left;
  76. margin-bottom: 1em;
  77. padding-right: 1em;
  78. -webkit-box-sizing: border-box;
  79. -moz-box-sizing: border-box;
  80. box-sizing: border-box;
  81. }
  82. .related-posts-two-columns .related-post-column {
  83. width: 50%;
  84. }
  85. .related-posts-three-columns .related-post-column {
  86. width: 33.3333333333333%;
  87. }
  88. .related-posts-four-columns .related-post-column {
  89. width: 25%;
  90. }
  91. .related-posts-two-columns .related-post-column:nth-child(2n + 1) {
  92. clear: left;
  93. }
  94. .related-posts-three-columns .related-post-column:nth-child(3n + 1) {
  95. clear: left;
  96. }
  97. .related-posts-four-columns .related-post-column:nth-child(4n + 1) {
  98. clear: left;
  99. }
  100. .related-posts-two-columns .related-post-column .entry-title {
  101. font-size: 1.6em;
  102. }
  103. .related-posts-three-columns .related-post-column .entry-title {
  104. font-size: 1.4em;
  105. }
  106. .related-posts-four-columns .related-post-column .entry-title {
  107. font-size: 1.2em;
  108. }
  109. .related-posts-four-columns .related-post-column .entry-meta .meta-date,
  110. .related-posts-four-columns .related-post-column .entry-meta .meta-author {
  111. display: block;
  112. }
  113. .related-posts-columns .related-post-column .wp-post-image {
  114. margin: 0 0 1em 0;
  115. padding: 0;
  116. border: none;
  117. max-width: 100%;
  118. }
  119. /*--------------------------------------------------------------
  120. # Media Queries
  121. ---------------------------------------------------------------- */
  122. @media only screen and (max-width: 60em) {
  123. /* Columns */
  124. .related-posts-two-columns .related-post-column .entry-title {
  125. font-size: 1.4em;
  126. }
  127. .related-posts-three-columns .related-post-column .entry-title {
  128. font-size: 1.2em;
  129. }
  130. .related-posts-four-columns .related-post-column .entry-title {
  131. font-size: 1.1em;
  132. }
  133. }
  134. @media only screen and (max-width: 50em) {
  135. /* Columns */
  136. .related-posts-four-columns .related-post-column {
  137. width: 50%;
  138. }
  139. .related-posts-four-columns .related-post-column:nth-child(2n + 1) {
  140. clear: left;
  141. }
  142. .related-posts-two-columns .related-post-column .entry-title {
  143. font-size: 1.25em;
  144. }
  145. /* List */
  146. .related-posts-list li .wp-post-image {
  147. max-width: 30%;
  148. }
  149. }
  150. @media only screen and (max-width: 35em) {
  151. /* Columns */
  152. .related-posts-three-columns {
  153. margin: 0;
  154. }
  155. .related-posts-three-columns .related-post-column {
  156. float: none;
  157. width: 100%;
  158. padding-right: 0;
  159. }
  160. .related-posts-three-columns .related-post-column .entry-title {
  161. font-size: 1.4em;
  162. }
  163. .related-posts-two-columns .related-post-column .entry-title,
  164. .related-posts-four-columns .related-post-column .entry-title {
  165. font-size: 1.1em;
  166. }
  167. }
  168. @media only screen and (max-width: 25em) {
  169. .related-posts .entry-meta .meta-date,
  170. .related-posts .entry-meta .meta-author {
  171. display: block;
  172. margin: 0;
  173. }
  174. /* Columns */
  175. .related-posts-two-columns,
  176. .related-posts-four-columns {
  177. margin: 0;
  178. }
  179. .related-posts-two-columns .related-post-column,
  180. .related-posts-four-columns .related-post-column {
  181. float: none;
  182. width: 100%;
  183. padding-right: 0;
  184. }
  185. .related-posts-three-columns .related-post-column .entry-title {
  186. font-size: 1.2em;
  187. }
  188. /* List */
  189. .related-posts-list li .wp-post-image {
  190. float: none;
  191. margin: 0 0 0.5em 0;
  192. max-width: 100%;
  193. }
  194. }