Browse code

Progress

Benjamin Roth authored on12/12/2022 00:17:47
Showing15 changed files
... ...
@@ -21,7 +21,10 @@ $color-bg-quinary: #C2BCB2;
21 21
 $color-bg-senary: #EDEBE8;
22 22
 $color-bg-lightergrey: #f3f3f3;
23 23
 $color-bg-lightgrey: #eaeaea;
24
-$color-bg-footer: #353939;
24
+$color-bg-lightplatin: mix($color-bg-secondary,#fff,70%);
25
+$color-bg-lightbrown: mix($color-bg-primary,#fff,70%);
26
+$color-bg-footer: #c7c1b8;
27
+$color-bg-footer2: #f4f4f1;
25 28
 
26 29
 $color-white: #ffffff;
27 30
 $color-black: #000000;
... ...
@@ -127,4 +130,4 @@ $font-size-placeholder: 12px / $font-size-default * 1rem;
127 130
 $font-size-button: 16px / $font-size-default * 100%;
128 131
 
129 132
 // Font
130
-$font-family-form: $font-family;
131 133
\ No newline at end of file
134
+$font-family-form: $font-family;
... ...
@@ -817,6 +817,14 @@ p.back,
817 817
       justify-content: center;
818 818
     }
819 819
 
820
+    .-flex-inline& {
821
+      display: inline-flex;
822
+    }
823
+
824
+    .-valign-center& {
825
+      align-items: center;
826
+    }
827
+
820 828
     .-variable-grid& {
821 829
       margin-left: 0;
822 830
       align-items: stretch;
... ...
@@ -1063,4 +1071,4 @@ p.info {
1063 1071
   font-family: $font-family-alternate;
1064 1072
   letter-spacing: 0.05em;
1065 1073
   color: $color-bg-secondary;
1066
-}
1067 1074
\ No newline at end of file
1075
+}
... ...
@@ -25,43 +25,20 @@
25 25
     display: table;
26 26
     clear: both;
27 27
   }
