style-editor.css 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  1. body {
  2. color: #333;
  3. font-family: 'Montserrat', sans-serif;
  4. font-size: 15px;
  5. font-weight: 300;
  6. letter-spacing: .5px;
  7. line-height: 2;
  8. }
  9. p,
  10. ul,
  11. ol,
  12. dl {
  13. font-size: 15px;
  14. line-height: 2;
  15. }
  16. /* Regular content width.
  17. /* 702px + 27px to match paragraph width on front-end and editor.
  18. ---------------------------------------------------------------------------- */
  19. .wp-block {
  20. max-width: 732px;
  21. }
  22. /* Width of "wide" blocks
  23. /* 1062px + 30px so wide images match width in front-end and editor.
  24. /* 1062px = default column width of 702px + .alignwide negative margin of 360px
  25. ---------------------------------------------------------------------------- */
  26. .wp-block[data-align="wide"] {
  27. max-width: 1092px;
  28. }
  29. .wp-block[data-align="full"] {
  30. max-width: none;
  31. }
  32. /* Typography
  33. ---------------------------------------------------------------------------- */
  34. a {
  35. color: #55c7cf;
  36. text-decoration: none;
  37. }
  38. h1,
  39. h2,
  40. h3,
  41. h4,
  42. h5,
  43. h6 {
  44. color: #333;
  45. font-family: 'Playfair Display', serif;
  46. font-style: normal;
  47. font-weight: 400;
  48. letter-spacing: .5px;
  49. line-height: 1.2;
  50. margin: 0 0 25px;
  51. }
  52. h1 {
  53. font-family: 'Montserrat', sans-serif;
  54. font-size: 28px;
  55. font-weight: 300;
  56. color: #55c7cf;
  57. }
  58. h2 {
  59. font-family: 'Montserrat', sans-serif;
  60. font-size: 22px;
  61. text-transform: uppercase;
  62. }
  63. h3 {
  64. color: #55c7cf;
  65. font-family: 'Montserrat', sans-serif;
  66. font-size: 20px;
  67. text-transform: uppercase;
  68. }
  69. h4 {
  70. color: #55c7cf;
  71. font-size: 22px;
  72. font-style: italic;
  73. }
  74. h5 {
  75. font-size: 16px;
  76. text-transform: uppercase;
  77. letter-spacing: 2px;
  78. }
  79. .editor-post-title__block .editor-post-title__input {
  80. font-family: 'Playfair Display', serif;
  81. font-size: 30px;
  82. font-weight: 400;
  83. line-height: 1.2;
  84. margin: 0 0 20px;
  85. }
  86. p.has-drop-cap:not(:focus)::first-letter {
  87. margin: 0.02em 0.08em 0 -0.08em;
  88. }
  89. p.has-larger-font-size.has-drop-cap:not(:focus)::first-letter,
  90. p.has-small-font-size.has-drop-cap:not(:focus)::first-letter {
  91. margin-right: 0.01em;
  92. }
  93. /* Background Color
  94. ---------------------------------------------------------------------------- */
  95. p.has-background {
  96. padding: 25px 30px;
  97. }
  98. p.box-shadow {
  99. box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  100. }
  101. p.has-text-color a,
  102. p.has-background a {
  103. color: inherit;
  104. }
  105. p.has-text-color a:focus,
  106. p.has-background a:focus,
  107. p.has-text-color a:hover,
  108. p.has-background a:hover {
  109. color: inherit;
  110. text-decoration: none;
  111. }
  112. p.has-background.light-text a {
  113. color: #fff;
  114. text-decoration: underline;
  115. }
  116. p.has-background.light-text a:focus,
  117. p.has-background.light-text a:hover {
  118. text-decoration: none;
  119. }
  120. /* Blockquotes and captions
  121. ---------------------------------------------------------------------------- */
  122. .wp-block-quote,
  123. .wp-block-pullquote {
  124. border: none;
  125. margin: 24px 0 36px;
  126. }
  127. .wp-block-quote:not(.is-large):not(.is-style-large) {
  128. border: none;
  129. padding: 0;
  130. }
  131. .wp-block-quote p,
  132. .wp-block-pullquote p {
  133. font-size: 16px !important;
  134. font-style: italic;
  135. line-height: 2;
  136. margin-bottom: 42px;
  137. }
  138. .wp-block-pullquote p,
  139. .wp-block-quote.is-style-large p {
  140. font-size: 32px !important;
  141. }
  142. .wp-block-pullquote.is-style-solid-color p {
  143. color: #fff;
  144. margin-bottom: 42px;
  145. text-align: center;
  146. }
  147. .wp-block-pullquote.is-style-solid-color {
  148. background-color: #333;
  149. }
  150. .wp-block-pullquote:not(.is-style-solid-color)[style*="border-color"] {
  151. border: 2px solid;
  152. border-left: none;
  153. border-right: none;
  154. }
  155. .wp-block-quote .wp-block-quote__citation,
  156. .wp-block-pullquote .wp-block-pullquote__citation {
  157. color: #666;
  158. display: block;
  159. font-size: 16px;
  160. font-style: italic;
  161. margin-top: -25px;
  162. text-align: inherit;
  163. text-transform: none;
  164. }
  165. .wp-block-pullquote .wp-block-pullquote__citation {
  166. text-align: center;
  167. }
  168. .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation {
  169. color: #fff;
  170. font-style: italic;
  171. }
  172. .wp-block-pullquote .has-text-color .wp-block-pullquote__citation,
  173. .wp-block-pullquote .has-text-color p {
  174. color: currentColor;
  175. }
  176. .wp-block-audio figcaption,
  177. .wp-block-embed figcaption,
  178. .wp-block-image figcaption {
  179. color: #666;
  180. font-size: 16px;
  181. font-style: italic;
  182. margin-bottom: 30px;
  183. margin-top: 10px;
  184. }
  185. .wp-block-quote[class*="align"] .wp-block-quote__citation,
  186. .wp-block-pullquote[class*="align"] .wp-block-pullquote__citation {
  187. text-align: center;
  188. }
  189. /* Cover Image
  190. ---------------------------------------------------------------------------- */
  191. .wp-block-cover .wp-block-cover-text {
  192. color: #fff;
  193. font-size: 45px;
  194. }
  195. /* Figcaption
  196. ---------------------------------------------------------------------------- */
  197. .wp-block-image figcaption {
  198. color: #666;
  199. font-size: 14px;
  200. font-style: italic;
  201. margin-top: 10px;
  202. }
  203. /* Font Sizes
  204. ---------------------------------------------------------------------------- */
  205. p.has-small-font-size {
  206. font-size: 12px;
  207. }
  208. p.has-regular-font-size {
  209. font-size: 16px;
  210. }
  211. p.has-large-font-size {
  212. font-size: 20px;
  213. }
  214. p.has-larger-font-size {
  215. font-size: 24px;
  216. }
  217. /* Lists
  218. ---------------------------------------------------------------------------- */
  219. .editor-block-list__block li {
  220. line-height: 1.625;
  221. margin-bottom: 0;
  222. }
  223. /* Preformatted elements
  224. ---------------------------------------------------------------------------- */
  225. .wp-block-verse pre,
  226. .wp-block-preformatted pre {
  227. font-family: monospace;
  228. font-size: 18px;
  229. line-height: 1.625 !important;
  230. }
  231. /* Separators
  232. ---------------------------------------------------------------------------- */
  233. hr.wp-block-separator {
  234. border: none;
  235. border-top: 1px solid #eee;
  236. margin: 1.65em auto;
  237. }
  238. hr.wp-block-separator.is-style-dots {
  239. border: none;
  240. }
  241. /* Tables
  242. ---------------------------------------------------------------------------- */
  243. .wp-block-table {
  244. font-size: 18px;
  245. line-height: 2;
  246. }
  247. .wp-block-table td,
  248. .wp-block-table th,
  249. .wp-block-table tr {
  250. border: none;
  251. }
  252. .wp-block-table tr {
  253. border-top: 1px solid #eee;
  254. }
  255. .wp-block-table tbody {
  256. border-bottom: 1px solid #eee;
  257. }
  258. /* Buttons
  259. ---------------------------------------------------------------------------- */
  260. .wp-block-button .wp-block-button__link {
  261. background-color: #333;
  262. border: 0;
  263. border-radius: 5px;
  264. color: #fff;
  265. cursor: pointer;
  266. font-size: 16px;
  267. font-weight: 400;
  268. line-height: 24px;
  269. padding: 15px 30px;
  270. text-align: center;
  271. text-decoration: none;
  272. white-space: normal;
  273. width: auto;
  274. }
  275. .wp-block-button.is-style-squared .wp-block-button__link {
  276. border-radius: 0;
  277. }
  278. .wp-block-button.is-style-outline .wp-block-button__link {
  279. background-color: transparent;
  280. border: 1px solid currentColor;
  281. border-radius: 0;
  282. color: currentColor;
  283. padding: 13px 28px;
  284. }
  285. .wp-block-button.is-style-outline .wp-block-button__link:focus,
  286. .wp-block-button.is-style-outline .wp-block-button__link:hover {
  287. color: #55c7cf;
  288. }
  289. /* Galleries
  290. ---------------------------------------------------------------------------- */
  291. .wp-block-gallery .blocks-gallery-item {
  292. margin-bottom: 16px;
  293. }
  294. /* Category Block
  295. ---------------------------------------------------------------------------- */
  296. .wp-block-categories ul {
  297. margin-left: 0;
  298. padding-left: 0;
  299. }
  300. .wp-block-categories li {
  301. list-style-type: none;
  302. }
  303. .wp-block[data-align="right"] .wp-block-categories__list {
  304. text-align: right;
  305. }
  306. .wp-block[data-align="full"] .wp-block-categories__list {
  307. padding: 0 30px;
  308. }
  309. /* Latest Posts Block
  310. ---------------------------------------------------------------------------- */
  311. .wp-block-latest-posts {
  312. margin-left: 0;
  313. padding-left: 0;
  314. }
  315. .wp-block-latest-posts li {
  316. list-style-type: none;
  317. }
  318. .wp-block[data-align="center"] .wp-block-latest-posts {
  319. text-align: center;
  320. }
  321. .wp-block[data-align="full"] .wp-block-latest-posts {
  322. padding: 0 30px;
  323. }
  324. /* Columns block
  325. ---------------------------------------------------------------------------- */
  326. .wp-block[data-align="full"] .wp-block-columns > .editor-inner-blocks {
  327. padding: 0 30px;
  328. }