| ... | ... |
@@ -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> |