_extra-child-theme.scss 7.5 KB

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