This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository
https://gitbox.apache.org/repos/asf/incubator-streampark-website.git
The following commit(s) were added to refs/heads/dev by this push:
new 8f03c78 style: nav bar & dark color theme (#236)
8f03c78 is described below
commit 8f03c788fbc3629b45de30cc0ff00feae6f503a0
Author: Kriszu <[email protected]>
AuthorDate: Thu Sep 7 11:37:52 2023 +0800
style: nav bar & dark color theme (#236)
---
docusaurus.config.js | 6 +-
src/css/custom.css | 22 ++---
src/pages/download/index.less | 30 +++---
src/pages/home/feature.jsx | 8 +-
src/pages/home/hero.jsx | 4 +-
src/pages/home/index.less | 198 ++++++++++++++++++++++++++--------------
src/pages/home/performance.jsx | 4 +-
src/pages/home/performance.less | 1 +
src/pages/team/index.less | 7 +-
src/pages/user/index.less | 1 -
src/styles/base.less | 8 +-
11 files changed, 177 insertions(+), 112 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 7afe5bd..a4b3105 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -18,6 +18,7 @@
*/
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const lightCodeTheme = require('prism-react-renderer/themes/vsLight');
/** @type {import('@docusaurus/types').Config} */
const config = {
@@ -89,7 +90,8 @@ const config = {
themeConfig: ({
colorMode: {
defaultMode: 'light',
- disableSwitch: true
+ disableSwitch: false,
+ respectPrefersColorScheme: true,
},
navbar: {
logo: {
@@ -336,7 +338,7 @@ const config = {
},
prism: {
- theme: require('prism-react-renderer/themes/vsLight'),
+ theme: lightCodeTheme,
darkTheme: darkCodeTheme,
additionalLanguages: ['powershell', 'java', 'scala', 'yaml'],
}
diff --git a/src/css/custom.css b/src/css/custom.css
index 32210b0..05c80f6 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -86,7 +86,7 @@
--ifm-container-width-xl: 1200px;
--ifm-menu-link-padding-vertical: 0.5rem;
--ifm-menu-link-padding-horizontal: 1.25rem;
- --ifm-navbar-height: 5rem;
+ /* --ifm-navbar-height: 5rem; */
}
html {
@@ -96,29 +96,25 @@ html {
font-feature-settings: "tnum";
}
-.navbar {
- height: 60px;
-}
-
.navbar__title {
font-size: 18px;
font-weight: 500;
}
-.navbar__link {
+/* .navbar__link {
color: #444950;
font-size: 15px;
font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: 400;
padding: 15px;
-}
+} */
.navbar__link--active {
color: var(--ifm-navbar-link-hover-color) !important;
}
-.navbar__items {
+/* .navbar__items {
margin-left: 20px;
-}
+} */
.navbar__logo {
height: 50px;
@@ -134,7 +130,7 @@ code {
margin: 0px 1px 0px 3px;
}
-pre {
+[data-theme="light"] pre {
background-color: #ecf4fa !important;
}
@@ -399,7 +395,7 @@ footer .subscribe-box ul li a:hover .wechat-dropdown {
.theme-doc-sidebar-item-link-level-1 .menu__link,
.theme-doc-sidebar-item-category:not(#\#):not(#\#) .menu__link--sublist {
- color: #03060b;
+ color: var(--ifm-menu-color);
font-weight: 600;
}
@@ -481,3 +477,7 @@ footer .subscribe-box ul li a:hover .wechat-dropdown {
.theme-doc-sidebar-container .menu::-webkit-scrollbar-thumb:hover {
background-color: #b6b7b9;
}
+
+p{
+ color: var(--ifm-color-secondary-contrast-foreground);
+}
diff --git a/src/pages/download/index.less b/src/pages/download/index.less
index 057b748..369cded 100644
--- a/src/pages/download/index.less
+++ b/src/pages/download/index.less
@@ -1,5 +1,7 @@
@import url('/src/styles/variable.less');
-
+[data-theme="dark"] .download_page .custom-info-block {
+ background-color: #e2e7eb !important;
+}
.download_page {
a {
@@ -8,6 +10,7 @@
margin-top: 50px !important;
+
.custom-info-block {
margin: 28px 0;
padding: 20px 24px 4px 42px;
@@ -43,13 +46,14 @@
display: table;
max-width: 100%;
width: 100%;
- background: #fff;
- border: 1px solid rgba(34, 36, 38, .15);
+ // background: #fff;
+ background-color: var(--ifm-table-background);
+ border: var(--ifm-table-border-width) solid var(--ifm-table-border-color);
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0.28571429rem;
text-align: left;
- color: rgba(0, 0, 0, .87);
+ color: var(--ifm-table-head-color);
border-collapse: separate;
border-spacing: 0;
font-size: 1em;
@@ -65,15 +69,15 @@
th {
cursor: auto;
- background: #f9fafb;
+ // background: #f9fafb;
text-align: inherit;
- color: rgba(0, 0, 0, .87);
+ color: var(--ifm-table-head-color);
padding: 0.92857143em 0.78571429em;
vertical-align: inherit;
font-weight: 700;
text-transform: none;
border: none;
- border-right: 1px solid rgba(34, 36, 38, .15);
+ border-right:var(--ifm-table-border-width) solid
var(--ifm-table-border-color);
&:last-child {
border-right: none;
@@ -83,20 +87,22 @@
tbody {
&>tr:nth-of-type(odd) {
- background-color: #f9f9f9;
+ // background-color: #f9f9f9;
+ background-color: var(--ifm-table-stripe-background)
}
tr {
&:hover {
- background: rgba(0, 0, 0, .05) !important;
- color: rgba(0, 0, 0, .95) !important;
+ // background: rgba(0, 0, 0, .05) !important;
+ color: var(--ifm-table-head-color) !important;
cursor: pointer;
}
td {
border: none;
- border-top: 1px solid rgba(34, 36, 38, .15);
- border-right: 1px solid rgba(34, 36, 38, .15);
+ color: var(--ifm-table-cell-color);
+ border-top:var(--ifm-table-border-width) solid
var(--ifm-table-border-color);
+ border-right:var(--ifm-table-border-width) solid
var(--ifm-table-border-color);
&:last-child {
border-right: none;
diff --git a/src/pages/home/feature.jsx b/src/pages/home/feature.jsx
index 2bf2930..8bdce0c 100644
--- a/src/pages/home/feature.jsx
+++ b/src/pages/home/feature.jsx
@@ -7,12 +7,12 @@ export default function () {
const language = isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ?
'zh-CN' : 'en'
const dataSource = config?.[language];
return (
- <div className="section bg-light">
+ <div className="section">
<div className="container">
<div className="row text-center">
<div className="col-12">
- <div className="mb-5">
- <h2 className="h3 fw-bold">{dataSource.common.coreFeatures}</h2>
+ <div className="mb-5 pt-6">
+ <h2 className="article-title h3
fw-bold">{dataSource.common.coreFeatures}</h2>
<hr className="divider my-4 mx-auto" />
<p className="lead
text-muted">{dataSource.common.coreFeaturesDesc}</p>
</div>
@@ -20,7 +20,7 @@ export default function () {
{
dataSource.feature.map((feature, i) => (
<div className="col-md-4 col-6 px-4 px-md-3 cursor-pointer"
key={i} data-aos="fade-up" data-aos-delay={(i % 3) * 100}>
- <div className="feature-children p-4 mb-5 rounded-3 bg-white
shadow-sm hover-box-up">
+ <div className="feature-children p-4 mb-5 shadow-sm
hover-box-up">
<div className="text-primary text-center mb-3">
<div className="features-icon"><i
className={feature.icon}></i></div>
</div>
diff --git a/src/pages/home/hero.jsx b/src/pages/home/hero.jsx
index fe823c7..de7b405 100644
--- a/src/pages/home/hero.jsx
+++ b/src/pages/home/hero.jsx
@@ -26,12 +26,12 @@ export default function () {
<div className=" fw-bold mb-3">
<div className="d-flex flex-column align-items-start">
<div className='text-right' style={{ width: '100%' }}>
- <span className="badge bg-secondary-home fs-6
tag">Incubating</span>
+ <span className="badge incubating fs-6
tag">Incubating</span>
</div>
<span className='project_title'>Apache StreamPark</span>
</div>
</div>
- <p className="lead" style={{ lineHeight: '40px'
}}>{dataSource.slogan.description}</p>
+ <p className="desc lead" style={{ lineHeight: '40px'
}}>{dataSource.slogan.description}</p>
</div>
<a className="btn streampark-btn btn mt-30 ztop"
href="https://github.com/apache/incubator-streampark";
target="_blank">
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 0714a9c..2b78d03 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -1,5 +1,3 @@
-
-
@import url('/src/styles/variable.less');
@import url('/src/styles/base.less');
@import url('/src/css/animate.css');
@@ -7,7 +5,7 @@
@import url('/src/css/lineicons.min.css');
body {
- font-family: "Poppins", sans-serif;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
font-size: 1rem;
overflow-x: hidden;
}
@@ -25,7 +23,7 @@ h3,
h4,
h5,
h6 {
- color: #151e2e;
+ color: var(--ifm-color-secondary-contrast-foreground);
}
.m-0 {
@@ -102,21 +100,16 @@ h6 {
.streampark_video {
position: fixed;
- left:0;
- top:0;
+ left: 0;
+ top: 0;
width: 100%;
height: 100%;
- background: rgba(0,0,0,.7);
+ background: rgba(0, 0, 0, .7);
zIndex: 998
}
.top1 {
height: 180px;
- width: 100%;
- overflow: hidden;
- display: flex;
- align-content: center;
- position: absolute
}
.display_block {
@@ -329,7 +322,8 @@ img {
font-size: 1rem;
}
-.coverpage p, .downpage p {
+.coverpage p,
+.downpage p {
margin-top: 0;
margin-bottom: 1rem
}
@@ -345,25 +339,39 @@ img {
}
@media (min-width: 576px) {
- .container, .container-sm {
+
+ .container,
+ .container-sm {
max-width: 540px
}
}
@media (min-width: 768px) {
- .container, .container-md, .container-sm {
+
+ .container,
+ .container-md,
+ .container-sm {
max-width: 720px
}
}
@media (min-width: 992px) {
- .container, .container-lg, .container-md, .container-sm {
+
+ .container,
+ .container-lg,
+ .container-md,
+ .container-sm {
max-width: 1060px
}
}
@media (min-width: 1000px) {
- .container, .container-lg, .container-md, .container-sm, .container-xl {
+
+ .container,
+ .container-lg,
+ .container-md,
+ .container-sm,
+ .container-xl {
max-width: 1350px
}
}
@@ -726,7 +734,8 @@ img {
}
}
-.subscribe-form button:hover, .subscribe-form button:focus {
+.subscribe-form button:hover,
+.subscribe-form button:focus {
background-color: #3f43fd;
color: #ffffff;
}
@@ -784,13 +793,15 @@ img {
}
@media only screen and (max-width: 575px) {
+
.hero-slides .owl-prev,
.hero-slides .owl-next {
left: 30px;
}
}
-.hero-slides .owl-prev:hover, .hero-slides .owl-prev:focus,
+.hero-slides .owl-prev:hover,
+.hero-slides .owl-prev:focus,
.hero-slides .owl-next:hover,
.hero-slides .owl-next:focus {
border-color: #070a57;
@@ -813,6 +824,7 @@ img {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
+
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@@ -824,6 +836,7 @@ img {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
+
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@@ -885,6 +898,7 @@ hr {
-webkit-transform: scale(1);
transform: scale(1);
}
+
100% {
-webkit-transform: scale(3.5);
transform: scale(3.5);
@@ -897,6 +911,7 @@ hr {
-webkit-transform: scale(1);
transform: scale(1);
}
+
100% {
-webkit-transform: scale(3.5);
transform: scale(3.5);
@@ -923,6 +938,7 @@ hr {
-webkit-transform: scale(1);
transform: scale(1);
}
+
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
@@ -934,6 +950,7 @@ hr {
-webkit-transform: scale(1);
transform: scale(1);
}
+
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
@@ -1055,6 +1072,7 @@ hr {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
+
100% {
opacity: 0;
-webkit-transform: scale(1.25);
@@ -1068,6 +1086,7 @@ hr {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
+
100% {
opacity: 0;
-webkit-transform: scale(1.25);
@@ -1145,7 +1164,7 @@ hr {
position: relative;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: center;
min-width: 0;
word-wrap: break-word;
background-color: #ffffff;
@@ -1156,10 +1175,11 @@ hr {
margin-bottom: 30px;
transition: all .5s;
z-index: 2;
- cursor:pointer;
- .single_benifits{
- min-height:185px;
- }
+ cursor: pointer;
+
+ .single_benifits {
+ min-height: 185px;
+ }
}
.feature-item:hover {
@@ -1360,28 +1380,35 @@ hr {
transition-duration: 500ms;
}
-.single_work_step:hover::before, .single_work_step:focus::before {
+.single_work_step:hover::before,
+.single_work_step:focus::before {
color: #0d6efd;
right: -55%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
- .single_work_step:hover::before, .single_work_step:focus::before {
+
+ .single_work_step:hover::before,
+ .single_work_step:focus::before {
right: -70%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
- .single_work_step:hover::before, .single_work_step:focus::before {
+
+ .single_work_step:hover::before,
+ .single_work_step:focus::before {
right: -40%;
}
}
-.single_work_step:hover .step-icon i, .single_work_step:focus .step-icon i {
+.single_work_step:hover .step-icon i,
+.single_work_step:focus .step-icon i {
color: #0d6efd;
}
-.single_work_step:hover h5, .single_work_step:focus h5 {
+.single_work_step:hover h5,
+.single_work_step:focus h5 {
color: #0d6efd;
}
@@ -1409,6 +1436,7 @@ hr {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
+
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@@ -1420,6 +1448,7 @@ hr {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
+
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
@@ -1435,7 +1464,7 @@ hr {
height: 147px;
width: 3000px;
background-color: #fff;
- background-image: url("/static/home/mymen-bg.png") ;
+ background-image: url("/static/home/mymen-bg.png");
background-repeat: repeat-x;
}
@@ -1449,13 +1478,16 @@ hr {
.footer {
z-index: 1;
- &.footer--dark{
- background-color:rgb(29,37,61);
+
+ &.footer--dark {
+ background-color: rgb(29, 37, 61);
}
}
.feature-children {
min-height: 300px;
+ background-color: #fff;
+ border-radius: 4px;
}
.features-icon {
@@ -1586,6 +1618,7 @@ hr {
}
+
@media only screen and (min-width: 576px) and (max-width: 767px) {
.system_info {
padding-top: 40px;
@@ -1608,29 +1641,16 @@ hr {
margin-top: -50px;
}
-.main-page {
- margin-top: 120px;
-}
.system_info .project_title {
- font-family: -apple-system,BlinkMacSystemFont,Segoe
UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif
!important;
- font-size: 4rem;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
+ font-size: 4.5rem;
font-weight: 200;
line-height: 1;
padding-bottom: 8px;
color: #2e7fed;
}
-.system_info .incubating {
- color: #2e7fed;
- font-weight: 200;
- opacity: 1;
- display: inline-block;
- padding: .25em .4em;
- font-size: 75%;
- background-color: rgba(66,144,245,.15) !important;
-}
-
.system_info h5 {
font-weight: 500;
font-size: 1.1rem;
@@ -1825,27 +1845,27 @@ hr {
@keyframes LoaderCicle {
0% {
- width: 0;
- height: 0;
- opacity: 0
+ width: 0;
+ height: 0;
+ opacity: 0
}
10% {
- width: 10px;
- height: 10px;
- opacity: 1
+ width: 10px;
+ height: 10px;
+ opacity: 1
}
80% {
- width: 60px;
- height: 60px;
- opacity: 0.1
+ width: 60px;
+ height: 60px;
+ opacity: 0.1
}
100% {
- width: 70px;
- height: 70px;
- opacity: 0
+ width: 70px;
+ height: 70px;
+ opacity: 0
}
}
@@ -1902,26 +1922,62 @@ hr {
@keyframes LoaderCicle {
0% {
- width: 0;
- height: 0;
- opacity: 0
+ width: 0;
+ height: 0;
+ opacity: 0
}
10% {
- width: 10px;
- height: 10px;
- opacity: 1
+ width: 10px;
+ height: 10px;
+ opacity: 1
}
80% {
- width: 60px;
- height: 60px;
- opacity: 0.1
+ width: 60px;
+ height: 60px;
+ opacity: 0.1
}
100% {
- width: 70px;
- height: 70px;
- opacity: 0
+ width: 70px;
+ height: 70px;
+ opacity: 0
+ }
+}
+
+.incubating {
+ background-color: rgba(66, 144, 245, .15);
+
+ &:hover {
+ background-color: rgba(66, 144, 245, .25);
+ }
+
+ padding: .25em .7em;
+ color: #084696;
+ font-weight: 400;
+}
+
+.article-title {
+ color: var(--ifm-color-primary-contrast-foreground);
+}
+
+[data-theme="dark"] {
+ .footer--dark {
+ background-color: rgba(29, 37, 61, .5);
+ }
+
+ .feature-children {
+ background-color: #141618;
+ border: 1px solid #333;
+ }
+ .incubating {
+ background-color: hsla(0,0%,100%,.15);
+
+ &:hover {
+ background-color: hsla(0,0%,100%,.25);
+ }
+
+ color: #fff;
}
}
diff --git a/src/pages/home/performance.jsx b/src/pages/home/performance.jsx
index 57308da..443e4e6 100644
--- a/src/pages/home/performance.jsx
+++ b/src/pages/home/performance.jsx
@@ -12,12 +12,12 @@ export default function () {
const dataSource = config?.[language];
return (
- <div className="section py-6 py-md-7 bg-white">
+ <div className="section py-6 py-md-7">
<div className="container">
<div className="row text-center">
<div className="col-12">
<div className="mb-5">
- <h2 className="h3 fw-bold">{dataSource.common.development}</h2>
+ <h2 className="article-title h3
fw-bold">{dataSource.common.development}</h2>
<hr className="divider my-4 mx-auto" style={{ maxWidth: "10rem"
}} />
</div>
</div>
diff --git a/src/pages/home/performance.less b/src/pages/home/performance.less
index e51db2e..f2f44da 100644
--- a/src/pages/home/performance.less
+++ b/src/pages/home/performance.less
@@ -35,6 +35,7 @@
height: 4rem;
line-height: 4rem;
width: 4rem;
+ color: #333;
i{
font-size: 2rem;
}
diff --git a/src/pages/team/index.less b/src/pages/team/index.less
index c8d55e9..a12951f 100644
--- a/src/pages/team/index.less
+++ b/src/pages/team/index.less
@@ -11,7 +11,7 @@
.team_title {
font-size: 25px;
font-weight: 500;
- color: #0F1222;
+ color: var(--ifm-color-primary-contrast-foreground);
margin-top: 50px;
}
@@ -25,7 +25,7 @@
.desc {
font-size: 1rem;
- color: #4a4a4a;
+ color: var(--ifm-color-gray-700);
margin-left: 1.2rem;
}
@@ -152,6 +152,7 @@
font-size: 12px;
font-weight: 300;
margin-bottom: 7px;
+ color: #333;
.github-icon {
width: 20px;
height: 20px;
@@ -181,5 +182,5 @@
}
.bg-gray{
- background-color: #f5f9ff;
+ background-color: var(--ifm-color-primary-contrast-background);
}
diff --git a/src/pages/user/index.less b/src/pages/user/index.less
index 63e9e13..89eb9e0 100644
--- a/src/pages/user/index.less
+++ b/src/pages/user/index.less
@@ -19,7 +19,6 @@
font-size: 17px;
text-align: center;
margin-bottom: 20px;
- color: #2c3e50;
line-height: 40px;
}
diff --git a/src/styles/base.less b/src/styles/base.less
index 35d431d..7678d55 100644
--- a/src/styles/base.less
+++ b/src/styles/base.less
@@ -23,10 +23,11 @@ p {
body {
min-width: 1200px;
font-size: 14px;
- color: #4A4A4A;
+ color: var(--ifm-font-color-base);
+ color-scheme: var(--ifm-color-scheme);
line-height: 26px;
- background: #ffffff;
- font-family: "Poppins", sans-serif,-apple-system, BlinkMacSystemFont, Segoe
UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important
+ background-color: var(--ifm-background-color);
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica
Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI
Symbol, Noto Color Emoji !important
}
/*
@@ -197,4 +198,3 @@ a:visited {
}
}
}
-
