From 3652b99f4c595112f27d2ec7cc13bfa0d4125889 Mon Sep 17 00:00:00 2001 From: primakov Date: Thu, 2 May 2024 22:57:42 +0300 Subject: [PATCH] replace style.css by components --- html/index.html | 119 -------------------- html/second.html | 14 --- src/app.tsx | 14 ++- src/components/card/card.style.ts | 6 +- src/components/card/card.tsx | 21 ++-- src/components/card/index.ts | 3 +- src/components/common.ts | 11 ++ src/components/nav-panel/nav-panel.style.ts | 14 +++ src/components/nav-panel/nav-panel.tsx | 14 ++- src/global-styles.ts | 33 ++++++ src/pages/landing.tsx | 45 +++++--- src/pages/style.ts | 55 +++++++++ src/style/main.css | 119 -------------------- 13 files changed, 174 insertions(+), 294 deletions(-) delete mode 100644 html/index.html delete mode 100644 html/second.html create mode 100644 src/components/common.ts create mode 100644 src/components/nav-panel/nav-panel.style.ts create mode 100644 src/global-styles.ts create mode 100644 src/pages/style.ts delete mode 100644 src/style/main.css diff --git a/html/index.html b/html/index.html deleted file mode 100644 index 777a01d..0000000 --- a/html/index.html +++ /dev/null @@ -1,119 +0,0 @@ - - - - - - Рик и Морти - - - - - - - - - - - - - - -
-
-
-

- Персонажи из
огурчиковой вселенной -

- -

- На этой странице представлены персонажи из сериала “Rick and Morty”. Этот популярный анимационный сериал, созданный Джастином - Ройландом и Дэном Хармоном, рассказывает о приключениях Рика - Санчеза, гениального и эксцентричного ученого, и его внука Морти - Смита. -

-
- -
-
-
-

- Персонажи из
огурчиковой вселенной -

- -

- На этой странице представлены персонажи из сериала “Rick and Morty”. Этот популярный анимационный сериал, созданный Джастином - Ройландом и Дэном Хармоном, рассказывает о приключениях Рика - Санчеза, гениального и эксцентричного ученого, и его внука Морти - Смита. -

