diff --git a/src/styles/blog.sass b/src/styles/blog.sass index d2109d77..e1ec09a0 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -201,12 +201,13 @@ width: 75% .blog_index-header - width: 100% - overflow: hidden - position: relative - display: block border-top-left-radius: 3px border-top-right-radius: 3px + display: block + overflow: hidden + position: relative + text-align: center + width: 100% img width: 100% @@ -588,7 +589,6 @@ left: 25px right: 25px - .item-header width: 50px height: 50px @@ -613,30 +613,6 @@ a.item-title, .item-info padding-left: 70px - h4.blog_index-title - color: $color-text-dark-secondary - margin-left: 80px - padding-top: 25px - - &.blog-archive - display: flex - font-size: 1em - margin-left: 0 - padding: 0 - text-align: center - - a - flex: 1 - padding: 15px - - &.disabled - color: $color-text-dark-hint - pointer-events: none - - h3.blog-archive-title - text-align: center - - #blog_index-container, #blog_post-container .blog_index-item @@ -655,17 +631,38 @@ padding: 15px 10px margin: 0 - h4.blog_index-title - margin-left: 35px - &.cloud-blog #blog_post-container, #blog_post-container .blog_index-item padding-top: 55px font-size: .9em -.blog-archive h1 - border-bottom: thin solid $color-background - padding-bottom: 0.3ex + +.blog-archive-navigation + +media-xs + font-size: 1em + max-width: initial + + border-bottom: thin solid $color-background-dark + display: flex + font: + size: 1.2em + weight: 300 + margin: 0 auto + max-width: 90% text-align: center - color: $color-text-dark-secondary + +text-overflow-ellipsis + + &:last-child + border: none + + a, span + +media-xs + padding: 10px + + flex: 1 + padding: 25px 15px + + span + color: $color-text-dark-secondary + pointer-events: none diff --git a/src/templates/nodes/custom/blog/_macros.pug b/src/templates/nodes/custom/blog/_macros.pug index abf3ae23..22734f92 100644 --- a/src/templates/nodes/custom/blog/_macros.pug +++ b/src/templates/nodes/custom/blog/_macros.pug @@ -64,13 +64,14 @@ a.btn.btn-default.button-create(href="{{url_for('nodes.posts_create', project_id | {% for node in posts[1:] %} | {% if loop.first %} -h4.blog_index-title Blasts from the past +.blog-archive-navigation + span Blasts from the past | {% endif %} | {{ render_blog_list_item(node) }} | {% endfor %} | {% if more_posts_available %} -h4.blog_index-title.blog-archive +.blog-archive-navigation a(href="{{ project.blog_archive_url }}") | {{posts_meta.total - posts|length}} more blog posts over here i.pi-angle-right @@ -84,22 +85,36 @@ h4.blog_index-title.blog-archive | {% endif %} {# posts #} | {% endmacro %} -//- ******************************************************* -// +//- Macro for rendering the navigation buttons for prev/next pages -// | {% macro render_archive_pagination(project) %} -h4.blog_index-title.blog-archive - a(class="{% if not project.blog_archive_prev %}disabled{% endif %}", +.blog-archive-navigation + | {% if project.blog_archive_prev %} + a.archive-nav-button( href="{{ project.blog_archive_prev }}", rel="prev") i.pi-angle-left | Previous page + | {% else %} + span.archive-nav-button + i.pi-angle-left + | Previous page + | {% endif %} - a(href="{{ url_for('main.project_blog', project_url=project.url) }}", rel="prev") + a.archive-nav-button( + href="{{ url_for('main.project_blog', project_url=project.url) }}") | Blog Index - a(class="{% if not project.blog_archive_next %}disabled{% endif %}", + | {% if project.blog_archive_next %} + a.archive-nav-button( href="{{ project.blog_archive_next }}", rel="next") | Next page i.pi-angle-right + | {% else %} + span.archive-nav-button + | Next page + i.pi-angle-right + | {% endif %} + | {% endmacro %} | {% macro render_archive(project, posts, posts_meta) %} diff --git a/src/templates/nodes/custom/blog/archive.pug b/src/templates/nodes/custom/blog/archive.pug index bfc48972..78efc1fa 100644 --- a/src/templates/nodes/custom/blog/archive.pug +++ b/src/templates/nodes/custom/blog/archive.pug @@ -2,7 +2,7 @@ | {% import 'nodes/custom/blog/_macros.html' as blogmacros %} | {% block project_context %} -#blog_container.blog-archive +#blog_container #blog_index-container.expand-image-links | {{ blogmacros.render_archive(project, posts, posts_meta) }} -| {% endblock %} +| {% endblock project_context%} diff --git a/src/templates/nodes/custom/blog/archive_main_project.pug b/src/templates/nodes/custom/blog/archive_main_project.pug index ae818877..b3144f25 100644 --- a/src/templates/nodes/custom/blog/archive_main_project.pug +++ b/src/templates/nodes/custom/blog/archive_main_project.pug @@ -2,11 +2,11 @@ | {% import 'nodes/custom/blog/_macros.html' as blogmacros %} | {% block body %} -.container.blog-archive +.container #blog_container.cloud-blog #blog_index-container .blog_index-header - h3.blog-archive-title - | Blog Archive + h3 Blog Archive + | {{ blogmacros.render_archive(project, posts, posts_meta) }} -| {% endblock %} +| {% endblock body %}