/**
* Site header */
.site-header {
border-top: 5px solid $grey-color-dark; border-bottom: 1px solid $grey-color-light; min-height: $spacing-unit * 1.865; line-height: $base-line-height * $base-font-size * 2.25; // Positioning context for the mobile navigation icon position: relative;
}
.site-title {
@include relative-font-size(1.625); font-weight: 300; letter-spacing: -1px; margin-bottom: 0; float: left; &:hover { text-decoration: none; } @include media-query($on-palm) { padding-right: 45px; } &, &:visited { color: $grey-color-dark; }
}
.site-nav {
position: absolute; top: -4px; right: 25px; background-color: $background-color; border: 1px solid $grey-color-light; border-radius: 5px; text-align: right; .nav-trigger { display: none; } .menu-icon { float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; > svg path { fill: $grey-color-dark; } } label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 30px; z-index: 2; cursor: pointer; } input ~ .trigger { clear: both; display: none; } input:checked ~ .trigger { display: block; padding-bottom: 5px; } .page-link { color: $text-color; line-height: $base-line-height; display: block; padding: 5px 10px; // Gaps between nav items, but not on the last one &:not(:last-child) { margin-right: 0; } margin-left: 20px; } @media screen and (min-width: $on-medium) { position: static; float: right; border: none; background-color: inherit; label[for="nav-trigger"] { display: none; } .menu-icon { display: none; } input ~ .trigger { display: block; } .page-link { display: inline; padding: 0; &:hover { text-decoration: none; } &:not(:last-child) { margin-right: 20px; } margin-left: auto; } }
}
.social-media-list {
list-style: none;
}
html,body {
font-family: 'Montserrat', sans-serif;
}
.container {
// max-width: 1250px; // margin: 30px auto 30px; padding: 0 !important; width: 90%; background-color: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.10), 0 3px 6px rgba(0,0,0,0.10);
}
.site-header i {
position: relative; cursor: pointer; right: -96%; top: 25px; font-size: 18px !important; color: #fff;
}
@media (max-width:800px) {
.site-header { height: 150px; } .site-header i { right: -90%; }
}
main {
padding: 20px 20px 0px 20px;
}
.left {
display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.photo {
width: 200px; height: 200px; margin-top: -120px; border-radius: 100px; border: 4px solid #fff;
}
.name {
margin-top: 20px; font-family: "Open Sans"; font-weight: 600; font-size: 18pt; color: #777;
}
.info {
margin-top: -5px; margin-bottom: 5px; font-family: 'Montserrat', sans-serif; font-size: 11pt; color: #aaa;
}
.desc {
text-align: center; margin-top: 25px; margin: 25px 40px; color: #999; font-size: 11pt; font-family: "Open Sans"; padding-bottom: 25px; border-bottom: 1px solid #ededed;
}
.social {
margin: 5px 0 12px 0; text-align: center; display: inline-block; font-size: 20pt; ul { float: left; width: 100%; li { float: left; margin-right: 10px; a { font-size: 16px; } } }
}
.right {
padding: 0 25px 0 25px !important; border-left: #e8e8e8 solid 1px;
}
@media screen and (max-width: 1366px) {
.right { border-left: 0px; }
}