95 lines
1.8 KiB
SCSS
95 lines
1.8 KiB
SCSS
@use 'sass:math';
|
|
@use '../../style/mixins' as *;
|
|
|
|
#about {
|
|
box-shadow: var(--shadow);
|
|
padding: var(--normal-margin);
|
|
background-color: var(--accent-color);
|
|
|
|
@include on-small-screen {
|
|
:focus:not(:hover) {
|
|
outline: var(--very-light-text-color) solid var(--line-width);
|
|
}
|
|
|
|
$img-size: 11rem;
|
|
> .profile-picture {
|
|
@include square($img-size);
|
|
margin: auto;
|
|
}
|
|
|
|
> h1 {
|
|
text-align: center;
|
|
margin-top: calc(var(--line-height) + 4px);
|
|
}
|
|
}
|
|
|
|
@include on-large-screen {
|
|
$img-size: 12.5rem;
|
|
|
|
width: var(--body-width);
|
|
margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin)
|
|
auto;
|
|
border-radius: var(--border-radius);
|
|
|
|
> .profile-picture {
|
|
> .figure-container {
|
|
@include square($img-size);
|
|
|
|
position: absolute;
|
|
left: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
|
|
top: calc(#{math.div(-$img-size, 3)} - var(--normal-margin));
|
|
}
|
|
|
|
> .placeholder {
|
|
@include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)}));
|
|
box-sizing: content-box;
|
|
float: left;
|
|
margin: 0 0.75ex 0.2ex 0;
|
|
}
|
|
}
|
|
|
|
> p {
|
|
text-align: justify;
|
|
}
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--very-light-text-color);
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
> h1,
|
|
> .profile-picture > .placeholder {
|
|
@include title-font();
|
|
}
|
|
|
|
> .profile-picture {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.figure-container {
|
|
&,
|
|
> .image {
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
> h1,
|
|
> p,
|
|
a {
|
|
color: var(--very-light-text-color);
|
|
|
|
:focus:not(:hover) {
|
|
outline: var(--very-light-text-color) solid var(--line-width);
|
|
}
|
|
}
|
|
|
|
> p {
|
|
margin-top: var(--line-height);
|
|
}
|
|
|
|
a {
|
|
border-bottom: 2px solid var(--very-light-text-color);
|
|
}
|
|
}
|