From 30c4f76a85c4d5a6b04d89bba6383d36714167ed Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Sat, 28 Jan 2023 18:08:38 +0500 Subject: [PATCH] project erased --- package-lock.json | 2 +- package.json | 2 +- src/App.tsx | 20 +-- src/animations/header.animations.ts | 20 --- src/animations/video.animations.ts | 18 --- src/components/aside/AsideItem.tsx | 18 --- src/components/aside/Calendar.tsx | 17 --- src/components/footer/Footer.tsx | 63 --------- src/components/global/Aside.tsx | 110 ---------------- src/components/global/SectionTitle.tsx | 9 -- src/components/header/ClockDate.tsx | 20 --- src/components/header/Header.tsx | 16 --- src/components/header/Nav.tsx | 35 ----- src/components/header/SearchForm.tsx | 35 ----- src/components/header/SubHeader.tsx | 53 -------- src/components/header/SupHeader.tsx | 24 ---- src/components/news/NewsItem.tsx | 65 --------- src/components/video/Video.tsx | 58 -------- src/components/video/VideoItem.tsx | 23 ---- src/helpers/dates.ts | 15 --- src/pages/News.tsx | 23 ---- src/styles/_aside.scss | 59 --------- src/styles/_calendar.scss | 97 -------------- src/styles/_footer.scss | 61 --------- src/styles/_header.scss | 175 ------------------------- src/styles/_news.scss | 48 ------- src/styles/_variables.scss | 14 -- src/styles/_video.scss | 80 ----------- src/styles/style.scss | 10 +- src/types/header.types.ts | 5 - src/types/video.types.ts | 5 - 31 files changed, 9 insertions(+), 1191 deletions(-) delete mode 100644 src/animations/header.animations.ts delete mode 100644 src/animations/video.animations.ts delete mode 100644 src/components/aside/AsideItem.tsx delete mode 100644 src/components/aside/Calendar.tsx delete mode 100644 src/components/footer/Footer.tsx delete mode 100644 src/components/global/Aside.tsx delete mode 100644 src/components/global/SectionTitle.tsx delete mode 100644 src/components/header/ClockDate.tsx delete mode 100644 src/components/header/Header.tsx delete mode 100644 src/components/header/Nav.tsx delete mode 100644 src/components/header/SearchForm.tsx delete mode 100644 src/components/header/SubHeader.tsx delete mode 100644 src/components/header/SupHeader.tsx delete mode 100644 src/components/news/NewsItem.tsx delete mode 100644 src/components/video/Video.tsx delete mode 100644 src/components/video/VideoItem.tsx delete mode 100644 src/helpers/dates.ts delete mode 100644 src/pages/News.tsx delete mode 100644 src/styles/_aside.scss delete mode 100644 src/styles/_calendar.scss delete mode 100644 src/styles/_footer.scss delete mode 100644 src/styles/_header.scss delete mode 100644 src/styles/_news.scss delete mode 100644 src/styles/_video.scss delete mode 100644 src/types/header.types.ts delete mode 100644 src/types/video.types.ts diff --git a/package-lock.json b/package-lock.json index e89ffbd..091938c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ "@types/react-dom": "^18.0.9", "@vitejs/plugin-react": "^3.0.0", "typescript": "^4.9.3", - "vite": "^4.0.0" + "vite": "^4.0.4" } }, "node_modules/@ampproject/remapping": { diff --git a/package.json b/package.json index 2f57b8f..4e9a4ed 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,6 @@ "@types/react-dom": "^18.0.9", "@vitejs/plugin-react": "^3.0.0", "typescript": "^4.9.3", - "vite": "^4.0.0" + "vite": "^4.0.4" } } diff --git a/src/App.tsx b/src/App.tsx index db2fe8a..6a92638 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,30 +1,20 @@ // Modules -import { Routes, Route } from 'react-router-dom'; +import { Routes, Route } from "react-router-dom"; // Styles -import 'react-lazy-load-image-component/src/effects/blur.css'; -import 'react-calendar/dist/Calendar.css'; -import './styles/style.scss'; +import "react-lazy-load-image-component/src/effects/blur.css"; +import "react-calendar/dist/Calendar.css"; +import "./styles/style.scss"; // Pages -import Main from './pages/Main'; -import News from './pages/News'; - -// Static -import Header from './components/header/Header'; -import Footer from './components/footer/Footer'; -import Video from './components/video/Video'; +import Main from "./pages/Main"; const App = () => { return (
-
} /> - } /> -
); }; diff --git a/src/animations/header.animations.ts b/src/animations/header.animations.ts deleted file mode 100644 index e2dc2d6..0000000 --- a/src/animations/header.animations.ts +++ /dev/null @@ -1,20 +0,0 @@ -export const searchFormAnimation: Record< - string, - Record> -> = { - rest: { - opacity: 1, - duration: 0.2, - type: 'tween', - x: 0, - }, - - hover: { - y: -10, - opacity: 0, - transition: { - duration: 0.1, - type: 'spring', - }, - }, -}; diff --git a/src/animations/video.animations.ts b/src/animations/video.animations.ts deleted file mode 100644 index 6392602..0000000 --- a/src/animations/video.animations.ts +++ /dev/null @@ -1,18 +0,0 @@ -export const videoArrowMotion: Record< - string, - Record> -> = { - rest: { - duration: 0.3, - type: "spring", - x: 0, - }, - - hover: { - x: 10, - transition: { - duration: 0.2, - type: "tween", - }, - }, -}; diff --git a/src/components/aside/AsideItem.tsx b/src/components/aside/AsideItem.tsx deleted file mode 100644 index 9253035..0000000 --- a/src/components/aside/AsideItem.tsx +++ /dev/null @@ -1,18 +0,0 @@ -// Modules -import { Link } from 'react-router-dom'; - -interface Props { - title: string; - category: string; -} - -const AsideItem = ({ title, category }: Props) => { - return ( - -

