cleaning up the layout and the illustration

Author: wylie

src/components/Footer.astro

@@ -10,7 +10,8 @@
   footer {
     display: flex;
     justify-content: center;
-    width: 1051px;
+    max-width: 1051px;
+    width: 100%;
     margin: 1rem auto 0;
     padding: 1rem 0;
     border-top: 1px solid #ccc;

src/components/Header.astro

@@ -12,7 +12,8 @@ import Nav from "./Nav.astro"
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 1051px;
+    max-width: 1051px;
+    width: 100%;
     margin: 0 auto 1rem;
     padding: 0 0 1rem;
     border-bottom: 3px solid #ccc;

src/components/Welcome.astro

@@ -2,7 +2,7 @@
 ---
 
 <div id="container">
-	Welcome to my website!
+	Spaceships, Comics, Rayguns, Sculptures, Toys & Posters. All I ever wanted to do is draw pictures and make things, so far so good.
 </div>
 
 <style>

src/layouts/Layout.astro

@@ -42,7 +42,8 @@ import Footer from '../components/Footer.astro';
 		grid-template-rows: auto 1fr auto;
 	}
 	main {
-    width: 1051px;
+    max-width: 1051px;
+    width: 100%;
 		margin: 0 auto;
 		display: flex;
 		justify-content: center;

src/pages/jupiterjak.astro

@@ -4,20 +4,25 @@ import jupiter from  "../assets/jupiterjak/jupiter.png";
 ---
 
 <Layout>
-  <div>
-    <img src={jupiter.src} alt="Jupiter Jak, Sales Czar to the Solar System" />
+  <div class="bg">
+    <div class="image"></div>
   </div>
 </Layout>
 
 <style>
-  div {
+  .bg {
     display: flex;
     justify-content: center;
     width: 100%;
     background: #231f20 url('../assets/jupiterjak/stars.png');
   }
-  img {
-    width: 800px;
-    height: 600px;
+  .image {
+    background-image: url('../assets/jupiterjak/jupiter.png');
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: contain;
+    max-width: 800px;
   }
 </style>