[Summary view] [Print] [Text view]

   1  /* Next/Previous navigation */
   2  
   3  // All navigation
   4  .navigation {
   5      color: var(--global--color-primary);
   6  
   7      a {
   8          color: var(--global--color-primary);
   9          text-decoration: none;
  10  
  11          &:hover {
  12              color: var(--global--color-primary-hover);
  13              text-decoration: underline;
  14              text-decoration-style: dotted;
  15          }
  16  
  17          &:focus {
  18              color: var(--global--color-secondary);
  19          }
  20  
  21          &:active {
  22              color: var(--global--color-primary);
  23          }
  24      }
  25  
  26      .nav-links {
  27  
  28          > * {
  29              min-width: 44px;
  30              min-height: 44px;
  31          }
  32  
  33          .nav-next a,
  34          .nav-previous a {
  35              display: flex;
  36              flex-direction: column;
  37          }
  38  
  39          .dots {
  40              text-align: center;
  41          }
  42  
  43          @include media(tablet) {
  44              display: flex;
  45              justify-content: center;
  46              flex-wrap: wrap;
  47  
  48              .nav-next,
  49              .nav-previous {
  50                  flex: 0 1 auto;
  51                  margin-bottom: inherit;
  52                  margin-top: inherit;
  53                  max-width: calc(50% - (0.5 * var(--global--spacing-unit)));
  54              }
  55  
  56              .nav-next {
  57                  text-align: right;
  58              }
  59          }
  60      }
  61  
  62      .svg-icon {
  63          display: inline-block;
  64          fill: currentColor;
  65          vertical-align: middle;
  66          position: relative;
  67      }
  68  
  69      .nav-previous .svg-icon,
  70      .prev .svg-icon {
  71          top: -2px;
  72          margin-right: calc(0.25 * var(--global--spacing-unit));
  73      }
  74  
  75      .nav-next .svg-icon,
  76      .next .svg-icon {
  77          top: -1px;
  78          margin-left: calc(0.25 * var(--global--spacing-unit));
  79      }
  80  }
  81  
  82  // Singular navigation
  83  .post-navigation {
  84  
  85      margin: var(--global--spacing-vertical) auto;
  86  
  87      @include media(desktop) {
  88          margin: var(--global--spacing-vertical) auto;
  89      }
  90  
  91      @extend %responsive-alignwide-width;
  92  
  93      .meta-nav {
  94          line-height: var(--global--line-height-body);
  95          color: var(--global--color-primary);
  96      }
  97  
  98      .post-title {
  99          display: inline-block;
 100          font-family: var(--global--font-primary);
 101          font-size: var(--global--font-size-lg);
 102          font-weight: var(--pagination--font-weight-strong);
 103          line-height: var(--global--line-height-heading);
 104          @include media(desktop) {
 105              margin: 5px calc(24px + (0.25 * var(--global--spacing-unit))) 0;
 106          }
 107      }
 108  
 109      .nav-links {
 110          @include media(mobile) {
 111              justify-content: space-between;
 112          }
 113      }
 114  
 115      .nav-next,
 116      .nav-previous {
 117          margin-top: var(--global--spacing-vertical);
 118          margin-bottom: var(--global--spacing-vertical);
 119  
 120          &:first-child {
 121              margin-top: 0;
 122          }
 123  
 124          &:last-child {
 125              margin-bottom: 0;
 126          }
 127      }
 128  }
 129  
 130  // Index/archive navigation
 131  .pagination,
 132  .comments-pagination {
 133  
 134      border-top: 3px solid var(--global--color-border);
 135      padding-top: var(--global--spacing-vertical);
 136      margin: var(--global--spacing-vertical) auto;
 137  
 138      @include media(desktop) {
 139          margin: var(--global--spacing-vertical) auto;
 140      }
 141  
 142      @extend %responsive-alignwide-width;
 143  
 144      // Resets the top margin added to the .nav-links items below.
 145      .nav-links {
 146          margin-top: calc(-1 * var(--global--spacing-vertical));
 147  
 148          a:hover {
 149              color: var(--pagination--color-link-hover);
 150          }
 151  
 152          .is-dark-theme & {
 153  
 154              a:active,
 155              a:hover:active,
 156              a:hover:focus {
 157                  color: var(--global--color-background);
 158              }
 159          }
 160  
 161          .has-background-white & {
 162  
 163              a:active,
 164              a:hover:active,
 165              a:hover:focus {
 166                  color: var(--global--color-white);
 167              }
 168          }
 169      }
 170  
 171      .nav-links > * {
 172          color: var(--pagination--color-text);
 173          font-family: var(--pagination--font-family);
 174          font-size: var(--pagination--font-size);
 175          font-weight: var(--pagination--font-weight);
 176          margin-top: var(--global--spacing-vertical);
 177          margin-left: calc(0.66 * var(--global--spacing-unit));
 178          margin-right: calc(0.66 * var(--global--spacing-unit));
 179  
 180          &.current {
 181              text-decoration: underline;
 182          }
 183  
 184          &:not(.dots):not(.current):hover {
 185              text-decoration-style: dotted;
 186          }
 187  
 188          &:first-child {
 189              margin-left: 0;
 190          }
 191  
 192          &:last-child {
 193              margin-right: 0;
 194          }
 195  
 196          &.next {
 197              margin-left: auto;
 198          }
 199  
 200          &.prev {
 201              margin-right: auto;
 202          }
 203      }
 204  
 205      @include media(desktop-only) {
 206  
 207          .nav-links {
 208              display: flex;
 209              flex-wrap: wrap;
 210          }
 211  
 212          .page-numbers {
 213              display: none;
 214  
 215              &.prev,
 216              &.next {
 217                  display: inline-block;
 218                  flex: 0 1 auto;
 219              }
 220          }
 221      }
 222  
 223      @include media(mobile-only) {
 224  
 225          .nav-short {
 226              display: none;
 227          }
 228      }
 229  }
 230  
 231  // Comments pagination
 232  .comments-pagination {
 233      padding-top: calc(0.66 * var(--global--spacing-vertical));
 234      margin: calc(3 * var(--global--spacing-vertical)) auto;
 235  
 236      @include media(desktop) {
 237          margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto;
 238      }
 239  
 240      .nav-links > * {
 241          font-size: var(--global--font-size-md);
 242      }
 243  }