This is an automated email from the ASF dual-hosted git repository.
xiaoyu pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/shenyu-website.git
The following commit(s) were added to refs/heads/main by this push:
new 1fbbd55b41 adaptation for custom pages (#727)
1fbbd55b41 is described below
commit 1fbbd55b41a46fc041266794a6649edf11496724
Author: gouzixing <[email protected]>
AuthorDate: Sun Aug 28 21:22:38 2022 +0800
adaptation for custom pages (#727)
* newsPage
* news page
* bugfix
* news page update
* bugfix --path bug
* conflict
* conflict
* img update
* blog page refractor
* blog page new style
* delete annotate
* index page highlight for slogon
* bugfix:document for node
* bugfix--link false
* i18n & link fix
* 'translate'
* translate
* urlchange bugfix
* docs fix
* delete unused import
* fix
* event page & navibar update & overview doc & pic update for news
* lint
* lint
* translate
* lint
* trans
* feat
* fix--locale=zh
* docs fix
* footer
* i18n
* userList
* fix
* fix
* fix
* index
* fix
* hover
* fix
* index page
* index page
* SWIPER
* SWIPER
* 2.5.0
* 2.5.0
* 2.5.0
* 适配
* 适配
Co-authored-by: gouzixing <[email protected]>
Co-authored-by: gouzixing <[email protected]>
---
src/components/Footer.module.css | 39 ++++++++++++--
src/pages/blog.module.css | 39 ++++++++++++--
src/pages/event.module.css | 20 ++++++--
src/pages/event.tsx | 4 +-
src/pages/index.module.css | 106 +++++++++++++++------------------------
src/pages/news.module.css | 49 ++++++++++++++----
src/pages/news.tsx | 4 +-
7 files changed, 171 insertions(+), 90 deletions(-)
diff --git a/src/components/Footer.module.css b/src/components/Footer.module.css
index cb8490eb56..8370eb9bfe 100644
--- a/src/components/Footer.module.css
+++ b/src/components/Footer.module.css
@@ -15,7 +15,6 @@
.text{
max-width: 450px;
- /* font-family: 'Inter'; */
font-style: normal;
font-weight: 440;
font-size: 13px;
@@ -32,7 +31,7 @@
}
.item{
- width: 165px;
+ width: 11rem;
padding-bottom: 30px;
}
@@ -40,7 +39,7 @@
font-family: 'Inter';
font-style: normal;
font-weight: 500;
- font-size: 16px;
+ font-size: 1rem;
line-height: 24px;
color: #9c9da7;
}
@@ -64,4 +63,38 @@
margin-right: 24px;
height: 48px;
width: auto;
+}
+
+@media screen and (max-width: 996px) {
+ .containerContent{
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ }
+
+ .text{
+ font-style: normal;
+ font-weight: 440;
+ font-size: 13px;
+ line-height: 24px;
+ color: #9c9da7;
+ display: block;
+ margin-top: 40px;
+ width: 100%;
+ }
+
+ .footerNav{
+ display: flex;
+ flex-direction: column;
+ }
+
+ :global(.user-swiper-button-previous){
+ top:1350px !important;
+ left: 0px !important;
+ }
+
+ :global(.user-swiper-button-nextPage){
+ top:1350px !important;
+ right: 0px !important;
+ }
}
\ No newline at end of file
diff --git a/src/pages/blog.module.css b/src/pages/blog.module.css
index ff3aa31ad5..247d6fc560 100644
--- a/src/pages/blog.module.css
+++ b/src/pages/blog.module.css
@@ -13,6 +13,7 @@
align-items: center;
flex-direction: column;
padding-left: 12.333%;
+ text-align: justify;
}
.categray{
@@ -51,7 +52,7 @@
}
.postTitle{
- font-size: 18px;
+ font-size: 1.125rem;
font-weight: bold;
margin-top: 5px;
color: var(--ifm-color-primary);
@@ -91,8 +92,6 @@
.authorDate{
font-size: 2px;
- /* margin: 8px 0 8px 0; */
- /* color:#888; */
}
.read{
@@ -144,4 +143,38 @@
.link:hover{
text-decoration: none;
+}
+
+@media screen and (max-width: 996px) {
+ .catalogue {
+ display: none;
+ }
+
+ .content{
+ display: flex;
+ --ifm-col-width:100%;
+ flex: 0 0 var(--ifm-col-width);
+ max-width: var(--ifm-col-width);
+ align-items: center;
+ flex-direction: column;
+ text-align: justify;
+ }
+
+ .title{
+ width: 100%;
+ font-size: 22px;
+ font-weight: bold;
+ color: #2c3e50;
+ margin: 30px 6rem 30px 20px;
+ border-bottom: 1px solid #eaecef;
+ }
+
+ .card{
+ flex:1;
+ margin: 0 20px 0 20px;
+ box-sizing: border-box;
+ width: calc( 100% - 6rem );
+ min-width: calc( 100% - 6rem );
+ max-width: calc( 100% - 6rem );
+ }
}
\ No newline at end of file
diff --git a/src/pages/event.module.css b/src/pages/event.module.css
index 7e6a48329f..6eb80d7a8e 100644
--- a/src/pages/event.module.css
+++ b/src/pages/event.module.css
@@ -2,7 +2,7 @@
height: 140px;
line-height: 140px;
text-align: center;
- font-size: 28px;
+ font-size: 1.75rem;
color: var(--ifm-color-primary);
font-weight: bold;
}
@@ -42,8 +42,9 @@
.cardDesc{
font-size: 14px;
color: #475467;
- white-space: pre;
+ white-space: pre-wrap;
margin-top: 12px;
+ max-width: 100%;
}
.readMore:hover{
@@ -57,11 +58,20 @@
.readMore{
font-size: 12px;
color: var(--ifm-color-primary);
- /* margin-left: 78%;
- */
float: right;
margin-top: 30px;
background-color: #FFFFFF;
border: #FFFFFF;
- /* font-weight: bold; */
+}
+
+@media screen and (max-width: 996px) {
+ .cardItem{
+ margin: 5px;
+ display: flex;
+ height: auto;
+ min-height: 200px;
+ width: 90%;
+ background-color: #FFFFFF;
+ border-radius: 10px;
+ }
}
\ No newline at end of file
diff --git a/src/pages/event.tsx b/src/pages/event.tsx
index aaa96004e7..bc6424f1c4 100644
--- a/src/pages/event.tsx
+++ b/src/pages/event.tsx
@@ -30,11 +30,11 @@ function Event() {
<div className={styles.cardInfo}>
<div className={styles.cardTitle}>{eventItem.title}</div>
<div
className={styles.cardDesc}>{eventItem.description}</div>
- <button className={styles.readMore}>
+ <div className={styles.readMore}>
{
url ? <Link className={styles.link} to={'event/' +
eventItem.src}> >> <Translate>Read More</Translate></Link> : <Link
className={styles.link} to={eventItem.src}> >> <Translate>Read
More</Translate></Link>
}
- </button>
+ </div>
</div>
</div>
)
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index e9061756dd..f884267b03 100755
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -3,7 +3,7 @@
}
.section {
- padding: 72px 0;
+ padding: 4.5rem 0;
width: 100%;
}
@@ -20,51 +20,15 @@
user-select: none;
}
-.featureImage {
- max-width: 60%;
- max-height: 128px;
- margin: 0 auto;
-}
-
-.featureHeading {
- font-size: var(--ifm-h3-font-size);
- padding-top: 1rem;
-}
-
-.announcement {
- font-weight: bold;
- font-size: 24px;
- padding: 48px;
- margin: 0 auto;
- text-align: center;
-}
-
-.announcementDark {
- background-color: #20232a;
- color: #fff;
-}
-
-.announcementInner {
- margin: 0 auto;
- max-width: 768px;
-}
-
.hero {
background-color: #F5F6F7;
- padding: 48px;
- border-radius: 8px;
+ padding: 3rem;
+ border-radius: 0.5rem;
}
-.heroInner {
- margin: 0 auto;
- max-width: 1100px;
- padding: 0 20px;
-}
-
-
.heroProjectTitle {
color: #fff;
- font-size: 60px;
+ font-size: 3.75rem;
margin: 0;
display: flex;
align-items: center;
@@ -77,30 +41,12 @@
margin-right: .25em;
}
-.heroProjectSubTitle {
- color: #fff;
- font-size: 40px;
- margin: 0;
-}
-
-.heroProjectTagline {
- color: #000;
- font-size: 25px;
- margin: 0;
-}
-
.heroTitleTextHtml b {
color: #FF5C00;
}
-.heroDesc{
- color: #000033;
- font-size: 20px;
- margin: 0;
-}
-
.buttonGetStarted{
- width: 160px;
+ width: 10rem;
background-color: #000033;
text-align: center;
height: 40px;
@@ -116,7 +62,7 @@
}
.buttonGithub{
- width: 160px;
+ width: 10rem;
background-color: #fff;
text-align: center;
height: 40px;
@@ -170,7 +116,7 @@
animation-name: jackInTheBox;
float: right;
/* padding: 0 20px 20px; */
- width: 600px;
+ width: 37.5rem;
height: 400px;
display: flex;
align-items: center;
@@ -180,7 +126,6 @@
.indexCtas {
--ifm-button-size-multiplier: 1.6;
display: flex;
- flex-wrap: wrap;
align-items: center;
margin-top: 24px;
}
@@ -211,7 +156,7 @@
.blockTitle:before {
content: "";
display: block;
- width: 50px;
+ width: 3rem;
height: 3px;
background-color: var(--ifm-color-primary);
margin: 0 auto 8px;
@@ -256,7 +201,6 @@
.scrollLine2{
display: flex;
- /* padding-left: 130px; */
align-items: center;
}
@@ -308,5 +252,37 @@
.contentImg{
display: table;
margin: 0 auto;
- /* width: 80%; */
+}
+
+@media screen and (max-width: 996px) {
+ .heroBanner {
+ padding: 2rem;
+ }
+
+ .heroProjectTagline{
+ font-size: 20px;
+ }
+
+ .logoContainer{
+ border-radius: 8px;
+ box-shadow: 6px 6px 22px 2px rgb(0 0 51 / 20%);
+ animation-duration: 2s;
+ animation-name: jackInTheBox;
+ width: 85vw;
+ height: 400px;
+ display: flex;
+ align-items: center;
+ background-color: rgb(245,246,247);
+ }
+
+
+ :global(.user-swiper-button-prev){
+ top:950px !important;
+ left: 0px !important;
+ }
+
+ :global(.user-swiper-button-next){
+ top:950px !important;
+ right: 0px !important;
+ }
}
\ No newline at end of file
diff --git a/src/pages/news.module.css b/src/pages/news.module.css
index d4b79ef0ec..8a11cf8d99 100644
--- a/src/pages/news.module.css
+++ b/src/pages/news.module.css
@@ -2,7 +2,7 @@
height: 140px;
line-height: 140px;
text-align: center;
- font-size: 28px;
+ font-size: 1.75rem;
color: var(--ifm-color-primary);
font-weight: bold;
}
@@ -23,7 +23,7 @@
margin: 5px;
display: flex;
height: auto;
- min-height: 200px;
+ min-height: 12.5rem;
width: 50%;
background-color: #FFFFFF;
border-radius: 10px;
@@ -32,15 +32,18 @@
.cardInfo{
margin: 20px 30px 20px 30px;
width: 70%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
}
.cardDate{
- font-size: 10px;
+ font-size: 0.625rem;
margin-bottom: 15px;
}
.cardTitle{
- font-size: 18px;
+ font-size: 1.125rem;
font-weight: bold;
}
@@ -52,9 +55,7 @@
.cardImage{
margin: 20px 0px 20px 30px;
- /* height: auto;
- max-height: 180px; */
- width: 210px;
+ width: 13rem;
}
.readMore:hover{
@@ -66,11 +67,39 @@
}
.readMore{
- font-size: 12px;
+ align-self: flex-end;
+ display: flex;
+ justify-content: end;
+ font-size: 0.75rem;
color: var(--ifm-color-primary);
- margin-left: 78%;
margin-top: 30px;
background-color: #FFFFFF;
border: #FFFFFF;
- /* font-weight: bold; */
+}
+
+
+@media screen and (max-width: 996px) {
+ .cardItem{
+ margin: 5px;
+ display: flex;
+ height: auto;
+ min-height: 200px;
+ width: 90%;
+ background-color: #FFFFFF;
+ border-radius: 10px;
+ }
+
+ .cardImage{
+ margin: 10px 0px 20px 10px;
+ width: 13rem;
+ }
+}
+
+@media screen and (max-width: 500px) {
+ .cardImage{
+ display: none;
+ }
+ .cardInfo{
+ width: 100%;
+ }
}
\ No newline at end of file
diff --git a/src/pages/news.tsx b/src/pages/news.tsx
index 565a08ce34..2e361c372f 100644
--- a/src/pages/news.tsx
+++ b/src/pages/news.tsx
@@ -32,11 +32,11 @@ function News() {
<div className={styles.cardDate}>{newsItem.date}</div>
<div className={styles.cardTitle}>{newsItem.title}</div>
<div className={styles.cardDesc}>{newsItem.description}</div>
- <button className={styles.readMore}>
+ <div className={styles.readMore}>
{
url ? <Link className={styles.link} to={'news/' +
newsItem.src}> >> <Translate>Read More</Translate></Link> : <Link
className={styles.link} to={newsItem.src}> >> <Translate>Read
More</Translate></Link>
}
- </button>
+ </div>
</div>
</div>
)
