_latest-posts.scss 2.6 KB

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