This is an automated email from the ASF dual-hosted git repository.
dahn pushed a commit to branch staging-site
in repository https://gitbox.apache.org/repos/asf/cloudstack-www.git
The following commit(s) were added to refs/heads/staging-site by this push:
new 254c1b663 navbar stickyness (#160)
254c1b663 is described below
commit 254c1b663bba0e9ac8d9e5edb3285668480bdcad
Author: dahn <[email protected]>
AuthorDate: Fri Feb 9 08:05:10 2024 +0100
navbar stickyness (#160)
---
src/css/custom.css | 30 +++++++++++++++++++++++++++---
1 file changed, 27 insertions(+), 3 deletions(-)
diff --git a/src/css/custom.css b/src/css/custom.css
index 5b9b33855..083d4afdd 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -105,9 +105,34 @@ body {
background: url('img/blue_splash_updated.svg') no-repeat center top;
}
.navbar {
- background-color: #fff;
- padding: 0;
+ background-color: #fff;
+ padding: 0 0.5rem;
+ position: fixed;
+ width: 100%;
+ display:flex;
+ flex-wrap:wrap;
+ align-items:center;
+ justify-content:space-between;
+ --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
+ --bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);
+ --bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);
+ --bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);
+ --bs-navbar-brand-padding-y:0.3125rem;
+ --bs-navbar-brand-margin-end:1rem;
+ --bs-navbar-brand-font-size:1.25rem;
+ --bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);
+ --bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);
+ --bs-navbar-nav-link-padding-x:0.5rem;
+ --bs-navbar-toggler-padding-y:0.25rem;
+ --bs-navbar-toggler-padding-x:0.75rem;
+ --bs-navbar-toggler-font-size:1.25rem;
+ --bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath
stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round'
stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4
23h22'/%3e%3c/svg%3e");
+ --bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);
+ --bs-navbar-toggler-border-radius:var(--bs-border-radius);
+ --bs-navbar-toggler-focus-width:0.25rem;
+ --bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;
}
+
.navbar__logo {
flex: 0 0 auto;
height: 2rem;
@@ -1763,7 +1788,6 @@ textarea.form-control-lg{min-height:calc(1.5em + 1rem +
calc(var(--bs-border-wid
.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}
.tab-content>.tab-pane{display:none}
.tab-content>.active{display:block}
-.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb),
0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb),
0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb),
0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb),
1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb),
1);--bs-nav [...]
.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{
display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}
