You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by jo...@apache.org on 2025/04/17 23:11:01 UTC
(royale-asjs) 02/08: RoyaleSite: make the top bar layout match the real site a bit better
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 <jo...@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