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>

static/icons/expand_less.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#ACC1D2"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11.29 8.71L6.7 13.3c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 10.83l3.88 3.88c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L12.7 8.71c-.38-.39-1.02-.39-1.41 0z"/></svg>

static/icons/expand_more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#ACC1D2"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"/></svg>