feat: improve expand icons and footer (#141)

src/layout/Footer/FooterHost.svelte

@@ -106,6 +106,13 @@
 		align-items: center;
 	}
 
+	@media screen and (max-width: 768px) {
+		.footer-bottom {
+			flex-wrap: wrap;
+			gap: 1rem;
+		}
+	}
+
 	#logo-name {
 		font-size: 1.4rem;
 		color: var(--white);
@@ -119,7 +126,7 @@
 	.footer-bottom a {
 		text-decoration: none;
 		color: var(--grey-five);
-		font-weight: 500;
+		font-weight: 600;
 	}
 
 	li {
@@ -131,7 +138,7 @@
 
 	li a {
 		color: var(--accent-color);
-		font-weight: 500;
+		font-weight: 600;
 		font-size: 0.95rem;
 	}
 
@@ -193,4 +200,8 @@
 		}
 	}
 
+	svg {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
 </style>

src/layout/Footer/FooterSection.svelte

@@ -19,7 +19,10 @@
 		<span>
 			{title}
 		</span>
-		<span>{expanded ? '-' : '+'}</span>
+		<img
+			src="/icons/{expanded ? 'expand_less' : 'expand_more'}.svg"
+			alt={expanded ? 'Close' : 'Expand'}
+		/>
 	</button>
 	{#if expanded}
 		<ul transition:slide|local={{ easing: quintOut, duration: 500 }}>
@@ -33,7 +36,7 @@
 		list-style: none;
 		color: var(--grey-five);
 		font-size: 0.9rem;
-		font-weight: 500;
+		font-weight: 600;
 	}
 
 	ul {
@@ -70,4 +73,8 @@
 			display: none;
 		}
 	}
+
+	img {
+		height: 24px;
+	}
 </style>

src/routes/contributors/ContributorSection.svelte

@@ -27,7 +27,7 @@
 		<img
 			id="arrow"
 			style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}
-			src="/icons/arrow.svg"
+			src="/icons/expand_less.svg"
 			alt="dropdown"
 		/>
 	</div>