From a25b3c13b1ac5c40e48cdf42baf4081dd33dcf9f Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Mon, 14 Aug 2023 21:13:21 +0100 Subject: Adds news index page --- public/main.css | 48 +++++++++++++++--------------------------------- 1 file changed, 15 insertions(+), 33 deletions(-) (limited to 'public') diff --git a/public/main.css b/public/main.css index 0b88656..1fdf2ab 100644 --- a/public/main.css +++ b/public/main.css @@ -287,47 +287,29 @@ ol li { } } -.news-post { - margin-block: 1.5rem; - margin-inline: 0.5rem; - width: 30%; - border: solid 2px var(--text-color); - color: var(--text-color); - overflow: hidden; - text-overflow: ellipsis; - padding-inline: var(--spacing-inline-sm); - padding-block: var(--spacing-block-sm); - transition: - background-color 300ms, - color 300ms, - transform 50ms; -} - -.news-post:hover { - background-color: var(--background-highlight-color); - color: var(--text-highlight-color); +.news-index { + display: flex; + flex-direction: column; + gap: var(--spacing-block-lg); } -.news-post:active { - transform: scale(1.1, 1.1); +.news-index__item { + display: block; + transition: background 300ms; + padding-block: var(--spacing-block-md); + padding-inline: var(--spacing-inline-sm); } -.news-post__title { - padding-block: 0; - text-decoration: underline; - transition: text-decoration 300ms; +.news-index__item:hover { + background: var(--background-highlight-color); } -.news-post:hover .news-post__title { - text-decoration-color: transparent; +.news-index__item :first-child { + margin-block-start: 0; } -.news-post__summary { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - white-space: normal; - font-size: var(--font-size-sm); +.news-index__item :last-child { + margin-block-end: 0; } footer { -- cgit v1.2.3