The tweet button is working for me by just left clicking on it.
Now speaking of that tweet button, you’ve coded it as:
That’s not valid HTML. Even though you refer to it as a button it is really just a link to twitter, so you should remove the
<button> and leave it as just an
<a>. Semantics are not based on what something looks like but rather on what its function is.
You’ve also removed the outline property from these “buttons” but haven’t replaced it with anything for their focus states. This is an accessibility issue. Keyboard users should be able to tell where their current keyboard focus is on your page. So you’ll need to add some sort of focus indicator when those buttons are focused by the keyboard.
Your app is fairly responsive to both changes in view port width and text size but I think it can be improved just a little. For example, when I narrow my browser as far as it will go you’ve set the font size for the buttons to
0.5em. Can you read the button text at that size? If so you have really good eye sight But I can barely make it out and I guarantee you that there are a lot of people who can’t read it at all. There is no need to shrink the text that much for narrow view ports. Personally, I don’t think you need to shrink it at all.
Another example, at a narrow view port you still have a lot of side padding, so the actual quote is only taking up maybe 40% of the page, which means I’m getting 2-3 words per line. You should think about getting rid of most of the side padding and allow the content to have more horizontal room to breath. This will be especially helpful for people who are viewing your page with an increased text size.