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

improved global style structure

Browse source
This commit is contained in:
Kim, Jimin 2021-12-15 11:53:02 +09:00
parent f1df3c57bc
commit 0df0656e0f
1 changed files with 59 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

98
source/src/globalStyle.ts
View file

@ -2,36 +2,7 @@ import { css } from "styled-components"
import theming from "./theming" import theming from "./theming"
export const globalStyle = css` const scrollbarCSS = css`
body {
overflow-x: hidden;
overflow-y: scroll;
}
html,
body,
#root {
min-height: 100vh;
margin: 0;
display: flex;
flex-flow: column;
line-height: 1.5rem;
background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: theming.light.backgroundColor1,
dark: theming.dark.backgroundColor1,
})};
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: theming.light.color1,
dark: theming.dark.color1,
})};
font-size: ${theming.size.medium};
font-family: ${theming.font.regular};
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body::-webkit-scrollbar { body::-webkit-scrollbar {
width: ${theming.size.x_small}; width: ${theming.size.x_small};
} }
@ -47,7 +18,9 @@ export const globalStyle = css`
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 10px rgb(0 0 0 / 20%); box-shadow: inset 0 0 10px rgb(0 0 0 / 20%);
} }
`
const codeCSS = css`
code { code {
font-family: ${theming.font.code}; font-family: ${theming.font.code};
color: ${(props) => color: ${(props) =>
@ -81,7 +54,9 @@ export const globalStyle = css`
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
} }
`
const kbdCSS = css`
/* https://www.rgagnon.com/jsdetails/js-nice-effect-the-KBD-tag.html */ /* https://www.rgagnon.com/jsdetails/js-nice-effect-the-KBD-tag.html */
kbd { kbd {
margin: 0px 0.1em; margin: 0px 0.1em;
@ -116,7 +91,9 @@ export const globalStyle = css`
dark: "0 1px 0 black", dark: "0 1px 0 black",
})}; })};
} }
`
const tableCSS = css`
table { table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
@ -139,16 +116,9 @@ export const globalStyle = css`
dark: "#21272E", dark: "#21272E",
})}; })};
} }
`
.white-link a { const blockquoteCSS = css`
text-decoration: none;
color: ${theming.color.linkColor};
&:visited {
color: ${theming.color.linkColor};
}
}
blockquote { blockquote {
background-color: ${(props) => background-color: ${(props) =>
theming.theme(props.theme.currentTheme, { theming.theme(props.theme.currentTheme, {
@ -170,6 +140,56 @@ export const globalStyle = css`
margin: 0.5rem; margin: 0.5rem;
} }
} }
`
export const globalStyle = css`
${scrollbarCSS}
${codeCSS}
${kbdCSS}
${tableCSS}
${blockquoteCSS}
body {
overflow-x: hidden;
overflow-y: scroll;
}
html,
body,
#root {
min-height: 100vh;
margin: 0;
display: flex;
flex-flow: column;
line-height: 1.5rem;
background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: theming.light.backgroundColor1,
dark: theming.dark.backgroundColor1,
})};
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: theming.light.color1,
dark: theming.dark.color1,
})};
font-size: ${theming.size.medium};
font-family: ${theming.font.regular};
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.white-link a {
text-decoration: none;
color: ${theming.color.linkColor};
&:visited {
color: ${theming.color.linkColor};
}
}
.card { .card {
margin: auto; margin: auto;