This is an automated email from the ASF dual-hosted git repository.
yumeng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake-website.git
The following commit(s) were added to refs/heads/main by this push:
new 7eb59e8dd7 Adding animation on hover on arrows (#396)
7eb59e8dd7 is described below
commit 7eb59e8dd776c206f6af176c7942bb6f446745de
Author: Susmita Dey <[email protected]>
AuthorDate: Mon Jan 16 08:44:41 2023 +0530
Adding animation on hover on arrows (#396)
---
src/components/Sections/Components.tsx | 141 +++++++++++++++++++++++++--------
src/css/custom.css | 16 +++-
2 files changed, 119 insertions(+), 38 deletions(-)
diff --git a/src/components/Sections/Components.tsx
b/src/components/Sections/Components.tsx
index 26747ef913..ee661f19a4 100644
--- a/src/components/Sections/Components.tsx
+++ b/src/components/Sections/Components.tsx
@@ -1,73 +1,146 @@
import React from "react";
import ArrowRight from "@site/static/img/Homepage/arrow-right.svg";
-export const TextTitle = ({ children, className }: { children:
React.ReactNode, className?: string }) =>
- <span className="block font-inter
+export const TextTitle = ({
+ children,
+ className,
+}: {
+ children: React.ReactNode;
+ className?: string;
+}) => (
+ <span
+ className="block font-inter
text-heading2 text-primary-800 font-semibold mb-[16px]
- sm:text-heading4 sm:mb-2 sm:mt-5">
+ sm:text-heading4 sm:mb-2 sm:mt-5"
+ >
{children}
</span>
+);
-export const H3Title = ({ children }: { children: React.ReactNode }) =>
- <span className="block font-inter
+export const H3Title = ({ children }: { children: React.ReactNode }) => (
+ <span
+ className="block font-inter
text-heading3 text-primary-800 font-semibold mb-[24px]
- sm:text-heading4">
+ sm:text-heading4"
+ >
{children}
</span>
+);
-export const TextDescription = ({ children }: { children: React.ReactNode }) =>
- <div className="font-inter
+export const TextDescription = ({
+ children,
+}: {
+ children: React.ReactNode;
+}) => (
+ <div
+ className="font-inter
text-label18 text-neutral-500
- sm:text-label16 sm:text-start">
+ sm:text-label16 sm:text-start"
+ >
{children}
</div>
+);
-export const TextLink = ({ link, children }: { link: string, children:
React.ReactNode }) =>
- <a className="absolute sm:static mobile:static text-label16
text-secondary-500 flex items-center mt-[16px] mb-[8px]
- sm:justify-center hover:text-secondary-500 bottom-[10px]"
+export const TextLink = ({
+ link,
+ children,
+}: {
+ link: string;
+ children: React.ReactNode;
+}) => (
+ <a
+ className="absolute sm:static mobile:static text-label16
text-secondary-500 flex items-center mt-[16px] mb-[8px]
+ sm:justify-center hover:text-secondary-500 bottom-[10px] rightArrow"
target="_blank"
- href={link}>{children}
- <ArrowRight width={20} height={20} />
+ href={link}
+ >
+ {children}
+ <ArrowRight width={20} height={20} className="moveArrow" />
</a>
+);
-export const TextSection = ({ children }: { children: React.ReactNode }) =>
- <div className={`text-start sm:text-center w-auto sm:w-auto lg:w-[300px]
xl:w-[332px]`}>
+export const TextSection = ({ children }: { children: React.ReactNode }) => (
+ <div
+ className={`text-start sm:text-center w-auto sm:w-auto lg:w-[300px]
xl:w-[332px]`}
+ >
{children}
</div>
+);
-export const SvgImg = ({ svg: Svg }: { svg:
React.ComponentType<React.SVGProps<SVGSVGElement>> }) =>
- <div className="
+export const SvgImg = ({
+ svg: Svg,
+}: {
+ svg: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}) => (
+ <div
+ className="
w-auto h-auto
- " >
+ "
+ >
<Svg role="img" />
</div>
-export const SectionImg = ({ src }: { src: string }) => <img src={src} alt=""
className="
+);
+export const SectionImg = ({ src }: { src: string }) => (
+ <img
+ src={src}
+ alt=""
+ className="
w-[238px] h-[180px]
mb-[48px] sm:mb-[0] mobile:mb-[0]
sm:w-[240px] sm:h-[182px]
mobile:w-[200px] mobile:h-[150px]
-" />
+"
+ />
+);
-export const InlineLink = ({ link, children }: { link: string, children:
React.ReactNode }) =>
- <a className="text-primary-500" target='_blank'
- href={link}>{children}
+export const InlineLink = ({
+ link,
+ children,
+}: {
+ link: string;
+ children: React.ReactNode;
+}) => (
+ <a className="text-primary-500" target="_blank" href={link}>
+ {children}
</a>
+);
-export const BreakLine = () => <div className="
+export const BreakLine = () => (
+ <div
+ className="
h-[2px] bg-neutral-100
- " />
+ "
+ />
+);
-export const Sup = ({ children, title }: { children: React.ReactNode, title:
string }) =>
- <span className="w-[100px] flex flex-col items-center
- sm:w-[60px]">
+export const Sup = ({
+ children,
+ title,
+}: {
+ children: React.ReactNode;
+ title: string;
+}) => (
+ <span
+ className="w-[100px] flex flex-col items-center
+ sm:w-[60px]"
+ >
{children}
- <span className="font-inter text-label14 text-center
+ <span
+ className="font-inter text-label14 text-center
flex h-[24px] text-neutral-500 mt-[4px]
sm:text-[12px] sm:leading-[12px] sm:mt-1
- ">{title}</span>
+ "
+ >
+ {title}
+ </span>
</span>
-export const SupImg = ({ src }: { src: string }) =>
- <img src={src} className='
+);
+export const SupImg = ({ src }: { src: string }) => (
+ <img
+ src={src}
+ className="
w-[80px] h-[80px]
sm:w-[48px] sm:h-[48px]
- '/>
\ No newline at end of file
+ "
+ />
+);
diff --git a/src/css/custom.css b/src/css/custom.css
index cb4427887b..ab5dae3c9b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -31,10 +31,18 @@
padding: 0 var(--ifm-pre-padding);
}
-html[data-theme='dark'] .docusaurus-highlight-code-line {
+html[data-theme="dark"] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
+.rightArrow .moveArrow {
+ display: inline-block;
+ transition: 0.1s ease-in;
+}
+.rightArrow:hover .moveArrow {
+ transform: translate(50%);
+}
+
@media screen and (min-width: 576px) {
.info {
display: none;
@@ -48,7 +56,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
@apply hover:no-underline hover:text-neutral-invert;
@apply text-neutral-invert text-[16px] leading-[20px] font-semibold;
@apply rounded-[10px] sm:text-[14px];
- @apply shadow-sm shadow-primary/20 ;
+ @apply shadow-sm shadow-primary/20;
}
.section-title {
@@ -67,6 +75,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
}
.use-case-card {
- background: linear-gradient(105.48deg, #DBE4FD 16.79%, #F0F4FE 93.34%);
+ background: linear-gradient(105.48deg, #dbe4fd 16.79%, #f0f4fe 93.34%);
}
-}
\ No newline at end of file
+}
