Cosmetic change in quote CSS #347

Open

subtype wants to merge 2 commits from subtype/akkoma-fe:css_quote_margin into develop

subtype commented

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

First-time contributor

.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_2.png

84 KiB

akkoma_quote_original.png

174 KiB

akkoma_quote_only_whitespace_2.png

82 KiB

akkoma_quote_only_margin.png

179 KiB

akkoma_quote_final_2.png

83 KiB

akkoma_quote_final.png

178 KiB

akkoma_quote_only_whitespace.png

174 KiB

akkoma_quote_only_margin_2.png

84 KiB

👍 2

subtype added 2 commits 2023-10-03 15:12:02 +00:00

16467d2e19 Changed StatusBody.text white space to normal

ci/woodpecker/pr/woodpecker Pipeline was successful Details

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

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 💀