pagination.scss (4319B)
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 }