// Rules for styling links // ========================================= // use the 'link__offset' class to offset jump-links via CSS only method. // Links need to be offset to clear the fixed navigation bar at the top. // =========================================
.links__offset { // Pointer-events is needed to prevent the .links__offset::before pseudo-element
pointer-events: none; // from "blocking" any anchor tag above from being clicked. & a, & button, & iframe, & .card-body { // HOWEVER, if there is a child anchor, or button, element, pointer-events: auto; // it obviously needs to be clickable. }
}
.links__offset::before {
// mobile devices get slightly different offset b/c of different sized fixed header content: " "; display: block; height: 171px; // defining a height pushes the element down the page margin-top: -171px; // negative margin is needed to push it back to its original position pointer-events: none; // w/ out this it will interfere with the sites navigation links visibility: hidden;
}
@media screen and (min-width: 768px) {
.links__offset::before { height: 150px; margin-top: -150px; }
}
.links__darker-link {
color: $darker-link;
}
.links__no-underline {
text-decoration: none; &:hover { text-decoration: none; }
}