_extra-child-theme.scss 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  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. a {
  104. color: inherit;
  105. text-decoration: none;
  106. &:active,
  107. &:focus,
  108. &:hover {
  109. color: map-deep-get($config-global, "color", "primary", "default");
  110. }
  111. }
  112. }
  113. // Sticky tag
  114. .sticky-post,
  115. .a8c-posts-list .a8c-posts-list-item__featured span {
  116. padding: #{0.5 * $baseline-unit} #{0.66 * $spacing_unit};
  117. }
  118. /**
  119. * Next/Previous navigation
  120. */
  121. // Singular navigation
  122. .post-navigation {
  123. .meta-nav {
  124. color: map-deep-get($config-global, "color", "foreground", "light");
  125. }
  126. .post-title {
  127. font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
  128. line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
  129. }
  130. }
  131. /**
  132. * Comments
  133. */
  134. .logged-in-as,
  135. .comment-notes,
  136. .comment-form-cookies-consent {
  137. font-size: map-deep-get($config-global, "font", "size", "sm");
  138. }
  139. .comment-form-cookies-consent input[type=checkbox] + label {
  140. line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
  141. }
  142. .comment-notes {
  143. color: map-deep-get($config-global, "color", "foreground", "light");
  144. }
  145. .comment-form > p:not(.comment-form-cookies-consent) label {
  146. font-weight: 700;
  147. }
  148. .comment-respond {
  149. .form-submit {
  150. display: flex;
  151. justify-content: flex-end;
  152. }
  153. }
  154. /**
  155. * Blocks
  156. */
  157. // Posts List
  158. .a8c-posts-list {
  159. text-align: center;
  160. }
  161. .a8c-posts-list-item__excerpt {
  162. text-align: left;
  163. }
  164. // Cover
  165. .wp-block-cover,
  166. .wp-block-cover-image {
  167. h1 {
  168. font-size: #{map-deep-get($config-global, "font", "size", "xxxxl")};
  169. }
  170. h2 {
  171. font-size: #{map-deep-get($config-global, "font", "size", "xxxl")};
  172. }
  173. h3 {
  174. font-size: #{map-deep-get($config-global, "font", "size", "xxl")};
  175. }
  176. h4 {
  177. font-size: #{map-deep-get($config-global, "font", "size", "xl")};
  178. }
  179. h5 {
  180. font-size: #{map-deep-get($config-global, "font", "size", "lg")};
  181. }
  182. h6 {
  183. font-size: #{map-deep-get($config-global, "font", "size", "md")};
  184. }
  185. @include media(mobile) {
  186. min-height: 60vh;
  187. }
  188. @include media(laptop) {
  189. min-height: 80vh;
  190. }
  191. }
  192. /**
  193. * Widgets
  194. */
  195. .widget {
  196. select {
  197. max-width: 100%;
  198. }
  199. }
  200. .widget-title {
  201. font-size: #{map-deep-get($config-heading, "font", "size", "h3")};
  202. margin-bottom: #{0.5 * $spacing_vertical};
  203. }
  204. .widget_archive,
  205. .widget_categories,
  206. .widget_links,
  207. .widget_meta,
  208. .widget_nav_menu,
  209. .widget_pages,
  210. .widget_recent_comments,
  211. .widget_recent_entries,
  212. .widget_rss,
  213. .widget_rss_links,
  214. .widget_top-posts,
  215. .widget_authors,
  216. .widget_jp_blogs_i_follow,
  217. .widget_top-click,
  218. .widget_upcoming_events_widget {
  219. ul {
  220. padding-left: 0;
  221. margin-right: 0;
  222. list-style: none;
  223. li {
  224. color: map-deep-get($config-global, "color", "foreground", "light");
  225. font-weight: 700;
  226. margin-top: #{0.5 * $spacing_vertical};
  227. margin-bottom: #{0.5 * $spacing_vertical};
  228. }
  229. ul {
  230. counter-reset: submenu;
  231. }
  232. ul > li > a::before {
  233. font-weight: normal;
  234. content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
  235. counter-increment: submenu
  236. }
  237. }
  238. }
  239. .widget_tag_cloud {
  240. .tagcloud {
  241. font-weight: 700;
  242. }
  243. }
  244. .widget_search {
  245. .search-field {
  246. width: 100%;
  247. @include media(mobile) {
  248. width: auto;
  249. }
  250. }
  251. .search-submit {
  252. display: block;
  253. margin-top: $typescale-base;
  254. }
  255. }
  256. .widget_calendar .calendar_wrap {
  257. text-align: center;
  258. table td,
  259. table th {
  260. border: none;
  261. }
  262. a {
  263. text-decoration: underline;
  264. }
  265. }
  266. .widget_links li,
  267. .widget_jp_blogs_i_follow li,
  268. .widget_rss_links li {
  269. font-family: inherit;
  270. font-family: var( --font-base, inherit );
  271. }
  272. /**
  273. * Footer
  274. */
  275. #colophon {
  276. @extend %responsive-alignwide-nested;
  277. }
  278. /**
  279. * Footer Navigation
  280. */
  281. .footer-navigation {
  282. .footer-menu {
  283. a {
  284. padding: 0 #{0.5 * $spacing_unit};
  285. }
  286. > li:last-of-type {
  287. margin-right: -#{0.5 * $spacing_unit};
  288. }
  289. }
  290. }