Skip to content

Instantly share code, notes, and snippets.

@davidbullock
Created May 20, 2018 01:39
Show Gist options
  • Save davidbullock/a583b4cc6cf52a6c4d862e24098b6ba5 to your computer and use it in GitHub Desktop.
Save davidbullock/a583b4cc6cf52a6c4d862e24098b6ba5 to your computer and use it in GitHub Desktop.
davidbullock.github.io
<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>
// -- 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment