Helpers

{#
  Get symbol markup
  @param symbol: The symbol name (same as the svg file name, i.e. twitter, not icon-twitter)
#}
{% macro symbol(name) %}
	<i class="icon icon--{{ name }}">
		<svg>
			<use class="no-barba" xlink:href="#{{ name }}"></use>
		</svg>
	</i>
{% endmacro %}

{% macro social(entry, className) %}
	{% set list = ['email', 'facebook', 'instagram', 'linkedin', 'twitter', 'website'] %}
	<ul class="flex items-center list-reset">
		{% for item in list %}
			{% if entry[item.key] is defined %}
				<li>
					<a class="block no-underline p-2 mr-2 {{ className }}" href="{{ item.value }}">
						{{ _self.symbol('ui-' ~ item.key) }}
					</a>
				</li>
			{% endif %}
		{% endfor %}
	</ul>
{% endmacro %}


{% macro image(image, ratio, className) %}
	{% set ratio = ratio(ratio) %}
	{% set p = (ratio.percent) * 100 ~ '%' %}
	<div class="relative w-full" style="padding-top: {{ p }}">
		<noscript>
			<img class="{{ className }} absolute pin" 
				src="{{ image.url  }}" 
				width="{{ image.width }}" 
				height="{{ image.height }}" 
				alt="{{ image.alt }}" 
			/>
		</noscript>
		<img class="{{ className }} lazyload absolute pin" 
			src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
			data-src="{{ image.url }}" 
			width="{{ image.width }}" 
			height="{{ image.height }}" 
			alt="{{ image.alt }}" 
		/>
	</div>
{% endmacro %}


{% macro sploosh(className) %}
	<svg id="sticky-bg" class="absolute pin-t w-full home-grid-sploosh pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2354.04 1969.31"><defs><linearGradient id="linear-gradient" x1="1177.02" y1="1541.31" x2="1177.02" y2="-428" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6e6e6" stop-opacity="0"/><stop offset="1" stop-opacity=".1"/></linearGradient></defs><g style="isolation:isolate"><path d="M0 .25l893 818.21c61.38 59.92 82.49 129.27 57.29 218.23L626.5 1850.52c-26.21 62.85-55.6 101.28-90.13 118.79H2354V0z" opacity=".75" fill="url(#linear-gradient)" style="mix-blend-mode:multiply" id="Layer_1" data-name="Layer 1"/></g></svg>
{% endmacro %}