improving css

Co-authored-by: Gareth Slinn <gslinn@gmail.com>
Co-authored-by: Kyle Simpson <getify@gmail.com>

index.css

@@ -1,5 +1,7 @@
 html {
 	box-sizing: border-box;
+	font-size: 16px;
+	width: 100%;
 }
 
 *,
@@ -8,54 +10,115 @@ html {
 	box-sizing: inherit;
 }
 
-ul#project-list {
-	list-style-type: none;
-	padding: 0px;
-	display: inline-flex;
-	flex-wrap: wrap;
-	gap: 1rem;
+body {
+	font-family: Arial, sans-serif;
+	line-height: 1.6;
+	padding: 1.25rem 3rem;
+	background-color: #f8f9fa;
+	color: #333;
+	max-width: 950px;
+	margin: 0 auto;
+}
+
+h1 {
+	font-size: 2rem;
+	margin-bottom: 1.25rem;
+}
+
+
+.github-corner {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+p {
+	margin-bottom: 1.25rem;
+}
+
+a {
+	text-decoration: none;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+#project-list {
+	list-style: none;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
+	gap: 1.25rem;
+	padding: 0;
 }
 
-ul#project-list > li {
-	border: 1px dotted #888;
-	background-color: #ececec;
-	width: 25rem;
+#project-list li {
+	background: #eeda4e;
 	border-radius: 0.5rem;
+	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+	transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-ul#project-list > li, ul#project-list > li * {
-	cursor: pointer;
+#project-list li:hover {
+	transform: translateY(-0.3125rem);
+	box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2);
+	background: #ddd;
 }
 
-ul#project-list > li > a,
-ul#project-list > li > a:visited,
-ul#project-list > li > a:active {
+#project-list li > a {
 	display: block;
+	position: relative;
+	padding: 1.25rem;
+	border-radius: 0.5rem;
 	height: 100%;
-	padding: 1.5rem;
+}
+
+#project-list h3 {
+	font-size: 1.4rem;
+	margin-top: 0.25rem;
+	margin-bottom: 0.625rem;
 	text-decoration: none;
-	color: #333;
-	border-radius: 0.5rem;
+	color: #000;
 }
 
-ul#project-list > li > a:hover {
-	background-color: #efda4f;
+#project-list .description {
+	font-size: 1.1rem;
+	color: #555;
+	margin-bottom: 1.625rem;
+	line-height: 1.4;
 }
 
-ul#project-list > li > a > h3 {
-	font-weight: bold;
-	font-size: 1.5rem;
-	margin-bottom: 1rem;
+#project-list .link {
+	color: #522403;
+	position: absolute;
+	font-style: italic;
+	text-decoration: underline;
+	font-size: 1.1rem;
+	line-height: 1.1rem;
+	bottom: 0.8rem;
+	left: 50%;
+	transform: translateX(-50%);
 }
 
-ul#project-list .description {
-	font-size: 1.25rem;
-	margin-bottom: 0.5rem;
+#project-list .link:before {
+	content: "";
+	display: inline-block;
+	position: relative;
+	top: 0.1rem;
+	width: 1.1rem;
+	height: 1.1rem;
+	margin-right: 0.2rem;
+	background-image: url(github-mark.svg);
+	background-position: 0;
+	background-size: 1.1rem;
+	background-repeat: no-repeat;
 }
 
-ul#project-list .link {
-	text-decoration: underline;
-	text-align: right;
+h2 {
+	font-size: 1.5rem;
+	margin-top: 2.5rem;
+	margin-bottom: 1.25rem;
 }
 
 /* github corner badge */

index.html

@@ -23,40 +23,40 @@ <h1>BYOJS (Bring your own JS)</h1>
 <p>A guiding principle here is: always choose the least-powerful tool to get a task done. Moreover, the best solution is the one with the least amount of (complex, highly-intertwined) code necessary.</p>
 <p><strong>BYOJS</strong> aims to champion this approach, and celebrate great web development practices.</p>
 <ul id="project-list">
-	<li><a href="https://github.com/byojs/storage">
+	<li><a href="https://github.com/byojs/storage" aria-label="Storage project">
 		<h3>Storage</h3>
 		<div class="description">
 			Simple key-value storage API backed by various client storage mechanisms
 		</div>
-		<div class="link" aria-hidden="true">link to project</div>
+		<div class="link" aria-hidden="true">project</div>
 	</a></li>
-	<li><a href="https://github.com/byojs/eventer">
+	<li><a href="https://github.com/byojs/eventer" aria-label="Eventer project">
 		<h3>Eventer</h3>
 		<div class="description">
 			Event emitter with async-emit and weak-listener support
 		</div>
-		<div class="link" aria-hidden="true">link to project</div>
+		<div class="link" aria-hidden="true">project</div>
 	</a></li>
-	<li><a href="https://github.com/byojs/modal">
+	<li><a href="https://github.com/byojs/modal" aria-label="Modal project">
 		<h3>Modal</h3>
 		<div class="description">
 			Simple wrapper around SweetAlert2
 		</div>
-		<div class="link" aria-hidden="true">link to project</div>
+		<div class="link" aria-hidden="true">project</div>
 	</a></li>
-	<li><a href="https://github.com/byojs/toggler">
+	<li><a href="https://github.com/byojs/toggler" aria-label="Toggler project">
 		<h3>Toggler</h3>
 		<div class="description">
 			Throttled toggler
 		</div>
-		<div class="link" aria-hidden="true">link to project</div>
+		<div class="link" aria-hidden="true">project</div>
 	</a></li>
-	<li><a href="https://github.com/byojs/scheduler">
+	<li><a href="https://github.com/byojs/scheduler" aria-label="Scheduler project">
 		<h3>Scheduler</h3>
 		<div class="description">
 			Throttle/debounce scheduler
 		</div>
-		<div class="link" aria-hidden="true">link to project</div>
+		<div class="link" aria-hidden="true">project</div>
 	</a></li>
 </ul>
 <h2>License</h2>