_layout-post.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. /**
  2. * Posts
  3. */
  4. .post-header {
  5. margin-bottom: $spacing-unit;
  6. }
  7. .post-title,
  8. .post-content h1 {
  9. @include relative-font-size(2.625);
  10. letter-spacing: -1px;
  11. line-height: 1.15;
  12. @media screen and (min-width: $on-laptop) {
  13. @include relative-font-size(2.625);
  14. }
  15. }
  16. .post-content {
  17. h1, h2, h3 { margin-top: $spacing-unit }
  18. h4, h5, h6 { margin-top: $spacing-unit }
  19. h2 {
  20. @include relative-font-size(1.75);
  21. @media screen and (min-width: $on-laptop) {
  22. @include relative-font-size(2);
  23. }
  24. }
  25. h3 {
  26. @include relative-font-size(1.375);
  27. @media screen and (min-width: $on-laptop) {
  28. @include relative-font-size(1.625);
  29. }
  30. }
  31. h4 {
  32. @include relative-font-size(1.25);
  33. }
  34. h5 {
  35. @include relative-font-size(1.125);
  36. }
  37. h6 {
  38. @include relative-font-size(1.0625);
  39. }
  40. }
  41. article, .comments, .box {
  42. padding: $spacing-unit;
  43. background: $content-color;
  44. border-radius: 20px;
  45. box-shadow: 0 0 40px rgba(0,0,0,0.5);
  46. margin: 25px 0;
  47. @include media-query($on-mobile) {
  48. padding: 0;
  49. background: transparent;
  50. box-shadow: none;
  51. }
  52. }
  53. .comments {
  54. @media screen and (min-width: $on-mobile) {
  55. padding:15px $spacing-unit;
  56. }
  57. }
  58. .page-content {
  59. margin-top: 80px;
  60. }