inno-js/rick-and-morty
inno-js/rick-and-morty
2
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

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
Conversation 0 Commits 1 Files Changed 13 +174 -294
13 changed files with 174 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
html/index.html
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>

14
html/second.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>

14
src/app.tsx
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 './style/main.css'
import { LandingPage } from "./pages/landing";
import { globalStyles } from "./global-styles";
const App = () => {
return (
<LandingPage />
<>
<Global styles={globalStyles} />
<LandingPage />
</>
);
};
export default App;

6
src/components/card/card.style.ts
View File

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

21
src/components/card/card.tsx
View File

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

1
src/components/card/index.ts
View File

@ -1 +1,2 @@
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;
`;

14
src/components/nav-panel/nav-panel.style.ts Normal file
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;
`;

14
src/components/nav-panel/nav-panel.tsx
View File

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

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

45
src/pages/landing.tsx
View File

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

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

119
src/style/main.css
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;
}