61 lines
1.1 KiB
SCSS
61 lines
1.1 KiB
SCSS
@import "../../style/mixins";
|
|
@import "../../style/vars";
|
|
|
|
#about {
|
|
@include important-card();
|
|
|
|
$img-size: 125px;
|
|
|
|
h1,
|
|
img,
|
|
.placeholder,
|
|
& {
|
|
@include title-font();
|
|
}
|
|
|
|
img {
|
|
@include square($img-size);
|
|
border-radius: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
p {
|
|
@include main-font();
|
|
text-align: justify;
|
|
margin-top: $small-margin;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-width) {
|
|
h1 {
|
|
margin-top: $small-margin;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $breakpoint-width) {
|
|
$img-size: 190px;
|
|
|
|
width: $body-width;
|
|
margin: calc(#{$normal-margin} + #{$img-size} * 1 / 3) auto 0 auto;
|
|
position: relative;
|
|
border-radius: $border-radius;
|
|
|
|
img {
|
|
@include square($img-size);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3);
|
|
}
|
|
|
|
.placeholder {
|
|
@include square(calc(#{$img-size} * 2 / 3 - #{$normal-margin}));
|
|
box-sizing: content-box;
|
|
float: left;
|
|
margin: 0 0.75ex 0.75ex 0;
|
|
}
|
|
|
|
h1 {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|