update homepage

wowsims · Feb 11, 2024 · 093dedc · 093dedc
1 parent 2c357f0
commit 093dedc
Show file tree

Hide file tree

Showing 8 changed files with 1,084 additions and 28 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -4,7 +4,10 @@
       <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="assets/img/WoW-Simulator-Icon.png">
-          <h2 class="wowsims-title">WoWSims</h2>
+          <div class="d-flex flex-column">
+            <h2 class="wowsims-title">WoWSims</h2>
+            <h3 class="expansion-title w-100">Classic WoW Simulations</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>

diff --git a/_site/404.html b/_site/404.html
@@ -22,7 +22,7 @@
 {"@context":"https://schema.org","@type":"WebPage","description":"Welcome to WoWSims! This is a community-driven project to provide simulations for World of Warcraft® Classic™ Classes &amp; Raids together with the leading theorycrafters and class representatives.","headline":"WoWSims - WoW Classic Simulators","url":"http://localhost:4000/404.html"}</script>
 <!-- End Jekyll SEO tag -->
 
-    <link rel="stylesheet" href="/assets/css/style.css?v=46a0b3012480edbcd47abbb1aba40b0e914085ee">
+    <link rel="stylesheet" href="/assets/css/style.css?v=2c357f04f3fba6aea22ac701291317e1881001ba">
     <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
 
 <!-- Setup Google Analytics -->

diff --git a/_site/about/index.html b/_site/about/index.html
@@ -22,7 +22,7 @@
 {"@context":"https://schema.org","@type":"WebSite","description":"Welcome to WoWSims! This is a community-driven project to provide simulations for World of Warcraft® Classic™ Classes &amp; Raids together with the leading theorycrafters and class representatives.","headline":"About","name":"WoWSims - WoW Classic Simulators","url":"http://localhost:4000/about/"}</script>
 <!-- End Jekyll SEO tag -->
 
-    <link rel="stylesheet" href="/assets/css/style.css?v=46a0b3012480edbcd47abbb1aba40b0e914085ee">
+    <link rel="stylesheet" href="/assets/css/style.css?v=2c357f04f3fba6aea22ac701291317e1881001ba">
     <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
 
 <!-- Setup Google Analytics -->

diff --git a/_site/assets/scss/index.css b/_site/assets/scss/index.css
diff --git a/_site/index.html b/_site/index.html
@@ -2,9 +2,13 @@
 <html>
 	<head>
 		<title>WoWSims - WoW Classic Simulators</title>
-
     <meta charset="utf-8">
+
+		<link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
+
+		<meta name="description" content="Simulations for World of Warcraft® Classic.">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+
 		<!-- Begin Jekyll SEO tag v2.8.0 -->
 <title>WoWSims - WoW Classic Simulators | Welcome to WoWSims! This is a community-driven project to provide simulations for World of Warcraft® Classic™ Classes &amp; Raids together with the leading theorycrafters and class representatives.</title>
 <meta name="generator" content="Jekyll v3.9.2" />
@@ -22,20 +26,20 @@
 {"@context":"https://schema.org","@type":"WebSite","description":"Welcome to WoWSims! This is a community-driven project to provide simulations for World of Warcraft® Classic™ Classes &amp; Raids together with the leading theorycrafters and class representatives.","headline":"WoWSims - WoW Classic Simulators","name":"WoWSims - WoW Classic Simulators","url":"http://localhost:4000/"}</script>
 <!-- End Jekyll SEO tag -->
 
-		<link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
+
     <link rel="stylesheet" href="/assets/scss/index.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 	</head>
 	<body>
 		<div class="expansion-panels">
-			<!-- <div class="expansion-panel expansion-panel-sod">
-				<img src="/sod/assets/img/sod.jpg" class="expansion-panel-img" />
+			<div class="expansion-panel expansion-panel-sod">
+				<img src="/sod/assets/img/sod.png" class="expansion-panel-img" />
 				<div class="expansion-panel-block">
 					<h3 class="text-primary">WoWSims</h3>
 					<h2>Season of Discovery</h2>
 				</div>
 				<a href="/sod" class="expansion-panel-link"></a>
-			</div> -->
+			</div>
 			<div class="expansion-panel expansion-panel-tbc">
 				<img src="/tbc/assets/tbc.jpg" class="expansion-panel-img" />
 				<div class="expansion-panel-block">
@@ -60,7 +64,10 @@ <h2>Wrath of the Lich King</h2>
       <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="assets/img/WoW-Simulator-Icon.png">
