diff options
Diffstat (limited to 'src/scss/layouts/_about.scss')
| -rwxr-xr-x | src/scss/layouts/_about.scss | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/src/scss/layouts/_about.scss b/src/scss/layouts/_about.scss new file mode 100755 index 0000000..6d7bb91 --- /dev/null +++ b/src/scss/layouts/_about.scss @@ -0,0 +1,113 @@ +#about { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: map-get($about, background); + text-align: center; + line-height: 100%; + overflow-y: auto; + overflow-x: hidden; + z-index: map-get($z-indexes, l-about); + + #about-card { + position: relative; + // Position the card out the page to improve the javascript drop effect + top: -1000px; + display: block; + background: white; + max-width: 400px; + margin: 15px auto; + border-radius: 3px; + padding: 30px 0; + @include prefix(box-shadow, 0 0 5px rgba(0, 0, 0, 0.50), 'webkit' 'moz'); + + #about-btn-close { + position: absolute; + top: 15px; + right: 15px; + color: map-get($colors, light); + cursor: pointer; + + &:hover { + color: darken(map-get($colors, light), 15); + } + } + #about-card-picture { + margin-bottom: 15px; + } + #about-card-name { + margin-top: 0; + margin-bottom: 20px; + } + #about-card-bio { + padding: 0 30px; + margin: 0 0 30px 0; + } + #about-card-job, + #about-card-location { + display: inline-block; + vertical-align: top; + } + #about-card-job, + #about-card-location, + #about-card-bio { + font-size: $font-size-base; + line-height: $line-height-base; + font-weight: 400; + color: map-get($colors, base); + } + } +} + +// Improve responsiveness of about card on small screen and down +@media #{$small-and-down} { + #about { + #about-card { + width: 90%; + + #about-card-job, + #about-card-location { + display: block; + width: calc(100% - 60px); // 60px = padding right + padding left of `#about-card` + padding: 0 30px; + } + #about-card-picture { + width: 90px; + height: 90px; + border-radius: 45px; + } + #about-card-job { + margin-bottom: 15px; + } + } + } +} + +// Improve responsiveness of about card on medium screen and up +@media #{$medium-and-up} { + #about { + #about-card { + width: 80%; + #about-card-picture { + width: 110px; + height: 110px; + border-radius: 55px; + } + #about-card-job, + #about-card-location { + display: inline-block; + // 48px = padding right of `#about-card-job` + `#about-card-location` + width: calc((100% / 2) - 48px); + } + #about-card-job { + padding: 0 15px 0 30px; + } + #about-card-location { + padding: 0 30px 0 15px; + } + } + } +}
\ No newline at end of file |