Update style.css

Replaced pixels with percentages "there and there", improved responsiveness, and more
jacobnicked · Jul 5, 2024 · 22877ad · 22877ad
1 parent f9328f6
commit 22877ad
Showing 1 changed file with 221 additions and 46 deletions.
diff --git a/style.css b/style.css
@@ -7,9 +7,10 @@ body {
 	margin: 0;
 }
 
-.title {
+#title {
 	font-family: 'Trebuchet MS', 'Product Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-	margin-left: 20px;
+	margin-left: 1.5%;
+	font-size: 170%;
 }
 
 p {
@@ -20,15 +21,12 @@ p {
 header {
 	display: flex;
 	align-items: center;
-	margin-left: 3%;
-	margin-right: 3%;
-	margin-top: 2%;
-	margin-bottom: 2%;
-
+	padding: 1.75%;
+	margin: 0;
 }
 
 #pfp {
-	max-height: 60px;
+	max-height: 70px;
 	max-width: auto;
 	border-radius: 5px;
 }
@@ -63,14 +61,16 @@ header {
 main {
 	border-top: 1px solid lightslategray;
 	text-align: left;
-	padding-top: 25px;
-	padding-bottom: 25px;
-	padding-left: 15%;
-	padding-right: 15%;
+	padding: 5% 10% 5% 10%;
 	height: auto;
-
 }
 
+	#welcome {
+		text-align: center; 
+		font-family: 'Product Sans', google-sans;
+		font-size: 240%;
+	}
+
 	#smbuttons {
 		align-items: center;
 		display: flex;
@@ -80,8 +80,8 @@ main {
 		height: 95%;
 		grid-gap: 10px;
 		width: auto;
-		padding-left: 30%;
-		padding-right: 30%;
+		padding-left: 25%;
+		padding-right: 25%;
 	}
 
 	#smbuttons a {
@@ -92,20 +92,20 @@ main {
 		border: solid;
 		border-radius: 10px;
 		border-color:darkslategray;
-		padding: 10px;
+		padding: 1.5%;
 		width: auto;
 	}
 
 	#smbuttons img {
-		height: 30px;
+		max-height: 35px;
 		width: auto;
 		float: left;
 	}
 
 	#smbuttons span {
 		font-family: 'Product Sans';
 		font-weight: 600;
-		font-size: 18px;
+		font-size: 135%;
 		color: black;
 		float: right;
 		padding-left: 10px;
@@ -116,82 +116,257 @@ a {
 	color: darkslategray;
 }
 
+#note {
+	background-color: yellow;
+	padding: 15px;
+	text-align: center;
+	border-top: 5px dashed black;
+	border-bottom: 5px dashed black;
+	clear: both;
+}
+
 footer {
 	background-color: darkslategray;
-	padding: 30px;
+	padding: 25px;
 	text-align: center;
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 	font-weight: normal;
 	color: white;
 	clear: both;
 }
 
+/*padding: top right bottom left*/
+
 /* Fixing/improving responsiveness*/
 /* Media Queries */
 
   /* Tablet Portrait (up to 768px) */
   @media (max-width: 768px) {
 	#title {
-	  margin-left: 10px;
-	  font-size: 45%;
+	  margin-left: 4%;
+	  font-size: 140%;
 	}
 
-	#smbuttons {
-		padding-left: 2%;
-		padding-right: 2%;
-	}
-  }
-
   /* Social media buttons */
   @media only screen and (max-width: 600px) {
+	#title {
+		margin-left: 4%;
+		font-size: 120%;
+	  }
+
 	header {
-		padding: 2%;
+		display: flex;
+		align-items: center;
+		padding: 5%;
+	}
+
+	header #pfp {
+		max-height: 55px;
 	}
 
 	header h2 {
-		font-size: 125%;
+		font-size: 120%;
 	}
 
 	#welcome {
 		font-size: 140%;
 	}
 
+	main {
+		padding: 6%;
+	}
+
 	#smbuttons {
