Upgrading o-footer.md

You'll need to add these two files to your project:

And the following CSS should be added/amended:

.o-footer__pearson-tagline,
.o-footer__pearson-logo {
	height: 19px;
	background-image: /* path to Nikkei png */
	background-repeat: no-repeat;
	white-space: nowrap;

	// The weird value for rgba is to prevent Sass converting rgba(0,0,0,0) to 'transparent', which would cause the following line of css to be understood by IE7/8 and the svg to be downloaded
	background: rgba(0, 0, 0, 0.001) /* path to Nikkei svg */ no-repeat;
}

.o-footer__pearson-tagline {
  display:none;
}

And the following should be removed.


// Inside media query to hide from browsers that don't support MQs and therefore also don't support max-width or background-size
	.o-footer__pearson-tagline {
		max-width: 170px;
		// need to keep 17/28 of the width visible
		// but we round down to 27 to allow for browser pixel rounding errors
		background-size: (2700% / 17);
		// need to take up 17/27 of the width available,
		// but we round down to 16 to allow for browser pixel rounding errors
		width: (1600% / 27);
	}
	.o-footer__pearson-logo {
		max-width: 100px;
		// need to keep 10/28 of the width visible
		// but we round down to 27 to allow for browser pixel rounding errors
		background-size: (2700% / 10);
		// need to take up 10/27 of the width available,
		// but we round down to 9 to allow for browser pixel rounding errors
		width: (900% / 27);
	}

And that's it! No need to change the HTML, we've deliberately made this as simple as possible so it's just CSS changes.

alicebartlett/Upgrading o-footer.md