Merge pull request #13 from noesya/Block/organization_chart

Block/organization chart

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

assets/sass/_theme/sections/persons.sass

+/* 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