Updated Teams section

README.md

@@ -1,5 +1,5 @@
 # GameExpo
-DV8 2022 Game Expo Website developed by Michal.
+DV8 2022 Game Event (no longer called Expo) Website developed by Michal.
 
 ## Legal
 I do not own any of the logos displayed on this website.

css/team.css

@@ -1,16 +1,15 @@
-/*
-	When page thin content stacks
-*/
-#team div:last-child {
+#team .teamOther {
 	justify-content: center;
 	align-items: center;
 }
 
+/*
+	Normal View
+*/
 #team div img {
-	/*width: 100%;*/
 	max-width: 20em;
-	max-height: 20em;
-
+	width: 100%;
+	min-width: 15em;
 
 	display: block;
 	object-fit: contain;
@@ -21,69 +20,75 @@
 	margin: 0 0 0.5em 0;
 
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 
 	text-align: justify;
 	align-items: center;
 }
 #team div div {
+	margin: 0;
+	padding: 0;
+
 	display: block;
 }
-#team div p {
-	margin: 0 !important;
-}
 #team div span {
-	margin: 0 0.5em;
+	margin: 0 1em;
 }
 
+/*
+  Gallery
+*/
+
 #team .gallery {
+	margin-bottom: 1.5em;
+	padding: 0.5em;
+
 	display: flex;
 	flex-direction: column;
 }
 #team .gallery div {
-	margin: auto -1em -1em;
+	margin: auto 0 0;
 
 	display: flex;
+	flex-wrap: wrap;
+
+	justify-content: center;
+
+	background: none;
 }
 #team .gallery div img {
 	margin: 0.5em;
+	min-width: 250px;
 
-	min-width: none;
-	max-width: 100%;
-	height: 16em;
-
+	flex: 1 1 250px;
 
 	object-fit: cover;
 }
 #team .gallery h3 {
-	font-size: 24px;
-
 	margin: 0;
 }
 
 /*
-  Normal page view
+  Gallery
 */
+#team div .teamInfo {
+	display: block;
+}
 
-@media (min-width:621px) {
-  #team div {
-    display: flex;
-    flex-direction: row;
+/*
+  When page thin content stacks
+*/
+@media (max-width:621px) {
+	#team div {
+		justify-content: center;
+		align-items: center;
+
+		flex-direction: column;
   }
 	#team div img {
-		min-width: 15em;
+		min-width: 0;
 	}
-	#team .gallery div img {
-		margin: 0.5em;
-
-		max-width: calc(50% - 1em);
-		width: 100%;
-		min-width: 20em;
-	}
-	#team .gallery div {
-		margin: auto -0.5em -0.5em;
-
-		flex-wrap: wrap;
-		justify-content: space-around;
+	#team div div {
+		margin: 1em;
 	}
 }

stylesheet.css

@@ -54,7 +54,7 @@ body {
 
 main {
 	margin: 0 auto;
-	padding: 4em 1em 1em 1em;
+	padding: 4em 0 0;
 
 	max-width: 1000px;
 	min-height: 100vh;
@@ -72,8 +72,6 @@ section div {
 	border-radius: var(--rad);
 }
 section p {
-	margin: 0.5em;
-
 	font-weight: 500;
 
 	color: var(--fg-dark)
@@ -152,7 +150,4 @@ h3 {
 	main {
 		padding: 3em 0 0 0;
 	}
-	section {
-		padding: 5.5em 0 0;
-	}
 }

ui/teams.html

@@ -2,7 +2,7 @@
 <div>
   <img src="images/filler2.png" alt="" loading="lazy">
   <span></span>
-  <div>
+  <div class="teamInfo">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
 </div>
@@ -12,7 +12,7 @@
 <div>
   <img src="images/teams/RSLogo.svg" alt="Red Scorpion logo" loading="lazy">
   <span></span>
-  <div>
+  <div class="teamInfo">
     <h3>Again</h3>
     <p>Team: Leon, Bartek, Michal and Nathan</p>
     <p>About: An innovative game made towards gamers from all ends. Speedrunners and achievers, to casual gamers admiring works and the environment. With: high quality, custom made, assets; fast, fun gameplay and many ways to finish. You are surely going to have a fun time playing!</p>
@@ -30,20 +30,28 @@
 
 <!-- Spooked Mouse -->
 <div>
-  <img src="images/teams/Spooked_Mouse.svg" alt="Spooked Mouse logo" loading="lazy">
+  <img src="images/teams/spookedMouse.jpg" alt="Spooked Mouse logo" loading="lazy">
   <span></span>
-  <div>
+  <div class="teamInfo">
     <h3>Mugunghwa</h3>
     <p>Team: Wren</p>
     <p>About: A game loosely set in South Korea about a lover who has been watching you from the shadows. They leave you gifts in hope that you'll one day seek them out so you can be together forever...</p>
   </div>
 </div>
+<div class="gallery">
+  <h3>Game screenshots</h3>
+  <div>
+    <img src="./images/gallery/mugunghwa/1.png" loading="lazy">
+    <img src="./images/gallery/mugunghwa/2.png" loading="lazy">
+    <img src="./images/gallery/mugunghwa/3.png" loading="lazy">
+  </div>
+</div>
 
 <!-- Rainforest Runner -->
 <div>
   <img src="images/teams/rainforestRunner.png" alt="Rainforrest Runner logo" loading="lazy">
   <span></span>
-  <div>
+  <div class="teamInfo">
     <h3>Rainforest Runner</h3>
     <p>Team: Bradley, William, Munir and Sophie</p>
     <p>About: Rainforest Runner is an endless runner game where you will have to dodge the dangers of the Brazilian rainforest. If you survive, you're awarded with a chest full of treasure and rewards for completing the level. Good luck! You'll need it.</p>
@@ -63,7 +71,7 @@
 <div>
   <img src="images/teams/desperateConflicts.png" alt="Rainforrest Runner logo" loading="lazy">
   <span></span>
-  <div>
+  <div class="teamInfo">
     <h3>Desperate Conflicts</h3>
     <p>Team: Eliza Milburn and Yannick Fullager</p>
     <p>About: Desperate Conflicts is a fast paced real time strategy game, where you command fleets of ships in an attempt to destroy enemy bases via breaking through the increasingly difficult defences.</p>
@@ -79,6 +87,6 @@
 </div>
 
 <!-- More! -->
-<div>
+<div class="teamOther">
   <h3>And many other teams!</h3>
 </div>