_extra-child-theme.scss 6.3 KB

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