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

move theme related data from blog to theme

Browse source
This commit is contained in:
Kim, Jimin 2022-12-15 20:04:18 +09:00
parent 2965ca04b0
commit 7b7be55499
68 changed files with 1393 additions and 1251 deletions
Download patch file Download diff file Expand all files Collapse all files

25
apps/blog/src/components/Card.tsx
View file

@ -1,29 +1,22 @@
import styled, { css } from "styled-components"
import theming from "../styles/theming"
export const cardCSS = css`
margin: auto;
background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "white",
dark: theming.dark.backgroundColor2,
})};
background-color: ${({ theme }) =>
theme.currentTheme ? theme.theme.component.card.color.background : "white"};
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%);",
})};
box-shadow: ${({ theme }) =>
theme.currentTheme === "dark"
? "0 4px 10px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%)"
: "0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%)"};
@media screen and (max-width: ${theming.size.screen_size1}) {
@media screen and (max-width: ${({ theme }) =>
theme.theme.maxDisplayWidth.mobile}) {
padding: 1rem;
}
`
const Card = styled.div`
export default styled.div`
${cardCSS}
`
export default Card