Skip to content

Commit

Permalink
chore: homepage style
Browse files Browse the repository at this point in the history
  • Loading branch information
@kuizuo
kuizuo committed Nov 14, 2022
1 parent 728ebd4 commit 75e4172
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 72 deletions.
1 change: 1 addition & 0 deletions src/components/Comment/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import {useThemeConfig} from '@docusaurus/theme-common';
import {useColorMode} from '@docusaurus/theme-common';
import BrowserOnly from '@docusaurus/BrowserOnly';
Expand Down
45 changes: 14 additions & 31 deletions src/components/Hero/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,12 @@ import CsdnIcon from '@site/static/icons/csdn.svg';
import CloudMusicIcon from '@site/static/icons/cloud-music.svg';
import ZhihuIcon from '@site/static/icons/zhihu.svg';
import TwitterIcon from '@site/static/icons/twitter.svg';
import Button from '../Button';

import styles from './styles.module.css';

function Hero() {
const trails = useTrail(5, {
from: { opacity: 0, transform: 'translate3d(0px, 3em, 0px)' },
const trails = useTrail(4, {
from: { opacity: 0, transform: 'translate3d(0px, 2em, 0px)' },
to: { opacity: 1, transform: 'translate3d(0px, 0px, 0px)' },
config: {
mass: 3,
Expand Down Expand Up @@ -68,21 +67,22 @@ function Hero() {
{`或许你需要{note}、{project}、{link}。`}
</Translate>
</animated.p>
<SocialLinks animatedProps={trails[4]} />
{
<animated.div style={trails[2]}>
<Button isLink href={'./about'}>
<Translate id="hompage.hero.text.introduce">自我介绍</Translate>
</Button>
</animated.div>
}
<SocialLinks style={trails[2]} />
<animated.div style={trails[3]}>
<a className={styles.intro} href={'./about'}>
<Translate id="hompage.hero.text.introduce">自我介绍</Translate>

</a>
</animated.div>
</div>
<div className={styles.bloghome__image}>
<HeroMain />
</div>
<HeroMainImage />
</animated.div>
);
}

export function SocialLinks({ animatedProps, ...props }) {
export function SocialLinks({ ...prop }) {
const { siteConfig } = useDocusaurusContext();
const { themeConfig } = siteConfig;
const socials = themeConfig.socials as {
Expand All @@ -97,7 +97,7 @@ export function SocialLinks({ animatedProps, ...props }) {
};

return (
<animated.div className={styles.social__links} style={animatedProps}>
<animated.div className={styles.social__links} {...prop}>
<a href="./rss.xml" target="_blank">
<RssIcon />
</a>
Expand All @@ -107,34 +107,17 @@ export function SocialLinks({ animatedProps, ...props }) {
<a href={socials.juejin} target="_blank">
<JuejinIcon />
</a>
{/* <a href='https://blog.csdn.net/kuizuo12' target='_blank'>
<CsdnIcon />
</a> */}
<a href={socials.qq} target="_blank">
<QqIcon />
</a>
{/* <a href='' target='_blank'>
<WxIcon />
</a> */}
<a href={socials.twitter} target="_blank">
<TwitterIcon />
</a>
<a href={socials.zhihu} target="_blank">
<ZhihuIcon />
</a>
{/* <a href={socials.cloudmusic} target="_blank">
<CloudMusicIcon />
</a> */}
</animated.div>
);
}

function HeroMainImage() {
return (
<div className={styles.bloghome__image}>
<HeroMain />
</div>
);
}

export default Hero;
36 changes: 31 additions & 5 deletions src/components/Hero/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
}

.bloghome__intro > p {
margin: 26px 0px 24px 0;
color: hsl(215, 19%, 48%);
margin: 26px 0 24px;
color: hsl(215deg 19% 48%);
/* text-shadow: 0 0 #8c99ab; */
font-size: 1.125rem;
text-align: justify;
Expand Down Expand Up @@ -108,7 +108,7 @@ html[data-theme='dark'] .bloghome__intro > p {
max-width: 300px;
align-items: center;
justify-content: space-between;
padding: 1em 0 2.5em 0;
padding: 1em 0;
z-index: 100;
position: relative;
}
Expand All @@ -129,7 +129,7 @@ html[data-theme='dark'] .bloghome__intro > p {
}

.social__links a:hover {
background-color: rgba(0, 120, 231, 0.1);
background-color: rgb(0 120 231 / 10%);
}

.social__links > *,
Expand Down Expand Up @@ -158,6 +158,26 @@ html[data-theme='dark'] .bloghome__intro > p {
top: 120%;
}

.intro {
display: inline-block;
color: white;
padding: 0.75em 20px;
margin-left: -2px;
font-weight: 600;
background: linear-gradient(
90deg,
var(--ifm-color-primary) 11.3%,
var(--ifm-color-primary-light) 161.54%
);
box-shadow: 0 0 32px rgb(0 105 165 / 35%);
border-radius: 7px;
}

.intro:hover {
color: white;
text-decoration: none;
}

@media (max-width: 1000px) {
.hero {
grid-template-columns: 1fr;
Expand All @@ -167,8 +187,9 @@ html[data-theme='dark'] .bloghome__intro > p {
/* background-position: center bottom;
background-size: 70vh; */
}

.bloghome__intro {
padding: 0em var(--ifm-spacing-horizontal);
padding: 0 var(--ifm-spacing-horizontal);
padding-top: 4em;
display: flex;
flex-direction: column;
Expand All @@ -194,14 +215,17 @@ html[data-theme='dark'] .bloghome__intro > p {
.hero {
height: auto;
}

.bloghome__image {
padding-top: 2em;
}

.bloghome__image svg {
width: 100%;
height: auto;
padding-left: 12px;
}

.bloghome__intro {
padding-top: 2em;
}
Expand All @@ -217,9 +241,11 @@ html[data-theme='dark'] .bloghome__intro > p {
from {
transform: rotateY(0deg);
}

50% {
transform: rotateY(360deg);
}

100% {
transform: rotateY(360deg);
}
Expand Down
76 changes: 40 additions & 36 deletions src/theme/BlogListPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function BlogPostGridItems({ items }: BlogPostItemsProps): JSX.Element {
);
}

function BlogRecommend(): JSX.Element {
function BlogRecommend({ isPaginated, isCardView }: { isPaginated: boolean, isCardView: boolean }): JSX.Element {
const globalData = useGlobalData();
const blogPluginData = globalData?.['docusaurus-plugin-content-blog']?.[
'default'
Expand All @@ -122,28 +122,47 @@ function BlogRecommend(): JSX.Element {
.sort((a, b) => (a.frontMatter.sticky as number) - (b.frontMatter.sticky as number))
.slice(0, 8);

if (recommendedPosts.length === 0){
return <></>
}

return <>
<ul className="blog__recommend">
{recommendedPosts.map((post) => (
<li className={clsx('card')} key={post.permalink}>
{post.description && (
<div className={clsx('card__image')}>
{post.frontMatter.image &&
<Image src={post.frontMatter.image!} alt={post.title} img={''} />
}
<div className="container-wrapper">
<div className="container padding-vert--sm transition" style={!isCardView ? { maxWidth: 1200 } : {}} >
{!isPaginated && (
<h2 className='blog__section-title'>
<Translate id="theme.blog.title.recommend">推荐阅读</Translate>
</h2>
)}
<div className="row">
<div className='col col--12'>
<div className="bloghome__posts">
<ul className="blog__recommend">
{recommendedPosts.map((post) => (
<li className={clsx('card')} key={post.permalink}>
{post.description && (
<div className={clsx('card__image')}>
{post.frontMatter.image &&
<Image src={post.frontMatter.image!} alt={post.title} img={''} />
}
</div>
)}
<div className="card__body">
<h4>
<Link href={post.permalink}>
{post.title}
</Link>
</h4>
<p>{post.description}</p>
</div>
</li>
))}
</ul>
</div>
)}
<div className="card__body">
<h4>
<Link href={post.permalink}>
{post.title}
</Link>
</h4>
<p>{post.description}</p>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
</>
}

Expand All @@ -165,22 +184,7 @@ function BlogListPageContent(props: Props) {
<BackToTopButton />

{/* 推荐阅读 */}
<div className="container-wrapper">
<div className="container padding-vert--sm transition" style={!isCardView ? { maxWidth: 1200 } : {}} >
{!isPaginated && (
<h2 className='blog__section-title'>
<Translate id="theme.blog.title.recommend">推荐阅读</Translate>
</h2>
)}
<div className="row">
<div className='col col--12'>
<div className="bloghome__posts">
<BlogRecommend />
</div>
</div>
</div>
</div>
</div>
<BlogRecommend isPaginated={isPaginated} isCardView={isCardView} />

{/* 最新博客 */}
<div className="container-wrapper">
Expand Down

0 comments on commit 75e4172

Please sign in to comment.