28
-  &.-alt-color,
28
+  &.-alt-color {
29
+    background-color: $color-bg-lightplatin;
30
+  }
29 31
   &.-alt-color2 {
30
-    color: $color-text-invert;
32
+    background-color: $color-bg-footer;
31 33
 
34
+    &,
32 35
     h1,h2,h3,h4,h5,h6 {
33
-      color: $color-headline-invert;
34
-    }
35
-  }
36
-  &.-alt-color {
37
-    background-color: $color-bg-secondary;
36
+      color: $color-text-footer;
38 37
 
39
-    a {
40
-      color: $color-bg-tertiary;
41
-
42
-      &:hover {
43
-        color: mix($color-bg-tertiary,#fff,70%);
44
-      }
45
-    }
46
-
47
-    .ce_text {
48
-      a[target="_blank"]:not(.button):not(.-ico-dl) {
49
-        &:before {
50
-          background: $color-bg-tertiary;
51
-        }
52
-        &:hover {
53
-          &:before {
54
-            background: mix($color-bg-tertiary, #fff, 80%);
55
-          }
56
-        }
57
-      }
58 38
     }
59 39
   }
60
-  &.-alt-color2 {
61
-    background-color: $color-bg-tertiary;
62
-  }
63 40
   &.-alt-color3 {
64
-    background-color: $color-bg-lightgrey;
41
+    background-color: $color-bg-footer2;
65 42
   }
66 43
   &.-small > .background-wrapper-helper > .background-wrapper-inner {
67 44
     min-height: 250px;
... ...
@@ -1743,15 +1720,22 @@ $shadow-color: #fff;
1743 1720
  ******************/
1744 1721
 .feature-wrapper {
1745 1722
 
1723
+  display: flex;
1724
+  flex-direction: column;
1725
+  justify-content: flex-start;
1726
+
1746 1727
   &.-valign-center {
1747
-    min-height: 100vh;
1748
-    display: flex;
1749
-    flex-direction: column;
1728
+    justify-content: center;
1729
+  }
1730
+  &.-valign-top {
1750 1731
     justify-content: flex-start;
1732
+  }
1733
+  &.-valign-bottom {
1734
+    justify-content: flex-end;
1735
+  }
1751 1736
 
1752
-    .feature-wrapper-boundary {
1753
-      width: 100%;
1754
-    }
1737
+  &.-viewportHeight {
1738
+    min-height: 100vh;
1755 1739
 
1756 1740
     /*> .background-wrapper-helper {
1757 1741
       display: flex;
... ...
@@ -1767,13 +1751,18 @@ $shadow-color: #fff;
1767 1751
   }
1768 1752
 
1769 1753
   .feature-wrapper-boundary {
1770
-    @include centered()
1754
+    @include centered();
1755
+    width: 100%;
1771 1756
   }
1772 1757
 
1773 1758
   .feature-wrapper-cols {
1774 1759
     display: flex;
1775 1760
     align-items: stretch;
1776 1761
 
1762
+    .-text-left& {
1763
+      flex-direction: row-reverse;
1764
+    }
1765
+
1777 1766
     .media-col,
1778 1767
     .content-col {
1779 1768
       flex: 0 1 50%;
... ...
@@ -1781,9 +1770,14 @@ $shadow-color: #fff;
1781 1770
   }
1782 1771
 
1783 1772
   .media-col-content {
1773
+    height: 100%;
1784 1774
     display: flex;
1785 1775
     flex-direction: column;
1786 1776
 
1777
+    .-valign-center& {
1778
+      justify-content: center;
1779
+    }
1780
+
1787 1781
     > * {
1788 1782
       width: 100%;
1789 1783
       flex: 0 0 auto;
... ...
@@ -1799,12 +1793,15 @@ $shadow-color: #fff;
1799 1793
         top: 0;
1800 1794
         right: 0;
1801 1795
         bottom: 0;*/
1802
-        min-height: 50vh;
1803 1796
         max-height: 66.666vh;
1797
+
1798
+        :not(.-valign-center)& {
1799
+          min-height: 50vh;
1800
+        }
1804 1801
       }
1805 1802
     }
1806 1803
 
1807
-    .feature-image {
1804
+    :not(.-valign-center)&.feature-image {
1808 1805
       flex: 1 1 auto;
1809 1806
     }
1810 1807
 
... ...
@@ -1814,6 +1811,16 @@ $shadow-color: #fff;
1814 1811
     }
1815 1812
 
1816 1813
     .feature-link {
1814
+      text-align: left;
1815
+      padding-top: 30px;
1816
+
1817
+      &.-alignCenter {
1818
+        text-align: center;
1819
+      }
1820
+      &.-alignRight {
1821
+        text-align: right;
1822
+      }
1823
+
1817 1824
       a {
1818 1825
         font-size: 1.25em;
1819 1826
         text-transform: uppercase;
... ...
@@ -1821,6 +1828,28 @@ $shadow-color: #fff;
1821 1828
         font-family: $font-family-alternate;
1822 1829
         letter-spacing: 0.05em;
1823 1830
 
1831
+        span {
1832
+          display: inline;
1833
+          position: relative;
1834
+
1835
+          &:last-child {
1836
+            padding-bottom: 0.3em;
1837
+
1838
+            &:after {
1839
+              position: absolute;
1840
+              left: 0;
1841
+              width: 100%;
1842
+              height: 0;
1843
+              @include border-radius(99em);
1844
+              border-color: inherit;
1845
+              content: "";
1846
+              bottom: -0.15em;
1847
+              border-bottom-width: 6px;
1848
+              border-bottom-style: solid;
1849
+            }
1850
+          }
1851
+        }
1852
+
1824 1853
         &:before {
1825 1854
           content: '';
1826 1855
           width: .5em;
... ...
@@ -1847,4 +1876,17 @@ $shadow-color: #fff;
1847 1876
       }
1848 1877
     }
1849 1878
   }
1879
+
1880
+  .content-col-inside {
1881
+    padding: 160px 0 0 30px;
1882
+
1883
+    .-text-left& {
1884
+      padding-left: 0;
1885
+      padding-right: 30px;
1886
+    }
1887
+
1888
+    h1, h2 {
1889
+      font-size: font-size(50px);
1890
+    }
1891
+  }
1850 1892
 }
... ...
@@ -102,6 +102,11 @@ h4,h5 {
102 102
   }
103 103
 }
104 104
 
105
+.ff-sans {
106
+  font-family: $font-family-alternate;
107
+  letter-spacing: 0.125em;
108
+}
109
+
105 110
 .ff_h {
106 111
   font-family: $font-family-handwriting;
107 112
   font-weight: 400;
... ...
@@ -121,4 +126,4 @@ h4,h5 {
121 126
 
122 127
 .fs_small {
123 128
   font-size: font-size(16px);
124
-}
125 129
\ No newline at end of file
130
+}
... ...
@@ -7,10 +7,10 @@
7 7
 #footer {
8 8
   position: relative;
9 9
   overflow: hidden;
10
-  color: $color-text-footer;
10
+  //color: $color-text-footer;
11 11
   font-size: font-size(14px);
12 12
   z-index: 0;
13
-  background: $color-bg-secondary url("../images/base/footer.jpg") no-repeat 50% 50%;
13
+  //background: $color-bg-footer;
14 14
   -webkit-background-size: 100% 100%;
15 15
   background-size: 100% 100%;
16 16
 
... ...
@@ -158,4 +158,4 @@
158 158
       padding: 0 20px;
159 159
     }
160 160
   }
