updated main.css

theme/static/css/main.css

@@ -297,10 +297,12 @@ a {
 	text-decoration: none;
 }
 a:focus,
-a:hover {
+a:hover,
+a:focus *,
+a:hover * {
 	text-decoration: underline;
 }
-a.external::after {
+a.external span::after {
 	/* content: '↪'; */
 	/* content: '🡕'; */
 	content: '⤤';
@@ -309,10 +311,10 @@ a.external::after {
 	background-position: center center;
 	background-size: cover;*/
 }
-a.external[href^="mailto:"]::after {
+a.external[href^="mailto:"] span::after {
 	content: '';
 }
-a.external[href^="mailto:"]::before {
+a.external[href^="mailto:"] span::before {
 	content: '📧';
 }
 
@@ -521,7 +523,7 @@ ul.cards li a {
 	display: inline-block;
 	width:  calc(100% - 1.3rem );
 	height: calc(100% - 1.3rem );
-	padding: 0.5rem;
+	/* padding: 0.5rem; */
 	transition: all 0.2s;
 	/* padding: 1rem; */
 	/*width:  var(--card-size);
@@ -530,13 +532,51 @@ ul.cards li a {
 	background-color: var(--category-color);
 	/* text-align: center; */
 	border: 0.2rem solid var(--category-color);
+	line-height: 2rem;
+	font-size: large;
 }
 ul.cards li a:focus,
 ul.cards li a:hover {
 	background-color: var(--category-contrast-color);
 	color: var(--category-color);
 }
+ul.cards li a span {
+	display: inline-block;
+	/*position: relative;
+	top: 0.5rem;
+	left: 0rem;*/
+	padding: 0rem 0.5rem;
+	/*padding-top: 0.5rem;
+	padding-left: 0.5rem;*/
+}
+
+ul.cards li a.has-image {
+	/* background-image: var(--card-image); */
+	background-origin: border-box;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-blend-mode: normal;
+	/* background-blend-mode: luminosity; */
+	/* background-blend-mode: overlay; */
+	/* background-blend-mode: multiply; */
+}
+ul.cards li a.has-image:focus,
+ul.cards li a.has-image:hover {
+	color: var(--category-contrast-color);
+	background-color: var(--category-color);
+	background-blend-mode: overlay;
+}
 
+ul.cards li a.has-image:focus span,
+ul.cards li a.has-image:hover span {
+	/* border-radius: 0.3rem; */
+	/* font-weight: bold; */
+}
+
+ul.cards li a.has-image span {
+	background-color: var(--category-color);
+}