-		padding-left: 0%;
-		padding-right: 0%;
+		padding: 0;
+	}
+
+	#smbuttons a {
+		padding: 2%;
 	}
 
 	#smbuttons span {
-	  	font-size: 80%;
+	  	font-size: 96%;
 	}
 
 	#smbuttons img {
-		height: 15px;
+		height: 18px;
 		width: auto;
 	}
   }
-
-  @media only screen and (min-width: 600px) and (max-width: 1024px) {
+
+	@media only screen and (max-width: 600px) and (orientation: landscape) {
+		#title {
+			margin-left: 4%;
+			font-size: 100%;
+		}
+
+		header {
+			display: flex;
+			align-items: center;
+			padding: 2%;
+		}
+
+		header #pfp {
+			max-height: 55px;
+		}
+
+		header h2 {
+			font-size: 120%;
+		}
+
+		#welcome {
+			font-size: 120%;
+		}
+
+		main {
+			padding: 2%;
+		}
+
+		#smbuttons {
+			padding: 0;
+		}
+
+		#smbuttons a {
+			padding: 2%;
+		}
+
+		#smbuttons span {
+			font-size: 96%;
+		}
+
+		#smbuttons img {
+			height: 18px;
+			width: auto;
+		}
+	}
+
+  /*----------------------------------------*/
+  @media only screen and (min-width: 600px) {
+	header {
+		display: flex;
+		align-items: center;
+		padding: 4%;
+	}
+
+	header #pfp {
+		max-height: 60px;
+	}
+
+	header h2 {
+		font-size: 130%;
+	}
+
+	#welcome {
+		font-size: 150%;
+	}
+
+	main {
+		padding: 15%;
+	}
+
 	#smbuttons {
-		padding-left: 5%;
-		padding-right: 5%;
+		padding: 0;
 	}
-	
+
 	#smbuttons a {
-	  font-size: 16%; /* Increase font size for larger screens (optional) */
+		padding: 1.75%;
+	}
+
+	#smbuttons span {
+	  	font-size: 120%;
+	}
+
+	#smbuttons img {
+		height: 22px;
+		width: auto;
 	}
   }
 
-  @media only screen and (min-width: 1024px) and (max-width: 1050px) {
+  @media only screen and (min-width: 600px) and (orientation: landscape) {
+	header {
+		display: flex;
+		align-items: center;
+		padding: 4%;
+	}
+
+	header #pfp {
+		max-height: 50px;
+	}
+
+	header h2 {
+		font-size: 120%;
+	}
+
+	#welcome {
+		font-size: 140%;
+	}
+
+	main {
+		padding: 12%;
+	}
+
 	#smbuttons {
-		padding-left: 10%;
-		padding-right: 10%;
+		padding: 0;
+	}
+
+	#smbuttons a {
+		padding: 1.75%;
+	}
+
+	#smbuttons span {
+	  	font-size: 100%;
+	}
+
+	#smbuttons img {
+		height: 22px;
+		width: auto;
 	}
   }
 
-  @media only screen and (min-width: 1050px) and (max-width: 1280px) {
+/*--------------------------------------*/
+@media only screen and (min-width: 768px) {
+	header {
+		display: flex;
+		align-items: center;
+		padding: 4%;
+	}
+
+	header #pfp {
+		max-height: 60px;
+	}
+
+	header h2 {
+		font-size: 130%;
+	}
+
+	#welcome {
+		font-size: 150%;
+	}
+
+	main {
+		padding: 14%;
+	}
+
 	#smbuttons {
-		padding-left: 15%;
-		padding-right: 15%;
+		padding: 0;
+	}
+
+	#smbuttons a {
+		padding: 1.75%;
 	}
-  }
+
+	#smbuttons span {
+	  	font-size: 120%;
+	}
+
+	#smbuttons img {
+		height: 22px;
+		width: auto;
+	}
+}
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+/*@media only screen and (min-width: 992px) {
+	
+}*/