Breathe 2024 theme RTL support

[adamwoodnz]

Audit the new Make blog theme (wporg-breathe-2024) for RTL support, in particular the /team sites, eg. https://ar.wordpress.org/team/

• Log issues as comments below
• Fix issues

[adamwoodnz]

[adamwoodnz]

[adamwoodnz]

[adamwoodnz]

[adamwoodnz]

Above issues are all fixed, leaving open in case anymore are found.

[adamwoodnz]

@ironnysh would you have any time for some RTL testing for us please? You can just leave comments below for anything you find 🙏

[ironnysh]

Hey @adamwoodnz, sure, happy to help. I'll review it tomorrow

[ironnysh]

Hey @adamwoodnz, here are my findings:

1. Dropdown nav item is misaligned
   

---

2. Switch the direction of the content and sidebar areas. By the way, why is the theme still using floats when we've been blessed by widely-supported flex and grid? :-)
   

---

3. Bullets instead of avatars and extra padding on list items (sidebar)
   

---

4. Extra bullets and wrong unicode arrow in the bottom nav (next-previous posts)
   

---

5. Extra margin on the right in the footer
   

---

6. Missing spacing on the team name in non-desktop breakpoints (889 pixels down to 320 pixels)
   

---

7. Not sure if this is a theme or content issue, but the date-time format is wrong
   

[adamwoodnz]

Thanks @ironnysh!

[adamwoodnz]

2. Switch the direction of the content and sidebar areas. By the way, why is the theme still using floats when we've been blessed by widely-supported flex and grid? :-)

On LTR sites the sidebar is on the right. Should it be that way for RTL too? I expected it to swap.

This is an old theme that we are restyling, so there is still a lot of float magic around 🙂

[ironnysh]

On LTR sites the sidebar is on the right. Should it be that way for RTL too? I expected it to swap.

Exactly. Right now, the sidebar remains on the right also in RTL:

The screenshot I pasted above is the desired end result, with the implemented CSS changes. Should have probably made it clearer :-)

This is an old theme that we are restyling, so there is still a lot of float magic around 🙂

Fun with vintage! 😅 So, assuming it won't be updated to flex/grid, these are the styles that need to be updated:

.widget-area {
-float: right;
+float: left;
}
#secondary {
-clear: right;
+clear: left;
｝
.content-area {
-float: left;
+float: right;
-padding-right: 20px;
+padding-left: 20px;
｝

[adamwoodnz]

3. Bullets instead of avatars and extra padding on list items (sidebar)

Those are actually in the content

[adamwoodnz]

4. Extra bullets and wrong unicode arrow in the bottom nav (next-previous posts)

Same with these bullets, the post titles appear to include them