diff --git a/innovedus_cms/home/static/css/home.css b/innovedus_cms/home/static/css/home.css index b781c0e..27ce532 100644 --- a/innovedus_cms/home/static/css/home.css +++ b/innovedus_cms/home/static/css/home.css @@ -92,3 +92,9 @@ .section-o .list-title a{ color: #f4a41c; } + +@media (min-width: 768px) and (max-width: 1023px) { + .list-title .category_title { + width: 142px; + } +} diff --git a/innovedus_cms/home/static/css/horizontal_list.css b/innovedus_cms/home/static/css/horizontal_list.css index 12518bd..8d777cf 100644 --- a/innovedus_cms/home/static/css/horizontal_list.css +++ b/innovedus_cms/home/static/css/horizontal_list.css @@ -142,3 +142,36 @@ border: 1px dashed #ddd; border-radius: 12px; } + +@media (min-width: 768px) and (max-width: 1023px) { + .horizontal-list { + gap: 16px; + } + + .horizontal-list li { + flex: 0 0 145px; + } + + .horizontal-list-thumb { + width: 139px; + height: 114px; + } + + .section-b .horizontal-list-thumb::after { + background: url("../img/picfrm_b139.png") no-repeat left bottom / cover; + background-size: 139px 25px; + } + + .section-o .horizontal-list-thumb::after { + background: url("../img/picfrm_o139.png") no-repeat left bottom / cover; + background-size: 139px 25px; + } + + .horizontal-list .article-title { + width: 145px; + } + + .horizontal-list .article-intro { + display: none; + } +} diff --git a/innovedus_cms/home/static/css/news_list.css b/innovedus_cms/home/static/css/news_list.css index 6d639fb..0ce1255 100644 --- a/innovedus_cms/home/static/css/news_list.css +++ b/innovedus_cms/home/static/css/news_list.css @@ -173,13 +173,14 @@ } .more-news { - width: 200px; + flex: 1 1 200px; display: flex; flex-direction: column; gap: 16px; } .more-news .article-title { + max-width: 200px; font-size: 20px; display: -webkit-box; -webkit-line-clamp: 1; @@ -187,7 +188,46 @@ overflow: hidden; } -@media (max-width: 768px) { +@media (max-width: 1023px) { + .more-news { + display: grid; + grid-template-columns: 200px 1fr 1fr; + gap: 8px 16px; + align-items: start; + } + + .more-news .more-news-title { + grid-column: 1; + grid-row: 1 / span 2; + align-self: stretch; + } + + .more-news .article-title { + max-width: none; + } + + .more-news a:nth-of-type(1) { + grid-column: 2; + grid-row: 1; + } + + .more-news a:nth-of-type(2) { + grid-column: 2; + grid-row: 2; + } + + .more-news a:nth-of-type(3) { + grid-column: 3; + grid-row: 1; + } + + .more-news a:nth-of-type(4) { + grid-column: 3; + grid-row: 2; + } +} + +@media (max-width: 767px) { .news-hero { grid-template-columns: 1fr; grid-template-areas: @@ -205,3 +245,34 @@ max-width: none; } } + +@media (min-width: 768px) and (max-width: 1023px) { + .news-hero { + grid-template-columns: 318px 1fr; + } + + .news-hero .fist-news-title { + max-width: 320px; + } + + .news-hero .first-news-image { + width: 318px; + } + + .news-hero .first-news-image::after { + background-size: 318px 25px; + } + + .news-hero .first-news-image img { + width: 318px; + height: 290px; + } + + .news-hero .first-news-content { + height: 290px; + } + + .news-list-lower { + gap: 16px; + } +} diff --git a/innovedus_cms/home/templates/home/includes/horizontal_list.html b/innovedus_cms/home/templates/home/includes/horizontal_list.html index bfaf836..8bdfac2 100644 --- a/innovedus_cms/home/templates/home/includes/horizontal_list.html +++ b/innovedus_cms/home/templates/home/includes/horizontal_list.html @@ -13,9 +13,9 @@
+
{% endif %}