_posts-and-pages.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. .archive .post .entry-title,
  2. .home .post .entry-title {
  3. font-size: var(--global--font-size-lg);
  4. line-height: var(--global--line-height-heading);
  5. margin-bottom: 0;
  6. }
  7. .archive .post-excerpt:not(.sticky),
  8. .home .post-excerpt:not(.sticky) {
  9. color: var(--global--color-secondary);
  10. .more-link {
  11. color: var(--global--color-secondary);
  12. &:hover {
  13. color: var(--global--color-primary-hover);
  14. }
  15. }
  16. }
  17. .post .entry-header {
  18. display: flex;
  19. flex-direction: column;
  20. .entry-title {
  21. margin-bottom: 0;
  22. }
  23. .entry-meta {
  24. margin-bottom: var(--global--spacing-vertical);
  25. order: -1;
  26. .posted-on {
  27. svg {
  28. display: none;
  29. }
  30. a {
  31. color: var(--global--color-foreground-low-contrast);
  32. font-family: var(--global--font-primary);
  33. font-size: var(--global--font-size-md);
  34. }
  35. }
  36. }
  37. }
  38. .site-main {
  39. & > * {
  40. margin: 0 auto;
  41. padding: var(--global--spacing-vertical) 0;
  42. &:first-child {
  43. padding-top: 0;
  44. }
  45. }
  46. article > * {
  47. margin-top: calc( 0.48 * var(--global--spacing-vertical) );
  48. margin-bottom: calc( 0.48 * var(--global--spacing-vertical) );
  49. /* This overrides Seedlet's style for this breakpoint */
  50. @include media(mobile) {
  51. margin-top: calc( 0.48 * var(--global--spacing-vertical) );
  52. margin-bottom: calc( 0.48 * var(--global--spacing-vertical) );
  53. }
  54. }
  55. }
  56. // Sticky posts
  57. .has-sticky-post .site-main {
  58. background: var(--sticky-posts--alt-color-background);
  59. > *:first-child {
  60. margin-top: calc( 0px - var(--global--spacing-vertical) );
  61. padding-top: var(--global--spacing-vertical);
  62. }
  63. }
  64. .post.sticky { // .post class needed to make this stronger
  65. background: var(--sticky-posts--color-background);
  66. padding-bottom: calc(2 * var(--global--spacing-vertical));
  67. .entry-title {
  68. font-size: var(--sticky-posts--entry-title-font-size);
  69. }
  70. .entry-content {
  71. font-size: var(--sticky-posts--entry-content-font-size);
  72. }
  73. // Subsequent sticky posts do not need extra top padding.
  74. + .post.sticky {
  75. padding-top: 0;
  76. }
  77. // The first non-sticky post does need extra top padding.
  78. + article:not(.sticky) {
  79. padding-top: calc(2 * var(--global--spacing-vertical));
  80. }
  81. }
  82. .sticky-post {
  83. display: none;
  84. }
  85. .entry-content {
  86. .more-link {
  87. color: var(--global--color-foreground);
  88. display: inline-block;
  89. font-size: var(--entry-meta--font-size);
  90. margin-top: 0;
  91. text-decoration: 1px solid underline var(--global--color-primary);
  92. &:hover {
  93. color: var(--global--color-primary-hover);
  94. }
  95. &:after {
  96. content: none;
  97. }
  98. svg {
  99. height: var(--global--font-size-base);
  100. width: var(--global--font-size-base);
  101. margin-left: -0.25em;
  102. display: inline-block;
  103. vertical-align: middle;
  104. transform: rotate(-90deg);
  105. }
  106. }
  107. .excerpt-more-link {
  108. .more-link {
  109. margin-left: 1rem;
  110. }
  111. }
  112. }
  113. .single {
  114. color: var(--global--color-foreground);
  115. }