Improve styling

2 files changed, 26 insertions, 11 deletions

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 6eff088..2f508f9 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -69,7 +69,11 @@ const { title, description } = Astro.props;
 		flex-direction: column;
 		gap: 1.5rem;
 
-		background-color: $background;
+		background: linear-gradient(to bottom,
+			#FFFFFF 0%,
+			$background 3rem,
+			$background 100%
+		);
 		color: $dark;
 	}
 
@@ -109,15 +113,6 @@ const { title, description } = Astro.props;
 		
 		padding-block-end: 3rem;
 
-		a {
-			color: $accentDark;
-			transition: color 0.2s ease-in-out;
-
-			&:hover {
-				color: $accent;
-			}
-		}
-
 		> p > code {
 			word-break: break-word;
 			font-family: $monoFontStack;
@@ -136,4 +131,23 @@ const { title, description } = Astro.props;
 			overflow: scroll;
 		}
 	}
+
+	main a, footer a {
+		color: $accentDark;
+		transition: color 0.2s ease-in-out,
+			box-shadow 0.2s ease-in-out;
+		text-decoration: none;
+		padding: 0.1rem;
+		box-shadow: 0 1px $accent;
+
+		&:hover {
+			box-shadow: 0 2px $accentDark;
+		}
+
+		&:focus {
+			outline: none;
+			background-color: $secondary;
+			box-shadow: 0 4px #0b0c0c;
+		}
+	}
 </style>
diff --git a/styles/shared.scss b/styles/shared.scss
index 066aa02..d36696f 100644
--- a/styles/shared.scss
+++ b/styles/shared.scss
@@ -5,9 +5,10 @@ $monoFontStack: 'Fira Code', 'Consolas', monospace;
 $accent: hsl(209, 94%, 42%);
 $accentLight: hsl(215, 90%, 60%);
 $accentDark: hsl(215, 90%, 30%);
+$secondary: hsl(48, 100%, 50%);
 $dark: hsl(340, 13%, 5%);
 
-$background: hsl(210, 40%, 98%);
+$background: hsl(210, 40%, 96%);
 $light: hsl(214, 64%, 98%);
 $lightAlt: hsl(0, 0%, 100%);