161
-}
162 161
\ No newline at end of file
162
+}
... ...
@@ -68,6 +68,10 @@
68 68
   & {
69 69
     background-color: rgba($color-bg-secondary,0.9);
70 70
     @include box-shadow(0 0 10px 5px rgba($color-black,0.4));
71
+
72
+    .-branch-edelbrand & {
73
+      background-color: rgba($color-bg-primary,0.9);
74
+    }
71 75
   }
72 76
 
73 77
   .mod_changelanguage {
... ...
@@ -343,6 +347,10 @@
343 347
           text-transform: uppercase;
344 348
           white-space: nowrap;
345 349
 
350
+          .-branch-edelbrand & {
351
+            color: $color-bg-secondary;
352
+          }
353
+
346 354
           /*&:before {
347 355
             content: '';
348 356
             display: block;
... ...
@@ -363,6 +371,10 @@
363 371
           &:hover {
364 372
             color: $color-nav-hover;
365 373
 
374
+            .-branch-edelbrand & {
375
+              color: $color-text-invert;
376
+            }
377
+
366 378
             /*&:before {
367 379
               opacity: 1;
368 380
               visibility: visible;
... ...
@@ -437,11 +449,21 @@
437 449
             text-transform: uppercase;
438 450
             white-space: nowrap;
439 451
 
452
+            .-branch-edelbrand & {
453
+              background-color: $color-bg-primary;
454
+              color: $color-bg-secondary;
455
+            }
456
+
440 457
             &.active,
441 458
             &.trail,
442 459
             &:hover {
443 460
               color: $color-nav-hover;
444 461
               background-color: $color-bg-tertiary;
462
+
463
+              .-branch-edelbrand & {
464
+                background-color: $color-bg-lightbrown;
465
+                color: $color-text-invert;
466
+              }
445 467
             }
446 468
           }
447 469
         }
... ...
@@ -115,7 +115,7 @@
115 115
     color: $color-text;
116 116
   }*/
117 117
 
118
-  .slick-slider-container {
118
+  /*.slick-slider-container {
119 119
     height: 545px;
120 120
 
121 121
     .home & {
... ...
@@ -167,5 +167,5 @@
167 167
         width: auto;
168 168
       }
169 169
     }
170
-  }
171
-}
172 170
\ No newline at end of file
171
+  }*/
172
+}
... ...
@@ -40,21 +40,53 @@
40 40
   }
41 41
 }
42 42
 
