{#
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 pointer-events-none" xlink:href="#{{ name }}"></use>
</svg>
</i>
{% endmacro %}
{% macro image(image) %}
{% set base64 = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
{% set ratio = (image.height / image.width) * 100 ~ '%' %}
<div class="w-full relative image-container" style="padding-top: {{ ratio }}">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="{{ image.src }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full" src="{{ base64 }}" data-src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" />
</div>
{% endmacro %}
{% macro srcset(image, className) %}
{% set base64 = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
<div class="w-full relative image-container" style="padding-top: {{ image.aspect ~ '%' }}">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="{{ image.url }}" srcset="{{ image.srcset }}" alt="{{ image.alt }}" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full {{ className }}" src="{{ base64 }}" data-src="{{ image.url }}" data-srcset="{{ image.srcset }}" alt="{{ image.alt }}" />
</div>
{% endmacro %}
{% macro picture(images) %}
{% set base64 = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
{% set availableImages = [] %}
{% for key, value in images|reverse %}
{% if value %}
{% set availableImages = availableImages|merge([{
image: value,
key: key
}]) %}
{% endif %}
{% endfor %}
{% set imageTransformed = [] %}
{% for row in availableImages %}
{% set aspect = (row.image.height / row.image.width) * 100 %}
{% set ratio = aspect ~ '%' %}
{% set prefix = aspect|round %}
{% set className = row.key ~ '-asp-' ~ row.image.id ~ prefix %}
{% set query = row.image.breakpoint / 16 ~ 'em' %}
{% set style = '@media (min-width:' ~ query ~ '){.' ~ row.key ~ '-asp-' ~ row.image.id ~ prefix ~ '{padding-top:' ~ ratio ~ ';}}' %}
{% set imageTransformed = imageTransformed|merge([{
url: row.image.url,
alt: row.image.alt,
width: row.image.width,
height: row.image.height,
ratio: ratio,
style: style,
className: className,
query: query
}]) %}
{% endfor %}
{% set style = '' %}
{% set classes = '' %}
{% for k in imageTransformed %}
{% set style = style ~ ' ' ~ k.style %}
{% set classes = classes ~ ' ' ~ k.className %}
{% endfor %}
{% set imageClass = 'absolute pin object-fit w-full h-full' %}
{% if imageTransformed|length == 1 %}
<div class="w-full relative image-container" style="padding-top: {{ imageTransformed[0].ratio }}">
<noscript>
<img class="{{ imageClass }}" srcset="{{ imageTransformed[0].url }}" width="{{ imageTransformed[0].width }}" height="{{ imageTransformed[0].height }}" alt="{{ imageTransformed[0].alt }}" />
</noscript>
<img class="lazyload {{ imageClass }}" srcset="{{ base64 }}" data-srcset="{{ imageTransformed[0].url }}" width="{{ imageTransformed[0].width }}" height="{{ imageTransformed[0].height }}" alt="{{ imageTransformed[0].alt }}" />
</div>
{% else %}
<div class="relative w-full image-container {{ classes }}">
<style>{{ style }}</style>
<noscript>
<picture>
{% for image in imageTransformed|reverse %}
<source srcset="{{ image.url }}" media="(min-width: {{ image.query }})">
{% endfor %}
<img class="{{ imageClass }}" src="{{ imageTransformed[0].url }}" alt="{{ imageTransformed[0].alt }}" />
</picture>
</noscript>
<picture>
{% for image in imageTransformed|reverse %}
<source srcset="{{ base64 }}" data-srcset="{{ image.url }}" media="(min-width: {{ image.query }})">
{% endfor %}
<img class="lazyload {{ imageClass }}" src="{{ base64 }}" data-src="{{ imageTransformed[0].url }}" alt="{{ imageTransformed[0].alt }}" />
</picture>
</div>
{% endif %}
{% endmacro %}
{% macro maybeLink(content, link, options) %}
{% set className = options is defined and options.className is defined ? options.className : '' %}
{% set key = options is defined and options.key is defined ? options.key : 'url' %}
{% if link is defined and link[key]|length %}
<a href="{{ link[key] }}" {% if className|length %}class="{{ className }}"{% endif %}>
{{ content|raw }}
</a>
{% else %}
{{ content }}
{% endif %}
{% endmacro %}
{% macro shape() %}
<svg data-shape>
<linearGradient id='grad'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='30%' stop-color='#671eb8'/>
</linearGradient>
</svg>
{% endmacro %}
{% macro lines() %}
<svg class="absolute pin" style="overflow: visible" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1622.963 792.478" data-lines>
<linearGradient id='grad1'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='30%' stop-color='#671eb8'/>
</linearGradient>
<linearGradient id='grad2'>
<stop stop-color='#28BBDE'/>
<stop data-stop-color offset='90%' stop-color='#1C1E4B'/>
</linearGradient>
<linearGradient id='grad3'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='70%' stop-color='#ffffff'/>
</linearGradient>
<linearGradient id='grad4'>
<stop stop-color='#671EB8'/>
<stop data-stop-color offset='70%' stop-color='#1C1E4B'/>
</linearGradient>
<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad1)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M552.444 1.477l332.299 713.979 783.92-349.909"/>
<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad3)" stroke-opacity="0.5" stroke-miterlimit="10" stroke-width="9" d="M2.912 429.659c2 3 255.83 203.797 255.83 203.797l-255.83 32.52"/>
<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad2)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1670.306 99.759l-645.563 183.697 654.622 380"/>
<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad4)" stroke-opacity="0.5" stroke-miterlimit="10" stroke-width="9" d="M1668.663 269.832l-249.92 410.624 251.563 141.554"/>
</svg>
{% endmacro %}
{% macro codesnippet(blocks) %}
{% set snippet = false %}
{% for block in blocks %}
{% if block.type == 'snippet' %}
{% set snippet = true %}
{% endif %}
{% endfor %}
{% if snippet == true %}data-behaviour="CodeSnippet"{% endif %}
{% endmacro %}
{
"siteTitle": "Mudstone Component Library",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"wrapper": "/wrapper/"
}
}
}
}
},
"tel": "01225 471 465",
"phone": "01225 471 465",
"email": "hello@ournameismud.co.uk",
"twitter": "asclearasmud",
"copyright": "© 2018 Our Name is Mud",
"siteUrl": "/components/preview/home",
"address": "5 Princes Buildings \nBath \nBA1 2ED",
"cta": "<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself, <a href=\"/contact\" data-contact-link=\"\" class=\"no-barba\">drop us a line</a>. We’re always happy to chat...</p>",
"entries": [
{
"title": "Projects",
"url": "/components/preview/listing"
},
{
"title": "About",
"url": "/components/preview/about"
},
{
"title": "Journal",
"url": "/components/preview/journal"
},
{
"title": "Contact",
"url": "/components/preview/contact"
}
]
}
There are no notes for this item.