pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

fixed katex css and cleaned global style css

Browse source
This commit is contained in:
Kim, Jimin 2021-12-16 20:05:02 +09:00
parent ffbce7ddb4
commit 37f33d0f95
1 changed files with 50 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

96
source/src/styles/globalStyle.tsx
View file

@ -3,8 +3,7 @@ import { createGlobalStyle, css } from "styled-components"
import codeblockLightCSS from "./codeblock-light"
import codeblockDarkCSS from "./codeblock-dark"
// this doesn't seem to be needed but Imma leave it anyway
// import "katex/dist/katex.min.css"
import "katex/dist/katex.min.css"
import theming from "./theming"
@ -166,16 +165,61 @@ const blockquoteCSS = css`
}
`
const whiteLinkCSS = css`
.white-link a {
text-decoration: none;
color: ${theming.color.linkColor};
&:visited {
color: ${theming.color.linkColor};
}
}
`
const cardCSS = css`
.card {
margin: auto;
background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "white",
dark: "#2F3136",
})};
padding: 2rem;
border-radius: 6px;
box-shadow: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%);",
dark: "0 4px 10px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%);",
})};
@media screen and (max-width: ${theming.size.screen_size1}) {
padding: 1rem;
}
}
`
const mainContentCSS = css`
.main-content {
margin-top: 3rem;
width: 50%;
@media screen and (max-width: ${theming.size.screen_size1}) {
width: auto;
margin: 1rem;
margin-top: 3rem;
}
}
`
const globalStyle = css`
${scrollbarCSS}
${codeCSS}
${kbdCSS}
${tableCSS}
${blockquoteCSS}
${whiteLinkCSS}
${cardCSS}
${mainContentCSS}
body {
overflow-x: hidden;
@ -206,46 +250,6 @@ const globalStyle = css`
text-rendering: optimizeLegibility;
}
.white-link a {
text-decoration: none;
color: ${theming.color.linkColor};
&:visited {
color: ${theming.color.linkColor};
}
}
.card {
margin: auto;
background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "white",
dark: "#2F3136",
})};
padding: 2rem;
border-radius: 6px;
box-shadow: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%);",
dark: "0 4px 10px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%);",
})};
@media screen and (max-width: ${theming.size.screen_size1}) {
padding: 1rem;
}
}
.main-content {
margin-top: 3rem;
width: 50%;
@media screen and (max-width: ${theming.size.screen_size1}) {
width: auto;
margin: 1rem;
margin-top: 3rem;
}
}
* {
transition: color 0.1s linear;
}