[Summary view] [Print] [Text view]

   1  /* Next/Previous navigation */
   2  
   3  // Singular navigation
   4  .post-navigation {
   5  
   6      margin: calc(3 * 1rem) 0;
   7  
   8      @include media(tablet) {
   9          margin: calc(3 * 1rem) $size__site-margins;
  10          max-width: calc(6 * (100vw / 12));
  11      }
  12  
  13      @include media(desktop) {
  14          margin: calc(3 * 1rem) 0;
  15          max-width: 100%;
  16      }
  17  
  18      .nav-links {
  19  
  20          margin: 0 $size__spacing-unit;
  21          max-width: 100%;
  22          display: flex;
  23          flex-direction: column;
  24  
  25          @include media(tablet) {
  26              margin: 0;
  27          }
  28  
  29          @include media(desktop) {
  30              flex-direction: row;
  31              margin: 0 $size__site-margins;
  32              max-width: $size__site-desktop-content;
  33          }
  34  
  35          a {
  36              .meta-nav {
  37                  color: $color__text-light;
  38                  user-select: none;
  39  
  40                  &:before,
  41                  &:after {
  42                      display: none;
  43                      content: "—";
  44                      width: 2em;
  45                      color: $color__text-light;
  46                      height: 1em;
  47                  }
  48              }
  49  
  50              .post-title {
  51                  hyphens: auto;
  52              }
  53  
  54              &:hover {
  55                  color: $color__link-hover;
  56              }
  57          }
  58  
  59          .nav-previous,
  60          .nav-next {
  61  
  62              @include media(desktop) {
  63                  min-width: calc(50% - 2 * #{$size__spacing-unit});
  64              }
  65          }
  66  
  67          .nav-previous {
  68              order: 2;
  69  
  70              @include media(desktop) {
  71                  order: 1;
  72              }
  73  
  74              + .nav-next {
  75                  margin-bottom: $size__spacing-unit;
  76              }
  77  
  78              .meta-nav {
  79                  &:before {
  80                      display: inline;
  81                  }
  82              }
  83          }
  84  
  85          .nav-next {
  86              order: 1;
  87  
  88              @include media(desktop) {
  89                  order: 2;
  90                  padding-left: $size__spacing-unit;
  91              }
  92  
  93              .meta-nav {
  94                  &:after {
  95                      display: inline;
  96                  }
  97              }
  98          }
  99      }
 100  }
 101  
 102  // Index/archive navigation
 103  .pagination {
 104  
 105      .nav-links {
 106  
 107          display: flex;
 108          flex-wrap: wrap;
 109          padding: 0 calc(.5 * #{$size__spacing-unit});
 110  
 111  
 112          & > * {
 113              padding: calc(.5 * #{$size__spacing-unit});
 114  
 115              &.dots,
 116              &.prev {
 117                  padding-left: 0;
 118              }
 119  
 120              &.dots,
 121              &.next {
 122                  padding-right: 0;
 123              }
 124          }
 125  
 126          a:focus {
 127              text-decoration: underline;
 128              outline-offset: -1px;
 129  
 130              &.prev,
 131              &.next {
 132                  text-decoration: none;
 133  
 134                  .nav-prev-text,
 135                  .nav-next-text {
 136                      text-decoration: underline;
 137                  }
 138              }
 139          }
 140  
 141          .nav-next-text,
 142          .nav-prev-text {
 143              display: none;
 144          }
 145  
 146          @include media(tablet) {
 147  
 148              margin-left: $size__site-margins;
 149              padding: 0;
 150  
 151              .prev,
 152              .next {
 153  
 154                  & > * {
 155                      display: inline-block;
 156                      vertical-align: text-bottom;
 157                  }
 158              }
 159  
 160              & > * {
 161                  padding: $size__spacing-unit;
 162              }
 163          }
 164      }
 165  }
 166  
 167  // Comments navigation
 168  .comment-navigation {
 169  
 170      .nav-links {
 171          display: flex;
 172          flex-direction: row;
 173      }
 174  
 175      .nav-previous,
 176      .nav-next {
 177          min-width: 50%;
 178          width: 100%;
 179          @include font-family( $font__heading );
 180          font-weight: bold;
 181  
 182          .secondary-text {
 183              display: none;
 184  
 185              @include media(tablet) {
 186                  display: inline;
 187              }
 188          }
 189  
 190          svg {
 191              vertical-align: middle;
 192              position: relative;
 193              margin: 0 -0.35em;
 194              top: -1px;
 195          }
 196      }
 197  
 198      .nav-next {
 199          text-align: right;
 200      }
 201  }