mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-16 09:11:38 +00:00
Modify css
This commit is contained in:
@ -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 },
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Reference in New Issue
Block a user