eSales Media Git repositories
Browse code

Progress

Benjamin Roth authored on17/11/2022 19:43:56
Showing3 changed files
files/themes/aldegott_2022/assets/css/inc/common.scss
History View file @ee8f8ad
... ... 
@@ -1008,11 +1008,34 @@ p.info {
1008 1008 
  * Text Positioning
1009 1009 
  */
1010 1010
1011 
-@mixin text-position-wrapper {
1011 
+@mixin text-position-wrapper($horizontal: center, $vertical: middle) {
1012 1012 
   display: flex;
1013 1013 
   align-items: center;
1014 
-  justify-content: center;
1015 
-}
1016 
-@mixin text-position($horizontal: 'center', $vertical: 'middle') {
1017 
-  @if($horizontal = '')
1014 
+
1015 
+  @if $horizontal == center  {
1016 
+    justify-content: center;
1017 
+  } @else if $horizontal == left {
1018 
+    justify-content: flex-start;
1019 
+  } @else if $horizontal == right {
1020 
+    justify-content: flex-end;
1021 
+  }
1022 
+
1023 
+  > * {
1024 
+    max-width: 100%;
1025 
+    //display: block;
1026 
+
1027 
+    @if $vertical == middle  {
1028 
+      align-self: center;
1029 
+    } @else if $vertical == top {
1030 
+      align-self: flex-start;
1031 
+    } @else if $vertical == topmiddle {
1032 
+      align-self: center;
1033 
+      @include transform(translateY(-100%));
1034 
+    } @else if $vertical == bottommiddle {
1035 
+      align-self: center;
1036 
+      @include transform(translateY(100%));
1037 
+    } @else if $vertical == bottom {
1038 
+      align-self: flex-end;
1039 
+    }
1040 
+  }
1018 1041 
 }
files/themes/aldegott_2022/assets/css/theme.scss
History View file @ee8f8ad
... ... 
@@ -646,12 +646,46 @@
646 646 
   }
647 647 
 }
648 648
649 
+.swiper-slide {
650 
+  .swiper-slide-image {
651 
+    background-position: 50% 50%;
652 
+  }
653 
+
654 
+  .slide-content {
655 
+    height: 100%;
656 
+    position: absolute;
657 
+    left: 0;
658 
+    top: 0;
659 
+    bottom: 0;
660 
+    right: 0;
661 
+    display: flex;
662 
+    align-items: center;
663 
+    justify-content: center;
664 
+  }
665 
+
666 
+  .slide-text {
667 
+    display: inline-block;
668 
+    max-width: 100%;
669 
+    text-align: left;
670 
+    margin: 0;
671 
+    line-height: 1.3;
672 
+    font-family: $font-family-alternate;
673 
+    font-size: font-size(40px);
674 
+    //text-shadow: $text-shadow-image;
675 
+    letter-spacing: 0.15em;
676 
+    font-weight: 700;
677 
+    text-transform: uppercase;
678 
+    color: $color-text-invert;
679 
+  }
680 
+}
681 
+
649 682 
 .hero-wrapper,
