Cosmetic change in quote CSS

subtype commented

2023-10-03 15:12:01 +00:00

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):

Only white-space:

Only margin:

Both commits:

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.

akkoma_quote_original.png

174 KiB

akkoma_quote_only_whitespace_2.png

82 KiB

akkoma_quote_only_whitespace.png

174 KiB

akkoma_quote_original_2.png

84 KiB

akkoma_quote_final.png

178 KiB

akkoma_quote_final_2.png

83 KiB

akkoma_quote_only_margin_2.png

84 KiB

akkoma_quote_only_margin.png

179 KiB

👍 2

subtype added 2 commits

2023-10-03 15:12:02 +00:00

Changed StatusBody.text white space to normal 16467d2e19

Changed RichContent.blockquote to only have margin-left 2em

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

fb909e2126

subtype commented

2023-10-10 19:03:05 +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; } } } ```

smitten commented

2023-10-31 03:23:09 +00:00

Contributor

This has bothered me too, +1

subtype commented

2023-10-31 18:29:25 +00:00

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).

subtype commented

2023-11-22 22:31:43 +00:00

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 💀