angelovcom.net

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

_next-previous.scss (2726B)

      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 }