Merge pull request #2436 from AMZN-daimini/daimini/docsWebsiteFixes

Fixes to documentation website
o3de · Jun 19, 2023 · 679240d · 679240d
2 parents aaa7c60 + 823c688
commit 679240d
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 103 deletions.
diff --git a/assets/sass/custom.sass b/assets/sass/custom.sass
@@ -63,10 +63,6 @@
 @import "bootstrap/scss/utilities" 
 //@import "bootstrap/scss/print" 
 
-
-// Custom
-
-
 // Variables 
 
 $font-family-headers: "Open Sans" 
@@ -83,7 +79,17 @@ $o3de-blue-highlight: #94D2FF
 $o3de-green: #58BD61
 $o3de-purple: #700AC7
 $o3de-aqua: #0AC1C7
+$o3de-game-gold: #D3B73C
+
+.bg-warning
+  background-color: $o3de-game-gold !important
 
+  a
+    color: $o3de-blue
+    text-shadow: 0 0 0
+
+    :hover
+      color: $o3de-white
 
 // layouts/section-nav.html typography
 
@@ -287,7 +293,7 @@ code
 .main-navbar 
   background-color: rgba(0, 0, 0, 0.9)
   filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25))
-  padding-bottom: 3px;
+  padding: 1.25rem 1rem;
 
 .navbar-collapse
   @include media-breakpoint-down(md)
@@ -297,18 +303,18 @@ code
 
 
 .navbar-docs
-  background-color: $o3de-docsblue
+  background-color: $o3de-white
 
-.navbar-dark .navbar-toggler
+.navbar-light .navbar-toggler
   border: 0 none
   padding: .25rem 0
 
-.navbar-dark .navbar-nav
+.navbar-light .navbar-nav
   @include media-breakpoint-down(md)
     padding: 8px 24px
     background-color: #222
 
-.new-nav.navbar-dark .navbar-nav .navbar-item
+.new-nav.navbar-light .navbar-nav .navbar-item
   &:last-child
     margin-left: 25px
     border: 1px solid $o3de-white
@@ -317,13 +323,13 @@ code
       padding-right: 1.2rem;
       padding-left: 1.2rem;
 
-.navbar-dark .navbar-nav .nav-link
+.navbar-light .navbar-nav .nav-link
   color: $o3de-white 
   font-size: .9rem
-  line-height: 1
+  line-height: 2.8
   font-family: $font-family-Poppins
   font-weight: 700
-  letter-spacing: 1.4px;
+  letter-spacing: 0.05rem;
   transition: 300ms ease
   &:hover 
     color: $o3de-white 
@@ -332,56 +338,51 @@ code
 
 .navbar-docs .navbar-nav .nav-link
   text-transform: uppercase
+  color: $o3de-black
   &:hover 
-    color: $o3de-lightgray
+    color: $o3de-black
 
-.navbar-dark .navbar-nav li
+.navbar-light .navbar-nav li
   display: inline-block
   position: relative
   margin-left: 20px
 
-.navbar-dark .navbar-nav li.active
+.navbar-light .navbar-nav li.active
   &:hover 
     .nav-link.active
-      color: $o3de-blue-highlight
+      color: $o3de-black
     div
       background-color: $o3de-blue-highlight
 
-.navbar-dark .navbar-nav li.active
+.navbar-light .navbar-nav li.active
   &:hover 
     .nav-link.active
-      color: $o3de-lightgray
+      color: $o3de-black
     div
       background-color: $o3de-lightgray
 
-.navbar-dark .navbar-nav .nav-link.active
-  color: $o3de-lightgray
-
-.navbar-docs .navbar-nav .nav-link.active
-  color: $o3de-lightgray
+.navbar-light .navbar-nav .nav-link.active
+  color: $o3de-black
 
-.navbar-dark .navbar-nav li.active div
-  background-color: $o3de-lightgray
+.navbar-light .navbar-nav li.active div
+  background-color: $o3de-aqua
   padding-bottom: 4px
   position: absolute
   width: 100%
   bottom: -11px
 
   @include media-breakpoint-down(md)
     display: none
-
-.navbar-docs .navbar-nav li.active div
-  background-color: $o3de-blue-highlight
 
 .navbar-logo
