_extra-child-theme.scss 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. $color_primary_default: #{map-deep-get($config-global, "color", "primary", "default")};
  2. $color_primary_hover: #{map-deep-get($config-global, "color", "primary", "hover")};
  3. /**
  4. * General Helper Styles
  5. */
  6. body {
  7. background: #{map-deep-get($config-global, "color", "foreground", "default")};
  8. }
  9. .home.hide-homepage-title {
  10. .hentry .entry-content {
  11. & > *:first-child {
  12. &.alignfull {
  13. margin-top: -#{map-deep-get($config-global, "spacing", "unit")};
  14. @include media(mobile) {
  15. margin-top: -#{3 * map-deep-get($config-global, "spacing", "unit")};
  16. }
  17. }
  18. }
  19. }
  20. }
  21. @include media(mobile) {
  22. .home.page.hide-homepage-header.hide-homepage-title .hentry .entry-content {
  23. > .wp-block-image.alignfull:first-child,
  24. > .wp-block-cover.alignfull:first-child,
  25. > .wp-block-media-text.alignfull:first-child,
  26. > .wp-block-group.has-background.alignfull:first-child {
  27. margin-top: -#{3 * map-deep-get($config-global, "spacing", "unit")};
  28. }
  29. }
  30. }
  31. a {
  32. text-decoration: none;
  33. }
  34. .main-navigation {
  35. margin-bottom: 0;
  36. text-transform: uppercase;
  37. }
  38. .main-navigation > div > ul,
  39. .social-navigation > div > ul,
  40. .pagination .nav-links {
  41. justify-content: center;
  42. }
  43. #page {
  44. background: #{map-deep-get($config-global, "color", "background", "default")};
  45. margin-left: auto;
  46. margin-right: auto;
  47. @include media(tablet) {
  48. max-width: 90vw;
  49. }
  50. @include media(laptop) {
  51. max-width: 85vw;
  52. }
  53. @include media(wide) {
  54. max-width: 1180px;
  55. }
  56. }
  57. .responsive-max-width:not(.site-header),
  58. .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote,
  59. .wp-block-pullquote.alignwide > p,
  60. .wp-block-pullquote.alignfull > p,
  61. .wp-block-pullquote.alignwide blockquote,
  62. .wp-block-pullquote.alignfull blockquote,
  63. hr.wp-block-separator.is-style-wide,
  64. .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
  65. .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator),
  66. .entry-content .wp-audio-shortcode, .post-navigation, .pagination {
  67. width: calc(100% - #{4 * map-deep-get($config-global, "spacing", "unit")});
  68. }
  69. /**
  70. * Header
  71. */
  72. #masthead {
  73. align-items: center;
  74. display: flex;
  75. flex-direction: column;
  76. justify-content: flex-start;
  77. margin: 0 auto;
  78. max-width: 100%;
  79. padding: 0;
  80. // Site Branding
  81. .site-branding {
  82. text-align: center;
  83. padding: #{map-deep-get($config-global, "spacing", "unit")} 0 0;
  84. @include media(tablet) {
  85. padding: #{3 * map-deep-get($config-global, "spacing", "unit")} 0 #{2 * map-deep-get($config-global, "spacing", "unit")};
  86. }
  87. }
  88. // Social Navigation
  89. .social-navigation {
  90. order: 1;
  91. margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
  92. margin-top: 0;
  93. @include media(tablet) {
  94. margin-bottom: #{3 * map-deep-get($config-global, "spacing", "unit")};
  95. margin-top: -#{2 * map-deep-get($config-global, "spacing", "unit")};
  96. }
  97. ul {
  98. flex-wrap: wrap;
  99. margin: 0 auto;
  100. li {
  101. margin-left: #{0.25 * map-deep-get($config-global, "spacing", "unit")};
  102. margin-right: #{0.25 * map-deep-get($config-global, "spacing", "unit")};
  103. a {
  104. align-items: center;
  105. background: $color_primary_default;
  106. border-radius: 50%;
  107. display: flex;
  108. height: #{3 * map-deep-get($config-global, "spacing", "unit")};
  109. justify-content: center;
  110. width: #{3 * map-deep-get($config-global, "spacing", "unit")};
  111. &:active,
  112. &:focus,
  113. &:hover {
  114. background: $color_primary_hover;
  115. }
  116. }
  117. }
  118. }
  119. }
  120. }
  121. /**
  122. * Page
  123. */
  124. .site {
  125. margin: 0 auto;
  126. padding: 0;
  127. }
  128. .site-main {
  129. @include media(mobile) {
  130. padding-top: #{3 * map-deep-get($config-global, "spacing", "unit")};
  131. }
  132. }
  133. #page {
  134. .entry-header,
  135. .page-header,
  136. .entry-footer,
  137. .a8c-posts-list {
  138. text-align: center;
  139. }
  140. .a8c-posts-list-item__excerpt {
  141. text-align: left;
  142. }
  143. }
  144. /**
  145. * Footer Menu
  146. */
  147. .footer-navigation {
  148. order: 1;
  149. text-align: center;
  150. text-transform: uppercase;
  151. @include media(mobile) {
  152. flex: 1 0 100%;
  153. }
  154. .footer-menu {
  155. justify-content: center;
  156. a {
  157. padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
  158. }
  159. > li:first-of-type {
  160. > a {
  161. padding-left: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
  162. }
  163. }
  164. > li:last-of-type {
  165. > a {
  166. padding-right: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
  167. }
  168. }
  169. }
  170. }
  171. /**
  172. * Site Info
  173. */
  174. .site-info {
  175. margin-top: 0;
  176. text-align: center;
  177. .footer-navigation + & {
  178. margin-top: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
  179. }
  180. }
  181. /**
  182. * Archive Pagination and Post Navigation
  183. */
  184. .pagination .nav-links > *,
  185. .post-navigation .post-title {
  186. font-weight: 400;
  187. }
  188. /**
  189. * Post
  190. */
  191. // Entry Header
  192. .entry-header,
  193. .a8c-posts-list-item__title {
  194. a {
  195. color: inherit;
  196. &:active,
  197. &:focus,
  198. &:hover {
  199. color: $color_primary_default;
  200. }
  201. }
  202. }
  203. // Sticky Post
  204. .sticky-post,
  205. .a8c-posts-list .a8c-posts-list-item__featured span {
  206. background: #{map-deep-get($config-global, "color", "background", "light")};
  207. color: #{map-deep-get($config-global, "color", "foreground", "light")};
  208. @include font-family( map-deep-get($config-global, "font", "family", "ui") );
  209. //text-transform: uppercase;
  210. }
  211. /**
  212. * Blocks
  213. */
  214. // Button
  215. .entry-content > .wp-block-button:not(.alignleft):not(.alignright) {
  216. margin-left: auto;
  217. margin-right: auto;
  218. text-align: center;
  219. }
  220. // Business Hours
  221. .jetpack-business-hours {
  222. dt {
  223. font-family: inherit;
  224. font-family: var( --font-base, inherit );
  225. }
  226. }
  227. // Category
  228. .wp-block-categories {
  229. .children {
  230. list-style: disc;
  231. > li {
  232. border: 0;
  233. margin-bottom: 0;
  234. margin-top: 0;
  235. }
  236. }
  237. }
  238. // Pullquote
  239. .wp-block-pullquote {
  240. blockquote {
  241. padding: 0;
  242. }
  243. }
  244. // Separator
  245. .wp-block-separator {
  246. border-bottom-color: #{map-deep-get($config-global, "color", "border", "default")};
  247. border-bottom-width: #{map-deep-get($config-separator, "height")};
  248. }
  249. // Table block
  250. table,
  251. .wp-block-table {
  252. td,
  253. th {
  254. border-color: #{map-deep-get($config-global, "color", "border", "default")};
  255. }
  256. }
  257. .wp-block-newspack-blocks-homepage-articles {
  258. article {
  259. .entry-title a {
  260. color: inherit;
  261. &:active,
  262. &:focus,
  263. &:hover {
  264. color: map-deep-get($config-global, "color", "primary", "default");
  265. text-decoration: none;
  266. }
  267. }
  268. .cat-links a,
  269. .more-link,
  270. .entry-meta a {
  271. text-decoration: none;
  272. &:active,
  273. &:focus,
  274. &:hover {
  275. text-decoration: underline;
  276. }
  277. }
  278. }
  279. &.image-alignbehind article {
  280. .entry-title a {
  281. &:active,
  282. &:focus,
  283. &:hover {
  284. color: inherit;
  285. text-decoration: underline;
  286. }
  287. }
  288. }
  289. }
  290. .has-background:not(.has-background-background-color),
  291. [class*="background-color"]:not(.has-background-background-color),
  292. [style*="background-color"] {
  293. .wp-block-newspack-blocks-homepage-articles article {
  294. .entry-title a{
  295. &:active,
  296. &:focus,
  297. &:hover {
  298. text-decoration: underline;
  299. }
  300. }
  301. }
  302. }
  303. /**
  304. * Widgets
  305. */
  306. .widget_calendar {
  307. caption {
  308. font-weight: bold;
  309. }
  310. td,
  311. th {
  312. text-align: center;
  313. }
  314. }
  315. .widget_archive,
  316. .widget_categories,
  317. .widget_links,
  318. .widget_meta,
  319. .widget_nav_menu,
  320. .widget_pages,
  321. .widget_recent_comments,
  322. .widget_recent_entries,
  323. .widget_rss,
  324. .widget_rss_links,
  325. .widget_top-posts,
  326. .widget_authors,
  327. .widget_jp_blogs_i_follow,
  328. .widget_top-click,
  329. .widget_upcoming_events_widget {
  330. ul {
  331. border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
  332. list-style: none;
  333. padding-left: 0;
  334. }
  335. li {
  336. border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
  337. padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
  338. }
  339. }
  340. .widget_categories .children,
  341. .widget_nav_menu .sub-menu,
  342. .widget_pages .children {
  343. border-bottom: 0;
  344. margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
  345. margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
  346. padding-left: map-deep-get($config-global, "spacing", "horizontal");
  347. }
  348. .widget_recent_entries .post-date {
  349. display: block;
  350. }
  351. .widget_rss {
  352. cite,
  353. .rssSummary,
  354. .rss-date {
  355. display: block;
  356. }
  357. }
  358. /**
  359. * Search block
  360. */
  361. .wp-block-search {
  362. .wp-block-search__input {
  363. margin-right: calc( .1 * #{map-deep-get($config-button, "padding", "horizontal")} );
  364. }
  365. }
  366. /* center pullquote block when set to be full width */
  367. .wp-block-pullquote.alignfull blockquote {
  368. margin: auto;
  369. }