diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass index 4d5ca1cdf9f09924d1e9f32c9ad1a409e378290a..21805a7e01dc6d30e3dd47191b7581f1db209e40 100644 --- a/assets/sass/_theme/_utils.sass +++ b/assets/sass/_theme/_utils.sass @@ -79,7 +79,7 @@ display: grid grid-gap: $grid-gutter/2 $grid-gutter grid-template-columns: repeat($cols, 1fr) - @else + @else display: grid grid-gap: $grid-gutter/2 $grid-gutter grid-template-columns: repeat($cols, 1fr) @@ -117,7 +117,7 @@ position: absolute right: 0 top: 0 - @else + @else aspect-ratio: #{$width}/#{$height} @mixin visually-hidden @@ -155,4 +155,4 @@ bottom: $bottom left: $left right: $right - top: $top \ No newline at end of file + top: $top diff --git a/assets/sass/_theme/sections/persons.sass b/assets/sass/_theme/sections/persons.sass index b8fe76cc90f5f9c664c59e152793de0c5165adde..fc633106292be6f96aab90960c1c7e17b40d95cf 100644 --- a/assets/sass/_theme/sections/persons.sass +++ b/assets/sass/_theme/sections/persons.sass @@ -1,48 +1,48 @@ +/* TODO refacto widget */ .person position: relative display: flex flex-direction: column - & > a - display: flex - flex-direction: column - - &, - & > a - @include media-breakpoint-down(md) - display: block - > div:first-of-type - padding: $spacing0 0 - @include media-breakpoint-down(md) - float: left - max-width: calc(100% - 6rem) - padding-bottom: 0 - padding-top: 0 p margin-bottom: 0 + margin-top: 0 .avatar + margin-bottom: $spacing1 order: -1 width: px2rem(76) - @include media-breakpoint-down(md) - float: right .name - @include media-breakpoint-down(md) - font-size: px2rem(22) a @include stretched-link - @include link + // @include link + + .name ~ p + @extend .small + + @include media-breakpoint-down(md) + display: block + &::after + content: '' + clear: both + display: table + > div:first-of-type + float: left + max-width: calc(100% - 6rem) + .avatar + float: right + margin-bottom: 0 - + p, ~ .contact - @extend .small .persons @include grid(1) @include grid(2, md) @include grid(3, lg) + .avatar + @include aspect-ratio(50, 50, 'img') background-color: $persons-avatar-background-color border-radius: 50% overflow: hidden