_next-previous.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /* Next/Previous navigation */
  2. // Singular navigation
  3. .post-navigation {
  4. @extend %responsive-aligndefault;
  5. .meta-nav {
  6. font-size: #{map-deep-get($config-global, "font", "size", "sm")};
  7. }
  8. .post-title {
  9. @include font-family( map-deep-get($config-global, "font", "family", "primary") );
  10. font-size: #{map-deep-get($config-global, "font", "size", "lg")};
  11. font-weight: 600;
  12. }
  13. .nav-next,
  14. .nav-previous {
  15. margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
  16. margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
  17. &:first-child {
  18. margin-top: 0;
  19. }
  20. &:last-child {
  21. margin-bottom: 0;
  22. }
  23. }
  24. }
  25. // Index/archive navigation
  26. .pagination {
  27. @extend %responsive-aligndefault;
  28. .nav-links {
  29. justify-content: start;
  30. margin: 0 calc(-0.66 * #{map-deep-get($config-global, "spacing", "unit")});
  31. & > * {
  32. @include font-family( map-deep-get($config-global, "font", "family", "primary") );
  33. font-size: #{map-deep-get($config-global, "font", "size", "md")};
  34. font-weight: 600;
  35. padding-left: calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")});
  36. padding-right: calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")});
  37. }
  38. .svg-icon {
  39. display: inline-block;
  40. vertical-align: middle;
  41. fill: currentColor;
  42. }
  43. }
  44. }
  45. @include media(mobile) {
  46. .nav-links {
  47. display: flex;
  48. justify-content: space-between;
  49. .nav-next,
  50. .nav-previous {
  51. flex: 0 1 auto;
  52. margin-bottom: inherit;
  53. margin-top: inherit;
  54. max-width: calc(50% - (0.5 * #{map-deep-get($config-global, "spacing", "unit")}));
  55. }
  56. .nav-next {
  57. text-align: right;
  58. }
  59. }
  60. }