_extra-child-theme.scss 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  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. a {
  114. color: inherit;
  115. text-decoration: none;
  116. &:active,
  117. &:focus,
  118. &:hover {
  119. color: map-deep-get($config-global, "color", "primary", "default");
  120. }
  121. }
  122. }
  123. // Sticky tag
  124. .sticky-post,
  125. .a8c-posts-list .a8c-posts-list-item__featured span {
  126. font-weight: 600;
  127. padding: #{0.25 * $baseline-unit} #{0.66 * $spacing_unit};
  128. }
  129. /**
  130. * Next/Previous navigation
  131. */
  132. // Singular navigation
  133. .post-navigation {
  134. .meta-nav {
  135. color: map-deep-get($config-global, "color", "foreground", "light");
  136. }
  137. .post-title {
  138. font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
  139. line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
  140. }
  141. }
  142. /**
  143. * Comments
  144. */
  145. .logged-in-as,
  146. .comment-notes,
  147. .comment-form-cookies-consent {
  148. font-size: map-deep-get($config-global, "font", "size", "sm");
  149. }
  150. .comment-form-cookies-consent input[type=checkbox] + label {
  151. line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
  152. }
  153. .comment-notes {
  154. color: map-deep-get($config-global, "color", "foreground", "light");
  155. }
  156. .comment-form > p:not(.comment-form-cookies-consent) label {
  157. font-weight: 600;
  158. }
  159. /**
  160. * Blocks
  161. */
  162. .wp-block-columns.alignfull {
  163. @include media(mobile) {
  164. padding-right: $spacing_vertical;
  165. padding-left: $spacing_vertical;
  166. }
  167. }
  168. /**
  169. * Widgets
  170. */
  171. @include media(laptop) {
  172. .site-footer .widget-area {
  173. max-width: 100%;
  174. & > * {
  175. max-width: 50%;
  176. }
  177. }
  178. }
  179. .widget {
  180. select {
  181. max-width: 100%;
  182. }
  183. }
  184. .widget-title {
  185. font-size: #{map-deep-get($config-heading, "font", "size", "h3")};
  186. margin-bottom: #{0.5 * $spacing_vertical};
  187. }
  188. .widget_archive,
  189. .widget_categories,
  190. .widget_meta,
  191. .widget_nav_menu,
  192. .widget_pages,
  193. .widget_recent_comments,
  194. .widget_recent_entries,
  195. .widget_rss {
  196. ul {
  197. padding-left: 0;
  198. list-style: none;
  199. li {
  200. color: map-deep-get($config-global, "color", "foreground", "light");
  201. font-weight: 600;
  202. }
  203. ul {
  204. counter-reset: submenu;
  205. }
  206. ul > li > a::before {
  207. font-weight: normal;
  208. content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
  209. counter-increment: submenu
  210. }
  211. }
  212. }
  213. .widget_tag_cloud {
  214. .tagcloud {
  215. font-weight: 600;
  216. }
  217. }
  218. .widget_search {
  219. .search-field {
  220. width: 100%;
  221. @include media(mobile) {
  222. width: auto;
  223. }
  224. }
  225. .search-submit {
  226. display: block;
  227. margin-top: $typescale-base;
  228. }
  229. }
  230. .widget_calendar .calendar_wrap {
  231. text-align: center;
  232. table td,
  233. table th {
  234. border: none;
  235. }
  236. a {
  237. text-decoration: underline;
  238. }
  239. }
  240. .widget_links li,
  241. .widget_jp_blogs_i_follow li,
  242. .widget_rss_links li {
  243. font-family: inherit;
  244. font-family: var( --font-base, inherit );
  245. }