69 lines
No EOL
1.6 KiB
Text
69 lines
No EOL
1.6 KiB
Text
---
|
|
title: Card
|
|
tags:
|
|
- demoExample
|
|
---
|
|
{% assign pageClass = "html_card" %}
|
|
{% layout 'hippie/simple.liquid' %}
|
|
|
|
{% block body %}
|
|
<div class="card_bkg">
|
|
<div id="dither"></div>
|
|
{% render 'hippie/partials/placeholder-flag.liquid', type: '', id: 'flag' %}
|
|
{% comment %}<img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/>{% endcomment %}
|
|
</div>
|
|
<div class="card_box">
|
|
<main>
|
|
<p>Titel<br/>und Beschreibung</p>
|
|
<h1>{% text hippie.placeholders.name %}</h1>
|
|
<p>
|
|
{% link hippie.placeholders.mail, '', '', 'card_address' %}<br/>
|
|
{% link hippie.placeholders.domain, 'site.tld', '', 'decent' %}
|
|
·
|
|
{% text hippie.placeholders.address, '', 'decent' %}</p>
|
|
</main>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
<script>
|
|
const flag = document.getElementById('flag');
|
|
let colors = new Array();
|
|
let iId = undefined;
|
|
let position = 0;
|
|
|
|
for (let i = 1; i <= flag.childElementCount; i++) {
|
|
colors.push(document.getElementById('triangle-' + i).getAttribute('fill'));
|
|
}
|
|
|
|
document
|
|
.querySelector('main')
|
|
.addEventListener('mouseenter', () => {
|
|
iId = setInterval(() => {
|
|
for (let i = 1; i <= colors.length; i++) {
|
|
position++;
|
|
|
|
if (position >= colors.length) {
|
|
position = 0;
|
|
}
|
|
|
|
document
|
|
.getElementById('triangle-' + i)
|
|
.setAttribute('fill', colors[position]);
|
|
}
|
|
|
|
position++;
|
|
|
|
if (position >= colors.length) {
|
|
position = 0;
|
|
}
|
|
}, 600);
|
|
});
|
|
|
|
document
|
|
.querySelector('main')
|
|
.addEventListener('mouseleave', () => {
|
|
iId && clearInterval(iId);
|
|
});
|
|
</script>
|
|
{% endblock %} |