_style.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. .wp-block-latest-posts {
  2. padding-left: 0;
  3. // Vertical margins logic
  4. &:not(.is-grid) > li {
  5. margin-top: var(--global--spacing-vertical);
  6. margin-bottom: var(--global--spacing-vertical);
  7. &:first-child {
  8. margin-top: 0;
  9. }
  10. &:last-child {
  11. margin-bottom: 0;
  12. }
  13. }
  14. &.is-grid {
  15. & > li {
  16. margin-bottom: var(--global--spacing-vertical);
  17. &:last-child {
  18. margin-bottom: 0;
  19. }
  20. }
  21. // Remove bottom margins in grid columns
  22. &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
  23. &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
  24. &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
  25. &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
  26. &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
  27. &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
  28. &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
  29. &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
  30. &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
  31. &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
  32. margin-bottom: 0;
  33. }
  34. }
  35. & > li > * {
  36. margin-top: calc(0.5 * var(--global--spacing-vertical));
  37. margin-bottom: calc(0.5 * var(--global--spacing-vertical));
  38. &:first-child {
  39. margin-top: 0;
  40. }
  41. &:last-child {
  42. margin-bottom: 0;
  43. }
  44. }
  45. // Post title
  46. & > li > a {
  47. font-family: var(--latest-posts--title-font-family);
  48. font-size: var(--latest-posts--title-font-size);
  49. font-weight: var(--heading--font-weight);
  50. line-height: var(--global--line-height-heading);
  51. }
  52. // Post date
  53. .wp-block-latest-posts__post-date {
  54. color: var(--global--color-foreground-low-contrast);
  55. font-size: var(--global--font-size-sm);
  56. line-height: var(--global--line-height-body);
  57. .entry-content [class*="inner-container"] &,
  58. .entry-content .has-background & {
  59. color: currentColor;
  60. }
  61. }
  62. // Post content
  63. .wp-block-latest-posts__post-excerpt,
  64. .wp-block-latest-posts__post-full-content {
  65. font-family: var(--latest-posts--description-font-family);
  66. font-size: var(--latest-posts--description-font-size);
  67. line-height: var(--global--line-height-body);
  68. }
  69. // Utility classes
  70. &.alignfull {
  71. padding-left: var(--global--spacing-unit);
  72. padding-right: var(--global--spacing-unit);
  73. .entry-content [class*="inner-container"] &,
  74. .entry-content .has-background & {
  75. padding-left: 0;
  76. padding-right: 0;
  77. }
  78. }
  79. }
  80. @include media(tablet) {
  81. .wp-block-latest-posts.is-style-seedlet-alternating-grid {
  82. // Necessary so that the block boundaries are respected.
  83. overflow: hidden;
  84. > li {
  85. width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
  86. max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
  87. text-align: right;
  88. &:nth-child(2n + 1) {
  89. float: right;
  90. text-align: left;
  91. }
  92. }
  93. &.is-grid {
  94. display: inherit;
  95. > li {
  96. margin-top: var(--global--spacing-vertical);
  97. margin-right: 0;
  98. &:first-child {
  99. margin-top: 0;
  100. }
  101. &:last-child {
  102. margin-bottom: 0;
  103. }
  104. }
  105. }
  106. }
  107. }