Thiago Website Fixes: Components Section #232
Description
Site Header — #header
Final copy should look like this.
- Give it a little more breathing room
padding: 2em
- Align items to baseline of "Tandem" in logo
position: relative;
top: 0.25rem
- Children set tight, Still in Poppins
font-family: Avenir Next,Helvetica Neue,Arial,sans-serif;
font-size: 24px;
text-decoration: none;
letter-spacing: -1.67px;
font-weight: 900;
letter-spacing: normal;
color: #ed3f7a;
Full pink?
Mobile Breakpoints
- Relationship of "Tandem" to the "Logo" should be the same in all breakpoints.
- Consider a small animation from logo to mobile menu tree are a wide variety over at jonshu
Homepage Section — .fp-section
- These should be article tags, maybe sections, but not divs
- Hover states are not a11y - consider using the pink, and making sure the contrast is adequate, is there any sort of formalized secondary palette? If not, consider establishing one to ensure consistency / a11y.
- Consider using verbs in ctas "View our recent wordpress work" have it be part of your brand voice "Acquaint yourself with wordpress work we've done" maybe a bit long, but it should feel like reading dialogue, rather than a technical manual.
- .hero-flex-wrapper
padding: 4em; in tablet breakpoints
- .home-summary
line-height: 1.2
- .hero-summary
letter-spacing: -0.025em;
consider getting rid of the HR's they are nice, but they are not "minimal essentialism"
Hero CTA — .hero-type
- Remove from button treatment:
letter-spacing: -0.0265em;
border-bottom: 0.25em solid #fff;
display: inline-block;
clear: both;
padding-bottom: 0.25em;
Homepage Intro — .fp-section:first-oftype
This is what is should look like.
- “Better together” headline (also applies to:
.content-wrapper-tandem
.content-wrapper-about
.custom-block.important
p.custom-block-title)
sentence case
96px
letter spacing "normal",
- The heading of this section, should use a heading tag with embedded spans
- I'm not personally a fan of centered type, but working out a centeredish align left maybe more trouble than it’s worth.
- No periods at the end of sentence fragments.
- Maybe shrink the galaxy copernicus type
Page Title — .section-header-left h1
font-size: 32px;
font-weight: 900;
border-bottom: 0.5rem solid #000;
display: inline-block;
padding-bottom: 0.5em;
Section Header — .section-header
Big title, for people with big monitors, and imacs, lets go bold with some 96px titles (we can play with how dramatic we make it, but do look at the screenshot linked above. With a little tweaking, we can maybe have that work everywhere, or come up with a type scale that works.
Last bit of emphasized text, feels like it should maybe link to something, and that cue is reinforced on the homepage. Maybe just vertical space between it and the previous paragraph, but keeping the font-weight constant, may help alleviate this?
| See Screenshot » |
Custom Block Title — .custom-block-title
- Still set in Poppins, fix
letter-spacing: -0.0265em;
line-height: 1.265;
Work Grid — .work-grid
Same recommendations re: heading leading / letter spacing as everywhere else, beware a11y color combos and hover states.
margin-bottom: 1em;
(on logo) padding-right: 2em // instead of one but better logos from clients
Footer — #footer
Copyright line, use good ol sans-serif at smaller than 1rem? Right now it looks "designed" because Galaxie Copernicus is kinda nice, but then writing TANDEM in it, is kinda off-brand. Should be aligned to the baseline of the secondary nav, rather than vertically centered in this space. Remove bracket hover state (keep mikes unique creation)
- The nav is still set in poppins, also waaaay too tight. Finished product
font-family: Avenir Next;
text-decoration: none;
font-weight: 900;
letter-spacing: normal;
font-size: inherit;