Tweak header

sass/_vars.scss

@@ -5,7 +5,7 @@ $size-body-mobile: 14px; // Size for mobile
 // Breakpoints
 $bp-phone-landscape: 480px; // Mobile-landscape (and larger)
 $bp-tablet-portrait: 768px; // Tablet-portrait (and larger)
-$bp-tablet-landscape: 1040px; // Tablet-landscape (and larger)
+$bp-tablet-landscape: 992px; // Tablet-landscape (and larger)
 $bp-desktop: 1200px; // Laptops (and langer)
 
 $bp-phone-portrait-only: '(max-width: #{$bp-phone-landscape - 1})';

sass/components/_header.scss

@@ -36,17 +36,18 @@
 
     &__message {
         display: none;
-        font-size: 1.4rem;
+        font-size: 1.28rem;
         font-weight: 500;
         color: #797979;
         margin-left: 12px;
+        white-space: nowrap;
 
         @media (min-width: 550px) {
             display: block;
         }
 
         @media #{$bp-desktop-up} {
-            font-size: 1.625rem;
+            font-size: 1.3rem;
         }
 
         &:empty {
@@ -56,6 +57,7 @@
 
     &__cta-container {
         display: flex;
+        align-items: center;
         margin-left: 16px;
     }
 
@@ -65,5 +67,21 @@
         &:not(:last-child) {
             margin-right: 8px;
         }
+
+        &--github {
+            @include flex-center;
+
+            img {
+                height: 30px;
+
+                @media #{$bp-tablet-portrait-up} {
+                    height: 35px;
+                }
+            }
+
+            &:hover {
+                filter: brightness(80%)
+            }
+        }
     }
 }

sass/components/_logo.scss

@@ -6,27 +6,4 @@
     @media #{$bp-tablet-landscape-up} {
         height: 40px;
     }
-
-    &--icon {
-        @media #{$bp-icon} {
-            display: none;
-        }
-    }
-
-    &--full {
-        display: none;
-
-        @media #{$bp-icon} {
-            display: block;
-        }
-    }
-}
-
-.github-mark {
-    display: inline-flex;
-    height: 40px;
-
-    &:hover {
-        filter: brightness(80%)
-    }
 }

sass/components/_main-menu.scss

@@ -16,7 +16,7 @@
 
         position: relative;
         height: var(--header-height);
-        font-size: 1.375rem;
+        font-size: 1.3rem;
         font-weight: 500;
         text-decoration: none;
 
@@ -162,7 +162,8 @@
     .main-menu {
         &__header,
         &__page-menu-switch,
-        &__page-menu {
+        &__page-menu,
+        &__entry--getting-started {
             display: none;
         }
 
@@ -171,7 +172,7 @@
 
             padding: 0 8px;
             height: var(--header-height);
-            font-size: 1.375rem;
+            font-size: 1.3rem;
             font-weight: 500;
             text-decoration: none;
         }

sass/pages/_features.scss

@@ -10,6 +10,11 @@
     margin-top: 1.5rem;
     font-size: 1.5rem;
     font-weight: 500;
+
+    .button {
+        margin-top: 24px;
+        font-size: 1.4rem;
+    }
 }
 
 .feature-list {

templates/index.html

@@ -11,6 +11,8 @@
         A refreshingly simple data-driven game engine built in Rust
         <br />
         Free and Open Source Forever!
+        <br/>
+        <a class="button button--big" href="/learn/book/getting-started/">Get Started</a>
     </div>
     <div class="feature-list">
         <div class="feature-container">

templates/layouts/base.html

@@ -53,8 +53,7 @@
                     </label>
                     <div class="header__left-block">
                         <a class="header__logo" href="/">
-                            <img class="logo logo--icon" src="/assets/bevy_icon_dark.svg" alt="Bevy Engine">
-                            <img class="logo logo--full" src="/assets/bevy_logo_dark.svg" alt="Bevy Engine">
+                            <img class="logo" src="/assets/bevy_logo_dark.svg" alt="Bevy Engine">
                         </a>
                         <div class="header__message">
                             {% if section and section.extra.header_message %}
@@ -90,6 +89,7 @@
                                 {% block mobile_page_menu %}{% endblock %}
                             </div>
                             <ul class="main-menu__menu">
+                                {{header_macros::header_item(name="Getting Started", path="/learn/book/getting-started/", extra_class="main-menu__entry--getting-started", current_path=current_path)}}
                                 {{header_macros::header_item(name="Learn", current_path=current_path)}}
                                 {{header_macros::header_item(name="News", current_path=current_path)}}
                                 {{header_macros::header_item(name="Community", current_path=current_path)}}
@@ -103,8 +103,7 @@
                     </nav>
                     <div class="header__cta-container">
                         <a class="button button--pink header__cta" href="/community/donate">Donate <img class="button__icon" src="/assets/heart.svg" alt="heart icon"/></a>
-                        <a class="button header__cta" href="/learn/book/getting-started/">Get Started</a>
-                        <a class="github-mark header__cta" href="https://github.com/bevyengine/bevy">
+                        <a class="header__cta header__cta--github" href="https://github.com/bevyengine/bevy">
                             <img src="/assets/github-mark-white.svg" alt="GitHub repo">
                         </a>
                     </div>

templates/macros/header.html

@@ -1,4 +1,4 @@
-{% macro header_item(name, path="", current_path) %}
+{% macro header_item(name, path="", extra_class="", current_path) %}
     {% set lower_current_path = current_path | lower %}
     {% set home = "/" %}
 
@@ -16,7 +16,7 @@
         {% set class = class~" main-menu__link--active" %}
     {% endif %}
 
-    <li class="main-menu__entry">
+    <li class="main-menu__entry {{extra_class}}">
         <a href="{{route | lower}}" class="{{ class }}">
             <span>{{name}}</span>
         </a>