.post-meta { font-size: 12px; margin-bottom: .5rem; text-transform: uppercase; display: flex; overflow: hidden; } .post-meta > *:not(:first-child):before { content: "ยท"; padding: 0 .25em; color: var(--bs-gray-400); } .post-meta a:not(.publication), .post-meta span { color: var(--bs-gray-600); white-space: nowrap; } .post-meta a:not(.publication):hover { color: var(--bs-dark); } a.publication { font-size: 12px; text-transform: uppercase; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ---------------------------------------- */ .post-grid > div > a { display: block; color: var(--bs-dark); } .post-grid > div > a:hover { color: var(--link); } .post-grid figure { margin-bottom: .5rem; } .post-grid h3 { font-size: 14px; color: inherit; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .post-grid .post-meta { margin-bottom: .25rem; } /* ---------------------------------------- */ .section-title { font-size: calc(1.2rem + .2vw); padding-bottom: .5rem; border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: baseline; } .section-title span { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--bs-gray-600); letter-spacing: -0.01em; } .section-title span svg { opacity: .7; margin-right: .25em; } .trending-list > div { margin: .75rem 0 0 0; border-bottom: 1px solid var(--bs-gray-100); padding-bottom: .25rem; } .trending-list > div:after { content: ''; display: block; clear: both; } .trending-list .image { float: right; width: 130px; position: relative; z-index: 2; margin: 0 0 .5rem 1rem; } .trending-list h3 { font-size: 16px; } .trending-list h3 a { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; color: var(--bs-dark); } .trending-list h3 a:hover { color: var(--link); } .trending-list p { margin-bottom: .5rem; line-height: 1.3; color: var(--bs-gray-700); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .trending-list .image span { display: none; } .trending-list.with-numbers .image span { display: block; position: absolute; top: 5px; left: 5px; color: #fff; z-index: 1; width: 26px; height: 26px; overflow: hidden; font-size: 12px; letter-spacing: -0.05em; font-weight: 600; text-align: center; line-height: 28px; background: linear-gradient(315deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .7) 100%); } .trending-list .related-posts { position: relative; padding: .25rem 1.25rem .25rem 1.25rem; margin-bottom: .25rem; } .trending-list .related-posts:before { position: absolute; top: 0; left: .25rem; content: ''; display: block; width: 3px; border-radius: 2px; height: 100%; background-color: var(--bs-gray-200); } .trending-list ul { list-style-type: none; margin: 0 0 .5rem 0; padding: 0; } .trending-list ul li { line-height: 1.3; font-weight: 500; margin-bottom: .75rem; } .trending-list ul li a:first-child { color: var(--bs-dark); } .trending-list ul li a:first-child:hover { color: var(--link); } a.related-btn { position: relative; display: inline-block; color: var(--bs-dark); padding: 7px 10px 6px 10px; font-weight: 600; line-height: 1; text-transform: uppercase; font-size: 10px; background-color: var(--bs-gray-200); border-radius: 3px; } a.related-btn:hover { opacity: .80; } .trending-list h3, .trending-list .post-meta { float: left; width: calc(100% - 130px - 1rem); } .trending-list p { min-width: calc(100% - 130px - 1rem); } .trending-list .related-posts { float: right; width: 100%; } @media (min-width: 768px) { .post-grid h3 { -webkit-line-clamp: 3; } .trending-list .image { float: left; width: 138px; margin-left: 0; margin-right: 1rem; } .trending-list h3, .trending-list .post-meta, .trending-list p, .trending-list .related-posts { float: right; width: calc(100% - 138px - 1rem); } .trending-list h3 { font-size: 18px; } .trending-list h3 a { -webkit-line-clamp: 3; } .trending-list p { min-width: initial; -webkit-line-clamp: 1; } } /* ---------------------------------------- */ .latest-posts, .top-posts { list-style-type: none; padding: 0; margin: 0 0 .5rem 0; } .latest-posts li, .top-posts li { display: flex; margin-top: .75rem; line-height: 1.3; } .latest-posts li span, .top-posts li span { flex: 0 0 3.15em; } .top-posts li span { text-align: center; } .latest-posts li span a, .top-posts li span a, .latest-posts li span, .top-posts li span { color: var(--bs-gray-600); font-weight: 400; font-size: 13px; } .latest-posts li span a:hover, .top-posts li span a:hover { color: var(--bs-dark); } .latest-posts li > div, .top-posts li > div { display: flex; flex-direction: column; } .latest-posts li a.title, .top-posts li a.title { font-size: 15px; font-weight: 600; color: var(--bs-dark); display: inline-block; } .latest-posts li a.title:hover, .top-posts li a.title:hover { color: var(--link); } .latest-posts li a.related-btn, .top-posts li a.related-btn { margin-top: .5rem; width: fit-content; } .latest-posts p { padding-top: .5rem; } .top-posts li a { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* ---------------------------------------- */ .page-header { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; row-gap: .5rem; } .page-header h1 { font-weight: 700; } .page-header h1, .page-header .description { margin-bottom: 0; } .page-header .description { line-height: 1.3; color: var(--bs-gray-700); } .page-header .description p { margin: 0; } .page-header .description a { font-weight: 600; } /* ---------------------------------------- */ .publication-header { margin: 1.25rem 0 0 0; } .publication-header a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-size: 11px; line-height: 1; font-weight: 600; text-transform: uppercase; } .publication-header span { display: block; width: 135px; height: 100%; padding: 7px 0 7px 8px; clip-path: polygon(0 0, 115px 0%, 135px 100%, 0% 100%); } .publication-header img { height: 16px; vertical-align: middle; } /* ---------------------------------------- */ .article-body { font-size: 16px; } .article-body img { max-width: 100%; height: auto; display: block; margin: 0 auto; } .article-body a { font-weight: 600; } .article-body h2 { font-size: calc(1.2rem + .2vw); line-height: 1.3; } .article-body table { width: 100%; margin-bottom: 1rem; } /* ---------------------------------------- */ .weather-icon { width: 100px; height: 100px; flex: 0 0 100px; } .am-icon { width: 100%; height: 100%; display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; } @media (min-width: 576px) { .weather-card { width: 33.33333%; } } /* ---------------------------------------- */ .article-promo a { display: flex; align-items: center; } .article-promo .image { flex: 0 0 115px; margin-right: .75rem; } .article-promo h3 { flex: 1; font-size: 15px; } .article-promo figure, .article-promo h3 { margin-bottom: 0; }