From 8f86cdfb0ea804975c77534ff4177fe192324cb7 Mon Sep 17 00:00:00 2001
From: Robin King <robin2.king@live.uwe.ac.uk>
Date: Mon, 20 Mar 2023 15:51:03 +0000
Subject: [PATCH] feat(styles.css): add icons for links to new tab
---
styles.css | 81 +++++++++++++++++++++++++++++++++++++-----------------
1 file changed, 56 insertions(+), 25 deletions(-)
diff --git a/styles.css b/styles.css
index 5768260..8768a29 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 {
--
GitLab