43
-.-arrow-left-top {
43
+.-arrow-left,
44
+.-arrow-left-small {
44 45
   padding-left: 150px;
45 46
   position: relative;
46 47
 
48
+  :not(.-arrow-left)& {
49
+    padding-left: 75px;
50
+  }
51
+
47 52
   &:not(.ce_text) {
48 53
 
49 54
     &:before {
50 55
       content: '';
51 56
       width: 50px;
52 57
       height: 100px;
53
-      background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E") 0 0 no-repeat;
58
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
59
+      mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
60
+      -webkit-mask-repeat: no-repeat;
61
+      mask-repeat: no-repeat;
62
+      background: $color-bg-secondary;
63
+      //background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E") 0 0 no-repeat;
54 64
       position: absolute;
55 65
       left: 75px;
56
-      top: 0;
57 66
       @include transform(translate(-50%,0));
67
+
68
+      #footer & {
69
+        background: $color-text-footer;
70
+      }
71
+
72
+      :not(.-arrow-left)& {
73
+        left: 40px;
74
+        width: 25px;
75
+        height: 50px;
76
+      }
77
+
78
+      .-arrow-left-top& {
79
+        top: 0;
80
+      }
81
+
82
+      .-arrow-left-middle& {
83
+        top: 50%;
84
+        @include transform(translate(-50%,-50%));
85
+      }
86
+
87
+      .-arrow-left-bottom& {
88
+        bottom: 0;
89
+      }
58 90
     }
59 91
   }
60 92
 
... ...
@@ -66,11 +98,38 @@
66 98
         content: '';
67 99
         width: 50px;
68 100
         height: 100px;
69
-        background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E") 0 0 no-repeat;
101
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
102
+        mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
103
+        -webkit-mask-repeat: no-repeat;
104
+        mask-repeat: no-repeat;
105
+        background: $color-bg-secondary;
106
+        //background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E") 0 0 no-repeat;
70 107
         position: absolute;
71 108
         left: -75px;
72
-        top: 0;
73 109
         @include transform(translate(-50%,0));
110
+
111
+        #footer & {
112
+          background: $color-text-footer;
113
+        }
114
+
115
+        :not(.-arrow-left)& {
116
+          left: -35px;
117
+          width: 25px;
118
+          height: 50px;
119
+        }
120
+
121
+        .-arrow-left-top& {
122
+          top: 0;
123
+        }
124
+
125
+        .-arrow-left-middle& {
126
+          top: 50%;
127
+          @include transform(translate(-50%,-50%));
128
+        }
129
+
130
+        .-arrow-left-bottom& {
131
+          bottom: 0;
132
+        }
74 133
       }
75 134
     }
76 135
   }
... ...
@@ -998,4 +1057,4 @@
998 1057
       height: 50px;
999 1058
     }
1000 1059
   }