-
- -
-
- - - - - diff --git a/html/second.html b/html/second.html deleted file mode 100644 index 27a8ce0..0000000 --- a/html/second.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Рик и Морти - - - - - - - - diff --git a/src/app.tsx b/src/app.tsx index c5bc64e..e2e25a8 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,14 +1,16 @@ -import React from 'react'; +import React from "react"; +import { Global } from "@emotion/react"; -import { LandingPage } from './pages/landing' - -import './style/main.css' +import { LandingPage } from "./pages/landing"; +import { globalStyles } from "./global-styles"; const App = () => { return ( - + <> + + + ); }; export default App; - diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts index 02cd676..e3c61d4 100644 --- a/src/components/card/card.style.ts +++ b/src/components/card/card.style.ts @@ -1,7 +1,7 @@ import { css } from "@emotion/react"; import styled from "@emotion/styled"; -export const Wrapper = styled.article` +export const CardWrapper = styled.article` display: flex; flex-direction: column; margin-top: 24px; @@ -23,7 +23,7 @@ export const CardImage = styled.img<{ directionReverse: boolean }>` `} `; -export const Header = styled.header` +export const CardHeader = styled.header` display: flex; justify-content: space-between; font-size: 24px; @@ -51,6 +51,6 @@ export const Content = styled.div<{ directionReverse: boolean }>` }} `; -export const Text = styled.p` +export const CardText = styled.p` font-size: 24px; `; diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index e6b91a5..47baac6 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -1,15 +1,16 @@ import React from "react"; import { landing } from "../../assets/images"; +import { Header1 } from "../common"; import { Link } from "../link"; import { - Header, - Wrapper, + CardHeader, + CardWrapper, SubHeader, Content, CardImage, - Text, + CardText, } from "./card.style"; export const Card = ({ @@ -20,24 +21,24 @@ export const Card = ({ link, directionReverse, }) => ( - -
+ + {title && ( -

+ {title} -

+ )} {subTitle && {subTitle}} -
+ {image && ( )} - {children} + {children} - + ); Card.defaultProps = { diff --git a/src/components/card/index.ts b/src/components/card/index.ts index 6651f03..07874f0 100644 --- a/src/components/card/index.ts +++ b/src/components/card/index.ts @@ -1 +1,2 @@ -export { Card } from './card' \ No newline at end of file +export { Card } from './card' +export { CardWrapper } from './card.style' \ No newline at end of file diff --git a/src/components/common.ts b/src/components/common.ts new file mode 100644 index 0000000..0f3d7cb --- /dev/null +++ b/src/components/common.ts @@ -0,0 +1,11 @@ +import styled from "@emotion/styled"; + +export const Header1 = styled.h1` + margin-top: 32px; + margin-bottom: 24px; + font-size: 47px; +`; + +export const Paragraph = styled.p` + font-size: 24px; +`; diff --git a/src/components/nav-panel/nav-panel.style.ts b/src/components/nav-panel/nav-panel.style.ts new file mode 100644 index 0000000..55b8521 --- /dev/null +++ b/src/components/nav-panel/nav-panel.style.ts @@ -0,0 +1,14 @@ +import styled from "@emotion/styled"; + +export const Nav = styled.nav` + background-color: var(--main-transparent); + padding: 16px 64px 16px 33px; + border-bottom-left-radius: 20px; + font-size: 16px; +`; + +export const NavList = styled.ul` + display: flex; + gap: 12px; + list-style: none; +`; diff --git a/src/components/nav-panel/nav-panel.tsx b/src/components/nav-panel/nav-panel.tsx index 46a74e2..a4cdced 100644 --- a/src/components/nav-panel/nav-panel.tsx +++ b/src/components/nav-panel/nav-panel.tsx @@ -2,6 +2,8 @@ import React from "react"; import { Link } from "../link"; +import { Nav, NavList } from "./nav-panel.style"; + const navList = [ { title: "Home", href: "#01" }, { title: "Персонажи", href: "#02" }, @@ -11,14 +13,16 @@ const navList = [ export function NavPanel() { return ( - + + ); } diff --git a/src/global-styles.ts b/src/global-styles.ts new file mode 100644 index 0000000..3e57581 --- /dev/null +++ b/src/global-styles.ts @@ -0,0 +1,33 @@ +import { css } from "@emotion/react"; + +export const globalStyles = css` + :root { + --dark-link: #2e81ff; + --main: #43888c; + --main-transparent: #44898d66; + + --brand: #4d7f1e; + + --accent: #6a1072; + + --bg-main: #cee6e9; + --text: #000000; + --text-contrast: #ffffff; + } + + html { + height: 100%; + } + + body.dark { + --bg-main: #0f5c66; + } + + body { + font-family: "PT Sans", sans-serif; + background-color: var(--bg-main); + color: var(--text); + font-size: 24px; + height: 100%; + } +`; diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx index 83cfa1b..71c569c 100644 --- a/src/pages/landing.tsx +++ b/src/pages/landing.tsx @@ -7,6 +7,18 @@ import logo2x from "../assets/logo_2x.png"; import logo4x from "../assets/logo_4x.png"; import { Link } from "../components/link"; import { Card } from "../components/card"; +import { Header1 } from "../components/common"; +import { + BrandText, + Logo, + Main, + MainCardImg, + MainCardText, + MainCardTextP, + MainCardWrapper, + PageFooter, + PageHeader, +} from "./style"; const data = [ { @@ -50,9 +62,8 @@ const data = [ export const LandingPage = () => { return ( <> - + -
-
-
-

+
+ + + Персонажи из
- огурчиковой вселенной -

+ огурчиковой вселенной + -

+ На этой странице представлены персонажи из сериала “ Rick and Morty ”. Этот популярный анимационный сериал, созданный Джастином Ройландом и Дэном Хармоном, рассказывает о приключениях Рика Санчеза, гениального и эксцентричного ученого, и его внука Морти Смита. -

-
- -
+ + + + {data.map((item, index) => ( { {item.body} ))} -
+ -
+ ); }; diff --git a/src/pages/style.ts b/src/pages/style.ts new file mode 100644 index 0000000..e106247 --- /dev/null +++ b/src/pages/style.ts @@ -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; +`; diff --git a/src/style/main.css b/src/style/main.css deleted file mode 100644 index 613a06d..0000000 --- a/src/style/main.css +++ /dev/null @@ -1,119 +0,0 @@ -:root { - --dark-link: #2E81FF; - --main: #43888C; - --main-transparent: #44898d66; - - --brand: #4D7F1E; - - --accent: #6A1072; - - --bg-main: #cee6e9; - --text: #000000; - --text-contrast: #ffffff; -} - -html { height: 100%; } - -body.dark { - --bg-main: #0f5c66; -} - -body { - font-family: "PT Sans", sans-serif; - background-color: var(--bg-main); - color: var(--text); - font-size: 24px; - height: 100%; -} - -.brand-text { - color: var(--brand); -} - -.p { - font-size: 24px; -} - -#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; -} - -.logo { - margin: auto 0; -} - -.main { - width: 1024px; - max-width: calc(100% - 32px); - margin: 0 auto; -} - -.card { - margin-top: 24px; - border-radius: 30px; - box-shadow: 0 0 26px 2px #0000001c; - background: rgba(255, 255, 255, 0.59); - padding: 24px; - display: flex; -} - -.card-main { - background-color: #ffffff; -} - -.h1 { - margin-top: 32px; - margin-bottom: 24px; - font-size: 47px; -} - -.card--text { - display: flex; - flex-direction: column; - margin-right: auto; -} - -.card__toRight { - flex-direction: row-reverse; -} - -.card__toRight .card--img { - margin-left: 0; - margin-right: auto; -} - -.card--text__p { - max-width: 630px; -} - -.card--img { - margin-left: auto; -} - -.nav ul { - display: flex; - gap: 12px; - list-style: none; -} - -.nav { - background-color: var(--main-transparent); - padding: 16px 64px 16px 33px; - border-bottom-left-radius: 20px; - font-size: 16px; -} - -.page-footer { - min-height: 100px; - background-color: var(--accent); - margin-top: 64px; -} \ No newline at end of file -- 2.45.2