_extra-child-theme.scss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  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. b, strong {
  8. font-weight: 600;
  9. }
  10. a {
  11. .site-header &,
  12. &:hover,
  13. &:focus {
  14. text-decoration: none;
  15. }
  16. }
  17. /**
  18. * Header
  19. */
  20. .site-header,
  21. .site-footer {
  22. max-width: 100%;
  23. padding-left: $spacing_unit;
  24. padding-right: $spacing_unit;
  25. position: relative;
  26. @include media(mobile) {
  27. padding: $spacing_vertical;
  28. }
  29. }
  30. .site-branding {
  31. .site-description {
  32. display: none;
  33. }
  34. }
  35. .main-navigation > div > ul li.current-menu-item a {
  36. text-decoration: underline;
  37. }
  38. /**
  39. * CSS-grid Desktop Menu
  40. */
  41. @include media(laptop) {
  42. .site-header {
  43. display: flex;
  44. &:before,
  45. &:after {
  46. content: none;
  47. display: none;
  48. }
  49. & > * {
  50. margin-top: 0;
  51. margin-bottom: 0;
  52. }
  53. .site-branding {
  54. align-self: center;
  55. flex: 1 1 auto;
  56. padding-right: #{map-deep-get($config-global, "spacing", "unit")};
  57. }
  58. .site-logo {
  59. & + .site-title {
  60. margin-top: #{map-deep-get($config-global, "spacing", "unit")};
  61. }
  62. }
  63. .main-navigation {
  64. align-self: center;
  65. > div > ul > li > .sub-menu {
  66. border: 1px solid map-deep-get($config-global, "color", "border", "default");
  67. box-shadow: none;
  68. border-radius: 0;
  69. }
  70. .sub-menu .menu-item a {
  71. padding-top: #{map-deep-get($config-header, "main-nav", "link-padding")};
  72. padding-bottom: #{map-deep-get($config-header, "main-nav", "link-padding")};
  73. }
  74. }
  75. .social-navigation {
  76. align-self: center;
  77. justify-self: flex-end;
  78. padding-left: #{map-deep-get($config-global, "spacing", "vertical")};
  79. }
  80. }
  81. }
  82. /**
  83. * Main
  84. */
  85. .site-main {
  86. padding-top: 0;
  87. }
  88. .site-main > article > .entry-header,
  89. .site-main > .page-header,
  90. .site-main > .not-found > .page-header {
  91. margin-top: #{0.666 * $spacing_vertical};
  92. @include media(mobile) {
  93. margin-top: #{2 * $spacing_vertical};
  94. }
  95. }
  96. .site-main > {
  97. article > .entry-header,
  98. .page-header,
  99. .not-found > .page-header {
  100. margin-top: #{0.666 * $spacing_vertical};
  101. @include media(mobile) {
  102. margin-top: #{2 * $spacing_vertical};
  103. }
  104. }
  105. }
  106. #main .entry-content .entry-attachment {
  107. max-width: calc( 100% - #{2 * $spacing_vertical} );
  108. }
  109. // Entry Title Link
  110. .entry-title,
  111. .page-title,
  112. .a8c-posts-list .a8c-posts-list-item__title,
  113. .wp-block-newspack-blocks-homepage-articles article .entry-title {
  114. a {
  115. color: inherit;
  116. text-decoration: none;
  117. &:active,
  118. &:focus,
  119. &:hover {
  120. color: map-deep-get($config-global, "color", "primary", "default");
  121. }
  122. }
  123. }
  124. // Sticky tag
  125. .sticky-post,
  126. .a8c-posts-list .a8c-posts-list-item__featured span {
  127. font-weight: 600;
  128. padding: #{0.25 * $baseline-unit} #{0.66 * $spacing_unit};
  129. }
  130. /**
  131. * Next/Previous navigation
  132. */
  133. // Singular navigation
  134. .post-navigation {
  135. .meta-nav {
  136. color: map-deep-get($config-global, "color", "foreground", "light");
  137. }
  138. .post-title {
  139. font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
  140. line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
  141. }
  142. }
  143. /**
  144. * Comments
  145. */
  146. .logged-in-as,
  147. .comment-notes,
  148. .comment-form-cookies-consent {
  149. font-size: map-deep-get($config-global, "font", "size", "sm");
  150. }
  151. .comment-form-cookies-consent input[type=checkbox] + label {
  152. line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
  153. }
  154. .comment-notes {
  155. color: map-deep-get($config-global, "color", "foreground", "light");
  156. }
  157. .comment-form > p:not(.comment-form-cookies-consent) label {
  158. font-weight: 600;
  159. }
  160. /**
  161. * Blocks
  162. */
  163. .wp-block-columns.alignfull {
  164. @include media(mobile) {
  165. padding-right: $spacing_vertical;
  166. padding-left: $spacing_vertical;
  167. }
  168. }
  169. .wp-block-newspack-blocks-homepage-articles {
  170. article {
  171. .cat-links a,
  172. .entry-title a,
  173. .more-link,
  174. .entry-meta a {
  175. text-decoration: none;
  176. &:hover {
  177. text-decoration: underline;
  178. }
  179. }
  180. }
  181. }
  182. /**
  183. * Widgets
  184. */
  185. @include media(laptop) {
  186. .site-footer .widget-area {
  187. max-width: 100%;
  188. & > * {
  189. max-width: 50%;
  190. }
  191. }
  192. }
  193. .widget {
  194. select {
  195. max-width: 100%;
  196. }
  197. }
  198. .widget-title {
  199. font-size: #{map-deep-get($config-heading, "font", "size", "h3")};
  200. margin-bottom: #{0.5 * $spacing_vertical};
  201. }
  202. .widget_archive,
  203. .widget_categories,
  204. .widget_meta,
  205. .widget_nav_menu,
  206. .widget_pages,
  207. .widget_recent_comments,
  208. .widget_recent_entries,
  209. .widget_rss {
  210. ul {
  211. padding-left: 0;
  212. list-style: none;
  213. li {
  214. color: map-deep-get($config-global, "color", "foreground", "light");
  215. font-weight: 600;
  216. }
  217. ul {
  218. counter-reset: submenu;
  219. }
  220. ul > li > a::before {
  221. font-weight: normal;
  222. content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
  223. counter-increment: submenu
  224. }
  225. }
  226. }
  227. .widget_tag_cloud {
  228. .tagcloud {
  229. font-weight: 600;
  230. }
  231. }
  232. .widget_search {
  233. .search-field {
  234. width: 100%;
  235. @include media(mobile) {
  236. width: auto;
  237. }
  238. }
  239. .search-submit {
  240. display: block;
  241. margin-top: $typescale-base;
  242. }
  243. }
  244. .widget_calendar .calendar_wrap {
  245. text-align: center;
  246. table td,
  247. table th {
  248. border: none;
  249. }
  250. a {
  251. text-decoration: underline;
  252. }
  253. }
  254. .widget_links li,
  255. .widget_jp_blogs_i_follow li,
  256. .widget_rss_links li {
  257. font-family: inherit;
  258. font-family: var( --font-base, inherit );
  259. }
  260. // Updates the Mobile Navigation to be next to the site title.
  261. @import "../../varia/sass/components/header/_site-mobile-nav-side";
  262. @include media(mobile-only) {
  263. .mobile-nav-side {
  264. .site-header.has-menu {
  265. .site-branding {
  266. display: contents;
  267. }
  268. }
  269. }
  270. }