davidbullock.github.io

davidbullock-github-io.markdown

davidbullock.github.io

A Pen by David Bullock on CodePen.

License.

index.html

<div class="o-container">
	<div class="c-block">
		<h1>David Bullock</h1>
		<p>This is the playground of David Bullock, UX Designer @ Booking.com</p>
	</div>
</div>

style.scss

// -- Mixins
@mixin clear {
	&:before,
	&:after {
		display: table;
		content: "";
		line-height: 0;
	}
	&:after {
		clear: both;
	}
}

// -- Colours
$swatch-primary: #003A51;
$swatch-secondary: #FCC5AD;
$swatch-black: #000000;
$swatch-white: #ffffff;

// -- Base unit
$base-unit: 1em;

* {
	box-sizing: border-box;
	&:before,
	&:after {
		box-sizing: border-box;
	}
}

html {
	font-size: 1em;
  height: 100%;
}

body {
	background-color: $swatch-secondary;
	color: $swatch-primary;
	margin: 0;
	padding: 0;
	font-weight: 400;	
	font-family: "Libre Baskerville", serif;
  line-height: 1.45;
  height: 100%;
  display: flex;
	justify-content: center;
	align-items: center;
  text-align: center;
}

.o-container {	
	margin: auto;
	max-width: ($base-unit * 36);
	display: flex;
	justify-content: center;
	align-items: center;
}

.c-block {
	position: relative;	
	padding: 2em;
}

// -- Type
// Type scale 1.414

p {
	margin-bottom: 1.3em;
}

h1,
h2,
h3,
h4 {
	margin: 1.414em 0 0.5em;
	line-height: 1.2;
}

h1 {
	margin-top: 0;
	font-size: 3.998em;
  line-height: 1;
	color: $swatch-primary;
	font-weight: bold;
}

h2 {
	font-size: 2.827em;
	font-weight: bold;
}

h3 {
	font-size: 1.999em;
	font-weight: 400;
}

h4 {
	font-size: 1.414em;
	font-weight: 400;
}