diff --git a/src/components/MediumBlog/MediumBlog.css b/src/components/MediumBlog/MediumBlog.css index 66ce19e..e666d81 100644 --- a/src/components/MediumBlog/MediumBlog.css +++ b/src/components/MediumBlog/MediumBlog.css @@ -31,7 +31,7 @@ .mediumBlockWrapper { width: 394px; - height: 244px; + height: 123px; } .mediumBlockWrapper a { @@ -40,11 +40,13 @@ } .mediumBlock { + position: relative; overflow: hidden; display: flex; flex-direction: column; - width: 390px; - height: 234px; + height: 113px; + padding: 20px; + background: #1F2526; border: 1px solid var(--ifm-toc-border-color); border-radius: 6px; transition: margin-top ease 0.4s; @@ -56,16 +58,6 @@ cursor: pointer; } -.descriptionBlock { - background: #1F2526; - border-top: 1px solid #383939; - height: 113px; - padding: 20px; - position: relative; - display: flex; - flex-direction: column; -} - .articleTitle { font-weight: 400; font-size: 14px; @@ -94,17 +86,12 @@ } @media (max-width: 460px) { - .mediumBlock { - width: 300px; - height: 208px; - } - .mediumBlockWrapper { width: 304px; - height: 218px; + height: 113px; } - .descriptionBlock { + .mediumBlock { padding: 14px; } diff --git a/src/components/MediumBlog/MediumBlog.js b/src/components/MediumBlog/MediumBlog.js index 87de3fa..9f9276b 100644 --- a/src/components/MediumBlog/MediumBlog.js +++ b/src/components/MediumBlog/MediumBlog.js @@ -46,19 +46,12 @@ export const MediumBlog = () => { aria-label={item.title} >
- {item.title} -
-

- {item.title.replace("&", "&")} -

-

- {item.pubDate.slice(0, 10)} -

-
+

+ {item.title.replace("&", "&")} +

+

+ {item.pubDate.slice(0, 10)} +