Michael Fabian 'Xaymar' Dirks
441a8f0655
While Liquid is powerful, it is completely unreadable for many things, and actively makes documents harder to read. So instead of relying on it for everything, why not just use HTML5 for the page? The change reduces the parsing overhead for browser by about 30% through reducing the number of useless <div> elements. Additionally the CSS became easier to read as well.
80 lines
3.6 KiB
Plaintext
80 lines
3.6 KiB
Plaintext
{% assign file_info = site.static_files | where: "path", include.url %}
|
|
<media class="block {% if include.float == "clear" %}float-clear{% elsif include.float %}float float-{{ include.float }}{% endif %} {% if include.align %}align-{{ include.align }}{% endif %} {% if include.class %}{{ include.class }}{% endif %} {% if include.player %}player{% endif %}" style="{% if include.width %}width: {{ include.width }};{% endif %}">
|
|
{% if include.player %}
|
|
<div class="top">
|
|
<select class="variant"></select>
|
|
</div>
|
|
<div class="bottom">
|
|
<span class="play symbol" tabindex=0 aria-label="Play / Pause" data-symbol=""></span>
|
|
<span class="time">0:00 / 0:00</span>
|
|
<input type="range" class="progress" tabindex=0>
|
|
<span class="mute symbol" tabindex=0 aria-label="Mute" data-symbol=""></span>
|
|
<input type="range" class="volume" tabindex=0>
|
|
<span class="fullscreen symbol" tabindex=0 aria-label="Fullscreen" data-symbol=""></span>
|
|
</div>
|
|
{% endif %}
|
|
{% if include.link %}<a href="{% if include.link == true %}{{ include.url }}{% else %}{{ include.link }}{% endif %}" {% if include.caption %}alt="{{ include.caption }}"{% endif %} target="_blank">{% endif %}
|
|
{% if include.type == "image" %}
|
|
<picture
|
|
class="content"
|
|
{% if include.width %}width="{{ include.width }}"{% endif %}
|
|
{% if include.height %}height="{{ include.height }}"{% endif %}
|
|
{% if include.lazyload %}data-lazyload=""{% endif %}
|
|
>
|
|
{% if include.lazyload %}<noscript>{% endif %}
|
|
<img src="{{ include.url | absolute_url }}"
|
|
{% if include.alt %}alt="{{ include.alt }}"{% endif %}
|
|
{% if include.width %}width="{{ include.width }}"{% endif %}
|
|
{% if include.height %}height="{{ include.height }}"{% endif %}>
|
|
{% if include.lazyload %}</noscript>{% endif %}
|
|
|
|
{% if include.content %}{{include.content}}{% endif %}
|
|
</picture>
|
|
{% elsif include.type == "video" %}
|
|
<video
|
|
{% if include.player %}{% else %}controls{% endif %}
|
|
class="content"
|
|
|
|
{% if include.width %}width="{{ include.width }}"{% endif %}
|
|
{% if include.height %}height="{{ include.height }}"{% endif %}
|
|
|
|
{% if include.autoplay %}autoplay="true"{% endif %}
|
|
{% if include.muted %}muted="true"{% endif %}
|
|
{% if include.loop %}loop="true"{% endif %}
|
|
{% if include.poster %}poster="{{ include.poster | absolute_url }}"{% endif %}
|
|
|
|
{% if include.preload %}preload="{{ include.preload }}"{% endif %}
|
|
{% if include.lazyload %}data-lazyload=""{% endif %}
|
|
>
|
|
{% if include.lazyload %}<noscript>{% endif %}
|
|
{% if include.url %}<source src="{{ include.url | absolute_url }}">{% endif %}
|
|
{% if include.lazyload %}</noscript>{% endif %}
|
|
|
|
{% if include.content %}{{include.content}}{% endif %}
|
|
</video>
|
|
{% elsif include.type == "audio" %}
|
|
<audio
|
|
{% if include.player %}{% else %}controls{% endif %}
|
|
class="content"
|
|
|
|
{% if include.width %}width="{{ include.width }}"{% endif %}
|
|
{% if include.height %}height="{{ include.height }}"{% endif %}
|
|
|
|
{% if include.autoplay %}autoplay="true"{% endif %}
|
|
{% if include.muted %}muted="true"{% endif %}
|
|
{% if include.loop %}loop="true"{% endif %}
|
|
|
|
{% if include.preload %}preload="{{ include.preload }}"{% endif %}
|
|
{% if include.lazyload %}data-lazyload=""{% endif %}
|
|
>
|
|
{% if include.lazyload %}<noscript>{% endif %}
|
|
{% if include.url %}<source src="{{ include.url | absolute_url }}">{% endif %}
|
|
{% if include.lazyload %}</noscript>{% endif %}
|
|
|
|
{% if include.content %}{{include.content}}{% endif %}
|
|
</audio>
|
|
{% endif %}
|
|
{% if include.link %}</a>{% endif %}
|
|
{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}
|
|
</media>
|