diff --git a/services/web/app/views/_mixins/previous_page_link.pug b/services/web/app/views/_mixins/previous_page_link.pug new file mode 100644 index 0000000000..5218c6a6aa --- /dev/null +++ b/services/web/app/views/_mixins/previous_page_link.pug @@ -0,0 +1,4 @@ +mixin previous-page-link(href, text) + a.previous-page-link(href=href) + i.material-symbols.material-symbols-rounded(aria-hidden="true") arrow_left_alt + | #{text} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss index 26f839df07..47a7886ca3 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss @@ -25,3 +25,4 @@ @import 'beta-badges'; @import 'list-group'; @import 'select'; +@import 'link'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss index 1859d32ecd..6b81c8e0cc 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss @@ -25,18 +25,50 @@ } } + .blog-post-container { + @include media-breakpoint-up(lg) { + padding-right: 0; + } + } + + .blog-post { + @include media-breakpoint-up(lg) { + margin-right: var(--spacing-09); + } + + .blog-title { + margin-bottom: var(--spacing-04); + } + + .blog-date { + display: block; + margin-bottom: var(--spacing-08); + } + + .blog-content { + > *:last-child { + margin-bottom: 0; + } + } + + .blog-footer-tags { + margin-top: var(--spacing-12); + } + } + .tags { margin-top: var(--margin-md); .tags-list { list-style: none; padding: 0; + display: flex; + gap: var(--spacing-05); + flex-wrap: wrap; } li { - display: inline-block; - margin: 0; - padding: 0 var(--spacing-04) var(--spacing-04) 0; + display: inline-flex; } a { diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/link.scss b/services/web/frontend/stylesheets/bootstrap-5/components/link.scss new file mode 100644 index 0000000000..20623cded6 --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/components/link.scss @@ -0,0 +1,20 @@ +.previous-page-link { + @include body-sm; + + text-decoration: none; + font-weight: 600; + color: var(--neutral-90); + + &:hover { + text-decoration: underline; + } + + &:visited { + color: var(--neutral-90); + } + + i { + margin-right: var(--spacing-02); + padding-bottom: 3px; + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss index a9cb3d272c..3ee29e4967 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss @@ -427,10 +427,6 @@ .tags-list { padding: 0 var(--spacing-05); margin-bottom: 0 !important; - - a { - text-decoration: none; - } } .sidebar-register-container { diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 6a18f214b1..5ffcebadbb 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -174,6 +174,7 @@ "automatic_user_registration_uppercase": "Automatic user registration", "back": "Back", "back_to_account_settings": "Back to account settings", + "back_to_all_posts": "Back to all posts", "back_to_configuration": "Back to configuration", "back_to_editor": "Back to editor", "back_to_log_in": "Back to log in",