Brak opisu

entry.scss 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. .entry-title {
  2. color: var(--entry-header--color);
  3. font-size: var(--entry-header--font-size);
  4. letter-spacing: var(--heading--letter-spacing-h2);
  5. line-height: var(--heading--line-height-h2);
  6. overflow-wrap: break-word;
  7. a {
  8. color: var(--entry-header--color-link);
  9. text-underline-offset: 0.15em;
  10. &:hover {
  11. color: var(--entry-header--color-hover);
  12. }
  13. &:focus {
  14. color: var(--entry-header--color-focus);
  15. }
  16. &:active {
  17. color: var(--entry-header--color-link);
  18. }
  19. }
  20. }
  21. .singular .entry-title {
  22. font-size: var(--global--font-size-page-title);
  23. }
  24. h1.entry-title {
  25. line-height: var(--heading--line-height-h1);
  26. font-weight: var(--heading--font-weight-page-title);
  27. }
  28. /**
  29. * Entry Content
  30. */
  31. .entry-content,
  32. .entry-summary {
  33. font-family: var(--entry-content--font-family);
  34. }
  35. .entry-content {
  36. p {
  37. word-wrap: break-word;
  38. }
  39. // Overwrite iframe embeds that have inline styles.
  40. > iframe[style] {
  41. margin: var(--global--spacing-vertical) 0 !important;
  42. max-width: 100% !important;
  43. }
  44. // Classic editor audio embeds.
  45. .wp-audio-shortcode {
  46. @extend %responsive-aligndefault-width;
  47. }
  48. }
  49. .entry-footer {
  50. color: var(--global--color-primary);
  51. clear: both;
  52. float: none;
  53. font-size: var(--global--font-size-xs);
  54. display: block;
  55. > span {
  56. display: inline-block;
  57. }
  58. a {
  59. color: currentColor;
  60. &:hover,
  61. &:focus {
  62. color: var(--global--color-primary-hover);
  63. }
  64. &:active {
  65. color: currentColor;
  66. }
  67. }
  68. }
  69. // Extra specificity to override rules in _vertical-margins.scss
  70. .site-main > article > .entry-footer {
  71. margin-top: var(--global--spacing-vertical);
  72. padding-top: var(--global--spacing-unit);
  73. padding-bottom: calc(3 * var(--global--spacing-vertical));
  74. border-bottom: var(--separator--height) solid var(--separator--border-color);
  75. }
  76. body:not(.single) .site-main > article:last-of-type .entry-footer {
  77. border-bottom: var(--separator--height) solid transparent;
  78. }
  79. .single .site-main > article > .entry-footer {
  80. margin-top: calc(3.4 * var(--global--spacing-vertical));
  81. margin-bottom: calc(3.4 * var(--global--spacing-vertical));
  82. padding-bottom: 0;
  83. padding-top: calc(0.8 * var(--global--spacing-vertical));
  84. border-top: 3px solid var(--separator--border-color);
  85. border-bottom: var(--separator--height) solid transparent;
  86. display: grid;
  87. grid-template-columns: repeat(2, 1fr);
  88. column-gap: calc(2 * var(--global--spacing-horizontal));
  89. .post-taxonomies,
  90. .full-size-link {
  91. justify-content: flex-end;
  92. text-align: right;
  93. }
  94. .full-size-link:first-child:last-child {
  95. grid-column: span 2;
  96. }
  97. .posted-on,
  98. .byline,
  99. .cat-links,
  100. .tags-links {
  101. display: block;
  102. }
  103. @include media(mobile-only) {
  104. display: block;
  105. .full-size-link {
  106. display: block;
  107. }
  108. .post-taxonomies,
  109. .full-size-link {
  110. text-align: left;
  111. }
  112. }
  113. }
  114. /**
  115. * Post Thumbnails
  116. */
  117. .post-thumbnail {
  118. @extend %responsive-aligndefault-width;
  119. text-align: center;
  120. .entry-header &,
  121. .singular & {
  122. @extend %responsive-alignwide-width-nested;
  123. }
  124. .wp-post-image {
  125. display: block;
  126. width: auto;
  127. max-width: 100%;
  128. margin-left: auto;
  129. margin-right: auto;
  130. margin-top: calc(2 * var(--global--spacing-vertical));
  131. }
  132. }
  133. /**
  134. * Author
  135. */
  136. .author-bio {
  137. position: relative;
  138. font-size: var(--global--font-size-xs);
  139. max-width: var(--responsive--aligndefault-width);
  140. .site-main > article > & {
  141. margin-top: calc(2 * var(--global--spacing-vertical));
  142. }
  143. // Avatars are optional and can be turned off.
  144. &.show-avatars {
  145. .avatar {
  146. display: inline-block;
  147. vertical-align: top;
  148. border-radius: 50%;
  149. }
  150. .author-bio-content {
  151. display: inline-block;
  152. padding-left: var(--global--spacing-horizontal);
  153. max-width: calc(var(--responsive--aligndefault-width) - 90px);
  154. }
  155. }
  156. .author-bio-content {
  157. .author-title {
  158. font-family: var(--entry-author-bio--font-family);
  159. font-size: var(--entry-author-bio--font-size);
  160. display: inline;
  161. }
  162. .author-description {
  163. font-size: var(--global--font-size-xs);
  164. margin-top: calc(0.5 * var(--global--spacing-vertical));
  165. margin-bottom: calc(0.5 * var(--global--spacing-vertical));
  166. }
  167. }
  168. }