{category}

-

{title}

- - ); -}; - -export default AsideItem; diff --git a/src/components/aside/Calendar.tsx b/src/components/aside/Calendar.tsx deleted file mode 100644 index d8b4314..0000000 --- a/src/components/aside/Calendar.tsx +++ /dev/null @@ -1,17 +0,0 @@ -// Modules -import { useState } from 'react'; -import { Calendar as ReactCalendar } from 'react-calendar'; -import { LazyLoadComponent } from 'react-lazy-load-image-component'; - -const Calendar = () => { - const [value, onChange] = useState(new Date()); - return ( -
- - - -
- ); -}; - -export default Calendar; diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx deleted file mode 100644 index 9be2baf..0000000 --- a/src/components/footer/Footer.tsx +++ /dev/null @@ -1,63 +0,0 @@ -// Modules -import { Link } from 'react-router-dom'; - -// Icons -import { ReactComponent as Phone } from '../../assets/icons/phone-white.svg'; -import { ReactComponent as Mail } from '../../assets/icons/mail-white.svg'; -import { ReactComponent as Navigation } from '../../assets/icons/navigation-white.svg'; - -const Footer = () => { - return ( - - ); -}; - -export default Footer; diff --git a/src/components/global/Aside.tsx b/src/components/global/Aside.tsx deleted file mode 100644 index 612e71d..0000000 --- a/src/components/global/Aside.tsx +++ /dev/null @@ -1,110 +0,0 @@ -// Modules -import { v4 as uuidv4 } from 'uuid'; -import { motion } from 'framer-motion'; - -// Components -import SectionTitle from './SectionTitle'; -import AsideItem from '../aside/AsideItem'; -import Calendar from '../aside/Calendar'; - -// Icons -import { ReactComponent as ArrowDownBlue } from '../../assets/icons/arrow-down-blue.svg'; - -interface AsideDataType { - title: string; - category: string; -} -const asideData: AsideDataType[] = [ - { - title: - 'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»', - category: 'Политика', - }, - { - title: - 'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»', - category: 'Политика', - }, - { - title: - 'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»', - category: 'Политика', - }, - { - title: - 'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»', - category: 'Политика', - }, - { - title: - 'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»', - category: 'Политика', - }, - { - title: - 'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»', - category: 'Политика', - }, -]; - -const buttonMotion = { - rest: { - backgroundColor: 'rgba(0, 0, 0, 0)', - color: '#2368ad', - duration: 0.4, - type: 'tween', - }, - hover: { - backgroundColor: '#2368ad', - color: '#ffffff', - duration: 0.4, - type: 'spring', - }, -}; - -const arrowMotion = { - rest: { - fill: '#2368ad', - transform: 'rotateX(0%)', - duration: 0.4, - type: 'tween', - }, - hover: { - fill: '#ffffff', - transform: 'rotateX(180%)', - duration: 0.4, - type: 'spring', - }, -}; - -const Aside = () => { - return ( - - ); -}; - -export default Aside; diff --git a/src/components/global/SectionTitle.tsx b/src/components/global/SectionTitle.tsx deleted file mode 100644 index 9089c0c..0000000 --- a/src/components/global/SectionTitle.tsx +++ /dev/null @@ -1,9 +0,0 @@ -interface Props { - title: string; -} - -const SectionTitle = ({ title }: Props) => { - return

