diff --git a/styles.css b/styles.css index 5768260c6e24c79e450faee6aeb1ebd18a6ba451..8768a29bc7add859158c40bfecc4da26a834754a 100644 --- a/styles.css +++ b/styles.css @@ -127,7 +127,11 @@ text-decoration: none; } - a:visited { + #home__about a, #locations__directions a { + color: var(--accent-baby-pink); + } + + a:visited, #home__about a:visited, #locations__directions a:visited { color: var(--accent-baby-blue); } @@ -209,6 +213,35 @@ mask: url("assets/icons/fbook-logo.svg") no-repeat; } + /** Links **/ + /* Add open in new tab icon for target blank links */ + a[target="_blank"]::after { + content: ""; + -webkit-mask: url("assets/icons/up-right-from-square-solid.svg"); + mask: url("assets/icons/up-right-from-square-solid.svg"); + -webkit-mask-size: contain; + mask-size: contain; + + background-color: var(--accent-blue); + + display: inline-block; + + margin-left: 0.5em; + + height: 0.5em; + width: 0.5em; + + transform: translateY(-50%); + } + + #home__about a[target="_blank"]::after, #locations__directions a[target="_blank"]::after { + background-color: var(--accent-baby-pink); + } + + a:visited::after, #home__about a:visited::after, #locations__directions a:visited::after { + background-color: var(--accent-baby-blue); + } + /*** Buttons ***/ /** Define extendable btn class **/ a[class|="btn"], @@ -280,24 +313,24 @@ } /* Modifiers for blue button */ - .btn--primary.blue { - background-color: var(--accent-blue); - box-shadow: 0.25rem 0.25rem 0 var(--main-dark); - - color: var(--main-dark); - } - - .btn--primary.blue:hover { - box-shadow: 0 0 0 var(--main-dark); - } - - .btn--primary.blue:active { - background-color: var(--accent-blue-lighter); - } - - .btn--primary.blue:active::after { - border: 0.25rem solid var(--accent-blue-lighter); - } + .btn--primary.blue { + background-color: var(--accent-blue); + box-shadow: 0.25rem 0.25rem 0 var(--main-dark); + + color: var(--main-dark); + } + + .btn--primary.blue:hover { + box-shadow: 0 0 0 var(--main-dark); + } + + .btn--primary.blue:active { + background-color: var(--accent-blue-lighter); + } + + .btn--primary.blue:active::after { + border: 0.25rem solid var(--accent-blue-lighter); + } /** Twitter Button **/ /* Twitter Share Button */ @@ -352,6 +385,7 @@ #main-navigation { /* This will apply when the js script applies position:sticky on scroll */ top: -100%; + z-index: 3; display: flex; justify-content: flex-end; @@ -557,16 +591,13 @@ @media only screen and (max-width: 22.5em) { /*** Global Styles -- Mobile ***/ /*** Main Navigation Styles ***/ - - /** Remove styles set for tablet **/ - #main-navigation nav { - all: unset; - } - #main-navigation nav { + /* Remove styles set for tablet */ + all: unset; position: fixed; bottom: 0; right: 0; + z-index: 2; } #main-navigation .navbar {