101 lines
1.5 KiB
TypeScript
101 lines
1.5 KiB
TypeScript
import styled from "styles"
|
|
|
|
export default function CodeDocs({ isHidden }: { isHidden: boolean }) {
|
|
return (
|
|
<StyledDocs isHidden={isHidden}>
|
|
<h2>Docs</h2>
|
|
</StyledDocs>
|
|
)
|
|
}
|
|
|
|
const StyledDocs = styled("div", {
|
|
position: "absolute",
|
|
backgroundColor: "$panel",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
padding: 16,
|
|
font: "$docs",
|
|
overflowY: "scroll",
|
|
userSelect: "none",
|
|
paddingBottom: 64,
|
|
|
|
variants: {
|
|
isHidden: {
|
|
true: {
|
|
visibility: "hidden",
|
|
},
|
|
false: {
|
|
visibility: "visible",
|
|
},
|
|
},
|
|
},
|
|
|
|
"& ol": {},
|
|
|
|
"& li": {
|
|
marginTop: 8,
|
|
marginBottom: 4,
|
|
},
|
|
|
|
"& code": {
|
|
font: "$mono",
|
|
},
|
|
|
|
"& hr": {
|
|
margin: "32px 0",
|
|
borderColor: "$muted",
|
|
},
|
|
|
|
"& h2": {
|
|
margin: "24px 0px",
|
|
},
|
|
|
|
"& h3": {
|
|
fontSize: 20,
|
|
margin: "48px 0px 32px 0px",
|
|
},
|
|
|
|
"& h3 > code": {
|
|
fontWeight: 600,
|
|
font: "$monoheading",
|
|
},
|
|
|
|
"& h4": {
|
|
margin: "32px 0px 0px 0px",
|
|
},
|
|
|
|
"& h4 > code": {
|
|
font: "$monoheading",
|
|
fontSize: 16,
|
|
userSelect: "all",
|
|
},
|
|
|
|
"& h4 > code > i": {
|
|
fontSize: 14,
|
|
color: "$muted",
|
|
},
|
|
|
|
"& pre": {
|
|
backgroundColor: "$bounds_bg",
|
|
padding: 16,
|
|
borderRadius: 4,
|
|
userSelect: "all",
|
|
margin: "24px 0",
|
|
},
|
|
|
|
"& p > code, blockquote > code": {
|
|
backgroundColor: "$bounds_bg",
|
|
padding: "2px 4px",
|
|
borderRadius: 2,
|
|
color: "$code",
|
|
},
|
|
|
|
"& blockquote": {
|
|
backgroundColor: "rgba(144, 144, 144, .05)",
|
|
padding: 12,
|
|
margin: "20px 0",
|
|
borderRadius: 8,
|
|
},
|
|
})
|