Modify css

This commit is contained in:
DefectingCat
2022-01-14 21:34:16 +08:00
parent 7db40c4c08
commit c7be918c34
3 changed files with 30 additions and 52 deletions

View File

@ -4,9 +4,10 @@ import { FiHome, FiArchive, FiUser, FiSearch } from 'react-icons/fi';
import UseAnimations from 'react-useanimations';
import menu3 from 'react-useanimations/lib/menu3';
import { IconType } from 'react-icons';
import dynamic from 'next/dynamic';
import NavAvatar from 'components/nav/NavAvatar';
import NavMenuItem from 'components/nav/NavMenuItem';
const NavAvatar = dynamic(() => import('components/nav/NavAvatar'));
const NavMenuItem = dynamic(() => import('components/nav/NavMenuItem'));
export type MenuItem = {
id: number;
@ -63,6 +64,8 @@ const NavBar: FC = () => {
>
<div className="flex justify-between">
<NavAvatar />
{/* Mobile menu button */}
<div className="cursor-pointer md:hidden" ref={iconRef}>
<UseAnimations
reverse={menuIsOpen}
@ -74,6 +77,7 @@ const NavBar: FC = () => {
</div>
</div>
{/* Menus */}
<div
className={cn(
{ hidden: !menuIsOpen },

View File

@ -2,8 +2,32 @@
@tailwind components;
@tailwind utilities;
* {
scroll-behavior: smooth;
}
@layer base {
body {
@apply bg-bluish-gray;
font-family: "-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif";
}
/* 滚动槽 */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track {
border-radius: 3px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
}
::-webkit-scrollbar-track-piece {
background: 0 0;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
@apply bg-gray-400;
border-radius: 3px;
box-shadow: inset 0 0 10px rgba(185, 69, 69, 0.2);
}
}

View File

@ -25,12 +25,10 @@ body.chakra-ui-dark {
}
#write {
/* font-family: "Quicksand",'Arial Hebrew Scholar'; */
font-size: 16px;
color: var(--text-color);
}
/* TOC */
#table-of-contents {
font-size: 1.6rem;
font-weight: normal;
@ -58,7 +56,6 @@ body.chakra-ui-dark {
}
#table-of-contents + ul li::before {
content: ' - ';
/* font-family: 'Quicksand-bold'; */
position: absolute;
font-weight: bold;
font-size: 2rem;
@ -67,7 +64,6 @@ body.chakra-ui-dark {
}
#table-of-contents + ul li li::before {
content: ' · ';
/* font-family: 'Quicksand-bold'; */
position: absolute;
font-size: 2rem;
font-weight: bold;
@ -78,18 +74,10 @@ body.chakra-ui-dark {
width: 0;
}
/*#write pre.md-meta-block::selection {
text-shadow: none;
background: #B8A6D9;
color: hsla(81, 40%, 75%, 1);
}*/
#write a {
color: var(--chakra-colors-teal-500);
/* margin: 0 2px; */
}
/*headings*/
#write h1 {
font-size: 3.25rem;
font-weight: 500;
@ -110,7 +98,6 @@ body.chakra-ui-dark {
letter-spacing: 0.02em;
line-height: 2rem;
padding: 1rem 0;
/*text-transform: uppercase;*/
color: var(--heading-color);
}
@ -119,8 +106,6 @@ body.chakra-ui-dark {
font-weight: normal;
letter-spacing: 0.02em;
line-height: 3rem;
/*text-transform: uppercase;*/
/* margin-left: 1rem; */
color: var(--heading-color);
}
@ -129,32 +114,24 @@ body.chakra-ui-dark {
letter-spacing: 0.02em;
font-size: 1.25rem;
line-height: 2rem;
/*text-transform: uppercase;*/
margin-top: 1rem;
/* margin-left: 3rem; */
color: var(--heading-color);
}
#write h5 {
font-size: 1.15rem;
/*text-transform: uppercase;*/
color: var(--heading-color);
/* margin-left: 3.5rem; */
}
#write h6 {
font-size: 1rem;
/*text-transform: uppercase;*/
/* margin-left: 4rem; */
color: var(--heading-color);
}
#write p {
margin: 1rem 0;
/* line-height: 1.7rem; */
}
/*blockquote*/
#write blockquote::before {
content: '';
position: absolute;
@ -179,11 +156,8 @@ body.chakra-ui-dark {
word-spacing: 0.06em;
margin: 0.5rem 0;
padding: 1rem calc(0.5rem + 5.13px);
/*border-left: solid .5rem var(--select-text-bg-color);*/
/*border-radius: .5rem 1rem 1rem .5rem;*/
background-color: var(--block-bg-color);
line-height: 1.6;
/*box-shadow: 3px 3px 3px 1px var(--shadow-color);*/
border-radius: 0 calc(0.5rem + 0.25%) calc(0.5rem + 0.25%) 0;
}
@ -201,7 +175,6 @@ body.chakra-ui-dark {
left: 0;
bottom: 0;
right: 0;
/*box-shadow: -3px 3px 3px 1px var(--shadow-color);*/
z-index: 3;
}
@ -214,8 +187,6 @@ body.chakra-ui-dark {
line-height: unset;
}
/*list*/
#write ul,
#write ol {
padding-left: 30px;
@ -230,7 +201,6 @@ body.chakra-ui-dark {
#write ul li::before {
content: ' - ';
/* font-family: 'Quicksand-bold'; */
position: absolute;
font-weight: bold;
font-size: 2rem;
@ -240,7 +210,6 @@ body.chakra-ui-dark {
#write ul li li::before {
content: ' · ';
/* font-family: 'Quicksand-bold'; */
position: absolute;
font-size: 2rem;
font-weight: bold;
@ -248,7 +217,6 @@ body.chakra-ui-dark {
transform: translate(-1rem, -0.75rem);
}
/*task list*/
#write .md-task-list-item {
transition: all 0.2s ease-in-out 0s;
transform: translateX(1.4rem);
@ -273,7 +241,6 @@ body.chakra-ui-dark {
content: '';
position: absolute;
transform: translate(calc(-1.1rem - 10px), calc(-1rem));
/*transform: translate(0px,calc(-1rem));*/
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
@ -282,13 +249,11 @@ body.chakra-ui-dark {
background-clip: content-box;
box-sizing: border-box;
border: solid 0.15em #c3c4d0;
/*background-color: deepskyblue;*/
}
#write input[type='checkbox']:checked::before {
content: '';
position: absolute;
/*transform: translate(-10px,70%);*/
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
@ -335,13 +300,11 @@ body.chakra-ui-dark {
background-color: var(--code-bg);
}
/*mathjax-block*/
#write mjx-container {
font-size: 26px;
font-family: 'Apple Symbols';
}
/*table*/
#write table {
width: 100%;
border-collapse: collapse;
@ -349,28 +312,16 @@ body.chakra-ui-dark {
}
#write th {
/* font-family: Quicksand-bold; */
background-color: var(--code-bg);
}
/* #write tbody tr:nth-of-type(2n + 1) {
background-color: var(--code-bg);
} */
#write td,
#write th {
position: relative;
border: solid 1px var(--code-border-color);
/* -webkit-user-modify: read-write; */
padding: 0.8em 0.5rem;
}
/*horizon rules*/
/* #write hr {
border-top: solid 1px #eee;
border-bottom: solid 1px #eee;
} */
#write mark {
color: #fff;
background-color: rgba(231, 153, 176, 0.68);
@ -380,7 +331,6 @@ body.chakra-ui-dark {
}
@media print {
/* add styles here */
#write input[type='checkbox']::before {
display: none;
}