Improve nav and other changes

src/components/Nav.astro

@@ -4,17 +4,15 @@ import styles from "../styles/Nav.module.css"
 ---
 
 <nav class={styles.nav} aria-expanded="true">
-	<ul class={styles.links}>
-		<li>
+	<section>
+		<a href="/" id={styles.logo}
+			><img src="/images/logo.svg" alt="Henry Hiles" /></a
+		>
 		<a href="/#">Home</a>
-		</li>
-		<li>
 		<a href="/#portfolio">Projects</a>
-		</li>
-		<li>
 		<a href="/#about">About Me</a>
-		</li>
-		<li>
+	</section>
+	<section>
 		<a
 			target="_blank"
 			rel="noreferrer"
@@ -22,6 +20,5 @@ import styles from "../styles/Nav.module.css"
 		>
 			<Icon name="mdi:github" />
 		</a>
-		</li>
-	</ul>
+	</section>
 </nav>

src/styles/About.module.css

@@ -21,7 +21,7 @@
 	max-width: 80%;
 }
 
-a {
+.about a {
 	text-decoration: none;
 }
 

src/styles/Nav.module.css

@@ -1,18 +1,23 @@
 .nav {
-	padding: 0.5rem;
 	display: flex;
-	font-size: 1.3rem;
-	overflow-y: auto;
+	align-items: center;
+	justify-content: space-between;
 	font-weight: bold;
 	background: hsl(0 0% 0% / 0.4);
-	font-size: 1.5em;
-	position: sticky;
+	font-size: 1.4rem;
 	top: 0;
 	z-index: 1;
+	padding: 1.2rem;
 }
 
-.links svg {
-	height: 30px;
+.nav section {
+	display: flex;
+	align-items: center;
+	gap: 0.5em;
+}
+
+.nav :is(svg, img) {
+	height: 2rem;
 }
 
 .nav button {
@@ -26,24 +31,26 @@
 	color: var(--secondary-text);
 }
 
-.links {
-	margin: auto;
+.nav a {
 	display: flex;
 	align-items: center;
-	list-style: none;
-	padding: 0.7em 1.7em;
-}
-
-.links li {
-	margin: 0 0.5em;
-}
-
-.links a {
 	color: inherit;
-	text-decoration: none;
 	white-space: nowrap;
+	text-decoration: none;
 }
 
-.links a:hover {
+.nav a:hover {
 	color: var(--secondary-text);
 }
+
+@media (min-width: 500px) {
+	.nav {
+		position: sticky;
+	}
+}
+
+@media (max-width: 400px) {
+	#logo + a {
+		display: none;
+	}
+}

src/styles/Portfolio.module.css

@@ -1,9 +1,10 @@
 .portfolioItems {
 	display: flex;
+	justify-content: center;
+	text-align: center;
 	gap: 30px;
 	flex-wrap: wrap;
-	justify-content: center;
-	padding: 30px;
+	padding: 2em 3em;
 }
 
 .portfolioItems a {
@@ -28,27 +29,12 @@
 	width: 13em;
 }
 
-.portfolioItems div {
-	background: rgba(0, 0, 0, 0.3);
-	border-bottom-left-radius: 1rem;
-	border-bottom-right-radius: 1rem;
-	bottom: 0;
-	color: #f5f5f5;
-	font-size: 1em;
-	left: 0%;
-	padding: 0.1em;
-	position: absolute;
-	text-align: center;
-	width: 100%;
-}
-
 .portfolioItems a:hover {
 	scale: 1.1;
 }
 
 .projectName {
-	display: flex;
-	justify-content: center;
+	width: 100%;
 	margin: 0;
 	padding: 5px;
 }