123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- /* Next/Previous navigation */
- // All navigation
- .navigation {
- @extend %responsive-aligndefault-width;
- color: var(--global--color-foreground);
- a {
- color: var(--global--color-primary);
- &:hover {
- color: var(--global--color-primary-hover);
- border-color: var(--global--color-secondary);
- }
- &:focus {
- color: var(--global--color-secondary);
- }
- &:active {
- color: var(--global--color-primary);
- }
- }
- .nav-links {
- @include media(mobile) {
- display: flex;
- justify-content: space-between;
- .nav-next,
- .nav-previous {
- flex: 0 1 auto;
- margin-bottom: inherit;
- margin-top: inherit;
- max-width: calc(50% - (0.5 * var(--global--spacing-unit)));
- }
- .nav-next {
- text-align: right;
- }
- }
- }
- .svg-icon {
- display: inline-block;
- fill: currentColor;
- vertical-align: middle;
- }
- }
- // Singular navigation
- .post-navigation {
- .meta-nav {
- font-size: var(--global--font-size-xs);
- line-height: var(--global--line-height-body);
- color: var(--global--color-foreground);
- }
- .post-title {
- font-family: var(--global--font-primary);
- font-size: var(--global--font-size-lg);
- line-height: var(--heading--line-height);
- }
- .nav-links {
- @include media(mobile) {
- justify-content: space-between;
- }
- }
- .nav-next,
- .nav-previous {
- margin-top: var(--global--spacing-vertical);
- margin-bottom: var(--global--spacing-vertical);
- &:first-child {
- margin-top: 0;
- }
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- // Index/archive navigation
- .pagination {
- .nav-links > * {
- color: var(--pagination--color-text);
- font-family: var(--pagination--font-family);
- font-size: var(--pagination--font-size);
- font-weight: var(--pagination--font-weight);
- margin-left: calc(0.66 * var(--global--spacing-unit));
- margin-right: calc(0.66 * var(--global--spacing-unit));
- &.current {
- border-bottom: 1px solid var(--pagination--color-text);
- }
- &:first-child {
- margin-left: 0;
- }
- &a:hover {
- color: var(--pagination--color-link-hover);
- }
- &:last-child {
- margin-right: 0;
- }
- &.next {
- margin-left: auto;
- }
- &.prev {
- margin-right: auto;
- }
- }
- }
|