fixed styling and added a book mark for active tags

src/pages/articles/index.astro

@@ -33,6 +33,7 @@ const max_shelf_width = 980;
 					{posts.map(book => (
 						// might change this to a compoent later
 						<a class="book-wrapper" href={`/articles/${book.id}/`}>
+							<div class="book-mark" />
 							<li class="book">
 								<h1 class="book-title">
 									{book.data.title}
@@ -159,10 +160,6 @@ const max_shelf_width = 980;
 
 
 <style is:inline>
-	a {
-		color: unset;
-		bottom: 0;
-	}
 
 	.shelf {
 		padding-left: 2em;
@@ -189,7 +186,39 @@ const max_shelf_width = 980;
 
 	a {
 		color: unset;
-		bottom: 0;
+	}
+
+
+	a:visited .book-mark {
+		transition: 100ms;
+		height: 0.3em;
+		width: 0.5em;
+		background-color: hsl(0, 70%, 50%);
+		z-index: 99;
+		transform: translateY(0.2em) translateX(0.2em);
+	}
+
+	a:visited .book-mark:before,
+	a:visited .book-mark:after {
+		content: '';
+		display: block;
+		position: absolute;
+		transform: translateY(0.2em);
+		border-top: 0.5em solid hsl(0, 70%, 50%);  
+	}
+
+	a:visited .book-mark:before {
+		right: 0;
+		border-left: 0.25em solid transparent;
+	}
+	
+	a:visited .book-mark:after {
+		left: 0;
+		border-right: 0.25em solid transparent;
+	}
+
+	a:visited .book-mark {
+		transform: translateY(-0.5em);
 	}
 
 	.shelf {
@@ -217,16 +246,6 @@ const max_shelf_width = 980;
 		transform: translateY(2em);
 	}
 
-
-	@media (max-width: 720px) {
-		main {
-			padding: unset;
-			max-width: 90vw;
-			background: unset;
-			border: unset;
-		}
-	}
-
 	.book {
 		max-width: fit-content;
 		padding-left: 0.1em;
@@ -268,7 +287,7 @@ const max_shelf_width = 980;
 		position: absolute;
 		background-color: hsl(from var(--top-footer-colour) h s calc(l * 0.4));
 		width: calc(100% - 6em);
-		transform: translateY(2em) translateX(2em);
+		transform: translateY(1.1em) translateX(2em);
 		box-shadow: 0px 15px 10px 10px hsl(from var(--top-footer-colour) h s calc(l * 0.4));
 		height: 1.5em;
 	}
@@ -326,6 +345,45 @@ const max_shelf_width = 980;
 		border-bottom-right-radius: 0.5em;
 	}
 
+	@media (max-width: 720px) {
+		main {
+			padding: unset;
+			max-width: 90vw;
+			background: unset;
+			border: unset;
+		}
+		.wall-shadow {
+			transform: translateX(4em);
+			
+		}
+		.shadow {
+			width: calc(100% - 4em);
+			transform: translateY(2em) translateX(2em);
+		}
+
+		.foot-back-left {
+			position: absolute;
+			width: 1.2em;
+			height: 3em;
+			background: rgb(26, 26, 26);
+			box-shadow: inset 0px 2em 25px -0.4em #1f1f1f;
+			transform: translateX(3.5em);
+			border-bottom-left-radius: 0.5em;
+			border-bottom-right-radius: 0.5em;
+		}
+
+		.foot-back-right {
+			width: 0.6em;
+			height: 3em;
+			background: rgb(26, 26, 26);
+			float: right;
+			box-shadow: inset 0px 2em 25px -0.4em #1f1f1f;
+			transform: translateX(-2em);
+			border-bottom-left-radius: 0.5em;
+			border-bottom-right-radius: unset;
+		}
+
+	}
 
 </style>