@import “common”;
body {
@include flex(column); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; min-height: 100vh; margin: 0; background: #f0f0f0;
}
a {
-webkit-tap-highlight-color: transparent;
}
.index-avatar {
position: relative; bottom: -95px; border: #f0f0f0 solid 20px; border-radius: 50%; width: 150px; height: 150px; &::before{ -webkit-animation: pulse 1s linear infinite; animation: pulse 1s linear infinite; border: #ffffff solid 10px; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; content: ' '; height: 140%; left: -20%; opacity: .9; position: absolute; top: -20%; -webkit-transform: scale(0.714); transform: scale(0.714); width: 140%; z-index: 1; }
}
.index-avatar img {
position: relative; z-index: 2; width: 100%; @include border-radius(50%); @include material-box-shadow();
}
@media (min-width: 769px) {
.index-avatar img { &:hover { @include material-box-shadow(3); } }
}
.index-content {
width: 100%; min-height: 70vh; height: auto; @include material-box-shadow(1); background: #fff;
}
.index-content h1, p {
position: relative; text-align: center;
}
.index-content h1 {
padding-top: 115px; font-size: 2em;
}
.index-content p {
font-size: 1em; padding-top: 10px;
}
.index-contact {
padding-top: 20px;
}
.index-contact span a {
font-size: 2em; color: #f0f0f0; text-decoration: none; margin: 0 10px; @include material-transition();
}
@media (min-width: 769px) {
.index-contact span a { &:hover { color: #000000; } }
}
@media (max-width: 415px) {
.index-avatar { width: 100px; height: 100px; bottom: -70px; border: #f0f0f0 solid 15px; } .index-content h1 { padding-top: 95px; font-size: 1em; } .index-content p { font-size: 0.9em; } .index-contact span a { font-size: 1.5em; }
}