diff --git a/css/default.css b/css/default.css index b28b7b2..1120076 100755 --- a/css/default.css +++ b/css/default.css @@ -644,11 +644,38 @@ aside { display: block; clear: both; } +.candidates li a { + display: block; + color: inherit; + text-decoration: inherit; + padding-top: 4px; + padding-left: 8px; + padding-right: 8px; + padding-bottom: 4px; + margin-top: -4px; + margin-left: -8px; + margin-right: -8px; + margin-bottom: -4px; +} +.candidates li a:hover { + background-color: #efebdc; +} +.candidates li a:after { + content: 'mehr'; + display: block; + clear: both; + position: relative; + top: -1.5em; + height: 0px; + left: 20px; + font-style: italic; + color: #00aff0; +} .candidates img { float: right; width: 150px; height: auto; - border: 3px solid #bedc0a; + border: 3px solid #00aff0; border-radius: 3px; margin-left: 5px; } diff --git a/css/main.css b/css/main.css index b25bb37..0f1a7ec 100755 --- a/css/main.css +++ b/css/main.css @@ -98,6 +98,7 @@ iframe { position : relative; top : 64px; left : 10%; + z-index : 2; transition: height 2s, top 2s, left 2s, margin-right 2s; } @@ -138,6 +139,7 @@ iframe { overflow : visible; top : 64px; left : 10%; + z-index : 2; transition: height 2s, top 2s, left 2s, font-size 2s, line-height 2s; } @@ -163,7 +165,7 @@ iframe { #BoxLinksPos { position : absolute; - top : 100%; + top : 0px; margin-top : -66px; left : 0px; text-align : center; @@ -172,6 +174,7 @@ iframe { #BoxLinks { width : 100%; + padding-top: 300px; overflow-x : scroll; -ms-overflow-style: none; scrollbar-width: none; @@ -392,6 +395,9 @@ iframe { top : 0px; height : 200px; } + #BoxLinks { + padding-top: 200px; + } #BoxTop .bgImage { padding-top : 13px; } diff --git a/js/europa.js b/js/europa.js new file mode 100644 index 0000000..398f458 --- /dev/null +++ b/js/europa.js @@ -0,0 +1,140 @@ +(function () { + let link = document.getElementById('europaLink'); + if (!link) { + link = document.createElement('a'); + link.href = 'https://eu.klimaliste.org/'; + link.className = 'MenuLink'; + link.setAttribute('id', 'europaLink'); + let menu = document.getElementById('BoxLinks'); + if (!menu) { + for (let i = 0; i < document.getElementsByTagName('div').length; i++) + if ((' '+document.getElementsByTagName('div')[i].className+' ').indexOf(' nav__links ') >= 0) { + menu = document.getElementsByTagName('div')[i]; + link.className = 'nav__item'; + break; + } + } + if (!menu) { + for (let i = 0; i < document.getElementsByTagName('ul').length; i++) + if ((' '+document.getElementsByTagName('ul')[i].className+' ').indexOf(' main-menu ') >= 0) { + menu = document.getElementsByTagName('ul')[i]; + let li = document.createElement('li'); + li.className = 'menu-item'; + menu.appendChild(li); + menu = li; + link.className = 'menu-link'; + break; + } + } + if (menu) menu.appendChild(link); + } + link.style.visibility = 'hidden'; + link.innerHTML = '' + +'' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' ' + +' Wir treten zur' + +' Europawahl an!' + +' ' + +' ' + +' Unterstütze uns' + +' mit einer Spende.' + +' ' + +' ' + +' Damit Klimaschutz im' + +' Wahlkampf sichtbar ist!' + +' ' + +' ' + +''; + var menuBox = document.getElementById('europa'); + var flag = menuBox.getElementsByTagName('svg')[0]; + var texts = flag.getElementsByTagName('text'); + var textRect = document.getElementById('europaTextClip').getElementsByTagName('rect')[0]; + var stars = flag.getElementsByTagName('g')[0].getElementsByTagName('path'); + var sky = document.getElementById('europaSky'); + let absLeft = 0; + let absTop = 0; + let el = menuBox; + while (el) { + absLeft += el.offsetLeft; + absTop += el.offsetTop; + el = el.offsetParent; + } + var x = document.body.offsetWidth * 0.6 - absLeft; + var y = 6; + if (absTop > 100) y = -6; + var p = 0; + let spl = document.cookie.split(';'); + for (let i = 0; i < spl.length; i++) { + spl[i] = spl[i].split('='); + if (spl[i].length == 2 && spl[i][0].trim() == 'europeAnimationProgress') { + p = parseFloat(spl[i][1]); + break; + } + } + var starts = [0, 0.4, 1, 2.5, 3, 4.5, 5, 5.5, 7, 7.5, 8.5]; + var durations = [0.5, 2, 0.5, 0.5, 0.5, 0.5, 0.5, 1.5, 0.5, 1.5, 0.5]; + function apply () { + let s = new Array(); + for (let i = 0; i < starts.length; i++) { + s[i] = p-starts[i]; + if (s[i] < 0) s[i] = 0; + s[i] /= durations[i]; + if (s[i] > 1) s[i] = 1; + } + p += 0.01; + flag.style.left = x * (1-s[9])**2 + 'px'; + flag.style.top = y * (1-s[9]**2) + 'em'; + flag.style.height = 3 * (1-s[9]) + 1.2*s[9] + 'em'; + menuBox.style.width = 1.8 * s[10] + 'em'; + sky.setAttribute('y', (1-s[0])*270); + sky.setAttribute('height', s[0]*540); + for (let i = 0; i < 12; i++) { + if (s[1]-i/12 > 0) stars[i].setAttribute('fill-opacity', 1); + else stars[i].setAttribute('fill-opacity', 0); + if (s[7]-i/12 > 0) stars[i].setAttribute('fill', '#bedc0a'); + } + if (s[2] > 0 && s[3] < 1) { + if (s[2] < 1) textRect.setAttribute('width', 2190*s[2]); + else textRect.setAttribute('width', 2190*(1-s[3])); + texts[0].setAttribute('clip-path', 'url(#europaTextClip)'); + } else texts[0].setAttribute('clip-path', 'url(#europaClipNo)'); + if (s[4] > 0 && s[5] < 1) { + if (s[4] < 1) textRect.setAttribute('width', 2190*s[4]); + else textRect.setAttribute('width', 2190*(1-s[5])); + texts[1].setAttribute('clip-path', 'url(#europaTextClip)'); + } else texts[1].setAttribute('clip-path', 'url(#europaClipNo)'); + if (s[6] > 0 && s[8] < 1) { + if (s[6] < 1) textRect.setAttribute('width', 2190*s[6]); + else textRect.setAttribute('width', 2190*(1-s[8])); + texts[2].setAttribute('clip-path', 'url(#europaTextClip)'); + } else texts[2].setAttribute('clip-path', 'url(#europaClipNo)'); + if ((p == Math.floor(p)) || (s[s.length-1] >= 1)) + document.cookie = 'europeAnimationProgress='+p+';path=/;SameSite=None'; + if (s[s.length-1] >= 1) window.clearInterval(timer); + } + var timer = window.setInterval(apply, 10); + apply(0); + link.style.visibility = 'visible'; +})();