Updated header centering

harvard-edge · Dec 3, 2024 · 4e8e1b0 · 4e8e1b0
1 parent 3956dfa
commit 4e8e1b0
Showing 1 changed file with 84 additions and 71 deletions.
diff --git a/styles.css b/styles.css
@@ -30,12 +30,12 @@ nav ul li a {
 	color: #fff;
 	text-decoration: none;
 }
-/* Header adjustments */
 header {
-	background-color: #024959;
-	color: #fff;
-	text-align: center;
-	padding: 20px;
+    display: flex;
+    justify-content: center; /* Center content horizontally */
+    align-items: center;    /* Center content vertically */
+    padding: 20px;          /* Add some padding around the header */
+    background-color: #f4f4f4; /* Optional: background color for visibility */
 }
 /* Footer adjustments */
 footer {
@@ -89,26 +89,6 @@ footer {
 	display: block;
 	/* Removes any default margin/padding */
 }
-@media (max-width: 768px) {
-	.image-grid {
-		grid-template-columns: 1fr;
-	}
-	#about h2,#about h3 {
-		font-size: 1.5em;
-	}
-	.image-item {
-		padding-top: 75%;
-		/* Adjust aspect ratio padding for smaller screens if necessary */
-	}
-	body {
-		font-family: Arial, sans-serif;
-		background-color: #f4f4f4;
-		margin-right: 20px;
-		margin-left: 20px;
-		margin-top: 10px;
-		margin-bottom: 10px;
-	}
-}
 footer {
 	background-color: #022b30;
 	color: #fff;
@@ -355,31 +335,6 @@ th.sorted-desc .arrow {
 	background-color: #f5f5f5;
 	/* Subtle highlight for row on hover */
 }
-@media (max-width: 768px) {
-	.leaderboard-container table {
-		font-size: 14px;
-		/* Reduce font size for smaller screens */
-	}
-	.leaderboard-container th,.leaderboard-container td {
-		padding: 10px 8px;
-		/* Adjust padding for compact view */
-	}
-	/* Hide all middle columns, keeping only the first and last */
-	.leaderboard-container td:nth-child(n+2):nth-last-child(n+2),.leaderboard-container th:nth-child(n+2):nth-last-child(n+2) {
-		display: none;
-		/* Hide everything except the first and last */
-	}
-	.contact {
-		flex-direction: column;
-		align-items: center;
-	}
-	.logo-container {
-		width: 100%;
-		justify-content: center;
-		text-align: center;
-		margin-bottom: 20px;
-	}
-}
 header {
 	background-color: var(--header-bg);
 	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
@@ -496,27 +451,8 @@ footer {
 	top: -10px;
 	visibility: hidden;
 }
-@media (min-width: 1150px) {
-	header {
-		position: sticky;
-		top: 0;
-	}
-	.anchor{
-		top: -200px;
-	}
-}
-@media (max-width: 768px) {
-	.header-content {
-		flex-direction: column;
-		align-items: center;
-	}
-	.title-container, .logo-container {
-		width: 100%;
-		justify-content: center;
-		text-align: center;
-		margin-bottom: 20px;
-	}
-}
+
+
 .image-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -541,3 +477,80 @@ footer {
 	transform: translateY(-5px);
 	box-shadow: 0 4px 15px rgba(0,0,0,0.15);
 }
+
+
+/* General Styles for Small Screens */
+@media (max-width: 768px) {
+	/* Leaderboard Table Styles */
+	.leaderboard-container table {
+		font-size: 14px; /* Reduce font size for smaller screens */
+	}
+	.leaderboard-container th,
+	.leaderboard-container td {
+		padding: 10px 8px; /* Adjust padding for compact view */
+	}
+	/* Hide all middle columns, keeping only the first and last */
+	.leaderboard-container td:nth-child(n+2):nth-last-child(n+2),
+	.leaderboard-container th:nth-child(n+2):nth-last-child(n+2) {
+		display: none;
+	}
+
+	/* Contact Section Styles */
+	.contact {
+		flex-direction: column;
+		align-items: center;
+	}
+
+	/* Logo Container */
+	.logo-container {
+		width: 100%;
+		justify-content: center;
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	/* Image Grid Adjustments */
+	.image-grid {
+		grid-template-columns: 1fr;
+	}
+	.image-item {
+		padding-top: 75%; /* Adjust aspect ratio padding for smaller screens if necessary */
+	}
+
+	/* About Section Heading Adjustments */
+	#about h2,
+	#about h3 {
+		font-size: 1.5em;
+	}
+
+	/* Body Styles */
+	body {
+		font-family: Arial, sans-serif;
+		background-color: #f4f4f4;
+		margin: 10px 20px; /* Combined shorthand for top, right, bottom, and left margins */
+	}
+
+	/* Header Content Adjustments */
+	.header-content {
+		flex-direction: column;
+		align-items: center;
+	}
+	.title-container,
+	.logo-container {
+		width: 100%;
+		justify-content: center;
+		text-align: center;
+		margin-bottom: 20px;
+	}
+}
+
+/* General Styles for Large Screens */
+@media (min-width: 1150px) {
+	header {
+		position: sticky;
+		top: 0;
+	}
+	.anchor {
+		top: -200px;
+	}
+}