1001
-}
1002 1060
\ No newline at end of file
1061
+}
1003 1062
new file mode 100644
... ...
@@ -0,0 +1,99 @@
1
+function Onepage(list, options) {
2
+  options = options || {};
3
+  const articles = options.articles || document.querySelectorAll('.mod_article');
4
+  const pushUrl = options.pushUrl || false;
5
+  const offset = parseInt(options.offset, 10) || 0;
6
+
7
+  const offsetArray = Number(-offset) + '% 0% '+  Number(-offset) + '% 0%';
8
+  const el = document.querySelectorAll('a[href*="#"]:not([href="#"]):not([href="#0"])');
9
+  const uri = window.location.href.split("#")[0];
10
+
11
+  el.forEach ((anchor) => {
12
+    anchor.addEventListener('click', (event) => {
13
+      // check if on-page links
14
+      if (location.pathname.replace(/^\//, '') == anchor.pathname.replace(/^\//, '') && location.hostname == anchor.hostname) {
15
+
16
+        // figure out element to scroll to
17
+        let target = anchor.hash;
18
+        //let article = document.getElementById(anchor.hash.slice(1)).offsetTop;
19
+        // let navbarOffset = document.getElementById('navbar').offsetHeight;
20
+        let navbarOffset = 0;
21
+        let article = getOffsetTop(document.getElementById(anchor.hash.slice(1)),(navbarOffset !== undefined ? navbarOffset : 0));
22
+
23
+        if (target.length) {
24
+          // only prevent default if animation is actually gonna happen
25
+          event.preventDefault();
26
+
27
+          // scroll to selected article
28
+          scrollTo({
29
+            top: article,
30
+            behavior: "smooth"
31
+          });
32
+
33
+          // change url
34
+          if (pushUrl) {
35
+            history.pushState("", "", uri + anchor.hash);
36
+          }
37
+        };
38
+      }
39
+    });
40
+  });
41
+
42
+  // get correct offset
43
+  const getOffsetTop = (element,offset=0) => {
44
+    let offsetTop = 0;
45
+    while(element) {
46
+      offsetTop += element.offsetTop;
47
+      element = element.offsetParent;
48
+    }
49
+    return offsetTop-offset;
50
+  }
51
+
52
+  // set nav active when scrolling
53
+  const navActive = (article) => {
54
+    let active = list.querySelector('li.active');
55
+    let actualItem = list.querySelector('li[data-onepage-link="'+ article +'"]') ? list.querySelector('li[data-onepage-link="'+ article +'"]') : null;
56
+
57
+    // remove existing active status
58
+    if (typeof(active) != 'undefined' && active != null) {
59
+      active.classList.remove('active');
60
+    }
61
+
62
+    if (actualItem) {
63
+      // add active status when scrolling down
64
+      actualItem.classList.add('active');
65
+    } else if (active != null) {
66
+      // active status to previous list item when scrolling up AND active article is not in nav
67
+      article = getPreviousSibling(document.querySelector('#'+ article), '.onepage_article');
68
+      actualItem = list.querySelector('li[data-onepage-link="'+ article.id +'"]');
69
+      actualItem.classList.add('active');
70
+    }
71
+  };
72
+
73
+  let getPreviousSibling = function (elem, selector) {
74
+    let sibling = elem.previousElementSibling;
75
+
76
+    // if no previous element exists with this selector, use current element
77
+    if (!sibling) return elem.nextElementSibling;
78
+
79
+    // if selector does not exist, return previous element
80
+    if (!selector) return sibling;
81
+
82
+    while (sibling) {
83
+      if (sibling.matches(selector)) return sibling;
84
+      sibling = sibling.previousElementSibling;
85
+    }
86
+  };
87
+
88
+  const articleObserver = new IntersectionObserver (function (entries, observer) {
89
+    entries.forEach(function(entry) {
90
+      if (entry.isIntersecting) {
91
+        navActive(entry.target.id);
92
+      }
93
+    });
94
+  }, { rootMargin: offsetArray });
95
+
96
+  articles.forEach ((article) => {
97
+    articleObserver.observe(article);
98
+  });
99
+};
0 100
new file mode 100644
... ...
@@ -0,0 +1,14 @@
1
+
2
+<!--<script src="/bundles/eufonepagenavigation/onepage_navigation.js"></script>-->
3
+<script src="files/themes/aldegott_2022/assets/js/scroller.js"></script>
4
+
5
+<script>
6
+(function() {
7
+  let list = document.querySelector('#header .mod_navigation .level_2');
8
+
9
+  new Onepage(list, {
10
+    'offset': '30', // make navigation active when 30% is visible
11
+    'pushUrl': true // change url, when scrolling and clicking
12
+  });
13
+})();
14
+</script>
... ...
@@ -97,9 +97,9 @@ return array(
97 97
 			'inputType' => 'select',
98 98
 			'options' => array(
99 99
 				'' => '-',
100
-				'-alt-color' => 'Rot',
101
-				'-alt-color2' => 'Schwarz',
102
-				'-alt-color3' => 'Hellgrau',
100
+				'-alt-color' => 'Leichtes Platin',
101
+				'-alt-color2' => 'Footer',
102
+				'-alt-color3' => 'Footer-Alternativ',
103 103
 			),
104 104
 			'eval' => array('tl_class' => 'w50'),
105 105
 		),
... ...
@@ -12,9 +12,9 @@ if ($this->valign)
12 12
 {
13 13
     $cssClasses[] = $this->valign;
14 14
 }
15
-if ($this->valignCenter)
15
+if ($this->viewportHeight)
16 16
 {
17
-    $cssClasses[] = '-valign-center';
17
+    $cssClasses[] = '-viewportHeight';
18 18
 }
19 19
 
20 20
 $figure = '';
... ...
@@ -72,8 +72,8 @@ if (($file = \FilesModel::findByUuid($this->backgroundImage)) !== null)
72 72
                     <div class="media-col-content">
73 73
                         <?= $figure ?>
74 74
                         <?php if ($this->featureLink && $this->linkUrl): ?>
75
-                            <div class="feature-link">
76
-                                <a href="<?= $this->linkUrl ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if ($this->newWindow): ?> target="_blank"<?php endif; ?>><?= $this->linkLabel ?></a>
75
+                            <div class="feature-link<?php if ($this->linkAlign): ?> <?= $this->linkAlign ?><?php endif; ?>">
76
+                                <a href="<?= $this->linkUrl ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?php if ($this->newWindow): ?> target="_blank"<?php endif; ?>><span><?= $this->linkLabel ?></span></a>
77 77
                             </div>
78 78
                         <?php endif; ?>
79 79
                     </div>
... ...
@@ -17,8 +17,8 @@ return array(
17 17
             'label' => array('Position', 'Legt fest ob der Inhalt links oder rechts vom Bild positioniert ist.'),
18 18
             'inputType' => 'select',
19 19
             'options' => array(
20
-                '' => 'Links',
21
-                '-text-right' => 'Rechts',
20
+                '' => 'Rechts',
21
+                '-text-left' => 'Links',
22 22
             ),
23 23
             'eval' => array('tl_class' => 'w50'),
24 24
         ),
... ...
@@ -109,10 +109,20 @@ return array(
109 109
                 'field' => 'featureLink'
110 110
             )
111 111
         ),
