75 lines
1.4 KiB
SCSS
75 lines
1.4 KiB
SCSS
@use 'sass:math';
|
|
@use '../../style/mixins' as *;
|
|
|
|
#about {
|
|
text-align: center;
|
|
box-shadow: var(--shadow);
|
|
padding: var(--normal-margin);
|
|
background-color: var(--accent-color);
|
|
font-size: 0;
|
|
|
|
::selection {
|
|
background-color: var(--very-light-text-color);
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
h1,
|
|
.placeholder {
|
|
@include title-font();
|
|
}
|
|
|
|
$img-size: 125px;
|
|
.image {
|
|
@include square($img-size);
|
|
border-radius: 100%;
|
|
box-shadow: var(--shadow);
|
|
margin: auto;
|
|
}
|
|
|
|
p {
|
|
text-align: justify;
|
|
}
|
|
|
|
h1,
|
|
p,
|
|
a {
|
|
color: var(--very-light-text-color);
|
|
margin-top: var(--line-height);
|
|
}
|
|
|
|
@include on-small-screen {
|
|
:focus:not(:hover) {
|
|
outline: var(--very-light-text-color) solid var(--line-width);
|
|
}
|
|
}
|
|
|
|
@include on-large-screen {
|
|
$img-size: 190px;
|
|
|
|
width: var(--body-width);
|
|
margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin)
|
|
auto;
|
|
position: relative;
|
|
border-radius: var(--border-radius);
|
|
|
|
.image {
|
|
@include square($img-size);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transform: translateY(math.div(-$img-size, 3)) translateX(math.div(-$img-size, 3));
|
|
}
|
|
|
|
.placeholder {
|
|
@include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)}));
|
|
box-sizing: content-box;
|
|
float: left;
|
|
margin: 0 0.75ex 0.5ex 0;
|
|
}
|
|
|
|
h1 {
|
|
text-align: left;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|