-          <h2 class="wowsims-title">WoWSims</h2>
+          <div class="d-flex flex-column">
+            <h2 class="wowsims-title">WoWSims</h2>
+            <h3 class="expansion-title w-100">Classic WoW Simulations</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>

diff --git a/assets/scss/_global.scss b/assets/scss/_global.scss
@@ -1,3 +1,40 @@
+:root {
+  --bs-body-font-size: 14px;
+  --container-padding: #{$gap-width};
+  font-size: var(--bs-body-font-size);
+}
+
+@include media-breakpoint-up(lg) {
+  :root {
+    --container-padding: 3rem;
+  }
+}
+
+@include media-breakpoint-up(xxl) {
+  :root {
+    --container-padding: 4rem;
+  }
+}
+
+@include media-breakpoint-up(1080p) {
+  :root {
+    --bs-body-font-size: 16px;
+  }
+}
+
+// We want to apply only to 1440p monitors, NOT 1080p Ultrawide
+@media (min-width: map-get($grid-breakpoints, 1440p)) and (max-aspect-ratio: 16/9) {
+  :root {
+    --bs-body-font-size: 24px;
+  }
+}
+
+@include media-breakpoint-up(4k) {
+  :root {
+    --bs-body-font-size: 32px;
+  }
+}
+
 * {
   letter-spacing: 1px;
 }

diff --git a/assets/scss/_homepage.scss b/assets/scss/_homepage.scss
@@ -9,7 +9,7 @@
   overflow: hidden;
 
   .expansion-panel {
-    --expansion-color: #{$brand-color};
+    --expansion-color: #{$brand};
 
     position: relative;
     flex: 1;
@@ -26,7 +26,7 @@
     }
 
     &.expansion-panel-sod {
-      --expansion-color: #{$brand-color};
+      --expansion-color: #{$brand};
 
       &:hover {
         .expansion-panel-img {
@@ -43,7 +43,7 @@
       }
 
       .expansion-panel-block {
-        background: mix(black, $brand-color, 90%);
+        background: mix(black, $brand, 90%);
       }
     }
 
@@ -115,12 +115,13 @@
   display: flex;
   flex-direction: column;
 
+  .homepage-header-container {
+    padding-top: calc(var(--container-padding) / 2);
+  }
 
-  .homepage-header-container,
-  .homepage-content-container,
-  .homepage-footer-container {
-    padding-top: map-get($spacers, 4);
-    padding-bottom: map-get($spacers, 4);
+  .homepage-content-container {
+    padding-top: var(--container-padding);
+    padding-bottom: var(--container-padding);
   }
 
   .homepage-header {
@@ -138,8 +139,9 @@
         .wowsims-title {
           @extend .display-1;
           @extend .fw-bold;
-          color: $primary;
+          color: $brand;
           margin: 0;
+          line-height: 1;
         }
       }
 
@@ -151,10 +153,9 @@
       }
     }
 
-    .wrath-title {
-      color: $wrath-blue;
+    .expansion-title {
+      color: $brand;
       margin: 0;
-      font-weight: bold;
     }
   }
 

diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
@@ -5,7 +5,7 @@
 // individual component pages in the Bootstrap 5.2 docs for relevant variable usage.
 
 // Custom theme color mapping
-$brand-color: #e0a335;
+$brand: #e0a335;
 
 $death-knight: rgb(194, 46, 70);
 $druid:        rgb(255, 125, 10);
@@ -25,28 +25,36 @@ $class-colors: (
   "mage":         $mage,
   "paladin":      $paladin,
   "priest":       $priest,
-  "raid":         $brand-color,
+  "raid":         $brand,
   "rogue":        $rogue,
   "shaman":       $shaman,
   "warlock":      $warlock,
   "warrior":      $warrior,
 );
 
+$custom-breakpoints: (
+  xxxl: 1600px,
+  1080p: 1900px,
+  1440p: 2500px,
+  4k: 3800px,
+);
+
 $theme-colors: map-merge($theme-colors, $class-colors);
+$grid-breakpoints: map-merge($grid-breakpoints, $custom-breakpoints);
 
 // Theme variable overrides
 @if variable-exists(theme) {
   $primary: map-get($class-colors, $theme);
 }
 
 @if not variable-exists(theme) {
-  $primary: $brand-color;
+  $primary: $brand;
 }
 
 $success: #1eff00;
 
 $custom-colors: (
-  "brand": $brand-color,
+  "brand": $brand,
   "primary": $primary,
   "success": $success,
 );