112
+        'linkAlign' => array(
113
+            'label' => array('Link-Ausrichtung', 'Horizontale Ausrichtung des Links.'),
114
+            'inputType' => 'select',
115
+            'options' => array(
116
+                '' => 'Links',
117
+                '-alignCenter' => 'Mitte',
118
+                '-alignRight' => 'Rechts',
119
+            ),
120
+            'eval' => array('tl_class' => 'w50'),
121
+        ),
112 122
         'newWindow' => array(
113 123
             'label' => $GLOBALS['TL_LANG']['MSC']['target'],
114 124
             'inputType' => 'checkbox',
115
-            'eval' => array('tl_class' => 'w50 m12'),
125
+            'eval' => array('tl_class' => 'w50 clr'),
116 126
             'dependsOn' => array(
117 127
                 'field' => 'featureLink'
118 128
             )
... ...
@@ -144,13 +154,13 @@ return array(
144 154
             'label' => array('Vertikale Ausrichtung', 'Vertikale Ausrichtung (nur in Verbindung mit &quot;Mind. Viewport Höhe&quot;).'),
145 155
             'inputType' => 'select',
146 156
             'options' => array(
147
-                '' => 'Mitte',
148
-                '-valignTop' => 'Oben',
149
-                '-valignBottom' => 'Unten',
157
+                '-valign-top' => 'Oben',
158
+                '-valign-center' => 'Mitte',
159
+                '-valign-bottom' => 'Unten',
150 160
             ),
151 161
             'eval' => array('tl_class' => 'w50'),
152 162
         ),
153
-        'valignCenter' => array(
163
+        'viewportHeight' => array(
154 164
             'label' => array('Mind. Viewport Höhe', 'Der Inhaltsbereich hat mindestens die Höhe des Viewports. Der Inhalt wird zentriert dargestellt.'),
155 165
             'inputType' => 'checkbox',
156 166
             'eval' => array(
... ...
@@ -83,10 +83,12 @@ window.tinymce && tinymce.init({
83 83
     {title: 'Button (neutral)', value: 'button'}
84 84
   ],
85 85
   formats: {
86
-    emphasise: { inline: 'span', classes: 'emphasised' }
86
+    emphasise: { inline: 'span', classes: 'emphasised' },
87
+    sansSerif: { inline: 'span', classes: 'ff-sans' }
87 88
   },
88 89
   style_formats: [
89
-    { title: 'Hervorgehoben', format: 'emphasise' }
90
+    { title: 'Hervorgehoben', format: 'emphasise' },
91
+    { title: 'Sans-Serif', format: 'sansSerif' }
90 92
   ]
91 93
 });
92 94
 </script>
93 95
new file mode 100644
94 96
Binary files /dev/null and b/var/backups/backup__20221211231545.sql.gz differ