Ivan/blog-fs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: dark mode style.

Browse Source
This commit is contained in:
Ivan Li
2021-05-02 13:05:12 +08:00
parent 4e14860d34
commit d3301da0ad
4 changed files with 75 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/layouts/global-layout.module.css
View File

@@ -1,15 +1,24 @@
.sidebar {
.wrapper {
@apply bg-green-400 text-white;
@apply overflow-hidden flex flex-col;
@apply text-center;
:global(.dark) & {
@apply bg-gray-800 text-gray-400;
}
}
.sidebar {
@apply overflow-hidden flex flex-col fixed top-0;
@apply text-center shadow-2xl;
height: 100vh;
padding-top: 10vh;
}
.avatar {
@apply md:w-36 md:h-36 rounded-full;
@apply w-16 h-16;
@apply md:w-36 md:h-36 rounded-full;
@apply mx-auto md:my-8 flex-none;
:global(.dark) & {
@apply filter brightness-75;
}
}
.name {
@@ -17,10 +26,14 @@
@apply md:my-8 my-4 flex-none select-all;
}
.nav {
@apply my-auto;
@apply my-auto text-left self-center;
}
.navItem {
@apply leading-8 md:text-lg cursor-pointer my-1;
@apply leading-8 md:text-lg cursor-pointer my-2;
@apply tracking-widest;
small {
@apply text-xs md:inline hidden;
}
&:hover {
text-shadow: 0 0px 5px #abbf00;
}
@@ -28,4 +41,8 @@
.bio {
@apply text-sm text-opacity-70 text-white;
@apply my-4;
:global(.dark) & {
@apply text-gray-500;
}
}

57
components/layouts/global-sidebar.tsx
View File

@@ -13,29 +13,40 @@ interface Props {
export const GlobalSidebar: FC<Props> = ({className}) => {
return (
<aside className={classnames(className, styles.sidebar)}>
<img className={styles.avatar} src="/images/avatar.png" />
<h2 className={styles.name}>{fullName}</h2>
<div className={classnames(className, styles.wrapper)}>
<aside className={classnames(className, styles.sidebar)}>
<img className={styles.avatar} src="/images/avatar.png" />
<h2 className={styles.name}>{fullName}</h2>
<nav className={styles.nav}>
<ul>
<Link href="/">
<li className={styles.navItem}>文章</li>
</Link>
<Link href="/tags">
<li className={styles.navItem}>标签</li>
</Link>
<Link href="/about">
<li className={styles.navItem}>关于</li>
</Link>
</ul>
</nav>
<footer className={classnames(styles.bio, "md:block hidden")}>
{"“人造的身体，借来的心”"}
</footer>
<footer className={classnames(styles.bio, "md:hidden block")}>
{"好挤 (#`O′)"}
</footer>
</aside>
<nav className={styles.nav}>
<ul>
<Link href="/">
<li className={styles.navItem}>
文章
<small> / ARTICLES</small>
</li>
</Link>
<Link href="/tags">
<li className={styles.navItem}>
标签
<small> / TAGS</small>
</li>
</Link>
<Link href="/about">
<li className={styles.navItem}>
关于
<small> / ABOUT</small>
</li>
</Link>
</ul>
</nav>
<footer className={classnames(styles.bio, "md:block hidden")}>
{"“人造的身体，借来的心”"}
</footer>
<footer className={classnames(styles.bio, "md:hidden block")}>
{"好挤 (#`O′)"}
</footer>
</aside>
</div>
);
};