web display issue on mobile

[shenxianpeng]

I didn't know it was ready. I checked the site from my phone, and

Something has got to be done about the landing page's first element.

1. The background color and the text color make it hard to read
2. It is way too big (at least for mobile)

Originally posted by @2bndy5 in cpp-linter/.github#57 (review)

[2bndy5]

I'm playing around with that div hero right now. What was the desired intention?

[shenxianpeng]

The background color and the text color make it hard to read

It seems fine when opening on desktop, maybe fix it on mobile first

[2bndy5]

ok I haven't tested this on mobile yet, but

1. I removed the gap between header and hero

2. I modified the button color to be more legible. I also modified the hover button text color so the text doesn't blend with the accent color:
   
   Notice in the first pic that the button has a yellow border. That yellow color is from our logo (the yellow circle).

3. I changed the hero's gradient second color to the green color used in our logo (the green check mark). But this doesn't help prevent the hovered button from disappearing into the background:

   

   Apparently, a gradient of indigo and green make cyan. So the hover button's color (cyan -- theme's accent color) can match the gradient background. We should probably just get rid of the animated gradient. I think there's too many colors to differentiate in a small area.

This works better with both light and dark themes now.