Cosmetic change in quote CSS #347

Open
subtype wants to merge 2 commits from subtype/akkoma-fe:css_quote_margin into develop
First-time contributor

Hi, I've noticed that there's a lot more whitespace above quotes than below; this is less noticeable on large quotes but more so on one-liners after a mention. I've compared the current develop to two changes I've made:

  • .text white-space from pre-wrap to normal
  • .RichContent blockquote margin from margin: 0.2em 0 0.2em 2em; to margin-left: 2em;

The latter is equivalent to margin: 0.2em 0 1em 2em; with what it inherits from parent.

I've used these two posts for testing:

Original (current develop branch):

akkoma_quote_original.png
akkoma_quote_original_2.png

Only white-space:

akkoma_quote_only_whitespace.png
akkoma_quote_only_whitespace_2.png

Only margin:
akkoma_quote_only_margin.png
akkoma_quote_only_margin_2.png

Both commits:
akkoma_quote_final.png
akkoma_quote_final_2.png

The last one looks best for me.

Hi, I've noticed that there's a lot more whitespace above quotes than below; this is less noticeable on large quotes but more so on one-liners after a mention. I've compared the current `develop` to two changes I've made: * `.text white-space` from `pre-wrap` to `normal` * `.RichContent blockquote margin` from `margin: 0.2em 0 0.2em 2em;` to `margin-left: 2em;` The latter is equivalent to `margin: 0.2em 0 1em 2em;` with what it inherits from parent. I've used these two posts for testing: * https://akko.hollow.capital/notice/AaOcAhs6VPu7tak90i * https://akko.hollow.capital/notice/AaLwSH6gKYi1k7UZA8 Original (current `develop` branch): ![akkoma_quote_original.png](/attachments/81e2f94c-bed8-4a2f-bb34-452d869ee6ee) ![akkoma_quote_original_2.png](/attachments/c68b2622-18cc-4ead-990b-c2ef9bac4c6e) Only `white-space`: ![akkoma_quote_only_whitespace.png](/attachments/1857d3ff-23bf-455d-8ede-99afdb602b8a) ![akkoma_quote_only_whitespace_2.png](/attachments/013004cc-10f0-40eb-a26a-404e61d8b781) Only `margin`: ![akkoma_quote_only_margin.png](/attachments/534bf737-409d-4228-b43b-390a38c1e848) ![akkoma_quote_only_margin_2.png](/attachments/0ad2e1ee-cfeb-4c39-b215-44b73f4786cd) Both commits: ![akkoma_quote_final.png](/attachments/9a93739e-c482-4fc5-8920-31e1d2f299cd) ![akkoma_quote_final_2.png](/attachments/912c88ed-a514-4a6b-aca3-409652a170bf) The last one looks best for me.
subtype added 2 commits 2023-10-03 15:12:02 +00:00
Author
First-time contributor

Ok, if nobody wants it in upstream, it's easier for me to handle it in my instance's custom.css like that:

.RichContent {
   blockquote {
     margin: 0.2em 0 1em 2em !important;
   }
} 

.StatusBody {
   .text {
      & > * {
        white-space: normal !important;
      }
   }
} 
Ok, if nobody wants it in upstream, it's easier for me to handle it in my instance's `custom.css` like that: ``` .RichContent { blockquote { margin: 0.2em 0 1em 2em !important; } } .StatusBody { .text { & > * { white-space: normal !important; } } } ```
Contributor

This has bothered me too, +1

This has bothered me too, +1
Author
First-time contributor

For what is worth, I tried to pass my custom tweak around on fedi, and it didn't get much traction (I'm not that popular, but some admins of relatively big instances do follow me). Could be that people prefer using unformatted > to formatted quotes anyway because of the awful way stock Pleroma does it (absurd amount of whitespace above the quote, nothing like stock Akkoma).

For what is worth, I tried to pass my custom tweak around on fedi, and it didn't get much traction (I'm not that popular, but some admins of relatively big instances do follow me). Could be that people prefer using unformatted `>` to formatted quotes anyway because of the awful way stock Pleroma does it (absurd amount of whitespace above the quote, nothing like stock Akkoma).
Author
First-time contributor

For what is worth, the above CSS breaks code blocks, so good call for not merging any of that; this custom.css fixes it (I haven't tried doing it in akkoma-fe itself):

.RichContent {
   blockquote {
     margin: 0.2em 0 1em 1em !important;
     padding-left: 1.0em;
     border-style: solid;
     border-width: 0 0 0 2px;
     border-color: var(--border);
   }

   code {
     white-space: pre-wrap !important;
   }
} 

.StatusBody {
   .text {
      & > * {
        white-space: normal !important;
      }
   }
} 

Sorry for bothering you all with broken styles 💀

For what is worth, the above CSS breaks code blocks, so good call for not merging any of that; this custom.css fixes it (I haven't tried doing it in akkoma-fe itself): ``` .RichContent { blockquote { margin: 0.2em 0 1em 1em !important; padding-left: 1.0em; border-style: solid; border-width: 0 0 0 2px; border-color: var(--border); } code { white-space: pre-wrap !important; } } .StatusBody { .text { & > * { white-space: normal !important; } } } ``` Sorry for bothering you all with broken styles 💀
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful
This pull request can be merged automatically.
This branch is out-of-date with the base branch
You are not authorized to merge this pull request.
Sign in to join this conversation.
No description provided.