This is an automated email from the ASF dual-hosted git repository.
jeffreyh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new 56dc9d75325 fix:annoucementbar style (#2203)
56dc9d75325 is described below
commit 56dc9d753253d5cf6a257813221d51cdf56254f6
Author: yangon <[email protected]>
AuthorDate: Tue Mar 18 21:31:23 2025 +0800
fix:annoucementbar style (#2203)
---
docusaurus.config.js | 10 +++--
src/pages/events/index.tsx | 18 +++++++--
src/pages/index.tsx | 16 ++++----
src/scss/components/navbar.scss | 9 +++--
src/theme/AnnouncementBar/styles.module.css | 58 ++++++++++++++++------------
static/images/events/date-icon.png | Bin 0 -> 566 bytes
static/images/events/event-1.png | Bin 0 -> 5377 bytes
static/images/events/event-1.svg | 15 -------
static/images/icon/slack-hover.png | Bin 0 -> 1932 bytes
static/images/icon/slack.png | Bin 0 -> 1680 bytes
static/images/icon/slack.svg | 14 -------
11 files changed, 68 insertions(+), 72 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 1a51a5dcc2e..8e2ae15a9d1 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -204,10 +204,12 @@ const config = {
},
announcementBar: {
id: 'join_us',
- content: `<div style="display:flex; width: 100%; align-items:
center; justify-content: center; margin-left: 4px; "><img style="width: 19px;
height: 19px; margin-right: 3px;" src="/images/nav-star.svg"><span
style="color:#52CAA3;font-size:0.875rem;font-weight:700;line-height:1rem;
margin-right:0.675rem;">NEW</span>
- <a
href="https://www.linkedin.com/events/7303775032810356736/comments/";
target="_blank" style="text-decoration: none;">
- <p>Join us live on March 20 to deep dive into the Apache Doris
2025 Roadmap ! <span
style="margin-left:0.675rem;color:#52CAA3;font-size:0.875rem;line-height:1rem;font-weight:700;letter-spacing:0.28px;">Register
Now -></span>
- </p> </a></div>`,
+ content: `<a
href="https://www.linkedin.com/events/7303775032810356736/comments/";
target="_blank" style="display:flex; width: 100%; align-items: center;
justify-content: center; margin-left: 4px; text-decoration: none;">
+ <img style="width: 19px; height: 19px; margin-right: 3px;"
src="/images/nav-star.svg">
+ <span
style="color:#52CAA3;font-size:0.875rem;font-weight:700;line-height:1rem;
margin-right:0.675rem; text-decoration: none;">NEW</span>
+ <span>Join us live on March 20 to deep dive into the Apache
Doris 2025 Roadmap !</span>
+ <p
style="margin-left:0.675rem;color:#52CAA3;font-size:0.875rem;line-height:1rem;font-weight:700;letter-spacing:0.28px;">Register
Now -></p>
+ </a>`,
textColor: '#4C576C',
isCloseable: false,
},
diff --git a/src/pages/events/index.tsx b/src/pages/events/index.tsx
index bb4f376af48..97ca8730e8d 100644
--- a/src/pages/events/index.tsx
+++ b/src/pages/events/index.tsx
@@ -2,7 +2,6 @@ import React from 'react';
import Layout from '../../theme/Layout';
import Link from '@docusaurus/Link';
import clsx from 'clsx';
-import Events1Icon from '@site/static/images/events/event-1.svg';
import DateIcon from '@site/static/images/events/date-icon.svg';
import AddressIcon from '@site/static/images/events/address-icon.svg';
import ArrowDown from '@site/static/images/events/arrow-down.svg';
@@ -42,7 +41,14 @@ const EVENTS_PAGE_DATA = {
address: 'Virtual',
description: 'Join us as we dive into the key development
directions of Apache Doris in 2025 !',
status: 'Upcoming',
- img: <Events1Icon />,
+ img: (
+ <img
+ alt="address icon"
+ width={64}
+ height={64}
+
src={`${require('@site/static/images/events/event-1.png').default}`}
+ />
+ ),
link:
'https://www.linkedin.com/events/7303775032810356736/comments/',
},
],
@@ -82,7 +88,13 @@ export default function Events() {
<div className="mb-4 text-[1.25rem]/[2rem] font-semibold
text-[#000]">{data.detailTitle}</div>
<p className="line-clamp-2 mb-4 text-[#1D1D1D]
text-[0.875rem]/[1.375rem]">{data.description}</p>
<p className="mb-[0.675rem] flex items-center
text-[#4C576C] text-[0.875rem]/[1.375rem]">
- <DateIcon className="inline mr-2" />
+ <img
+ alt="date icon"
+ width={16}
+ className="inline mr-2"
+ height={16}
+
src={`${require('@site/static/images/events/date-icon.png').default}`}
+ />
{data.date}
</p>
<p className="text-[#4C576C] flex items-center
text-[0.875rem]/[1.375rem]">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b1e261d9a8a..095774b197a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -78,15 +78,17 @@ export default function Home(): JSX.Element {
onMouseLeave={() => {
document.getElementById('event-star-icon').firstChild.style.fill = '#636CDF';
}}
- className="rounded-full group w-[43.125rem] mx-auto flex py-4
px-[2.25rem] items-center justify-center"
+ className="lg:rounded-full rounded-[1.625rem] text-center
group lg:w-[46.375rem] mx-auto lg:flex-row flex-col flex py-4 px-[2.25rem]
items-center justify-center"
>
- <HomeEvenStarIcon id="event-star-icon" />
- <span className="ml-[3px] group-hover:text-[#444FD9] font-bold
text-[#636CDF] text-[0.875rem]/[1rem]">
- NEW
- </span>
- <span className="ml-[0.75rem] group-hover:text-[#444FD9]
text-[1rem]/[1rem] text-[#000]">
+ <div className="lg:mb-0 mb-4 flex items-center">
+ <HomeEvenStarIcon id="event-star-icon" />
+ <span className="ml-[3px] group-hover:text-[#444FD9]
font-bold text-[#636CDF] text-[0.875rem]/[1rem]">
+ NEW
+ </span>
+ </div>
+ <p className="lg:ml-[0.75rem] group-hover:text-[#444FD9]
text-[1rem]/[1rem] text-[#000]">
Join us live on March 20 to deep dive into the Apache
Doris 2025 Roadmap !
- </span>
+ </p>
</Link>
),
bannerImg: require('@site/static/images/home-banner.png').default,
diff --git a/src/scss/components/navbar.scss b/src/scss/components/navbar.scss
index 03602ee183e..9c1fa725c09 100644
--- a/src/scss/components/navbar.scss
+++ b/src/scss/components/navbar.scss
@@ -147,15 +147,16 @@
}
.header-right-button-slack {
- min-width: 2.25rem;
+ min-width: 1.625rem;
padding-left: 2.25rem;
- height: 2.25rem;
- background: url('@site/static/images/icon/slack.svg') no-repeat
left center;
+ height: 1.625rem;
+ background: url('@site/static/images/icon/slack.png') no-repeat
left center;
background-size: contain;
position: relative;
margin-left: 1rem;
&:hover {
- opacity: 0.8;
+ background: url('@site/static/images/icon/slack-hover.png')
no-repeat left center;
+ background-size: contain;
}
}
diff --git a/src/theme/AnnouncementBar/styles.module.css
b/src/theme/AnnouncementBar/styles.module.css
index ba2caac2dcc..f2371e60d77 100644
--- a/src/theme/AnnouncementBar/styles.module.css
+++ b/src/theme/AnnouncementBar/styles.module.css
@@ -1,15 +1,15 @@
:root {
- --docusaurus-announcement-bar-height: auto;
+ --docusaurus-announcement-bar-height: auto;
}
.announcementBar {
- display: flex;
- align-items: center;
- height: var(--docusaurus-announcement-bar-height);
- background: linear-gradient(0deg, #F7F9FE 0%, #F7F9FE 100%), #FFF;
- color: var(--ifm-color-black);
+ display: flex;
+ align-items: center;
+ height: var(--docusaurus-announcement-bar-height);
+ background: linear-gradient(0deg, rgba(247, 249, 254, 0.8) 0%, rgba(247,
249, 254, 0.8) 100%), #fff;
+ color: var(--ifm-color-black);
- /*
+ /*
Unfortunately we can't make announcement bar render above the navbar
IE need to use border-bottom instead of shadow
See https://github.com/facebookincubator/infima/issues/275
@@ -17,39 +17,47 @@
box-shadow: var(--ifm-global-shadow-lw);
z-index: calc(var(--ifm-z-index-fixed) + 1);
*/
- border-bottom: 1px solid var(--ifm-color-emphasis-100);
+ border-bottom: 1px solid var(--ifm-color-emphasis-100);
}
html[data-announcement-bar-initially-dismissed='true'] .announcementBar {
- display: none;
+ display: none;
}
.announcementBarPlaceholder {
- flex: 0 0 10px;
+ flex: 0 0 10px;
}
.announcementBarClose {
- flex: 0 0 30px;
- align-self: stretch;
+ flex: 0 0 30px;
+ align-self: stretch;
}
.announcementBarContent {
- flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
+.announcementBarContent:hover p {
+ text-decoration: underline !important;
+}
+
+.announcementBarContent > a:active {
+ background: linear-gradient(0deg, rgba(247, 249, 254, 0.8) 0%, rgba(247,
249, 254, 0.8) 100%), #fff !important;
}
@media print {
- .announcementBar {
- display: none;
- }
+ .announcementBar {
+ display: none;
+ }
}
@media (min-width: 997px) {
- :root {
- --docusaurus-announcement-bar-height: 40px;
- }
-
- .announcementBarPlaceholder,
- .announcementBarClose {
- flex-basis: 50px;
- }
-}
\ No newline at end of file
+ :root {
+ --docusaurus-announcement-bar-height: 40px;
+ }
+
+ .announcementBarPlaceholder,
+ .announcementBarClose {
+ flex-basis: 50px;
+ }
+}
diff --git a/static/images/events/date-icon.png
b/static/images/events/date-icon.png
new file mode 100644
index 00000000000..80b58995e2f
Binary files /dev/null and b/static/images/events/date-icon.png differ
diff --git a/static/images/events/event-1.png b/static/images/events/event-1.png
new file mode 100644
index 00000000000..e59174533ec
Binary files /dev/null and b/static/images/events/event-1.png differ
diff --git a/static/images/events/event-1.svg b/static/images/events/event-1.svg
deleted file mode 100644
index cc8774e4951..00000000000
--- a/static/images/events/event-1.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none"
xmlns="http://www.w3.org/2000/svg";>
-<g clip-path="url(#clip0_81_4904)">
-<foreignObject x="2.91195" y="41.547" width="57.2005" height="27.73"><div
xmlns="http://www.w3.org/1999/xhtml";
style="backdrop-filter:blur(2.54px);clip-path:url(#bgblur_1_81_4904_clip_path);height:100%;width:100%"></div></foreignObject><path
data-figma-bg-blur-radius="5.08805" d="M23.7718 47.635H9.98235C9.43981 47.635
9 48.0748 9 48.6174V62.2066C9 62.7491 9.43981 63.1889 9.98235
63.1889H25.3081H38.78H53.0421C53.5847 63.1889 54.0245 62.7491 54.0245
62.2066V48.6174C54.0245 48.0748 53.5847 [...]
-<foreignObject x="3.91195" y="-5.08805" width="55.2005" height="65.0241"><div
xmlns="http://www.w3.org/1999/xhtml";
style="backdrop-filter:blur(2.54px);clip-path:url(#bgblur_2_81_4904_clip_path);height:100%;width:100%"></div></foreignObject><path
data-figma-bg-blur-radius="5.08805" d="M46.7225 38.0775L31.5122 53.4273L16.302
38.0775C13.2933 35.0404 11.2436 31.1701 10.4133 26.9555C9.58299 22.7408 10.0098
18.3725 11.6393 14.4031C13.2688 10.4338 16.0274 7.04267 19.5648 4.65752C23.1021
2.27245 [...]
-<foreignObject x="15.912" y="6.91195" width="31.0045" height="31.0045"><div
xmlns="http://www.w3.org/1999/xhtml";
style="backdrop-filter:blur(2.54px);clip-path:url(#bgblur_3_81_4904_clip_path);height:100%;width:100%"></div></foreignObject><circle
data-figma-bg-blur-radius="5.08805" cx="31.4142" cy="22.4142" r="9.41421"
stroke="#52CAA3" stroke-width="2"/>
-</g>
-<defs>
-<clipPath id="bgblur_1_81_4904_clip_path" transform="translate(-2.91195
-41.547)"><path d="M23.7718 47.635H9.98235C9.43981 47.635 9 48.0748 9
48.6174V62.2066C9 62.7491 9.43981 63.1889 9.98235
63.1889H25.3081H38.78H53.0421C53.5847 63.1889 54.0245 62.7491 54.0245
62.2066V48.6174C54.0245 48.0748 53.5847 47.635 53.0421
47.635H37.7164H23.7718Z"/>
-</clipPath><clipPath id="bgblur_2_81_4904_clip_path"
transform="translate(-3.91195 5.08805)"><path d="M46.7225 38.0775L31.5122
53.4273L16.302 38.0775C13.2933 35.0404 11.2436 31.1701 10.4133 26.9555C9.58299
22.7408 10.0098 18.3725 11.6393 14.4031C13.2688 10.4338 16.0274 7.04267 19.5648
4.65752C23.1021 2.27245 27.2598 1 31.5122 1C35.7647 1 39.9224 2.27245 43.4597
4.65752C46.9971 7.04267 49.7557 10.4338 51.3852 14.4031C53.0147 18.3725 53.4415
22.7408 52.6112 26.9555C51.7809 31.1701 49.7311 [...]
-</clipPath><clipPath id="bgblur_3_81_4904_clip_path"
transform="translate(-15.912 -6.91195)"><circle cx="31.4142" cy="22.4142"
r="9.41421"/>
-</clipPath><clipPath id="clip0_81_4904">
-<rect width="64" height="64" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/static/images/icon/slack-hover.png
b/static/images/icon/slack-hover.png
new file mode 100644
index 00000000000..2431c3b1df1
Binary files /dev/null and b/static/images/icon/slack-hover.png differ
diff --git a/static/images/icon/slack.png b/static/images/icon/slack.png
new file mode 100644
index 00000000000..2e07fc75f47
Binary files /dev/null and b/static/images/icon/slack.png differ
diff --git a/static/images/icon/slack.svg b/static/images/icon/slack.svg
deleted file mode 100644
index 1119b7f550e..00000000000
--- a/static/images/icon/slack.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
-<mask id="mask0_2084_1076" style="mask-type:alpha" maskUnits="userSpaceOnUse"
x="3" y="3" width="30" height="30">
-<rect x="3.5" y="3.5" width="29" height="29" fill="url(#pattern0)"/>
-</mask>
-<g mask="url(#mask0_2084_1076)">
-<rect x="3.5" y="3.5" width="29" height="29" fill="#1D1D1D"/>
-</g>
-<defs>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1"
height="1">
-<use xlink:href="#image0_2084_1076" transform="translate(0.025 -0.178571)
scale(0.00892857)"/>
-</pattern>
-<image id="image0_2084_1076" width="400" height="146"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAACSCAYAAABrAJxzAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAABkKADAAQAAAABAAAAkgAAAACqre8JAABAAElEQVR4Ae2dCZgcVbn+u7onCUsgCRBA1siikpAAhk1CYCIq+yIahKhcFFyvj/e6K2uzyr0XEdy3CyiyZUTZFxUyyI5EIED08mdJ2CFkgQAJyUzX//2drm+mpjNLd3V19Uxyvud5+5w6dc53vvOe5atTVd2dy3nxDHgGPAOeAc+AZ8Az4BnwDHgGPAOeAc+AZ8Az4BnwDHgGPAOeAc+AZ8Az4BnwDHgGPAOeAc+A
[...]
-</defs>
-</svg>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
