Problem:

Belgrade currently lacks dedicated theming for blog/article listing and article pages.

The work includes:
• New card type: Create a new card style for blog/article content.
• Listing layout: Use the existing frontpage view to display blog cards horizontally; add a class option so the layout can be switched between vertical and horizontal.
• Single article page: Apply templates and styling for the article page content.
• CKEditor styling: Ensure elements like blockquotes are styled consistently with the design.
• Responsiveness & accessibility: Ensure layouts adapt well across devices and meet Drupal accessibility guidelines.

Attached are design references for the blog listing and article page theming.

Notes:

Some elements are not fully defined in the provided design. We will make reasonable assumptions following the theme’s existing styles and patterns to maintain a consistent look and feel.

CommentFileSizeAuthor
#8 After(related to 3522433).png309.32 KBanirudhsingh19
#8 Before(related to 3522433).png197.2 KBanirudhsingh19
#7 After(related to 3494468).png35.05 KBanirudhsingh19
#7 Before(related to 3494468).png28.94 KBanirudhsingh19
belgrade_1600_blog post.jpg934.83 KBmajmunbog
belgrade_1600_blog overview.jpg826.96 KBmajmunbog

Issue fork belgrade-3542564

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

majmunbog created an issue. See original summary.

majmunbog opened merge request !42

majmunbog’s picture

majmunbog commented

This is ready for review.

  • - Created a library for basic pages, page.basic, where basic body elements and blockquotes are styled. This library can be used to update or override styles for all body or content-driven pages.
  • - Comments now have a dedicated library definition and are fully themed and styled.
  • - Article pages are styled with two new container sizes—very narrow and narrow—to better display content. Both pages are styled to match the designs.
  • - Added a reusable date badge class with full styling.
  • - Applied badge classes to article tag fields.
  • - Created a new card type, card--basic, themed and styled according to the designs, and applied it to article teasers.
  • - Added new bust-out mixin to display full-width background color outside the section container.
  • - Added CSS variable for footer margin with defaults.
majmunbog’s picture

majmunbog commented
Status: Active » Needs review
anirudhsingh19’s picture

anirudhsingh19 commented

Working on this to shift changes from #3522433 and #3494468.

anirudhsingh19’s picture

anirudhsingh19 commented

I think I misunderstood the message. Well, the fixes that were introduced in the issues #3522433 and #3494468 are already included in this and looks good to me.

anirudhsingh19’s picture

anirudhsingh19 commented
StatusFileSize
new Before(related to 3494468).png28.94 KB
new After(related to 3494468).png35.05 KB

The whitespace beneath tags is clearly visible now. These screenshots are related to #3494468

anirudhsingh19’s picture

anirudhsingh19 commented
StatusFileSize
new Before(related to 3522433).png197.2 KB
new After(related to 3522433).png309.32 KB

The whitespace between articles on the home page is clearly visible now. These screenshots are related to #3522433.

niki v’s picture

niki v commented

Working for me, there is now white space at the bottom of content pages

  • majmunbog committed 144b180e on 2.x 
    Issue #3542564 by majmunbog, anirudhsingh19, niki v: Implement blog/...
majmunbog’s picture

majmunbog commented
Status: Needs review » Fixed
majmunbog’s picture

majmunbog commented

The code has been merged. This issue is now resolved. Thanks everyone for the help and testing!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.