Update header with ProtoSchool logo #82
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add logo file (TODO: Replace with version without words when received from Agata) - Remove IPFS logo from header - Use flexbox to build what looks like a logo with tagline built in, created from Montserrat font included in IPFS CSS npm module - Remove illustration at top right in narrow screen widths, as it's not essential content
- Replace ProtoSchool logo with symbol (no words) - Adjust logo height and font size for both versions of media query - Largest format is currently: symbol 100px, h1 40px, h2 20px - Smaller format is currently at 80% of above (80px, 32px, 26px - Reduce height of illustration to 100px so it's not taller than symbol
- Add another media query to prevent word wrap of tagline in header at smaller screen widths
- Update lesson page header to use ProtoSchool rather than IPFS logo and remove wordmark - Illustration continues to be removed at narrower widths, leaving only logo - Adjust height of illustration in homepage header
mikeal
approved these changes
Nov 19, 2018
terichadbourne
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
** WIP - Do not merge yet **
Closes #78 by replacing IPFS logo with ProtoSchool logo on both home and lesson pages and making necessary adjustments.
As recommended by @mikeal, the psuedo-logo on the homepage header is built from HTML so we can update the site's tagline without bothering Agata for each change.
I'd love feedback on spacing and size ratios, etc. from @mikeal and @olizilla. (Please adjust your window width while proofing to see media queries in action.)
I can take this to the design crew for more visual feedback but want to ensure @mikeal and I are on the same page for basic layout before doing so.
You should expect to see the homepage like this at max width:
It loses the illustration to make space when less wide:
And shrinks the pseudo-logo further at very narrow width to prevent word wrap in the tagline:
The header in the lesson pages does not currently include the tagline.
It also loses the illustration at narrower widths: