diff --git a/assets/sass/_theme/blocks/persons.sass b/assets/sass/_theme/blocks/persons.sass index 54ef16bb0..1d6ab9257 100644 --- a/assets/sass/_theme/blocks/persons.sass +++ b/assets/sass/_theme/blocks/persons.sass @@ -9,35 +9,112 @@ margin-top: $spacing-3 text-align: left +@mixin person-contacts-details-in-list + .contacts-details + ul + ul, li + li + margin-top: $spacing-2 + li + display: block + span + padding-right: 0 + a, address + text-align: left + .block-persons article .description margin-top: $spacing-3 - @include in-page-with-sidebar - .persons - @include grid(1, desktop) - row-gap: $spacing-2 - @include media-breakpoint-up(xxl) + @include in-page-without-sidebar + .top .description + max-width: columns(8) + &.block-with-long-text + .persons @include grid(2) article - .avatar - width: columns(1.5) - .description - margin-top: $spacing-2 + @include person-avatar-end + @include in-page-with-sidebar article flex-direction: row gap: $spacing-3 @include media-breakpoint-up(md) .avatar width: columns(2) - @include in-page-without-sidebar - .top .description - max-width: columns(8) - &.block-with-long-text + &--grid + @include in-page-with-sidebar .persons - @include grid(2) - article - @include person-avatar-end + @include grid(1, desktop) + row-gap: $spacing-2 + @include media-breakpoint-up(xxl) + @include grid(2) + .person + .avatar + width: columns(1.5) + .description + margin-top: $spacing-2 + @include media-breakpoint-up(xl) + @include person-contacts-details-in-list + @include in-page-without-sidebar + @include person-contacts-details-in-list + .person + text-align: center + + &--large + .person + display: flex + flex-direction: column + row-gap: 0 + + .person + margin-top: $spacing-4 + @include media-breakpoint-up(md) + margin-top: $spacing-6 + .description + flex: 1 + .person-name + @include lead + + div + margin-top: $spacing-2 + .more + position: relative + margin-top: space(8) + @include icon(arrow-right-line, after, true) + margin-left: space() + transition: 0.55s $arrow-ease-transition + @include media-breakpoint-down(md) + text-align: center + &:hover + .more::after + margin-left: space(2) + @include in-page-with-sidebar + .avatar + width: columns(3) + .contacts-details + a, address + width: columns(3) + text-align: left + li > span + width: offset(1) + @include in-page-without-sidebar + @include person-contacts-details-in-list + align-items: center + .avatar + width: columns(4) + .contacts-details + ul + @include grid(2, false, $spacing-2) + li + li + margin-top: 0 + @include in-page-with-or-without-sidebar + flex-direction: row + gap: var(--grid-gutter) + text-align: left + @include media-breakpoint-down(md) + &-name, + &-role + text-align: center + .avatar + width: 100% + order: -1 + &--list .persons-list @include list-reset @@ -52,31 +129,12 @@ margin-top: 0 + li border-top: 1px solid var(--color-border) - .contacts-details - li > span - padding-right: $spacing-2 - a, address - @include small - li - align-items: baseline - display: flex - justify-content: space-between - + li - margin-top: $spacing-1 - ul + ul - margin-top: $spacing-1 - @include media-breakpoint-down(desktop) - .contacts-details - margin-top: $spacing-3 - span - flex-shrink: 0 - a, address - text-align: right @include media-breakpoint-up(desktop) .contacts-details margin-top: 0 a, address width: columns(3) + text-align: left li > span width: offset(1) > li @@ -102,5 +160,3 @@ .contacts-details width: columns(4) - - diff --git a/assets/sass/_theme/sections/persons.sass b/assets/sass/_theme/sections/persons.sass index c7743c72c..c41793ceb 100644 --- a/assets/sass/_theme/sections/persons.sass +++ b/assets/sass/_theme/sections/persons.sass @@ -1,4 +1,31 @@ .person + .contacts-details + margin-top: $spacing-2 + li > span + padding-right: $spacing-2 + flex-shrink: 0 + a, address + @include small + position: relative + text-align: right + z-index: 2 + li + align-items: baseline + display: flex + justify-content: space-between + + li + margin-top: $spacing-1 + ul + ul + margin-top: $spacing-1 + @include media-breakpoint-down(md) + .contacts-details + margin-top: $spacing-3 + span + flex-shrink: 0 + a, address + text-align: right + +article.person @include article word-break: break-word gap: $spacing-3 @@ -16,6 +43,7 @@ margin-top: $spacing-1 .description @include small + flex-grow: 1 @include media-breakpoint-down(lg) flex-direction: row gap: $spacing-3 @@ -24,21 +52,20 @@ flex-shrink: 0 margin-bottom: 0 width: 100px - @include media-breakpoint-down(md) justify-content: space-between + .description + flex: 1 .avatar order: 1 margin-right: 0 width: 68px - @include in-page-without-sidebar - text-align: center .avatar width: 100% section.persons, -div.persons +.block-persons--grid .persons @include grid(1) @include grid(2, md) @include grid(4, lg) diff --git a/hugo.yaml b/hugo.yaml index 559738c6e..b6309e2db 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -330,9 +330,18 @@ params: tablet: 216 desktop: 196 persons: - mobile: 80 - tablet: 100 - desktop: 255 + grid: + mobile: 90 + tablet: 360 + desktop: 255 + large: + mobile: 400 + tablet: 360 + desktop: 255 + list: + mobile: 90 + tablet: 360 + desktop: 255 testimonials: mobile: 80 tablet: 160 diff --git a/layouts/partials/blocks/templates/persons.html b/layouts/partials/blocks/templates/persons.html index d920edd10..911425bae 100644 --- a/layouts/partials/blocks/templates/persons.html +++ b/layouts/partials/blocks/templates/persons.html @@ -4,7 +4,9 @@ {{- $is_large := false -}} {{- with .block.data -}} + {{ $layout := .layout | default "grid" }} {{ $options := .options }} + {{ $image_sizes := index site.Params.image_sizes.blocks.persons $layout }} {{ range .persons }} {{- $person := site.GetPage .path -}} {{- $role := .role -}} @@ -41,10 +43,11 @@ {{- range .persons -}} {{ $person := site.GetPage .path }} {{ partial "persons/person.html" (dict - "heading_level" $block.ranks.children "options" $options "person" $person "role" .role + "layout" $layout + "image_sizes" $image_sizes )}} {{- end -}} diff --git a/layouts/partials/blocks/templates/persons/list.html b/layouts/partials/blocks/templates/persons/list.html index 1c9c50497..6cfcc15b7 100644 --- a/layouts/partials/blocks/templates/persons/list.html +++ b/layouts/partials/blocks/templates/persons/list.html @@ -1,9 +1,9 @@ {{- $options := .options -}} -