650 683 
 .swiper-slide {
651 684
652 685 
   &.-color- {
653 686 
     &platin {
654 
-      .hero-text {
687 
+      .hero-text,
688 
+      .slide-text {
655 689 
         color: $color-bg-secondary;
656 690 
         > *:last-child:after {
657 691 
           border-color: $color-bg-secondary;
... ... 
@@ -659,7 +693,8 @@
659 693 
       }
660 694 
     }
661 695 
     &white {
662 
-      .hero-text {
696 
+      .hero-text,
697 
+      .slide-text {
663 698 
         color: $color-white;
664 699 
         > *:last-child:after {
665 700 
           border-color: $color-white;
... ... 
@@ -667,7 +702,8 @@
667 702 
       }
668 703 
     }
669 704 
     &brown {
670 
-      .hero-text {
705 
+      .hero-text,
706 
+      .slide-text {
671 707 
         color: $color-bg-primary;
672 708 
         > *:last-child:after {
673 709 
           border-color: $color-bg-primary;
... ... 
@@ -678,7 +714,8 @@
678 714
679 715 
   &.-underline-bottom,
680 716 
   &.-underline-top {
681 
-    .hero-text {
717 
+    .hero-text,
718 
+    .slide-text {
682 719 
       > * {
683 720 
         display: inline;
684 721 
         position: relative;
... ... 
@@ -698,7 +735,8 @@
698 735 
   }
699 736
700 737 
   &.-underline-bottom {
701 
-    .hero-text {
738 
+    .hero-text,
739 
+    .slide-text {
702 740 
       > * {
703 741 
         &:last-child {
704 742 
           padding-bottom: 0.3em;
... ... 
@@ -713,7 +751,8 @@
713 751 
   }
714 752
715 753 
   &.-underline-top {
716 
-    .hero-text {
754 
+    .hero-text,
755 
+    .slide-text {
717 756 
       > * {
718 757 
         display: inline-block;
719 758 
         &:last-child {
... ... 
@@ -728,6 +767,105 @@
728 767 
       }
729 768 
     }
730 769 
   }
770 
+
771 
+  .hero-text,
772 
+  .slide-text {
773 
+    margin-top: 150px;
774 
+    margin-bottom: 150px;
775 
+  }
776 
+
777 
+  &.-text-pos-left-top {
778 
+    .hero-content,
779 
+    .slide-content {
780 
+      @include text-position-wrapper(left,top);
781 
+    }
782 
+  }
783 
+  &.-text-pos-left-topmiddle {
784 
+    .hero-content,
785 
+    .slide-content {
786 
+      @include text-position-wrapper(left,topmiddle);
787 
+    }
788 
+  }
789 
+  &.-text-pos-left-middle {
790 
+    .hero-content,
791 
+    .slide-content {
792 
+      @include text-position-wrapper(left,middle);
793 
+    }
794 
+  }
795 
+  &.-text-pos-left-bottommiddle {
796 
+    .hero-content,
797 
+    .slide-content {
798 
+      @include text-position-wrapper(left,bottommiddle);
799 
+    }
800 
+  }
801 
+  &.-text-pos-left-bottom {
802 
+    .hero-content,
803 
+    .slide-content {
804 
+      @include text-position-wrapper(left,bottom);
805 
+    }
806 
+  }
807 
+
808 
+  &.-text-pos-center-top {
809 
+    .hero-content,
810 
+    .slide-content {
811 
+      @include text-position-wrapper(center,top);
812 
+    }
813 
+  }
814 
+  &.-text-pos-center-topmiddle {
815 
+    .hero-content,
816 
+    .slide-content {
817 
+      @include text-position-wrapper(center,topmiddle);
818 
+    }
819 
+  }
820 
+  &.-text-pos-center-middle {
821 
+    .hero-content,
822 
+    .slide-content {
823 
+      @include text-position-wrapper(center,middle);
824 
+    }
825 
+  }
826 
+  &.-text-pos-center-bottommiddle {
827 
+    .hero-content,
828 
+    .slide-content {
829 
+      @include text-position-wrapper(center,bottommiddle);
830 
+    }
831 
+  }
832 
+  &.-text-pos-center-bottom {
833 
+    .hero-content,
834 
+    .slide-content {
835 
+      @include text-position-wrapper(center,bottom);
836 
+    }
837 
+  }
838 
+
839 
+  &.-text-pos-right-top {
840 
+    .hero-content,
841 
+    .slide-content {
842 
+      @include text-position-wrapper(right,top);
843 
+    }
844 
+  }
845 
+  &.-text-pos-right-topmiddle {
846 
+    .hero-content,
847 
+    .slide-content {
848 
+      @include text-position-wrapper(right,topmiddle);
849 
+    }
850 
+  }
851 
+  &.-text-pos-right-middle {
852 
+    .hero-content,
853 
+    .slide-content {
854 
+      @include text-position-wrapper(right,middle);
855 
+    }
856 
+  }
857 
+  &.-text-pos-right-bottommiddle {
858 
+    .hero-content,
859 
+    .slide-content {
860 
+      @include text-position-wrapper(right,bottommiddle);
861 
+    }
862 
+  }
863 
+  &.-text-pos-right-bottom {
864 
+    .hero-content,
865 
+    .slide-content {
866 
+      @include text-position-wrapper(right,bottom);
867 
+    }
868 
+  }
731 869 
 }
732 870
733 871 
 .mod_team_list {
templates/aldegott2022/mod_team_list.html.twig
History View file @ee8f8ad
... ... 
@@ -79,6 +79,20 @@
79 79 
       "on": {
80 80 
         "slideChangeTransitionEnd": function (swiper) {
81 81 
           window.dispatchEvent(new Event('scroll'));
82 
+        },
83 
+        "slideChangeTransitionStart": function (swiper) {
84 
+          setTimeout(function() {
85 
+            window.dispatchEvent(new Event('scroll'));
86 
+          },
87 
+          250);
88 
+          setTimeout(function() {
89 
+            window.dispatchEvent(new Event('scroll'));
90 
+          },
91 
+          500);
92 
+          setTimeout(function() {
93 
+            window.dispatchEvent(new Event('scroll'));
94 
+          },
95 
+          750);
82 96 
         }
83 97 
       }
84 98 
     })</script>