This is an automated email from the ASF dual-hosted git repository.
jinrongtong pushed a commit to branch new-official-website
in repository https://gitbox.apache.org/repos/asf/rocketmq-site.git
The following commit(s) were added to refs/heads/new-official-website by this
push:
new d43d615066 Improve homepage hero and footer responsiveness (#760)
d43d615066 is described below
commit d43d6150662dcf871ecc5df50d05f9534f9e130b
Author: Prakash Kumar <[email protected]>
AuthorDate: Thu Feb 12 13:11:10 2026 +0530
Improve homepage hero and footer responsiveness (#760)
---
src/css/custom.css | 43 ++++++++++----
src/pages/components/Hero.module.css | 110 +++++++++++++----------------------
2 files changed, 73 insertions(+), 80 deletions(-)
diff --git a/src/css/custom.css b/src/css/custom.css
index b20ae8efbe..3a5f9929e2 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -99,17 +99,6 @@ html[data-theme="dark"] {
font-weight: bold;
color: #53599a;
}
-
-.footer__links {
- width: 75%;
- float: right;
-}
-.footer__bottom {
- width: 25%;
-}
-.footer__bottom > div {
- text-align: left;
-}
.footer--dark {
--ifm-footer-background-color: #0c0c2c;
--ifm-footer-padding-vertical: 100px;
@@ -656,3 +645,35 @@ footer .docusaurus-mt-lg{
.hidden-sidebar-item {
display: none !important;
}
+
+.footer__links {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2rem;
+}
+.footer__copyright{
+ text-align: center;
+}
+@media (max-width: 1024px) {
+ .footer__links {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .footer__col {
+ text-align: center;
+ }
+}
+
+@media (max-width: 400px) {
+ .footer__links {
+ grid-template-columns: 1fr;
+ }
+
+ .footer__bottom {
+ text-align: center;
+ }
+
+ .footer__logo {
+ margin: 0 auto;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/components/Hero.module.css
b/src/pages/components/Hero.module.css
index 30e6a27dc2..12889c7c3d 100644
--- a/src/pages/components/Hero.module.css
+++ b/src/pages/components/Hero.module.css
@@ -1,100 +1,72 @@
.heroBanner {
- padding: 1rem 0 5rem;
- text-align: center;
- position: relative;
- overflow: hidden;
- height: 100vh;
- background-image: url('/img/rmq-home-page.png');
- background-size: 100%;
+ padding: 4rem 1rem 5rem;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ min-height: 100vh;
+ background-image: url('/img/rmq-home-page.png');
+ background-size: cover;
+ background-position: center;
+}
+
+.herotitle {
+ font-size: 6.5rem;
+ line-height: 1.1;
+ word-break: normal;
}
.herosubtitle {
- font-size: 1.5rem;
- max-width: 600vw;
+ font-size: 1.5rem;
+ max-width: 760px;
+ margin: 1.5rem auto 0;
}
+@media (max-width: 966px) {
+ .herotitle {
+ font-size: 6rem;
+ }
-@media screen and (max-width: 966px) {
- .heroBanner {
- padding: 2rem;
- }
- .heroBanner {
- height: 130vh;
- }
-}
-@media screen and (max-width: 680px) {
- .heroBanner {
- height: 120vh;}
+ .herosubtitle {
+ font-size: 1.3rem;
+ }
}
.buttons {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- justify-content: center;
- margin: 30px 0 0;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-top: 2.5rem;
}
.buttons > a {
- margin: 0 5px;
-
+ margin: 0 6px;
}
@media (max-width: 650px) {
-
- .herosubtitle{
- font-size: medium;
- }
- .buttons{
- text-align: center;
-
- }
- .button{
- width: 200px!important;
- min-width: none;
- padding:18px;
-
- }
- .button2{
- display: none!important;
- }
.herotitle{
- font-size: 4rem;
+ font-size: 4rem;
}
- .frameworkLogos img {
- height: 45px;
- }
-}
-@media (max-width: 800px) {
+ .herosubtitle {
+ font-size: 1rem;
+ }
- .frameworkLogos img {
- height: 45px;
- }
- .herotitle{
- font-size: 7rem;
- }
+ .button {
+ width: 200px !important;
+ }
+ .button2 {
+ display: none !important;
+ }
}
-@media (max-width: 500px) {
-
- .heroBanner{
- height: 100vh;
- }
-
-}
@media (max-width: 400px) {
.herotitle{
- font-size: 5rem;
+ font-size: 3.2rem;
}
- .heroBanner{
- height: 100vh;
- }
-
}
.github{
- padding-top: 30px!important;
+ margin-top: 2rem;
}
