66 lines
1.2 KiB
SCSS
66 lines
1.2 KiB
SCSS
@use '../../style/mixins' as *;
|
|
|
|
section#about {
|
|
@include card-base();
|
|
padding: var(--normal-margin);
|
|
background-color: var(--accent-color);
|
|
font-size: 0;
|
|
|
|
$img-size: 125px;
|
|
h1,
|
|
img,
|
|
.placeholder {
|
|
@include title-font();
|
|
}
|
|
|
|
img {
|
|
@include square($img-size);
|
|
border-radius: 100%;
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
p {
|
|
@include main-font();
|
|
text-align: justify;
|
|
}
|
|
|
|
h1 {
|
|
hyphens: none;
|
|
}
|
|
|
|
p,
|
|
h1 {
|
|
color: var(--very-light-text-color);
|
|
margin-top: var(--line-height);
|
|
}
|
|
|
|
@include on-large-screen {
|
|
$img-size: 190px;
|
|
|
|
width: var(--body-width);
|
|
margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto 0 auto;
|
|
position: relative;
|
|
border-radius: var(--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 - #{var(--normal-margin)}));
|
|
box-sizing: content-box;
|
|
float: left;
|
|
margin: 0 0.75ex 0.75ex 0;
|
|
}
|
|
|
|
h1 {
|
|
text-align: left;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|