Browse code
Remote Progress
Benjamin Roth authored on15/11/2022 13:22:22 Showing3 changed files
- contao/templates/mod_team_list.html.twig
- files/pub/Bilder/Wir/Mitarbeiter/Platzhalter_Web_02b.jpg
- files/themes/aldegott_2022/assets/css/theme.scss
| ... | ... |
@@ -8,12 +8,14 @@ |
| 8 | 8 |
<ul class="swiper-wrapper"> |
| 9 | 9 |
{% for member in teammembers %}
|
| 10 | 10 |
<li class="swiper-slide"> |
| 11 |
- {% if member.imageFigure %}
|
|
| 12 |
- {{- studio.figure(member.imageFigure, { attr: { class: ('image_container ') }}) -}}
|
|
| 13 |
- {% endif %}
|
|
| 14 |
- <div class="name">{{ member.firstname }} {{ member.lastname }}</div>
|
|
| 15 |
- <div class="position">{{ member.position }}</div>
|
|
| 16 |
- <div class="comment">{{ member.comment }}</div>
|
|
| 11 |
+ <div class="content"> |
|
| 12 |
+ {% if member.imageFigure %}
|
|
| 13 |
+ {{- studio.figure(member.imageFigure, { attr: { class: ('image_container ') }}) -}}
|
|
| 14 |
+ {% endif %}
|
|
| 15 |
+ <div class="name">{{ member.firstname }} {{ member.lastname }}</div>
|
|
| 16 |
+ <div class="position">{{ member.position }}</div>
|
|
| 17 |
+ <div class="comment">{{ member.comment }}</div>
|
|
| 18 |
+ </div> |
|
| 17 | 19 |
</li> |
| 18 | 20 |
{% endfor %}
|
| 19 | 21 |
</ul> |
| ... | ... |
@@ -37,11 +39,19 @@ |
| 37 | 39 |
"prevEl": swiperEl.querySelectorAll('.swiper-button-prev')[0]
|
| 38 | 40 |
}, |
| 39 | 41 |
"breakpoints": {
|
| 40 |
- 900: {
|
|
| 42 |
+ 1650: {
|
|
| 41 | 43 |
"slidesPerView": 5, |
| 42 | 44 |
"slidesPerGroup": 5, |
| 43 | 45 |
}, |
| 44 |
- 599: {
|
|
| 46 |
+ 1320: {
|
|
| 47 |
+ "slidesPerView": 4, |
|
| 48 |
+ "slidesPerGroup": 4, |
|
| 49 |
+ }, |
|
| 50 |
+ 990: {
|
|
| 51 |
+ "slidesPerView": 3, |
|
| 52 |
+ "slidesPerGroup": 3, |
|
| 53 |
+ }, |
|
| 54 |
+ 660: {
|
|
| 45 | 55 |
"slidesPerView": 2, |
| 46 | 56 |
"slidesPerGroup": 2, |
| 47 | 57 |
}, |
| ... | ... |
@@ -728,4 +728,71 @@ |
| 728 | 728 |
} |
| 729 | 729 |
} |
| 730 | 730 |
} |
| 731 |
+} |
|
| 732 |
+ |
|
| 733 |
+.mod_team_list {
|
|
| 734 |
+ |
|
| 735 |
+ .swiper-button-prev, |
|
| 736 |
+ .swiper-button-next {
|
|
| 737 |
+ &:after {
|
|
| 738 |
+ background: $color-bg-secondary; |
|
| 739 |
+ } |
|
| 740 |
+ } |
|
| 741 |
+ |
|
| 742 |
+ ul {
|
|
| 743 |
+ margin: 0; |
|
| 744 |
+ padding: 100px 0 0; |
|
| 745 |
+ |
|
| 746 |
+ li {
|
|
| 747 |
+ @include box-sizing(border-box); |
|
| 748 |
+ padding-right: 75px; |
|
| 749 |
+ } |
|
| 750 |
+ |
|
| 751 |
+ .content {
|
|
| 752 |
+ @include box-sizing(border-box); |
|
| 753 |
+ background-color: $color-bg-tertiary; |
|
| 754 |
+ padding: 205px 15px 10px; |
|
| 755 |
+ max-width: 250px; |
|
| 756 |
+ margin: 0 ; |
|
| 757 |
+ position: relative; |
|
| 758 |
+ line-height: 1.3; |
|
| 759 |
+ font-size: font-size(16px); |
|
| 760 |
+ } |
|
| 761 |
+ |
|
| 762 |
+ figure {
|
|
| 763 |
+ width: 275px; |
|
| 764 |
+ height: 275px; |
|
| 765 |
+ position: absolute; |
|
| 766 |
+ right:-25%; |
|
| 767 |
+ top: -33.333%; |
|
| 768 |
+ |
|
| 769 |
+ a, |
|
| 770 |
+ img {
|
|
| 771 |
+ @include border-radius(999em); |
|
| 772 |
+ overflow: hidden; |
|
| 773 |
+ } |
|
| 774 |
+ |
|
| 775 |
+ img {
|
|
| 776 |
+ @include box-sizing(border-box); |
|
| 777 |
+ width: 275px; |
|
| 778 |
+ border: 10px $color-white solid; |
|
| 779 |
+ } |
|
| 780 |
+ } |
|
| 781 |
+ |
|
| 782 |
+ .name, |
|
| 783 |
+ .position {
|
|
| 784 |
+ font-family: $font-family-alternate; |
|
| 785 |
+ font-size: font-size(16px); |
|
| 786 |
+ font-weight: 700; |
|
| 787 |
+ letter-spacing: 0.125em; |
|
| 788 |
+ } |
|
| 789 |
+ |
|
| 790 |
+ .name {
|
|
| 791 |
+ color: $color-text-invert |
|
| 792 |
+ } |
|
| 793 |
+ |
|
| 794 |
+ .comment {
|
|
| 795 |
+ margin-top: 0.25em; |
|
| 796 |
+ } |
|
| 797 |
+ } |
|
| 731 | 798 |
} |
| 732 | 799 |
\ No newline at end of file |