-  max-height: 48px
+  max-height: 40px
   color: #FFFFFF
 
 .subTitle
-  color: $o3de-white
+  color: $o3de-black
   position: absolute
-  top: 17px
-  margin-left: 10px
+  top: 25px
+  margin-left: 15px
 
 .search
   .form-control
@@ -401,44 +402,47 @@ code
 .navbar-docs
   ul
     flex-direction: row;
+    margin-left: 3rem
 
     .nav-link
-      padding: 0 0.5rem
-  
+      padding: 0
+
   .secondary-toggler
-    margin-left: .7rem
+    margin-left: 1.25rem
 
     @include media-breakpoint-down(lg)
       display: none
 
 .navbar-primary
 
   .navbar-nav li.active div
-    bottom: -19px
+    bottom: -20px
 
   @include media-breakpoint-down(lg)
     display: none !important
 
-.navbar-dark .navbar-secondary
+.navbar-light .navbar-secondary
   padding: 8px 0
-  background-color: #1F3557
+  background-color: $o3de-lightgray
   position: absolute
   right: 0
-  top: 62px
+  top: 80px
   width: 214px
 
   @include media-breakpoint-down(lg)
     display: none !important
 
   ul
-    padding: 0 0.75rem
+    padding: 0 1rem
     margin: 0
 
     li
       display: block
 
       a
-        color: #fff
+        color: $o3de-black
+        font-weight: 800
+        font-size: .9rem
         text-transform: uppercase
         padding: 0.5rem
 
@@ -447,9 +451,6 @@ code
 
         div
           display: none
-
-      a:hover
-        color: $o3de-lightgray
 
 .mobile-docs-toggler
   .navbar-toggler-icon
@@ -478,8 +479,6 @@ a.top-banner
   position: relative
   width: 100%
   z-index: 1
-
-
 
   &:hover 
     background-color: darken($o3de-purple, 10%)
@@ -522,7 +521,6 @@ a.top-banner
       font-size: .9rem
       letter-spacing: 1px;
 
-
     .banner-subtitle
       font-size: .9rem
       font-weight: 700
@@ -556,8 +554,6 @@ a.top-banner
       &:hover
         border-color: $o3de-purple
 
-
-
 //scales the header proportionally
 $width: '59vw';
 
@@ -1560,7 +1556,7 @@ $os-selector-mobile-height: 48px
   @include media-breakpoint-down(lg)
     position: fixed
     display: block
-    top: 62px
+    top: 80px
     bottom: 0
     z-index: 100
     width: 360px
@@ -1754,7 +1750,7 @@ nav.docs-nav
     scrollbar-track-color: $background-color
 
 .docs-sidebar
-  @include scrollbars(5px, $o3de-blue-highlight, $o3de-lightgray)
+  @include scrollbars(5px, $o3de-aqua, $o3de-lightgray)
 
 
 // layouts/section-nav.html 

diff --git a/config.toml b/config.toml
@@ -36,14 +36,14 @@ sourceRepo = "https://github.com/o3de/o3de"
 # Docs version data format: ["display name", "baseURL"]
 # Note: A version that has "www.o3de.org" in its baseURL will get " (latest)" appended to its display name in the version selector.
 versions = [
-  ["23.05", "https://www.o3de.org"],
+  ["23.05", "https://docs.o3de.org/docs"],
   ["development", "https://development--o3deorg.netlify.app"],
   ["22.10", "https://version-2210--o3deorg.netlify.app"],
   ["22.05", "https://version-2205--o3deorg.netlify.app"]
 ]
 
 [params.logos]
-navbar = "O3DE-Logo-with-color-white.svg"
+navbar = "O3DE-Logo-with-color-black.svg"
 footer = "O3DE-Logo-REV-Mono.svg"
 og_image = "O3DE-Circle-Icon.png"
 docs_footer = "O3DE-Logo-with-color.svg"

diff --git a/content/docs/engine-dev/_index.md b/content/docs/engine-dev/_index.md
@@ -1,6 +1,6 @@
 ---
 linkTitle: Engine Developer Guide
