_style.scss 2.1 KB

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