_extra-child-theme.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. /**
  2. * Extra Child Theme Styles
  3. */
  4. html {
  5. letter-spacing: -0.02em;
  6. }
  7. .has-small-font-size {
  8. @include font-family( map-deep-get($config-global, "font", "family", "primary") );
  9. }
  10. a {
  11. text-decoration: none;
  12. .wp-block-cover &,
  13. .wp-block-cover-image &,
  14. .wp-block-media-text &,
  15. p:not(.site-title) & {
  16. text-decoration: underline;
  17. &.wp-block-button__link,
  18. &:hover {
  19. text-decoration: none;
  20. }
  21. }
  22. }
  23. /**
  24. * Mobile-Menu
  25. */
  26. #masthead {
  27. position: relative;
  28. }
  29. #toggle-menu {
  30. position: absolute;
  31. right: #{map-deep-get($config-global, "spacing", "unit")};
  32. top: #{map-deep-get($config-global, "spacing", "unit")};
  33. }
  34. .site-branding {
  35. max-width: calc(100% - 100px - #{map-deep-get($config-global, "spacing", "unit")});
  36. }
  37. .site-logo:not(:last-child) {
  38. padding-bottom: (0.5 * map-deep-get($config-global, "spacing", "unit"));
  39. }
  40. /**
  41. * CSS-grid Desktop Menu
  42. */
  43. @include media(mobile) {
  44. #toggle-menu {
  45. position: inherit;
  46. right: auto;
  47. top: auto;
  48. }
  49. .site-header {
  50. align-items: center;
  51. display: grid;
  52. grid-template-columns: auto;
  53. grid-template-rows: auto;
  54. grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
  55. grid-template-areas:
  56. "site-logo site-logo"
  57. "site-branding main-navigation"
  58. "site-branding social-navigation";
  59. &:before,
  60. &:after {
  61. content: none;
  62. display: none;
  63. }
  64. & > * {
  65. margin-top: 0;
  66. margin-bottom: 0;
  67. }
  68. .site-logo {
  69. display: block;
  70. grid-area: site-logo;
  71. }
  72. .site-branding {
  73. align-self: baseline;
  74. max-width: inherit;
  75. grid-area: site-branding;
  76. }
  77. .main-navigation {
  78. align-self: baseline;
  79. grid-area: main-navigation;
  80. justify-self: end;
  81. & > div > ul {
  82. justify-content: flex-end;
  83. }
  84. }
  85. .social-navigation {
  86. grid-area: social-navigation;
  87. justify-self: flex-end;
  88. & > div > ul {
  89. justify-content: flex-end;
  90. }
  91. }
  92. }
  93. }
  94. .wp-block-newspack-blocks-homepage-articles {
  95. article {
  96. .cat-links a,
  97. .entry-title a,
  98. .entry-title a:hover,
  99. .entry-meta a {
  100. text-decoration: none;
  101. }
  102. }
  103. &.image-alignbehind article {
  104. .cat-links a:hover,
  105. .entry-title a:hover,
  106. .entry-meta a:hover {
  107. text-decoration: underline;
  108. }
  109. }
  110. }
  111. .has-background:not(.has-background-background-color),
  112. [class*="background-color"]:not(.has-background-background-color),
  113. [style*="background-color"] {
  114. .wp-block-newspack-blocks-homepage-articles article {
  115. .cat-links a:hover,
  116. .entry-title a:hover,
  117. .entry-meta a:hover {
  118. text-decoration: underline;
  119. }
  120. }
  121. }