_style.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. /* Next/Previous navigation */
  2. // All navigation
  3. .navigation {
  4. @extend %responsive-aligndefault-width;
  5. color: var(--global--color-foreground);
  6. a {
  7. color: var(--global--color-primary);
  8. &:hover,
  9. &:focus {
  10. color: var(--global--color-primary-hover);
  11. }
  12. &:active {
  13. color: var(--global--color-primary);
  14. }
  15. }
  16. .nav-links {
  17. @include media(mobile) {
  18. display: flex;
  19. justify-content: center;
  20. .nav-next,
  21. .nav-previous {
  22. flex: 0 1 auto;
  23. margin-bottom: inherit;
  24. margin-top: inherit;
  25. max-width: calc(50% - (0.5 * var(--global--spacing-unit)));
  26. }
  27. .nav-next {
  28. text-align: right;
  29. }
  30. }
  31. }
  32. .svg-icon {
  33. display: inline-block;
  34. fill: currentColor;
  35. vertical-align: middle;
  36. }
  37. }
  38. // Singular navigation
  39. .post-navigation {
  40. .meta-nav {
  41. font-size: var(--global--font-size-xs);
  42. line-height: var(--global--line-height-body);
  43. color: var(--global--color-foreground);
  44. }
  45. .post-title {
  46. font-family: var(--global--font-primary);
  47. font-size: var(--global--font-size-lg);
  48. line-height: var(--heading--line-height);
  49. }
  50. .nav-links {
  51. @include media(mobile) {
  52. justify-content: space-between;
  53. }
  54. }
  55. .nav-next,
  56. .nav-previous {
  57. margin-top: var(--global--spacing-vertical);
  58. margin-bottom: var(--global--spacing-vertical);
  59. &:first-child {
  60. margin-top: 0;
  61. }
  62. &:last-child {
  63. margin-bottom: 0;
  64. }
  65. }
  66. }
  67. // Index/archive navigation
  68. .pagination {
  69. .nav-links > * {
  70. color: var(--pagination--color-text);
  71. font-family: var(--pagination--font-family);
  72. font-size: var(--pagination--font-size);
  73. font-weight: var(--pagination--font-weight);
  74. margin-left: calc(0.66 * var(--global--spacing-unit));
  75. margin-right: calc(0.66 * var(--global--spacing-unit));
  76. &.current {
  77. border-bottom: 1px solid var(--pagination--color-text);
  78. }
  79. &:first-child {
  80. margin-left: 0;
  81. }
  82. &a:hover {
  83. color: var(--pagination--color-link-hover);
  84. }
  85. &:last-child {
  86. margin-right: 0;
  87. }
  88. &.next {
  89. margin-left: auto;
  90. }
  91. &.prev {
  92. margin-right: auto;
  93. }
  94. }
  95. }