front-end.css 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. /* Font Sizes
  2. ---------------------------------------------------------------------------- */
  3. .entry-content p.has-small-font-size {
  4. font-size: 12px;
  5. }
  6. .entry-content p.has-regular-font-size {
  7. font-size: 16px;
  8. }
  9. .entry-content p.has-large-font-size {
  10. font-size: 20px;
  11. }
  12. .entry-content p.has-larger-font-size {
  13. font-size: 24px;
  14. }
  15. /* Drop Caps
  16. ---------------------------------------------------------------------------- */
  17. .entry-content p.has-drop-cap:not(:focus)::first-letter {
  18. margin: 0.02em 0.08em 0 -0.08em;
  19. }
  20. .entry-content p.has-larger-font-size.has-drop-cap:not(:focus)::first-letter,
  21. .entry-content p.has-small-font-size.has-drop-cap:not(:focus)::first-letter {
  22. margin-right: 0.01em;
  23. }
  24. /* Background Color
  25. ---------------------------------------------------------------------------- */
  26. .entry-content p.has-background {
  27. padding: 25px 30px;
  28. }
  29. .entry-content p.has-background.box-shadow {
  30. box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  31. }
  32. .entry-content p.has-text-color a,
  33. .entry-content p.has-background a {
  34. color: inherit;
  35. }
  36. .entry-content p.has-text-color a:focus,
  37. .entry-content p.has-background a:focus,
  38. .entry-content p.has-text-color a:hover,
  39. .entry-content p.has-background a:hover {
  40. color: inherit;
  41. text-decoration: none;
  42. }
  43. .entry-content p.has-background.light-text a {
  44. color: #fff;
  45. text-decoration: underline;
  46. }
  47. .entry-content p.has-background.light-text a:focus,
  48. .entry-content p.has-background.light-text a:hover {
  49. text-decoration: none;
  50. }
  51. /* Alignment
  52. ---------------------------------------------------------------------------- */
  53. .wp-block-button.alignleft,
  54. .wp-block-cover.alignleft,
  55. .wp-block-image .alignleft {
  56. margin-right: 2em;
  57. }
  58. .wp-block-button.alignright,
  59. .wp-block-cover.alignright,
  60. .wp-block-image .alignright {
  61. margin-left: 2em;
  62. }
  63. .wp-block-image.alignwide,
  64. .wp-block-image.alignfull,
  65. .wp-block-embed.alignwide,
  66. .wp-block-embed.alignfull {
  67. margin-bottom: 30px;
  68. }
  69. .full-width-content .entry-content .alignfull {
  70. margin-left: calc(-100vw / 2 + 100% / 2);
  71. margin-right: calc(-100vw / 2 + 100% / 2);
  72. max-width: 100vw;
  73. }
  74. .content-sidebar .entry-content .alignfull,
  75. .sidebar-content .entry-content .alignfull {
  76. margin: 0 0 2em;
  77. width: 100%;
  78. }
  79. /* Columns
  80. ---------------------------------------------------------------------------- */
  81. .entry-content .wp-block-columns {
  82. display: block;
  83. margin-bottom: 30px;
  84. }
  85. .entry-content .wp-block-columns.alignfull {
  86. padding: 0 30px;
  87. }
  88. /* Cover Image
  89. ---------------------------------------------------------------------------- */
  90. .full-width-content .entry-content .wp-block-cover.alignfull {
  91. width: 100vw;
  92. }
  93. .entry-content .wp-block-cover .wp-block-cover-text {
  94. font-size: 45px;
  95. }
  96. /* Buttons
  97. ---------------------------------------------------------------------------- */
  98. .content .wp-block-button .wp-block-button__link {
  99. background-color: #333;
  100. border: 0;
  101. border-radius: 5px;
  102. color: #fff;
  103. cursor: pointer;
  104. font-size: 16px;
  105. font-weight: 400;
  106. padding: 15px 30px;
  107. text-align: center;
  108. text-decoration: none;
  109. white-space: normal;
  110. width: auto;
  111. }
  112. .content .wp-block-button .wp-block-button__link:focus,
  113. .content .wp-block-button .wp-block-button__link:hover {
  114. background-color: #55c7cf;
  115. color: #fff;
  116. }
  117. /* Button Variations */
  118. .content .wp-block-button.is-style-squared .wp-block-button__link {
  119. border-radius: 0;
  120. }
  121. .content .wp-block-button.is-style-outline .wp-block-button__link {
  122. background-color: transparent;
  123. border: 1px solid currentColor;
  124. border-radius: 0;
  125. color: currentColor;
  126. padding: 13px 28px;
  127. }
  128. .content .wp-block-button.is-style-outline .wp-block-button__link:focus,
  129. .content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  130. color: #55c7cf;
  131. }
  132. /* Blockquotes and captions
  133. ---------------------------------------------------------------------------- */
  134. .entry-content .wp-block-quote,
  135. .entry-content .wp-block-pullquote {
  136. margin: 24px 24px 36px;
  137. }
  138. .entry-content .wp-block-quote p,
  139. .entry-content .wp-block-pullquote p {
  140. font-size: 16px;
  141. font-style: italic;
  142. line-height: 2;
  143. margin-bottom: 42px;
  144. }
  145. .entry-content .wp-block-pullquote p,
  146. .entry-content .wp-block-quote.is-style-large p {
  147. font-size: 32px;
  148. }
  149. .entry-content .wp-block-pullquote.is-style-solid-color p {
  150. color: #fff;
  151. margin-bottom: 42px;
  152. text-align: center;
  153. }
  154. .entry-content .wp-block-pullquote.is-style-solid-color {
  155. background-color: #333;
  156. }
  157. .entry-content .wp-block-pullquote:not(.is-style-solid-color)[style*="border-color"] {
  158. border: 2px solid;
  159. border-left: none;
  160. border-right: none;
  161. }
  162. .entry-content .wp-block-quote cite,
  163. .entry-content .wp-block-pullquote cite {
  164. color: #666;
  165. display: block;
  166. font-size: 16px;
  167. font-style: italic;
  168. margin-top: -25px;
  169. text-align: inherit;
  170. text-transform: none;
  171. }
  172. .entry-content .wp-block-pullquote cite {
  173. text-align: center;
  174. }
  175. .entry-content .wp-block-pullquote.is-style-solid-color cite {
  176. color: #fff;
  177. font-style: italic;
  178. }
  179. .entry-content .wp-block-pullquote .has-text-color cite,
  180. .entry-content .wp-block-pullquote .has-text-color p {
  181. color: currentColor;
  182. }
  183. .entry-content .wp-block-audio figcaption,
  184. .entry-content .wp-block-embed figcaption,
  185. .entry-content .wp-block-image figcaption {
  186. color: #666;
  187. font-size: 16px;
  188. font-style: italic;
  189. margin-bottom: 30px;
  190. margin-top: 10px;
  191. }
  192. /* Category Block
  193. ---------------------------------------------------------------------------- */
  194. .entry-content .wp-block-categories,
  195. .entry-content .wp-block-categories ol,
  196. .entry-content .wp-block-categories ul {
  197. margin-left: 0;
  198. padding-left: 0;
  199. }
  200. .entry-content .wp-block-categories li {
  201. list-style-type: none;
  202. }
  203. .entry-content .wp-block-categories.aligncenter {
  204. text-align: center;
  205. }
  206. .entry-content .wp-block-categories-list.alignfull {
  207. padding: 0 30px;
  208. }
  209. /* Latest Posts Block
  210. ---------------------------------------------------------------------------- */
  211. .entry-content .wp-block-latest-posts {
  212. clear: both;
  213. margin-left: 0;
  214. }
  215. .entry-content .wp-block-latest-posts li {
  216. list-style-type: none;
  217. }
  218. .entry-content .wp-block-latest-posts.aligncenter {
  219. text-align: center;
  220. }
  221. .entry-content .wp-block-latest-posts.alignfull {
  222. padding: 0 30px;
  223. }
  224. /* Other Blocks
  225. ---------------------------------------------------------------------------- */
  226. .wp-block-verse,
  227. .wp-block-preformatted {
  228. font-size: 16px;
  229. }
  230. .wp-block-preformatted {
  231. white-space: pre-wrap;
  232. }
  233. hr.wp-block-separator {
  234. border: none;
  235. border-top: 1px solid #eee;
  236. margin: 1.65em auto;
  237. }
  238. .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  239. max-width: 100px;
  240. }
  241. .wp-block-audio audio {
  242. display: inline-block;
  243. width: 100%;
  244. }
  245. .entry-content .wp-block-gallery {
  246. padding-left: 0;
  247. }
  248. /* Media Queries
  249. ---------------------------------------------------------------------------- */
  250. @media only screen and (min-width: 510px) {
  251. .entry-content .wp-block-columns {
  252. display: flex;
  253. }
  254. .entry-content .wp-block-columns .wp-block-column {
  255. flex: 1;
  256. }
  257. }
  258. @media only screen and (min-width: 1400px) {
  259. .full-width-content .entry-content .alignwide {
  260. margin-left: -90px;
  261. margin-right: -100px;
  262. min-width: 1400px;
  263. }
  264. }