_extra-child-theme.scss 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. /**
  2. * Extra Child Theme Styles
  3. */
  4. $spacing_unit: map-deep-get($config-global, "spacing", "unit");
  5. $spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
  6. $spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
  7. html,
  8. body {
  9. font-weight: 300;
  10. }
  11. a {
  12. text-decoration: none;
  13. .wp-block-cover &,
  14. .wp-block-cover-image &,
  15. .wp-block-media-text &,
  16. p:not(.site-title) & {
  17. text-decoration: underline;
  18. &.wp-block-button__link,
  19. &:hover {
  20. text-decoration: none;
  21. }
  22. }
  23. }
  24. b, strong {
  25. font-weight: 700;
  26. }
  27. .site-branding,
  28. .main-navigation,
  29. .entry-header,
  30. .entry-footer,
  31. .page-title,
  32. .author-title,
  33. .comments-title,
  34. .comment-reply-title,
  35. .logged-in-as,
  36. .comment-notes {
  37. text-align: center;
  38. }
  39. .comment-reply-title {
  40. display: inherit;
  41. }
  42. .comment .comment-reply-title {
  43. display: flex;
  44. }
  45. .main-navigation > div {
  46. text-align: left;
  47. }
  48. .main-navigation > div > ul,
  49. .social-navigation > div > ul,
  50. .pagination .nav-links {
  51. justify-content: center;
  52. }
  53. /**
  54. * Header
  55. */
  56. .site-header {
  57. margin-right: auto;
  58. margin-left: auto;
  59. padding-top: $spacing_vertical;
  60. padding-bottom: $spacing_vertical;
  61. @extend %responsive-alignwide;
  62. @include media(mobile) {
  63. padding-top: #{1.5 * $spacing_vertical};
  64. padding-bottom: #{1.5 * $spacing_vertical};
  65. }
  66. }
  67. .site-logo + .site-title {
  68. margin-top: #{0.25 * $spacing_vertical};
  69. }
  70. .site-title + .site-description {
  71. margin-top: #{0.5 * $spacing_unit};
  72. }
  73. /**
  74. * Navigation
  75. */
  76. .site-header > * {
  77. &.main-navigation {
  78. @include media(mobile) {
  79. margin-bottom: 0;
  80. > div > ul > li > .sub-menu {
  81. border: 1px solid map-deep-get($config-global, "color", "border", "default");
  82. box-shadow: none;
  83. border-radius: map-deep-get($config-global, "border-radius", "sm");
  84. }
  85. }
  86. }
  87. &.social-navigation {
  88. @include media(mobile) {
  89. margin-top: 0;
  90. }
  91. }
  92. }
  93. /**
  94. * Main
  95. */
  96. .site-main {
  97. padding-top: 0;
  98. }
  99. .site-main > article > .entry-header {
  100. margin-top: #{0.666 * $spacing_vertical};
  101. @include media(mobile) {
  102. margin-top: $spacing_vertical;
  103. }
  104. }
  105. // Entry Title
  106. .entry-title {
  107. font-weight: 300;
  108. }
  109. .entry-title {
  110. font-size: map-deep-get($config-global, "font", "size", "xxl");
  111. @include media(laptop) {
  112. font-size: map-deep-get($config-global, "font", "size", "xxxxl");
  113. }
  114. }
  115. // Entry Title Link
  116. .entry-title,
  117. .page-title,
  118. .a8c-posts-list .a8c-posts-list-item__title,
  119. .wp-block-newspack-blocks-homepage-articles article .entry-title {
  120. a {
  121. color: inherit;
  122. text-decoration: none;
  123. &:active,
  124. &:focus,
  125. &:hover {
  126. color: map-deep-get($config-global, "color", "primary", "default");
  127. }
  128. }
  129. }
  130. // Sticky tag
  131. .sticky-post,
  132. .a8c-posts-list .a8c-posts-list-item__featured span {
  133. padding: #{0.5 * $baseline-unit} #{0.66 * $spacing_unit};
  134. }
  135. /**
  136. * Next/Previous navigation
  137. */
  138. .post-navigation {
  139. .meta-nav {
  140. color: map-deep-get($config-global, "color", "foreground", "light");
  141. }
  142. .post-title {
  143. font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
  144. line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
  145. }
  146. }
  147. /**
  148. * Comments
  149. */
  150. .logged-in-as,
  151. .comment-notes,
  152. .comment-form-cookies-consent {
  153. font-size: map-deep-get($config-global, "font", "size", "sm");
  154. }
  155. .comment-form-cookies-consent input[type=checkbox] + label {
  156. line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
  157. }
  158. .comment-notes {
  159. color: map-deep-get($config-global, "color", "foreground", "light");
  160. }
  161. .comment-form > p:not(.comment-form-cookies-consent) label {
  162. font-weight: 700;
  163. }
  164. .comment-respond {
  165. .form-submit {
  166. display: flex;
  167. justify-content: flex-end;
  168. }
  169. }
  170. /**
  171. * Blocks
  172. */
  173. // Posts List
  174. .a8c-posts-list {
  175. text-align: center;
  176. }
  177. .a8c-posts-list-item__title {
  178. font-weight: 300;
  179. font-size: map-deep-get($config-global, "font", "size", "xxl");
  180. }
  181. .a8c-posts-list-item__excerpt {
  182. text-align: left;
  183. }
  184. // Cover
  185. .wp-block-cover,
  186. .wp-block-cover-image {
  187. h1,h2,h3,h4,h5,h6 {
  188. font-weight: 300;
  189. }
  190. // Only use a text shadow if there's a background image or video.
  191. &[style*="background-image"],
  192. video + .wp-block-cover__inner-container {
  193. p {
  194. text-shadow: 0 0 6px map-deep-get($config-global, "color", "black");
  195. }
  196. h1,h2,h3,h4,h5,h6 {
  197. text-shadow: 0 0 10px map-deep-get($config-global, "color", "black");
  198. }
  199. }
  200. @include media(desktop) {
  201. min-height: #{20 * map-deep-get($config-global, "spacing", "vertical")};
  202. // Prevent overruling the user defined font size value set inside Gutenberg
  203. // for Full Site Editing's Site Title block.
  204. h1:not(.site-title) {
  205. font-size: #{map-deep-get($config-global, "font", "size", "xxxxl")};
  206. }
  207. h2 {
  208. font-size: #{map-deep-get($config-global, "font", "size", "xxxl")};
  209. }
  210. h3 {
  211. font-size: #{map-deep-get($config-global, "font", "size", "xxl")};
  212. }
  213. h4 {
  214. font-size: #{map-deep-get($config-global, "font", "size", "xl")};
  215. }
  216. h5 {
  217. font-size: #{map-deep-get($config-global, "font", "size", "lg")};
  218. }
  219. h6 {
  220. font-size: #{map-deep-get($config-global, "font", "size", "md")};
  221. }
  222. }
  223. }
  224. .wp-block-newspack-blocks-homepage-articles {
  225. article {
  226. .entry-title a:hover {
  227. text-decoration: none;
  228. }
  229. .cat-links a,
  230. .more-link,
  231. .entry-meta a {
  232. text-decoration: none;
  233. &:hover {
  234. text-decoration: underline;
  235. }
  236. }
  237. .more-link:hover {
  238. color: map-deep-get($config-global, "color", "primary", "hover");
  239. }
  240. }
  241. &.image-alignbehind article {
  242. .entry-title a:hover {
  243. text-decoration: underline;
  244. }
  245. .more-link:hover {
  246. color: inherit;
  247. }
  248. }
  249. }
  250. .has-background:not(.has-background-background-color),
  251. [class*="background-color"]:not(.has-background-background-color),
  252. [style*="background-color"] {
  253. .wp-block-newspack-blocks-homepage-articles article {
  254. .entry-title a:hover {
  255. text-decoration: underline;
  256. }
  257. }
  258. }
  259. /**
  260. * Widgets
  261. */
  262. .widget {
  263. select {
  264. max-width: 100%;
  265. }
  266. }
  267. .widget-title {
  268. font-size: #{map-deep-get($config-heading, "font", "size", "h3")};
  269. margin-bottom: #{0.5 * $spacing_vertical};
  270. }
  271. .widget_archive,
  272. .widget_categories,
  273. .widget_meta,
  274. .widget_nav_menu,
  275. .widget_pages,
  276. .widget_recent_comments,
  277. .widget_recent_entries,
  278. .widget_rss {
  279. ul {
  280. margin-left: 0;
  281. margin-right: 0;
  282. list-style: none;
  283. li {
  284. color: map-deep-get($config-global, "color", "foreground", "light");
  285. font-weight: 700;
  286. }
  287. ul {
  288. counter-reset: submenu;
  289. }
  290. ul > li > a::before {
  291. font-weight: normal;
  292. content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
  293. counter-increment: submenu
  294. }
  295. }
  296. }
  297. .widget_tag_cloud {
  298. .tagcloud {
  299. font-weight: 700;
  300. }
  301. }
  302. .widget_search {
  303. .search-field {
  304. width: 100%;
  305. @include media(mobile) {
  306. width: auto;
  307. }
  308. }
  309. .search-submit {
  310. display: block;
  311. margin-top: $typescale-base;
  312. }
  313. }
  314. .widget_calendar .calendar_wrap {
  315. text-align: center;
  316. table td,
  317. table th {
  318. border: none;
  319. }
  320. a {
  321. text-decoration: underline;
  322. }
  323. }
  324. .widget_links li,
  325. .widget_jp_blogs_i_follow li,
  326. .widget_rss_links li {
  327. font-family: inherit; // for browsers without CSS custom properties support
  328. font-family: var( --font-base, inherit );
  329. }
  330. /**
  331. * Footer
  332. */
  333. #colophon {
  334. @extend %responsive-alignwide;
  335. }
  336. /**
  337. * Footer Navigation
  338. */
  339. .footer-navigation {
  340. .footer-menu {
  341. a {
  342. padding: 0 #{0.5 * $spacing_unit};
  343. }
  344. > li:last-of-type {
  345. margin-right: -#{0.5 * $spacing_unit};
  346. }
  347. }
  348. }