Enough CSS to give me a tumor

2 files changed, 137 insertions, 89 deletions

diff --git a/draughts/public/stylesheets/splash.css b/draughts/public/stylesheets/splash.css
index 050afac..53f5680 100644
--- a/draughts/public/stylesheets/splash.css
+++ b/draughts/public/stylesheets/splash.css
@@ -4,82 +4,47 @@
 body {
 	/* Set the default font */
 	font-family: "Saira Condensed";
-    background-color: var(--dark-blue);
+	background-color: var(--dark-blue);
 	color: white;
 	/* Remove the margin on the sides of the screen */
 	margin: 0;
 }
 
+/* Resizes body to fit the viewport and ensures position is absolute */
+body > div {
+	width: 95%;
+	height: 90vh;
+	margin-top:8vh;
+	position: absolute;
+}
+
+/* Adjusts standard rendering of our images. Adds drop shadow and ensures it fits the container */
+div > img {
+	object-fit: contain;
+  	width: 100%;
+ 	max-height: 100%;
+ 	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+/* Set the container class to a 4x3 grid with named areas */
 .container {
 	display: grid;
 	grid-template-columns: repeat(4, 25%);
 	grid-template-rows: repeat(3, calc(100% / 3));
 	grid-template-areas:
-	"header header how-to-1 church"
-	"stats stats how-to-2 raadhuis"
-	"players button how-to-3 windmill";
+		"header header how-to-1 church"
+		"stats stats how-to-2 raadhuis"
+		"players button how-to-3 windmill";
 }
 
+/* Sets the header class to the header grid-area */
 .header {
 	grid-area: header;
 	justify-self: left;
 	margin-left:10%;
 }
 
-.stats {
-	grid-area: stats;
-	justify-self: left;
-	margin-left:10%;
-	margin-top: 2%;
-}
-
-.icon {
-	grid-area: players;
-}
-
-.button {
-	grid-area: button;
-}
-
-.how-to-1 {
-	grid-area: how-to-1;
-	display: grid;
-	justify-content:left;
-	margin-left: 20%;
-}
-
-.how-to-2 {
-	grid-area: how-to-2;
-	display: grid;
-	justify-content:left;
-	margin-left: 20%;
-}
-
-.how-to-3 {
-	grid-area: how-to-3;
-	display: grid;
-	justify-content:left;
-	margin-left: 20%;
-}
-
-.church {
-	grid-area: church;
-}
-
-.raadhuis {
-	grid-area: raadhuis;
-}
-
-.windmill {
-	grid-area: windmill;
-}
-
-.icon > img {
-	margin-left: 15%;
-	height: 75%;
-	width: 90%;
-}
-
+/* Formats the title according to our wireframe */
 h1 {
 	justify-content: start;
   	font-family: Saira;
@@ -87,52 +52,59 @@ h1 {
 	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
-h2 {
-	font-family: inherit;
-  	font-size: 30px;
-	font-weight: normal;
-	font-style: normal;
-  	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-}
-
-h1::after{
+/* Adds line under title */
+h1::after {
 	display: block;
-    content: "";
+	content: "";
 	align-content: left;
-    border-top: .4rem solid white;
-    width: 13rem;
-    margin: 0 0.7rem;
-    transform: translateY(-2rem);
+	border-top: .4rem solid white;
+	width: 13rem;
+	margin: 0 0.7rem;
+	transform: translateY(-2rem);
 }
 
-body > div {
-	width: 95%;
-	height: 90vh;
-	margin-top:8vh;
-	position: absolute;
+/* Sets the stats class to the stats grid-area. */
+.stats {
+	grid-area: stats;
+	justify-self: left;
+	margin-left:10%;
+	margin-top: 2%;
 }
 
+/* Overrides font-size for paragraphs (particularly those that contain the stats) */
 div > p {
 	font-size:24px;
 	margin: 0;
 }
 
-div > img {
-	object-fit: contain;
-  	width: 100%;
- 	max-height: 100%;
- 	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+/* Sets the icon class to the icon area */
+.icon {
+	grid-area: players;
+}
+
+/* Alligns the icon image within the icon div */
+.icon > img {
+	margin-left: 15%;
+	height: 75%;
+	width: 90%;
+}
+
+/* Sets button class to button grid area */
+.button {
+	grid-area: button;
 }
 
+/* Play button fade in animation */
 @keyframes fadeIn {
 	0% {
 		opacity: 0;
 	}
 	100% {
-	  opacity: 1;
+		opacity: 1;
 	}
- }
+}
 
+/* Formats our button using the button element id selector */
 #button {
 	background-color: var(--light-blue);
 	color: inherit;
@@ -147,45 +119,102 @@ div > img {
 	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
+/* Change text to bold when clicked */
 #button:active {
 	font-weight: bold;
 }
 
+/* Changes background color of play button when hovered */
 #button:hover {
 	cursor: pointer;
 	background-color: var(--darker-blue)
 }
 
+/* Configures the standard setting for our how-to section headers */
+h2 {
+	font-family: inherit;
+  	font-size: 30px;
+	font-weight: normal;
+	font-style: normal;
+  	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+}
+
+/* Sets the how-to class to the grid area */
+.how-to-1 {
+	grid-area: how-to-1;
+	display: grid;
+	justify-content:left;
+	margin-left: 20%;
+}
+
+/* Adds labeling and formattnig for the header */
+.how-to-1 > h2::before {
+	content: "1 - ";
+	display: list-item-inline;
+	font-weight: lighter;
+}
+
+/* Some specific adjustments for each image within the how-to section to ensure proper allignment */
 .how-to-1 > img {
 	justify-self: center;
 	width: fit-content;
 	height: 75%;
 }
 
-.how-to-1 > h2::before {
-	content: "1 - ";
+/* Sets the how-to class to the grid area */
+.how-to-2 {
+	grid-area: how-to-2;
+	display: grid;
+	justify-content:left;
+	margin-left: 20%;
+}
+
+/* Adds labeling and formattnig for the header */
+.how-to-2 > h2::before {
+	content: "2 - ";
+	display: list-item-inline;
 	font-weight: lighter;
 }
 
+/* Some specific adjustments for each image within the how-to section to ensure proper allignment */
 .how-to-2 > img {
 	justify-self: center;
 	height: 85%;
 }
 
-.how-to-2 > h2::before {
-	content: "2 - ";
-	font-weight: lighter;
+/* Sets the how-to class to the grid area */
+.how-to-3 {
+	grid-area: how-to-3;
+	display: grid;
+	justify-content:left;
+	margin-left: 20%;
 }
 
+/* Some specific adjustments for each image within the how-to section to ensure proper allignment */
 .how-to-3> img {
 	justify-self: center;
 	height: 45%;
 	opacity: 0.8;
 }
 
+/* Adds labeling and formattnig for the header */
 .how-to-3 > h2::before {
+	display: list-item-inline;
 	content: "3 - ";
 	font-weight: lighter;
 }
 
+/* Sets church class to church grid area */
+.church {
+	grid-area: church;
+}
 
+/* Sets raadhuis class to raadhuis grid area */
+.raadhuis {
+	grid-area: raadhuis;
+}
+
+/* Sets windmill class to windmill grid area */
+.windmill {
+	grid-area: windmill;
+}
diff --git a/draughts/public/stylesheets/style.css b/draughts/public/stylesheets/style.css
index b8830b8..9813ae0 100644
--- a/draughts/public/stylesheets/style.css
+++ b/draughts/public/stylesheets/style.css
@@ -8,3 +8,22 @@
 	--darker-blue: #302C5D;
 	--red: #9E3C2F;
 }
+
+
+/* Ensures a minimum screen resolution of 800 x 800*/
+@media (max-width: 799px), (max-height: 799px) {
+	body::before {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		font-family: Saira;
+		font-size: 20px;
+		color: white;
+		padding: 20px;
+		content: "Your window is too small! Please zoom out or use a machine with a larger screen resolution";
+		background-color: var(--red);
+		z-index: 100;
+	}
+}