Add Index and Calculating Emissions, set up scss files

chrismekim commented 4 years ago

Figma: https://www.figma.com/file/bWWgCqrjStjy1ne99Vs6x9/Sanctuary-Sustainability?node-id=457%3A166

Note: This doesn't include the landing with the menu and globe (designs are in progress).

brendonsanctuary commented 4 years ago

Across the whole site

Desktop and Mobile: Change image captions margin top to .5rem

margin-top:.5rem;

brendonsanctuary commented 4 years ago

Mobile type sizes:

brendonsanctuary commented 4 years ago

Button sizes on desktop got smaller

The text shouldn't be going to two lines.

they should look like this.

UPDATE:

We can just cahnge the width of the desktop buttons to 16rem.

brendonsanctuary commented 4 years ago

Let's change the intro back to the Subhead type size, but align it on this grid. The footer can still be the larger text size.

brendonsanctuary commented 4 years ago

Update image layouts on the homepage from the figma.

You just export the images from the figma at 1.5x for now so we can get the right sizing. these will be temporary assets so we can close this PR. Making all these assets black and white is production heavy and time consuming right now.

brendonsanctuary commented 4 years ago

DESKTOP: Spacing on all pages lets make the spacing between sections.

15rem

brendonsanctuary commented 4 years ago

Desktop Carbon Emissions: Let's move this image over a little bit.

brendonsanctuary commented 4 years ago

Footer on hover fade to gray. All links.

brendonsanctuary commented 4 years ago

Desktop & Mobile SVG Padding.

brendonsanctuary commented 4 years ago

Can we move make the column 6/6 for the intro.

brendonsanctuary commented 4 years ago

Can we change the section spacing from 15REM to 12REM.

brendonsanctuary commented 4 years ago

12 Rem spacing between the header globe block and the intro text.

brendonsanctuary commented 4 years ago

Just changing some of the rems for the images.

brendonsanctuary commented 4 years ago

Grid change on the 4th section of images.

brendonsanctuary commented 4 years ago

Add a fade on hover over for footer links. Timing can be same as buttons.

brendonsanctuary commented 4 years ago

Image section margins

brendonsanctuary commented 4 years ago

Update SVG of GHG Protocol with the one i sent you in twist.

brendonsanctuary commented 4 years ago

Remove this margin top above this graphic.

brendonsanctuary commented 4 years ago

Make all active links italic in the footer. On the homepage this would mean that the "Studio Carbon Negative" link in the footer should be gray italic.

brendonsanctuary commented 4 years ago

Captions across the site should all be the same width.

brendonsanctuary commented 4 years ago

Desktop Caption type sizes

Mobile Caption type sizes

brendonsanctuary commented 4 years ago

Mobile Index Header: Just trying to make it a little more impactful and centered to the 100vh intro.

Remove margin-bottom from header.

Make the globe larger

More compelling composition:

brendonsanctuary commented 4 years ago

Mobile button padding:

brendonsanctuary commented 4 years ago

Mobile List:

Margin to 2.5rem

brendonsanctuary commented 4 years ago

Mobile Type Updates:

Paragraph text .8rem with line-height of 1.3rem

Make the button text and small text .66 rem

brendonsanctuary commented 4 years ago

Mobile footer: Change lineheight to .66rem

brendonsanctuary commented 4 years ago

Emissions header mobile:

Caption ( this should go across all other page headers on mobile as well) Moving it down a little bit

Moving "Emissions" Down

Moving image down slightly as well

brendonsanctuary commented 4 years ago

MOBILE: Adding margins to the top of charts.

2 rem top margins

brendonsanctuary commented 4 years ago

Footer text Mobile:

brendonsanctuary commented 4 years ago

Mobile Sanctuary Logo: 62 px

brendonsanctuary commented 4 years ago

Mobile: Header home page

brendonsanctuary commented 4 years ago

Desktop: Removing this 10rem margin here.

brendonsanctuary commented 4 years ago

Desktop & Mobile Scope Titles on Carbon Emissions:

Can we change the "Scopes" and 0% to these type styles.

Desktop

Mobile

brendonsanctuary commented 4 years ago

Mobile: Remove header margin

brendonsanctuary commented 4 years ago

Pushing the globe down a little and the image down a little.

Globe

Image

brendonsanctuary commented 4 years ago

I think the size of this image

Feels cool and we should have this size be the same over the globe.

We should have the image be Col5 like the Emissions page. I change the Globe to be 90vw. I moved the image top 60%. If the image at 5 columns bleeds into the intro text then we can add a margin to the intro to make it feel right.