... | ... |
@@ -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 "Mind. Viewport Höhe").'), |
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> |