search

appirio-tech / tc-site

topcoder member-facing site
3 stars 19 forks source link

Challenge details page needs some enhancements in its CSS styling #462

Closed ThomasKranitsas closed 7 years ago

ThomasKranitsas commented 7 years ago

Fix challenge details css styles for headings. Related issue https://github.com/appirio-tech/topcoder-app/issues/938

birdofpreyru commented 7 years ago

@ThomasKranitsas Ok, here are a few more changes I would like to make:

screen-7

By changing what header number corresponds to which style I mean that the look of the page should stay the same, but the most large header (black, uppercase) should be encoded in the html by h1 tag, the red one should be encoded by h2, the green one by h3, and three small bold black ones should correspond to h4-h6. In other words, increasing the number x in hx we should move from the most noticeable header to the less noticeable one.

These few small changes here as well (not sure, why the red Final Submission Guidelines title stay red in my test, as I see you have changed it in the HTML markup, probably, something is cached in my browser, but please confirm it is uppercase black on your side):

screen-8

Also, in the end of the first section, I still see that the sample italic font is smaller in size than the surrounding regular text. They should be of the same size.

ThomasKranitsas commented 7 years ago

Ok.. I'll fix those tomorrow as it's late in my timezone and I'll push a commit in this PR

birdofpreyru commented 7 years ago

@ThomasKranitsas Hey, sorry for the delay with reviewing. It is almost what I want to be, but not yet.

  1. Change the tags of all headers in HTML template markup (CHALLENGE OVERVIEW, PLATFORMS, TECHNOLOGIES, ...) from H2 to H1. And also swap the styles of H1 and H2 headers in CSS, except of the colors.

    I.e. CHALLENGE OVERVIEW, PLATFORMS, TECHNOLOGIES, ... should be H1 in the HTML markup, and they should be in all capital letters (as they are now), but black color. The H1 Header should be the same style as them.

  2. The H2 Header in the sample challenge page should be text-transform: none (i.e. should be still red, but normal letters).

  3. The H3 Header is ok, but if you increment the font size just a bit (to be the same as H2 now, or a bit smaller), it will be even better.

  4. Final submission guidelines should be changed to H1 in HTML markup, so that it looks the same as TECHNOLOGIES, etc.

  5. All text in the Final submission guidelines section should be bold (or semi-bold) like it is now in the production version.