replace style.css by components

2024-05-02 22:57:42 +03:00 · 2024-05-02 22:57:42 +03:00 · 3652b99f4c
commit 3652b99f4c
parent 79bed2dae6
13 changed files with 174 additions and 294 deletions
--- a/html/index.html
+++ b/html/index.html
@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Рик и Морти</title>
-    <link rel="stylesheet" href="./style/main.css" />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="./assets/favicon/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="./assets/favicon/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="./assets/favicon/favicon-16x16.png"
-    />
-    <link rel="manifest" href="./assets/favicon/site.webmanifest" />
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-    </style>
-  </head>
-  <body>
-    <header id="header">
-      <img
-        class="logo"
-        height="44p"
-        width="227"
-        src="./assets/logo_4x.png"
-        alt="Логотип. Надпись Рик и Морти"
-        srcset="
-          ./assets/logo_1x.png 220w,
-          ./assets/logo_2x.png 445w,
-          ./assets/logo_4x.png 880w
-        "
-        sizes="
-          (max-width: 240px) 100px,
-          (min-width: 320px) 440px,
-          (min-width: 520px) 880px
-        "
-      />
-
-      <nav class="nav">
-        <ul>
-          <li><a class="link" href="#01">Home</a></li>
-          <li><a class="link link__contrast" href="#02">Персонажи</a></li>
-          <li><a class="link link__contrast" href="#03">Локации</a></li>
-          <li><a class="link link__contrast" href="#04">Эризоды</a></li>
-        </ul>
-      </nav>
-    </header>
-
-    <main class="main">
-      <header class="card card-main">
-        <div class="card-text">
-          <h1 class="h1">
-            Персонажи из <br /><span class="brand-text"
-              >огурчиковой вселенной</span
-            >
-          </h1>
-
-          <p class="p card--text__p">
-            На этой странице представлены персонажи из сериала “<a
-              class="link"
-              href="#"
-              >Rick and Morty</a
-            >”. Этот популярный анимационный сериал, созданный Джастином
-            Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
-            Санчеза, гениального и эксцентричного ученого, и его внука Морти
-            Смита.
-          </p>
-        </div>
-        <img class="card--img" src="./assets/cucumber.png" alt="" />
-      </header>
-      <article class="card card__toRight">
-        <div class="card-text">
-          <h1 class="h1">
-            Персонажи из <br /><span class="brand-text"
-              >огурчиковой вселенной</span
-            >
-          </h1>
-
-          <p class="p card--text__p">
-            На этой странице представлены персонажи из сериала “<a
-              class="link"
-              href="#"
-              >Rick and Morty</a
-            >”. Этот популярный анимационный сериал, созданный Джастином
-            Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
-            Санчеза, гениального и эксцентричного ученого, и его внука Морти
-            Смита.
-          </p>
-        </div>
-        <img class="card--img" src="./assets/cucumber.png" alt="" />
-      </article>
-    </main>
-
-    <aside></aside>
-    <footer class="page-footer"></footer>
-  </body>
-</html>
--- a/html/second.html
+++ b/html/second.html
@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Рик и Морти</title>
-
-    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png" />
-    <link rel="manifest" href="./assets/favicon/site.webmanifest" />
-  </head>
-  <body></body>
-</html>
--- 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 (
-    <LandingPage />
+    <>
+      <Global styles={globalStyles} />
+      <LandingPage />
+    </>
  );
 };

 export default App;
-
--- 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;
 `;
--- 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,
 }) => (
-  <Wrapper>
-    <Header>
+  <CardWrapper>
+    <CardHeader>
      {title && (
-        <h1 className="h1">
+        <Header1>
          <Link inheritColor href={link}>
            {title}
          </Link>
-        </h1>
+        </Header1>
      )}
      {subTitle && <SubHeader>{subTitle}</SubHeader>}
-    </Header>
+    </CardHeader>
    <Content directionReverse={directionReverse}>
      {image && (
        <CardImage directionReverse={directionReverse} src={landing[image]} />
      )}
-      <Text>{children}</Text>
+      <CardText>{children}</CardText>
    </Content>
-  </Wrapper>
+  </CardWrapper>
 );

 Card.defaultProps = {
--- a/src/components/card/index.ts
+++ b/src/components/card/index.ts
@ -1 +1,2 @@
-export { Card } from './card'
+export { Card } from './card'
+export { CardWrapper } from './card.style'
--- a/src/components/common.ts
+++ 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;
+`;
--- a/src/components/nav-panel/nav-panel.style.ts
+++ 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;
+`;
--- 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 (
-    <nav className="nav">
-      <ul>
+    <Nav className="nav">
+      <NavList>
        {navList.map((element, index) => (
          <li key={element.href}>
-            <Link contrast={Boolean(index)} href={element.href}>{element.title}</Link>
+            <Link contrast={Boolean(index)} href={element.href}>
+              {element.title}
+            </Link>
          </li>
        ))}
-      </ul>
-    </nav>
+      </NavList>
+    </Nav>
  );
 }
--- a/src/global-styles.ts
+++ 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%;
+  }
+`;
--- 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 (
    <>
-      <header id="header">
-        <img
-          className="logo"
+      <PageHeader>
+        <Logo
          height="44px"
          width="227"
          src={logo4x}
@ -69,27 +80,27 @@ export const LandingPage = () => {
        "
        />
        <NavPanel />
-      </header>
+      </PageHeader>

-      <main className="main">
-        <header className="card card-main">
-          <div className="card-text">
-            <h1 className="h1">
+      <Main>
+        <MainCardWrapper as="header">
+          <MainCardText>
+            <Header1>
              Персонажи из <br />
-              <span className="brand-text">огурчиковой вселенной</span>
-            </h1>
+              <BrandText>огурчиковой вселенной</BrandText>
+            </Header1>

-            <p className="p card--text__p">
+            <MainCardTextP>
              На этой странице представлены персонажи из сериала “
              <Link href="#">Rick and Morty</Link>
              ”. Этот популярный анимационный сериал, созданный Джастином
              Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
              Санчеза, гениального и эксцентричного ученого, и его внука Морти
              Смита.
-            </p>
-          </div>
-          <img className="card--img" src={cucumber} alt="" />
-        </header>
+            </MainCardTextP>
+          </MainCardText>
+          <MainCardImg src={cucumber} alt="" />
+        </MainCardWrapper>
        {data.map((item, index) => (
          <Card
            directionReverse={index % 2 === 0}
@ -102,9 +113,9 @@ export const LandingPage = () => {
            {item.body}
          </Card>
        ))}
-      </main>
+      </Main>

-      <footer className="page-footer"></footer>
+      <PageFooter></PageFooter>
    </>
  );
 };
--- a/src/pages/style.ts
+++ 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;
+`;
--- a/src/style/main.css
+++ b/src/style/main.css
@ -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;
-}