diff --git a/static/style.css b/static/style.css index 6896618..1d1582b 100644 --- a/static/style.css +++ b/static/style.css @@ -140,7 +140,7 @@ main { .article-list { list-style: none; padding: 0; - margin: 1rem 0; + margin: 0 0 2rem 0; } .article-item { @@ -189,6 +189,60 @@ main { transition: color 0.3s ease; } +/* Timeline layout */ +.timeline { + position: relative; + padding-left: 2rem; +} + +.timeline::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 2px; + background: var(--border-color); +} + +.timeline-date { + position: relative; + margin: 2rem 0 1rem; + padding-left: 1.5rem; +} + +.timeline-date::before { + content: ''; + position: absolute; + left: -2.35rem; + top: 0.35rem; + width: 0.75rem; + height: 0.75rem; + border-radius: 50%; + background: var(--accent-color); + border: 2px solid var(--background-color); +} + +.date-label { + font-weight: 700; + font-size: 1.1rem; + color: var(--primary-color); +} + +.date-count { + margin-left: 0.75rem; + font-size: 0.85rem; + color: var(--secondary-color); +} + +.article-item { + padding-left: 1rem; +} + +.article-main { + flex: 1; +} + /* Pagination */ .pagination { display: flex; diff --git a/templates/articles.html b/templates/articles.html index c95fc1d..0eec9c4 100644 --- a/templates/articles.html +++ b/templates/articles.html @@ -13,15 +13,24 @@ {% endif %} -
{{ article.date }}
-{{ article.summary }}
-{{ article.summary }}
+