(royale-asjs) 02/08: RoyaleSite: make the top bar layout match the real site a bit better

[joshtynjala]

This is an automated email from the ASF dual-hosted git repository.

joshtynjala pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit 69b101805a62a0b222dba15b406c6094a662ad20
Author: Josh Tynjala <joshtynj...@apache.org>
AuthorDate: Thu Apr 17 13:32:54 2025 -0700

    RoyaleSite: make the top bar layout match the real site a bit better
---
 .../RoyaleSite/src/main/resources/defaults.css     | 29 +++++++++++++++-------
 .../royale/org/apache/royale/site/DocTopBar.mxml   |  1 -
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frameworks/projects/RoyaleSite/src/main/resources/defaults.css 
b/frameworks/projects/RoyaleSite/src/main/resources/defaults.css
index eb745a190e..0c0bb70c90 100644
--- a/frameworks/projects/RoyaleSite/src/main/resources/defaults.css
+++ b/frameworks/projects/RoyaleSite/src/main/resources/defaults.css
@@ -162,9 +162,9 @@ rs|MainPage {
 rs|DocPage {
        width: 100%;
        background-image: 
url('https://royale.apache.org/wp-content/uploads/2017/10/page-bg-1-1920x300.png');
-       background-size: 100%;
        background-repeat: no-repeat;
        margin-top: 0px;
+       background-position: center top;
 }
 
 rs|SocialButtons {
@@ -195,29 +195,32 @@ rs|TopBar {
 
 rs|DocTopBar {
        display: flex;
-       flex-wrap: wrap;
        justify-content: space-between;
        padding-left: 54px;
-       padding-right: 54px;
+       padding-right: 20px;
        color: #fff;
 }
 
 rs|TopMenu {
-       display: inline-block;
-       vertical-align: top;
-       margin-top: 0px;
+       display: inline-flex;
+       flex: 1 1 auto;
+       flex-wrap: wrap;
+       justify-content: flex-end;
+       margin-top: 15px;
        margin-bottom: 0px;
        height: 40px;
        list-style: none;
+       flex-grow: 1;
+       text-align: right;
 }
 
 rs|TopMenuButton {
        display: inline;
-       margin-right: 20px;
+       margin-left: 20px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Signika';
-       line-height: 70px;
+       line-height: 40px;
        letter-spacing: 1px;
        color: inherit;
 }
@@ -377,6 +380,14 @@ rs|TitledAnchorList {
 .logo {
     margin-top:15px; 
     margin-bottom: 5px; 
-    width: 190px; 
+    width: 180px; 
     height: 40px;
+}
+
+
+@media (max-width: 590px) {
+       /* the menu items wrap, and this is when the layout starts to break */
+       .TopMenu {
+               display: none;
+       }
 }
\ No newline at end of file
diff --git 
a/frameworks/projects/RoyaleSite/src/main/royale/org/apache/royale/site/DocTopBar.mxml
 
b/frameworks/projects/RoyaleSite/src/main/royale/org/apache/royale/site/DocTopBar.mxml
index bb42c53249..f1f2159cbd 100644
--- 
a/frameworks/projects/RoyaleSite/src/main/royale/org/apache/royale/site/DocTopBar.mxml
+++ 
b/frameworks/projects/RoyaleSite/src/main/royale/org/apache/royale/site/DocTopBar.mxml
@@ -25,5 +25,4 @@ limitations under the License.
                  className="DocTopBar TopBar">
     <Img className="logo" 
src="https://royale.apache.org/wp-content/uploads/2018/01/apache-royale-tm-logo-light.svg";
 />
     <rs:TopMenu />
-    <rs:SocialButtons />
 </Div>
\ No newline at end of file