Feature #17629

Adjust the style of our "Donate" button to the topbar

Added by sajolida 2020-04-16 15:53:51 . Updated 2020-04-22 21:55:40 .

Target version:
Start date:
Due date:
% Done:


Feature Branch:
Type of work:

Affected tool:
Deliverable for:


sajolida and moire agree on having a green button in the banner.

See mockups in attachment.




#1 Updated by sajolida 2020-04-17 00:53:37

  • Status changed from Confirmed to Needs Validation
  • Assignee changed from sajolida to moire

I pushed a commit that does this on the production website: dcdc56b611.

moire or intrigeri: Please have a look!


Once we have an agreement on the Donate button, I’ll prepare a branch to release the topbar, independently from the new Home and About.

#2 Updated by intrigeri 2020-04-19 07:41:33

> https://tails.boum.org/about/staging/home/

I like the color and the placement of the “Donate” button.

Just my 2 cts: I somewhat miss the icon next to the text, that our current
“Donate” button has.

#3 Updated by moire 2020-04-19 11:15:15

Cool! Maybe the Search and Donate buttons are a bit too large?

See an attempt at modifying the page in the screenshot attached.

I support the idea of having an icon. I put ❤ but the current “receiving hand” would probably work too.

Reduced the size of the “search-and-donate” div and pushed it down the edge of the purple banner.

form#searchform, .donate a {
width: 130px;

#search-and-donate {
margin: 35px 15px 15px 0;
height: 70px;

Also, if relevant, regarding the searchbox:

“text-align:center” “Search” instead of “search” in the searchbox:


input#searchbox {
text-align: center;

#4 Updated by sajolida 2020-04-21 18:53:25

  • Assignee changed from sajolida to moire

Thanks for the quick review and all the proposals :) I pushed 0b3a2ae388..a40105fa2d.

  • In a40105fa2d I’m using a CSS flexbox to space Search and Donate evenly.
  • We can’t reduce the width further because of translations. For example, Portuguese is pretty wide and I used it as my base test case.
  • I didn’t try the donating hand because I’m afraid I won’t be accessible at such a small size.
  • I didn’t think I could capitalize “search” because it comes straight from ikiwiki but in the end I could :)

@moire: Could you have a last look?

#5 Updated by moire 2020-04-22 15:50:29

  • Assignee changed from moire to sajolida

So many details I’m oblivious of!
Great that you could Capitalize Search in the end.
Looks good to me.

#6 Updated by sajolida 2020-04-22 21:55:40

  • Status changed from Needs Validation to Resolved
  • Assignee deleted (sajolida)

So we have a design. Yay!