replace style.css by components

2024-05-02 22:57:42 +03:00
parent 79bed2dae6
commit 3652b99f4c
13 changed files with 174 additions and 294 deletions
@@ -0,0 +1,55 @@
+import styled from "@emotion/styled";
+
+import { CardWrapper } from "../components/card";
+import { CardText } from "../components/card/card.style";
+import { Paragraph } from "../components/common";
+
+export const Main = styled.main`
+  width: 1024px;
+  max-width: calc(100% - 32px);
+  margin: 0 auto;
+`;
+
+export const MainCardWrapper = styled(CardWrapper)`
+  background-color: #ffffff;
+  flex-direction: row;
+`;
+
+export const MainCardText = styled(CardText)`
+  margin-top: 0;
+`;
+
+export const MainCardTextP = styled(Paragraph)`
+  max-width: 630px;
+`;
+
+export const MainCardImg = styled.img`
+  margin-left: auto;
+`;
+
+export const PageHeader = styled.header`
+  display: flex;
+  flex-wrap: wrap;
+  align-content: stretch;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 32px;
+  padding-left: 24px;
+  border-bottom: 1px solid var(--brand);
+  min-height: 62px;
+  align-items: flex-start;
+`;
+
+export const BrandText = styled.span`
+  color: var(--brand);
+`;
+
+export const Logo = styled.img`
+  margin: auto 0;
+`;
+
+export const PageFooter = styled.footer`
+  min-height: 100px;
+  background-color: var(--accent);
+  margin-top: 64px;
+`;