replace style.css by components #3

Merged
primakov merged 1 commits from feature/landing-main-blocks into main 2024-05-02 22:59:10 +03:00
13 changed files with 174 additions and 294 deletions

View File

@ -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>

View File

@ -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>

View File

@ -1,14 +1,16 @@
import React from 'react'; import React from "react";
import { Global } from "@emotion/react";
import { LandingPage } from './pages/landing' import { LandingPage } from "./pages/landing";
import { globalStyles } from "./global-styles";
import './style/main.css'
const App = () => { const App = () => {
return ( return (
<>
<Global styles={globalStyles} />
<LandingPage /> <LandingPage />
</>
); );
}; };
export default App; export default App;

View File

@ -1,7 +1,7 @@
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import styled from "@emotion/styled"; import styled from "@emotion/styled";
export const Wrapper = styled.article` export const CardWrapper = styled.article`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 24px; 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; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 24px; 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; font-size: 24px;
`; `;

View File

@ -1,15 +1,16 @@
import React from "react"; import React from "react";
import { landing } from "../../assets/images"; import { landing } from "../../assets/images";
import { Header1 } from "../common";
import { Link } from "../link"; import { Link } from "../link";
import { import {
Header, CardHeader,
Wrapper, CardWrapper,
SubHeader, SubHeader,
Content, Content,
CardImage, CardImage,
Text, CardText,
} from "./card.style"; } from "./card.style";
export const Card = ({ export const Card = ({
@ -20,24 +21,24 @@ export const Card = ({
link, link,
directionReverse, directionReverse,
}) => ( }) => (
<Wrapper> <CardWrapper>
<Header> <CardHeader>
{title && ( {title && (
<h1 className="h1"> <Header1>
<Link inheritColor href={link}> <Link inheritColor href={link}>
{title} {title}
</Link> </Link>
</h1> </Header1>
)} )}
{subTitle && <SubHeader>{subTitle}</SubHeader>} {subTitle && <SubHeader>{subTitle}</SubHeader>}
</Header> </CardHeader>
<Content directionReverse={directionReverse}> <Content directionReverse={directionReverse}>
{image && ( {image && (
<CardImage directionReverse={directionReverse} src={landing[image]} /> <CardImage directionReverse={directionReverse} src={landing[image]} />
)} )}
<Text>{children}</Text> <CardText>{children}</CardText>
</Content> </Content>
</Wrapper> </CardWrapper>
); );
Card.defaultProps = { Card.defaultProps = {

View File

@ -1 +1,2 @@
export { Card } from './card' export { Card } from './card'
export { CardWrapper } from './card.style'

11
src/components/common.ts Normal file
View File

@ -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;
`;

View File

@ -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;
`;

View File

@ -2,6 +2,8 @@ import React from "react";
import { Link } from "../link"; import { Link } from "../link";
import { Nav, NavList } from "./nav-panel.style";
const navList = [ const navList = [
{ title: "Home", href: "#01" }, { title: "Home", href: "#01" },
{ title: "Персонажи", href: "#02" }, { title: "Персонажи", href: "#02" },
@ -11,14 +13,16 @@ const navList = [
export function NavPanel() { export function NavPanel() {
return ( return (
<nav className="nav"> <Nav className="nav">
<ul> <NavList>
{navList.map((element, index) => ( {navList.map((element, index) => (
<li key={element.href}> <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> </li>
))} ))}
</ul> </NavList>
</nav> </Nav>
); );
} }

33
src/global-styles.ts Normal file
View File

@ -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%;
}
`;

View File

@ -7,6 +7,18 @@ import logo2x from "../assets/logo_2x.png";
import logo4x from "../assets/logo_4x.png"; import logo4x from "../assets/logo_4x.png";
import { Link } from "../components/link"; import { Link } from "../components/link";
import { Card } from "../components/card"; import { Card } from "../components/card";
import { Header1 } from "../components/common";
import {
BrandText,
Logo,
Main,
MainCardImg,
MainCardText,
MainCardTextP,
MainCardWrapper,
PageFooter,
PageHeader,
} from "./style";
const data = [ const data = [
{ {
@ -50,9 +62,8 @@ const data = [
export const LandingPage = () => { export const LandingPage = () => {
return ( return (
<> <>
<header id="header"> <PageHeader>
<img <Logo
className="logo"
height="44px" height="44px"
width="227" width="227"
src={logo4x} src={logo4x}
@ -69,27 +80,27 @@ export const LandingPage = () => {
" "
/> />
<NavPanel /> <NavPanel />
</header> </PageHeader>
<main className="main"> <Main>
<header className="card card-main"> <MainCardWrapper as="header">
<div className="card-text"> <MainCardText>
<h1 className="h1"> <Header1>
Персонажи из <br /> Персонажи из <br />
<span className="brand-text">огурчиковой вселенной</span> <BrandText>огурчиковой вселенной</BrandText>
</h1> </Header1>
<p className="p card--text__p"> <MainCardTextP>
На этой странице представлены персонажи из сериала На этой странице представлены персонажи из сериала
<Link href="#">Rick and Morty</Link> <Link href="#">Rick and Morty</Link>
. Этот популярный анимационный сериал, созданный Джастином . Этот популярный анимационный сериал, созданный Джастином
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
Санчеза, гениального и эксцентричного ученого, и его внука Морти Санчеза, гениального и эксцентричного ученого, и его внука Морти
Смита. Смита.
</p> </MainCardTextP>
</div> </MainCardText>
<img className="card--img" src={cucumber} alt="" /> <MainCardImg src={cucumber} alt="" />
</header> </MainCardWrapper>
{data.map((item, index) => ( {data.map((item, index) => (
<Card <Card
directionReverse={index % 2 === 0} directionReverse={index % 2 === 0}
@ -102,9 +113,9 @@ export const LandingPage = () => {
{item.body} {item.body}
</Card> </Card>
))} ))}
</main> </Main>
<footer className="page-footer"></footer> <PageFooter></PageFooter>
</> </>
); );
}; };

55
src/pages/style.ts Normal file
View File

@ -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;
`;

View File

@ -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;
}