Merge pull request #4087 from wowsims/update-homepage

Small homepage updates
wowsims · Dec 9, 2023 · 0d1292f · 0d1292f
2 parents b45b5e2 + 9a7d52e
commit 0d1292f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -17,13 +17,15 @@
 						<div class="navbar-brand-container order-0">
 							<a href="#" class="navbar-brand d-flex align-items-center p-0 m-0">
 								<img class="wowsims-logo" src="/wotlk/assets/img/WoW-Simulator-Icon.png">
-								<h2 class="wowsims-title">WoWSims</h2>
+								<div class="d-flex flex-column">
+									<h2 class="wowsims-title">WoWSims</h2>
+									<h2 class="expansion-title w-100">Wrath of the Lich King</h2>
+								</div>
 							</a>
 							<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#homepageHeaderCollapse" aria-controls="homepageHeaderCollapse" aria-expanded="false" aria-label="Toggle navigation">
 								<i class="fas fa-bars fa-2x"></i>
 							</button>
 						</div>
-						<h2 class="wrath-title w-100 order-1 order-md-2">Wrath of the Lich King</h2>
 						<div id="homepageHeaderCollapse" class="collapse navbar-collapse homepage-header-collapse order-2 order-md-1">
 							<div class="navbar-nav">
 								<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#homepageHeaderCollapse" aria-controls="homepageHeaderCollapse" aria-expanded="false" aria-label="Toggle navigation">
@@ -48,8 +50,8 @@ <h2 class="wrath-title w-100 order-1 order-md-2">Wrath of the Lich King</h2>
 				<div class="container homepage-content-container">
 					<div class="info-container">
 						<p class="wowsims-info">
-							Welcome to WoWSims! This is a community-driven project to provide simulations for WotLK Classes & Raids
-							together with the leading theorycrafters and class representatives.
+							Welcome to WoWSims - Wrath of the Lich King! This is a community-driven project to provide class and raid simulations for
+							World of Warcraft® Wrath of the Lich King together with the leading theorycrafters and class representatives.
 						</p>
 					</div>
 					<div class="sim-links-container">

diff --git a/ui/scss/homepage/_homepage.scss b/ui/scss/homepage/_homepage.scss
@@ -16,11 +16,13 @@
   flex-direction: column;
 
 
-  .homepage-header-container,
-  .homepage-content-container,
-  .homepage-footer-container {
-    padding-top: map.get($spacers, 4);
-    padding-bottom: map.get($spacers, 4);
+  .homepage-header-container {
+    padding-top: calc(var(--container-padding) / 2);
+  }
+
+  .homepage-content-container {
+    padding-top: var(--container-padding);
+    padding-bottom: var(--container-padding);
   }
 
   .homepage-header {
@@ -31,7 +33,7 @@
         display: flex;
 
         .wowsims-logo {
-          width: 75px;
+          width: 6rem;
           margin-right: map.get($spacers, 3);
         }
 
@@ -40,6 +42,7 @@
           @extend .fw-bold;
           color: $brand;
           margin: 0;
+          line-height: 1;
         }
       }
 
@@ -51,18 +54,17 @@
       }
     }
 
-    .wrath-title {
+    .expansion-title {
       color: $wrath-blue;
       margin: 0;
-      font-weight: bold;
     }
   }
 
   .homepage-content-container {
     flex-direction: column;
 
     .info-container {
-      margin-bottom: map.get($spacers, 5);
+      margin-bottom: var(--container-padding);
       display: flex;
       flex-direction: column;
 
@@ -86,6 +88,7 @@
         }
 
         &> .sim-link, &> .sim-link-dropdown {
+          max-width: 25%;
           flex: 1 25%;
           margin-right: 25%;
         }