diff --git a/src/components/global/Aside.tsx b/src/components/global/Aside.tsx new file mode 100644 index 0000000..2a896fd --- /dev/null +++ b/src/components/global/Aside.tsx @@ -0,0 +1,12 @@ +// Components +import SectionTitle from './SectionTitle'; + +const Aside = () => { + return ( + + ); +}; + +export default Aside; diff --git a/src/components/global/SectionTitle.tsx b/src/components/global/SectionTitle.tsx new file mode 100644 index 0000000..9089c0c --- /dev/null +++ b/src/components/global/SectionTitle.tsx @@ -0,0 +1,9 @@ +interface Props { + title: string; +} + +const SectionTitle = ({ title }: Props) => { + return

{title}

; +}; + +export default SectionTitle; diff --git a/src/pages/News.tsx b/src/pages/News.tsx index f5b9f1a..6d8431f 100644 --- a/src/pages/News.tsx +++ b/src/pages/News.tsx @@ -1,5 +1,6 @@ // Components import NewsItem from '../components/news/NewsItem'; +import Aside from '../components/global/Aside'; const News = () => { return ( @@ -7,6 +8,7 @@ const News = () => {
+
diff --git a/src/styles/_aside.scss b/src/styles/_aside.scss new file mode 100644 index 0000000..1c33cd5 --- /dev/null +++ b/src/styles/_aside.scss @@ -0,0 +1,6 @@ +.title { + font-size: 2.4rem; + color: $main; + border-bottom: 0.1rem solid $main; + padding: 0.8rem 2.4rem; +} diff --git a/src/styles/_news.scss b/src/styles/_news.scss index c1e4785..ae4dd09 100644 --- a/src/styles/_news.scss +++ b/src/styles/_news.scss @@ -1,7 +1,7 @@ .news-inner { display: grid; - grid-template-columns: 1fr minmax(60rem, 30rem); - gap: 4.8rem; + grid-template-columns: 1fr minmax(50rem, 30rem); + gap: 4rem; padding: 6.4rem 0; } diff --git a/src/styles/style.scss b/src/styles/style.scss index 58dff6d..b7b0d3a 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -4,3 +4,4 @@ @import './footer'; @import './video'; @import './news'; +@import './aside';