{title}

; -}; - -export default SectionTitle; diff --git a/src/components/header/ClockDate.tsx b/src/components/header/ClockDate.tsx deleted file mode 100644 index 80cb17d..0000000 --- a/src/components/header/ClockDate.tsx +++ /dev/null @@ -1,20 +0,0 @@ -// Modules -import { useState, useEffect } from 'react'; - -// Helpers -import { clockParser, dateParser } from '../../helpers/dates'; - -const ClockDate = () => { - const [date, setDate] = useState(new Date()); - useEffect(() => { - setInterval(() => setDate(new Date()), 5000); - }, []); - return ( -
- {clockParser(date)} - {dateParser(date)} -
- ); -}; - -export default ClockDate; diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx deleted file mode 100644 index 05cd4be..0000000 --- a/src/components/header/Header.tsx +++ /dev/null @@ -1,16 +0,0 @@ -// Components -import SupHeader from './SupHeader'; -import Nav from './Nav'; -import SubHeader from './SubHeader'; - -const Header = () => { - return ( -
- - -
- ); -}; - -export default Header; diff --git a/src/components/header/Nav.tsx b/src/components/header/Nav.tsx deleted file mode 100644 index 30e6def..0000000 --- a/src/components/header/Nav.tsx +++ /dev/null @@ -1,35 +0,0 @@ -// Modules -import { Link } from 'react-router-dom'; -import { v4 as uuidv4 } from 'uuid'; - -// Types -import { navListDataType, navListItemType } from '../../types/header.types'; - -const data: navListDataType = [ - { title: 'Политика', path: '/category' }, - { title: 'Экономика', path: '/category' }, - { title: 'Общество', path: '/category' }, - { title: 'Культура', path: '/category' }, - { title: 'Спорт', path: '/category' }, - { title: 'Технологии', path: '/category' }, - { title: 'Экология', path: '/category' }, -]; -const Nav = () => { - return ( - - ); -}; - -export default Nav; diff --git a/src/components/header/SearchForm.tsx b/src/components/header/SearchForm.tsx deleted file mode 100644 index b7d0cd1..0000000 --- a/src/components/header/SearchForm.tsx +++ /dev/null @@ -1,35 +0,0 @@ -// Modules -import { useState } from 'react'; -import { motion } from 'framer-motion'; - -// Icons -import { ReactComponent as LoopGray } from '../../assets/icons/loop-gray.svg'; - -// Animations -import { searchFormAnimation } from '../../animations/header.animations'; - -const SearchForm = () => { - const [input, setInput] = useState(''); - return ( - -
) => { - event.preventDefault(); - }}> - 0 ? searchFormAnimation.hover : searchFormAnimation.rest}> - - Search anything - - ) => setInput(event.target.value)} - /> -
- - ); -}; - -export default SearchForm; diff --git a/src/components/header/SubHeader.tsx b/src/components/header/SubHeader.tsx deleted file mode 100644 index 1b296a9..0000000 --- a/src/components/header/SubHeader.tsx +++ /dev/null @@ -1,53 +0,0 @@ -// Modules -import { Link } from 'react-router-dom'; - -// Images -import Logo from '../../assets/images/logo.png'; - -// Icons -import { ReactComponent as ArrowDownBlack } from '../../assets/icons/arrow-down-black.svg'; - -// Components -import SearchForm from './SearchForm'; -import ClockDate from './ClockDate'; - -const SubHeader = () => { - return ( -
-
-
-
    -
  • - -
    • -
  • - Туркменистан -
    • -
  • - СНГ -
    • -
  • - Зарубежье -
    • -
