blog-fs/components/layouts/global-sidebar.module.css
2021-07-25 21:47:25 +08:00

55 lines
1.1 KiB
CSS

.wrapper {
@apply bg-green-400 text-white min-h-screen;
@apply fixed top-0 sm:left-0 right-0 bottom-0 sm:static -left-full;
@apply transition-all;
:global(.dark) & {
@apply bg-gray-800 text-gray-400;
}
&.focusOpen {
@apply left-0;
}
}
.sidebar {
@apply overflow-hidden flex flex-col fixed top-0;
@apply text-center shadow-2xl h-screen;
padding-top: 10vh;
}
.avatar {
@apply w-36 h-36 rounded-full;
@apply sm:w-16 sm:h-16;
@apply md:w-36 md:h-36;
@apply mx-auto md:my-8 flex-none;
:global(.dark) & {
@apply filter brightness-75;
}
}
.name {
@apply sm:text-base md:text-3xl text-3xl md:tracking-wide font-mono;
@apply md:my-8 my-4 flex-none select-all;
}
.nav {
@apply my-auto text-left self-center;
}
.navItem {
@apply leading-8 md:text-lg sm:text-base text-lg cursor-pointer my-2;
@apply tracking-widest;
small {
@apply text-xs md:inline hidden;
}
&:hover {
text-shadow: 0 0px 5px #abbf00;
}
}
.bio {
@apply text-sm text-opacity-70 text-white;
@apply my-4;
:global(.dark) & {
@apply text-gray-500;
}
}