feat: contributors page mobile view

src/app.css

@@ -54,7 +54,6 @@ body {
 
 ::selection {
     background-color: var(--accent-low-opacity);
-    color: var(--accent-color);
 }
 
 /*-----headings-----*/
@@ -64,14 +63,14 @@ h1 {
     line-height: 1em;
     font-size: 3rem;
     font-weight: 700;
-    letter-spacing: -0.04em;
+    letter-spacing: -0.03em;
 }
 
 h2 {
     color: var(--grey-five);
     line-height: 1em;
     font-size: 2.25rem;
-    letter-spacing: -0.075rem;
+    letter-spacing: -0.05rem;
     font-weight: 600;
 }
 

src/lib/components/atoms/ContributorPerson.svelte

@@ -16,7 +16,7 @@
 		text-decoration: none;
 		padding: 0.5rem;
 		width: 100%;
-		transition: all 0.3s var(--bezier-one);
+		transition: background-color 0.3s var(--bezier-one);
 		border-radius: 4px;
 		display: flex;
 		gap: 1rem;
@@ -47,4 +47,22 @@
 		transition: transform 0.4s var(--bezier-one);
 		user-select: none;
 	}
+
+	@media (max-width: 768px) {
+		h5 {
+			display: none;
+		}
+
+		img {
+			height: 48px;
+			width: 48px;
+		}
+		a {
+			border-radius: 16px;
+			width: max-content;
+			background-color: transparent;
+			border: none;
+		}
+
+	}
 </style>

src/lib/components/molecules/ContributorHost.svelte

@@ -76,4 +76,11 @@
 		justify-items: center;
 		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 	}
+
+	@media (max-width: 768px) {
+		.contrib-host {
+			gap: 0.25rem;
+			grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
+		}
+	}
 </style>