This is an automated email from the ASF dual-hosted git repository.
wilfreds pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/yunikorn-site.git
The following commit(s) were added to refs/heads/master by this push:
new 009b79ad3e [YUNIKORN-3209] Fix mobile responsiveness (#539)
009b79ad3e is described below
commit 009b79ad3e0ccf57e65c78357231658da17c9852
Author: Prakash Kumar <[email protected]>
AuthorDate: Wed Jan 28 10:52:52 2026 +1100
[YUNIKORN-3209] Fix mobile responsiveness (#539)
Improves the mobile responsiveness of the homepage by fixing layout issues
in the hero and footer sections.
It ensures a better user experience on small screens while preserving the
existing desktop layout.
Closes: #539
Signed-off-by: Wilfred Spiegelenburg <[email protected]>
---
src/css/custom.css | 70 ++++++++++++++++++++++++++++++++++++++++++---
src/pages/index.js | 10 +++----
src/pages/styles.module.css | 8 ++++--
3 files changed, 75 insertions(+), 13 deletions(-)
diff --git a/src/css/custom.css b/src/css/custom.css
index 0b4f312716..aa4009495d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -29,7 +29,7 @@
/* Hack: hide warning message on unreleased and old versions of the docs */
.alert.alert--warning.margin-bottom--md {
display: none;
-}
+}
.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
@@ -48,7 +48,7 @@
height: 24px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12
0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577
0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633
17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236
1.07 1.835 2.809 1.305
3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93
0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.52 [...]
- no-repeat;
+ no-repeat;
}
html[data-theme='dark'] .header-github-link:before {
@@ -57,7 +57,7 @@ html[data-theme='dark'] .header-github-link:before {
height: 24px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63
0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577
0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633
17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236
1.07 1.835 2.809 1.305
3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93
0-1.31.465-2.38 1.235-3.22-.135- [...]
- no-repeat;
+ no-repeat;
}
.navbar__inner {
@@ -103,6 +103,7 @@ html[data-theme='dark'] .header-github-link:before {
margin: auto;
width: 70%;
padding: 20px;
+ text-align: center;
}
.hero_column_logo {
@@ -111,10 +112,11 @@ html[data-theme='dark'] .header-github-link:before {
margin: auto;
width: 30%;
padding: 20px;
+ text-align: center;
}
.hero--primary .container {
- text-align: left;
+ text-align: center;
max-width: 1200px;
}
@@ -159,6 +161,66 @@ html[data-theme='dark'] .header-github-link:before {
width: 50px;
}
+@media (min-width: 768px) {
+ .hero_column_main {
+ order: 1;
+ width: 70%;
+ text-align: center;
+ }
+
+ .hero_column_logo {
+ order: 2;
+ width: 30%;
+ text-align: center;
+ }
+
+ .buttons_src-pages- a {
+ display: inline-block;
+ width: auto;
+ }
+}
+
+@media (max-width: 767px) {
+ .hero_column_main {
+ width: 100%;
+ text-align: center;
+ padding: 0 16px;
+ margin-top: -20px;
+ }
+
+ .hero_column_logo {
+ width: 50%;
+ padding: 0;
+ }
+
+ .hero_column_logo img {
+ width: 140px;
+ margin-bottom: 16px;
+ }
+
+ [class^="buttons_src-pages"] {
+ display: flex !important;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .buttons_src-pages- a {
+ display: block;
+ width: 100%;
+ max-width: 280px;
+ margin: 8px auto;
+ }
+}
+
+@media (max-width: 996px) {
+ .footer__link-item {
+ display: inline-block;
+ max-width: 100%;
+ word-break: break-word;
+ }
+}
+
+
html[data-theme='light'] .DocSearch {
/* --docsearch-primary-color: var(--ifm-color-primary); */
/* --docsearch-text-color: var(--ifm-font-color-base); */
diff --git a/src/pages/index.js b/src/pages/index.js
index d7449a9086..cc5fb034fd 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -111,20 +111,18 @@ function Home() {
<header className={clsx('hero', styles.heroBanner)}>
<div className="container">
<div className="row">
+ <div className='hero_column_logo'>
+ <img className={styles.heroImg}
src="/img/logo/yunikorn_classic_logo.png" alt="YuniKorn logo"/>
+ </div>
<div className='hero_column_main'>
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
- <div className="container">
<div className="buttons_src-pages-">
<a className="button button--primary
button--lg" href="/docs/">GET STARTED</a>
<a className="button button--primary
button--lg" href="/community/download">DOWNLOAD</a>
<a className="button button--primary
button--lg" href="/community/roadmap">ROADMAP</a>
</div>
- </div>
- </div>
- <div className='hero_column_logo'>
- <img className={styles.heroImg}
src="/img/logo/yunikorn_classic_logo.png" alt="YuniKorn logo"/>
- </div>
+ </div>
</div>
</div>
</header>
diff --git a/src/pages/styles.module.css b/src/pages/styles.module.css
index b77eba0db8..bd29b51467 100644
--- a/src/pages/styles.module.css
+++ b/src/pages/styles.module.css
@@ -33,9 +33,9 @@
}
.heroImg {
- display: flex;
- align-items: center;
width: 80%;
+ max-width: 100%;
+ margin: 0 auto;
}
.features {
@@ -57,13 +57,15 @@
display: block;
margin-left: auto;
margin-right: auto;
+ padding: 2rem 0;
}
.postContainer {
align-content: center;
min-width: 300px;
max-width: 800px;
- margin: 0 20%;
+ margin: 0 auto;
+ padding: 0 16px;
overflow: auto;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