-menuTitle: Engine Developer Guide
+menuTitle: Developer Guide
 title: Open 3D Engine (O3DE) Engine Developer Guide
 description: |
     Learn about the inner workings of O3DE architecture, frameworks, and Gems to perform custom modifications to O3DE and contribute back to source code.

diff --git a/layouts/partials/docs-footer.html b/layouts/partials/docs-footer.html
@@ -1,5 +1,5 @@
 {{ $social := site.Params.social }}
-{{ $home   := site.BaseURL }}
+{{ $home   := "https://o3de.org/" }}
 {{ $title  := site.Title }}
 {{ $logo   := site.Params.logos.docs_footer }}
 

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
 {{ $social := site.Params.social }}
-{{ $home   := site.BaseURL }}
+{{ $home   := "https://o3de.org/" }}
 {{ $title  := site.Title }}
 {{ $logo   := site.Params.logos.footer }}
 

diff --git a/layouts/partials/home/download.html b/layouts/partials/home/download.html
@@ -4,7 +4,7 @@
       <h2>Try out Open 3D Engine now!</h2>
       <h5 class="mt-2 mb-2">Interesting in kicking the tires? Download O3DE for your platform now!</h5>
       <p class="buttons">
-        <a href="/download" class="my-3 mr-3 btn text-white download-btn btn-lg">Download O3DE</a>
+        <a href="https://o3de.org/download/" class="my-3 mr-3 btn text-white download-btn btn-lg">Download O3DE</a>
       </p>
   </div>
 </section>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -7,19 +7,21 @@
 {{ $isPreview := in site.BaseURL "deploy-preview" }}
 {{ $isRelease := in site.BaseURL "www.o3de.org" }}
 
-{{ if $isDocs }}
 <div class="sticky-top" id="docs-banners">
-  <div class="main-navbar navbar navbar-dark navbar-docs" role="navigation" aria-label="main navigation">
+  <div class="main-navbar navbar navbar-light navbar-docs" role="navigation" aria-label="main navigation">
     <div class="container-fluid d-flex flex-row justify-content-between">
         <div class="navbar-brand">
-            <a class="navbar-item" href="{{ $docs }}">
-            {{ if $logo }}
-            {{ $url := printf "img/logos/%s" $logo | relURL }}
-                <img src="{{ $url }}" class="navbar-logo" alt="O3DE logo.">
-            {{ else }}
-                {{ $title }}
-            {{ end }}
-            <span class="subTitle">LEARN</span>
+            <a class="navbar-item" href="https://o3de.org/">
+                {{ if $logo }}
+                {{ $url := printf "img/logos/%s" $logo | relURL }}
+                    <img src="{{ $url }}" class="navbar-logo" alt="O3DE logo.">
+                {{ else }}
+                    {{ $title }}
+                {{ end }}
+
+                <a href="{{ $docs }}">
+                    <span class="subTitle">LEARN</span>
+                </a>
             </a>
         </div>
 
@@ -42,7 +44,6 @@
         </div>
     </div>
   </div>
-  {{ if not .Site.IsServer }}
     {{ if $isPreview }}
         <div class="p-2 text-white bg-secondary" id="preview-info">
         {{ partial "preview-info.html" . }}
@@ -52,36 +53,4 @@
         {{ partial "version-warning.html" . }}
         </div>
     {{ end }}
-  {{ end }}
-</div>
-{{ else }}
-  <div class="new-nav main-navbar navbar navbar-dark navbar-expand-lg sticky-top" role="navigation" aria-label="main navigation">
-    <div class="container-fluid d-flex flex-row justify-content-between">
-        <div class="navbar-brand">
-          <a class="navbar-item" href="{{ $home }}">
-            {{ if $logo }}
-            {{ $url := printf "img/logos/%s" $logo | relURL }}
-              <img src="{{ $url }}" class="navbar-logo">
-            {{ else }}
-            {{ $title }}
-            {{ end }}
-          </a>
-        </div>
-
-        <div class="d-flex flex-row align-items-center">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-
-          <div class="collapse navbar-collapse" id="main-nav">
-            {{ partial "menu-loop.html" . }}
-          </div>  
-
-          <div class="search">
-            {{ partial "search.html" . }}
-          </div>
-
-        </div>  
-    </div> 
-  </div>
-{{ end }}
+</div>