/**
* Clearfix */ %clearfix:after { content: ""; display: table; clear: both;
}
/**
* Utility classes */
.wrapper {
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); margin: 0 auto; padding: 0 0.5em; @extend %clearfix; @include bp(tablet) { padding: 0 1em; } @include bp(laptop) { max-width: calc(#{$content-width} - (#{$spacing-unit})); padding: 0 (#{$spacing-unit} / 2) }
}
.screen-reader-text {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; text-indent: -9999px;
}
/**
* Site header */
.header {
position: absolute; top: 0; width: 100%; height: em(300px); background-color: $header-color; border-bottom: 1px solid #e53935; &__name { color: #fff; padding: 2em 0 0; text-align: center; } &__social { max-width: em(225px); margin: 0 auto; li { list-style: none; display: inline-block; margin: 0 0 1.5em; } a { transition: fill .3s cubic-bezier(.455,.03,.515,.955); padding: 0 .5em; fill: #fff; &:hover { fill: $icon-hover-color; } } }
}
/**
* Site body */
.content {
position: relative; top: em(200px); left: 0; right: 0;
}
.resume {
color: $page-color; background-color: #fff; border-radius: 3px; box-shadow: 0 2px 5px rgba(0,0,0,0.26); z-index: 0; @include bp(mobile) { padding: em(30px); } @include bp(tablet) { padding: em(60px); }
}
/**
* Resume sections */
.section {
padding-bottom: 1em;
}
.section__title {
color: $header-color;
}
/**
* Site footer */
.message {
text-align: center; padding: 2em 0;
}