-
- -
-
-
-
- EN -
- -
-
-
- -
-
-
-
- ); -}; - -export default SubHeader; diff --git a/src/components/header/SupHeader.tsx b/src/components/header/SupHeader.tsx deleted file mode 100644 index b138999..0000000 --- a/src/components/header/SupHeader.tsx +++ /dev/null @@ -1,24 +0,0 @@ -// Modules -import { Link } from "react-router-dom"; - -// Images -import Logo from "../../assets/images/sup-header.png"; - -const SupHeader = () => { - return ( -
-
-
-

- Halkara Habarlar Merkezi -

-
- -
-
-
-
- ); -}; - -export default SupHeader; diff --git a/src/components/news/NewsItem.tsx b/src/components/news/NewsItem.tsx deleted file mode 100644 index eb9b567..0000000 --- a/src/components/news/NewsItem.tsx +++ /dev/null @@ -1,65 +0,0 @@ -// Modules -import { LazyLoadImage } from 'react-lazy-load-image-component'; - -// Images -import News from '../../assets/images/news.png'; - -const NewsItem = () => { - return ( -
-
-
-

СПОРТ

-

15:23, 21 января 2023

-
-

- В федерации футбола Туркменистана подвели итоги прошедшего года и наметили курс на 2023 - год -

-
-
- -
-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis - autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit - nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit - exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae - corrupti impedit at molestias vitae distinctio. -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae - earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a - aut ducimus eaque eum cupiditate? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis - autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit - nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit - exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae - corrupti impedit at molestias vitae distinctio. -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae - earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a - aut ducimus eaque eum cupiditate? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis - autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit - nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit - exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae - corrupti impedit at molestias vitae distinctio. -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae - earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a - aut ducimus eaque eum cupiditate? -

-
-
- ); -}; - -export default NewsItem; diff --git a/src/components/video/Video.tsx b/src/components/video/Video.tsx deleted file mode 100644 index 037d283..0000000 --- a/src/components/video/Video.tsx +++ /dev/null @@ -1,58 +0,0 @@ -// Modules -import { v4 as uuidv4 } from "uuid"; -import { Link } from "react-router-dom"; -import { motion } from "framer-motion"; - -// Components -import VideoItem from "./VideoItem"; - -// Images -import VideoItemImg from "../../assets/images/video-item.jpg"; - -// Icons -import { ReactComponent as ArrowRightWhite } from "../../assets/icons/arrow-right-white.svg"; - -// Animations -import { videoArrowMotion } from "../../animations/video.animations"; - -const Video = () => { - const date = "11.01.2023"; - const title = "В Туркменистане отметили Новый год"; - const data = [ - { date, title, img: VideoItemImg }, - { date, title, img: VideoItemImg }, - { date, title, img: VideoItemImg }, - { date, title, img: VideoItemImg }, - ]; - return ( -
-
-
-

Видео

-
- {data.map((dataItem: Record) => { - return ( - - ); - })} -
- - - Показать все видео - - - - - -
-
-
- ); -}; - -export default Video; diff --git a/src/components/video/VideoItem.tsx b/src/components/video/VideoItem.tsx deleted file mode 100644 index f109571..0000000 --- a/src/components/video/VideoItem.tsx +++ /dev/null @@ -1,23 +0,0 @@ -// Modules -import { LazyLoadImage } from "react-lazy-load-image-component"; - -// Types -import { videoItemType } from "../../types/video.types"; - -const VideoItem = ({ img, date, title }: videoItemType) => { - return ( -
-
-
- -
-
-
- {date} -
{title}
-
-
- ); -}; - -export default VideoItem; diff --git a/src/helpers/dates.ts b/src/helpers/dates.ts deleted file mode 100644 index caccc73..0000000 --- a/src/helpers/dates.ts +++ /dev/null @@ -1,15 +0,0 @@ -export const clockParser = (date: Date) => { - return date - .toLocaleDateString('en-GB', { - hour: '2-digit', - minute: '2-digit', - }) - .split(' ')[1]; -}; - -export const dateParser = (date: Date) => { - return date.toLocaleDateString('ru', { - month: 'long', - day: 'numeric', - }); -}; diff --git a/src/pages/News.tsx b/src/pages/News.tsx deleted file mode 100644 index 94468a9..0000000 --- a/src/pages/News.tsx +++ /dev/null @@ -1,23 +0,0 @@ -// Modules -import { useParams } from 'react-router-dom'; - -// Components -import NewsItem from '../components/news/NewsItem'; -import Aside from '../components/global/Aside'; - -const News = () => { - const { id } = useParams(); - console.log(`News id: ${id}`); - return ( -
-
-
- -
-
-
- ); -}; - -export default News; diff --git a/src/styles/_aside.scss b/src/styles/_aside.scss deleted file mode 100644 index 4d2c8f9..0000000 --- a/src/styles/_aside.scss +++ /dev/null @@ -1,59 +0,0 @@ -.title { - font-size: 2.4rem; - color: $main; - border-bottom: 0.1rem solid $main; - padding: 0.8rem 2.4rem; - margin-bottom: 1.6rem; -} - -.aside { - display: flex; - flex-direction: column; - gap: 1.6rem; - position: sticky; - top: 2rem; - left: 0; - height: fit-content; -} - -.aside-scroll { - display: flex; - flex-direction: column; - gap: 1.6rem; -} - -.aside-item { - padding: 0 0 1.6rem 0; - display: flex; - gap: 0.8rem; - flex-direction: column; - border-bottom: 0.1px solid $border-gray; -} - -.aside-item-title { - font-size: 1.4rem; - color: $black; -} - -.aside-item-category { - font-weight: bold; - font-size: 1rem; -} - -.aside-btn { - cursor: pointer; - color: $main; - border: 0.1rem $main solid; - border-radius: 0.5rem; - padding: 0.8rem; - display: flex; - align-items: center; - justify-content: center; - gap: 0.8rem; - font-size: 1.4rem; - - svg { - width: 1.4rem; - height: 1.4rem; - } -} diff --git a/src/styles/_calendar.scss b/src/styles/_calendar.scss deleted file mode 100644 index 0a661d9..0000000 --- a/src/styles/_calendar.scss +++ /dev/null @@ -1,97 +0,0 @@ -.calendar { - display: flex; - justify-content: center; -} - -.react-calendar__navigation__label { - font-weight: bold; - font-size: 1.8rem; -} - -.react-calendar__navigation__arrow.react-calendar__navigation__next2-button, -.react-calendar__navigation__arrow.react-calendar__navigation__prev2-button { - display: none; -} - -.react-calendar__navigation__label__labelText.react-calendar__navigation__label__labelText--from { - text-transform: capitalize; -} - -.react-calendar { - border: none; -} - -.react-calendar__month-view__weekdays { - display: grid !important; - grid-template-columns: repeat(7, 1fr); - column-gap: 2.4rem; -} -.react-calendar__month-view__weekdays__weekday { - text-transform: capitalize; - color: $main; - font-size: 1.6rem; - font-weight: bold; - margin-bottom: 1.6rem; -} - -.react-calendar__tile.react-calendar__month-view__days__day { - font-size: 1.6rem; - color: $black; -} - -.react-calendar__tile.react-calendar__month-view__days__day.react-calendar__month-view__days__day--neighboringMonth { - color: $dark-gray; -} - -.react-calendar__tile--active { - // background: $red; - color: $white !important; -} - -.react-calendar__month-view__days__day--weekend { - color: $black; -} - -.react-calendar__month-view__days { - display: grid !important; - grid-template-columns: repeat(7, 1fr); - column-gap: 2.4rem; - row-gap: 1.1rem; -} - -.react-calendar__tile { - width: 3rem; - height: 3rem; - padding: 0.8rem; - border-radius: 1.5rem; - display: flex; - align-items: center; - justify-content: center; -} - -.react-calendar__tile--now:enabled:hover { - background: $red; - color: $white !important; -} - -.react-calendar__tile--now:enabled:focus { - background: $blue; - color: $white !important; -} - -.react-calendar__tile--now { - background: $red; - color: $white !important; -} - -.react-calendar__navigation__arrow.react-calendar__navigation__next-button { - display: block; - background: url('../assets/icons/stroke-right-black.svg') no-repeat center; - color: transparent; -} - -.react-calendar__navigation__arrow.react-calendar__navigation__prev-button { - display: block; - background: url('../assets/icons/stroke-left-black.svg') no-repeat center; - color: transparent; -} diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss deleted file mode 100644 index ac16fbc..0000000 --- a/src/styles/_footer.scss +++ /dev/null @@ -1,61 +0,0 @@ -.footer { - padding: 6.4rem; - background: $main; -} - -.footer-inner { - display: grid; - grid-template-columns: 1fr auto 1fr; - gap: 3.2rem; - justify-content: space-between; -} - -.footer-left, -.footer-mid, -.footer-right { - justify-self: flex-start; -} - -.footer-left { - ul { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1.6rem; - a { - color: $white; - font-size: 1.6rem; - } - } -} - -.footer-list { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1.6rem; -} - -.footer-list-item { - display: flex; - align-items: flex-start; - gap: 2.4rem; - svg { - width: 2.4rem; - height: 2.4rem; - } - - a, - p { - color: $white; - font-size: 1.6rem; - line-height: 2.2rem; - } -} - -.footer-list-inner { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 1.6rem; -} diff --git a/src/styles/_header.scss b/src/styles/_header.scss deleted file mode 100644 index e11d736..0000000 --- a/src/styles/_header.scss +++ /dev/null @@ -1,175 +0,0 @@ -// SUPHEADER -.supheader { - height: 11rem; - background: $main; -} - -.supheader-inner { - display: flex; - justify-content: flex-start; - align-items: center; - height: 100%; - position: relative; - - h1 { - height: 100%; - a { - font-size: 2rem; - color: $white; - display: block; - height: 100%; - display: flex; - align-items: center; - } - } -} - -.supheader-logo { - max-width: 48.8rem; - height: 100%; - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); -} - -// NAV - -.nav { - background: $main; -} - -.nav-inner { - ul { - display: flex; - align-items: center; - justify-content: space-evenly; - gap: 0.8rem; - - li { - a { - display: block; - padding: 1.6rem 0; - font-size: 1.6rem; - color: $white; - } - } - } -} - -// SUBHEADER - -.subheader-inner { - display: grid; - grid-template-columns: 42rem 10rem 41rem; - justify-content: space-between; - gap: 1.6rem; -} - -.subheader-left { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.8rem; - li { - a, - div { - padding: 1.2rem; - } - - a { - font-size: 1.6rem; - color: $black; - } - } -} - -#time { - display: flex; - flex-direction: column; - .time { - font-size: 2.4rem; - color: $black; - text-align: center; - } - - .date { - font-size: 1.2rem; - color: $black; - text-align: center; - } -} - -.subheader-mid { - width: 10rem; - height: 7.2rem; -} - -.subheader-right { - min-height: 7.3rem; - display: flex; - align-items: center; - justify-content: space-between; - gap: 4rem; -} - -// LANGUAGE -.language-wrapper { - height: 100%; -} - -.language-trig { - height: 100%; - display: flex; - align-items: center; - gap: 0.8rem; - cursor: pointer; - - span { - font-size: 1.6rem; - color: $black; - } - - div { - width: 1.6rem; - height: 1.6rem; - } -} - -// SEARCH -.search-wrapper { - width: 100%; - max-width: 32rem; - - form { - position: relative; - width: 100%; - background: transparent; - display: block; - border: 0.1rem solid $gray; - border-radius: 0.5rem; - padding: 1rem; - - input { - font-size: 1.6rem; - color: $black; - } - - div { - pointer-events: none; - display: none; - background: transparent; - position: absolute; - left: 1rem; - top: 1rem; - display: flex; - align-items: center; - gap: 0.8rem; - - span { - font-size: 1.6rem; - color: $gray; - } - } - } -} diff --git a/src/styles/_news.scss b/src/styles/_news.scss deleted file mode 100644 index 0f472e0..0000000 --- a/src/styles/_news.scss +++ /dev/null @@ -1,48 +0,0 @@ -.news-inner { - display: grid; - grid-template-columns: 1fr minmax(50rem, 30rem); - gap: 4rem; - padding: 6.4rem 0; -} - -.news-item { - display: flex; - flex-direction: column; - gap: 2.4rem; -} - -.news-head { - display: flex; - flex-direction: column; - gap: 2.4rem; -} - -.news-head-top { - display: flex; - gap: 3.2rem; - align-items: center; - - h4 { - font-size: 1.8rem; - color: $main; - } - - p { - font-size: 1.4rem; - color: $main; - } -} - -.news-head-bottom { - font-size: 2.4rem; - color: $main; -} - -.news-content { - display: flex; - flex-direction: column; - gap: 1.6rem; - font-size: 1.6rem; - line-height: 2.2rem; - color: $black; -} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index faa8215..e69de29 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,14 +0,0 @@ -$main: #2368ad; -$blue: #3c7ec0; -$light: #c1daf3; -$white: #ffffff; -$black: #272727; -$red: #e53131; -$gray: #a6a6a6; -$dark-gray: #7d7d7d; -$border-gray: #d9d9d9; - -@mixin wh100 { - width: 100%; - height: 100%; -} diff --git a/src/styles/_video.scss b/src/styles/_video.scss deleted file mode 100644 index 24119ce..0000000 --- a/src/styles/_video.scss +++ /dev/null @@ -1,80 +0,0 @@ -.video { - padding: 6.4rem 0; - background: $light; -} - -.video-wrapper { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2.4rem; -} - -.video-inner { - display: flex; - flex-direction: column; - gap: 3.2rem; - - h2 { - font-size: 2.4rem; - color: $black; - } -} - -.video-item { - display: flex; - flex-direction: column; - gap: 1.8rem; -} - -.video-img { - overflow: hidden; - @include wh100; - max-height: 16.2rem; - border-radius: 0.8rem; - - img { - @include wh100; - object-fit: cover; - } -} - -.video-item-bottom { - display: flex; - flex-direction: column; - gap: 0.8rem; - color: $black; - - span { - font-size: 1.2rem; - } - - h5 { - font-size: 1.6rem; - line-height: 2.2rem; - } -} - -.video-link { - max-width: fit-content; - border-radius: 0.5rem; - background: $main; - .inner { - font-size: 1.6rem; - color: $white; - padding: 0.8rem 1.6rem; - display: flex; - align-items: center; - justify-content: flex-start; - gap: 1.6rem; - } - - .arrow-div { - display: flex; - align-items: center; - } - - svg { - width: 1.6rem; - height: 1.6rem; - } -} diff --git a/src/styles/style.scss b/src/styles/style.scss index 008de7b..ea36480 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,8 +1,2 @@ -@import './variables'; -@import './general'; -@import './header'; -@import './footer'; -@import './video'; -@import './news'; -@import './aside'; -@import './calendar'; +@import "./variables"; +@import "./general"; diff --git a/src/types/header.types.ts b/src/types/header.types.ts deleted file mode 100644 index 3f338c8..0000000 --- a/src/types/header.types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface navListItemType { - path: string; - title: string; -} -export type navListDataType = navListItemType[]; diff --git a/src/types/video.types.ts b/src/types/video.types.ts deleted file mode 100644 index 8594f7b..0000000 --- a/src/types/video.types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface videoItemType { - img: string; - date: string; - title: string; -}